From 5e15e695c40e8a379ab89adef2b0cad10e05305b Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 Feb 2026 18:41:59 +0800
Subject: [PATCH 01/36] fix

---
 web_src/js/markup/mermaid.ts | 76 +++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 5d37c81b8f9cc..ef302de6da99e 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -10,7 +10,8 @@ const {mermaidMaxSourceCharacters} = window.config;
 
 const iframeCss = `:root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
-#mermaid {display: block; margin: 0 auto}`;
+#mermaid {display: block; margin: 0 auto}
+.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0}`;
 
 function isSourceTooLarge(source: string) {
   return mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters;
@@ -77,6 +78,73 @@ async function loadMermaid(needElkRender: boolean) {
   };
 }
 
+function initMermaidViewController(dragElement: SVGSVGElement) {
+  let inited = false, isDragging = false;
+  let currentScale = 1, initLeft = 0, lastLeft = 0, lastTop = 0, lastPageX = 0, lastPageY = 0;
+  const container = dragElement.parentElement!;
+
+  const resetView = () => {
+    currentScale = 1;
+    lastLeft = initLeft;
+    lastTop = 0;
+    dragElement.style.left = `${lastLeft}px`;
+    dragElement.style.top = `${lastTop}px`;
+    dragElement.style.position = 'absolute';
+    dragElement.style.margin = '0';
+  };
+
+  const initAbsolutePosition = () => {
+    if (inited) return;
+    // if we need to drag or zoom, use absolute position and get the current "left" from the "margin: auto" layout.
+    inited = true;
+    initLeft = container.getBoundingClientRect().width / 2 - dragElement.getBoundingClientRect().width / 2;
+    resetView();
+  };
+
+  for (const el of queryElems(container, '[data-control-action]')) {
+    el.addEventListener('click', () => {
+      initAbsolutePosition();
+      switch (el.getAttribute('data-control-action')) {
+        case 'zoom-in':
+          currentScale *= 1.2;
+          break;
+        case 'zoom-out':
+          currentScale /= 1.2;
+          break;
+        case 'reset':
+          resetView();
+          break;
+      }
+      dragElement.style.transform = `scale(${currentScale})`;
+    });
+  }
+
+  dragElement.addEventListener('mousedown', (e) => {
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; // only left mouse button can drag
+    initAbsolutePosition();
+    isDragging = true;
+    lastPageX = e.pageX;
+    lastPageY = e.pageY;
+    dragElement.style.cursor = 'grabbing';
+  });
+
+  dragElement.ownerDocument.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    lastLeft = e.pageX - lastPageX + lastLeft;
+    lastTop = e.pageY - lastPageY + lastTop;
+    dragElement.style.left = `${lastLeft}px`;
+    dragElement.style.top = `${lastTop}px`;
+    lastPageX = e.pageX;
+    lastPageY = e.pageY;
+  });
+
+  dragElement.ownerDocument.addEventListener('mouseup', () => {
+    if (!isDragging) return;
+    isDragging = false;
+    dragElement.style.removeProperty('cursor');
+  });
+}
+
 let elkLayoutsRegistered = false;
 
 export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void> {
@@ -122,10 +190,12 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       const svgDoc = parseDom(svgText, 'image/svg+xml');
       const svgNode = (svgDoc.documentElement as unknown) as SVGSVGElement;
 
+      const viewController = html`<div class="view-controller"><button data-control-action="zoom-in">+</button><button data-control-action="reset">reset</button><button data-control-action="zoom-out">-</button></div>`;
+
       // create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
-      iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeCss)}</style></head><body></body></html>`;
+      iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeCss)}</style></head><body>${htmlRaw(viewController)}</body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
@@ -143,6 +213,8 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
         // and keep in mind: clientHeight can be 0 if the element is hidden (display: none).
         if (!iframeHeightFromViewBox && iframeBody.clientHeight) iframe.style.height = `${iframeBody.clientHeight}px`;
         iframe.classList.remove('is-loading');
+
+        initMermaidViewController(svgNode);
       });
 
       const container = createElementFromAttrs('div', {class: 'mermaid-block'}, iframe, makeCodeCopyButton({'data-clipboard-text': source}));

From ed8d27b28d00333a992505f9b84a1043ef0c5ba9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:21:11 +0100
Subject: [PATCH 02/36] Style mermaid view-controller buttons to match
 code-copy and show on hover

- Style iframe view-controller buttons to match `.ui.button` by reading
  parent page CSS variables and injecting them into the iframe CSS
- Show buttons only on hover with fade transition, always visible on
  mobile via `@media (hover: none)`
- Add `--transition-fade` CSS variable and use it for both code-copy
  and mermaid view-controller buttons
- Convert code-copy from animation to transition for consistency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/base.css            |  1 +
 web_src/css/markup/codecopy.css |  5 +++--
 web_src/js/markup/mermaid.ts    | 16 +++++++++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4dc19d9a5b072..6042d38724416 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -37,6 +37,7 @@
 
   --font-size-label: 12px; /* font size of individual labels */
 
+  --transition-fade: opacity 0.2s, visibility 0.2s;
   --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
   --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index 5a7b9955e7ad2..4ee0f7a4cd9d3 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -3,8 +3,9 @@
   top: 8px;
   right: 6px;
   padding: 9px;
+  opacity: 0;
   visibility: hidden;
-  animation: fadeout 0.2s both;
+  transition: var(--transition-fade);
 }
 
 /* adjustments for comment content having only 14px font size */
@@ -25,6 +26,6 @@
 
 .markup .code-block-container:hover .code-copy,
 .markup .code-block:hover .code-copy {
+  opacity: 1;
   visibility: visible;
-  animation: fadein 0.2s both;
 }
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index ef302de6da99e..eb2f73056577c 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -8,10 +8,20 @@ import type {MermaidConfig} from 'mermaid';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
-const iframeCss = `:root {color-scheme: normal}
+function getIframeCss(): string {
+  const style = getComputedStyle(document.documentElement);
+  const cssVar = (name: string) => style.getPropertyValue(name).trim();
+  return `html, body {height: 100%}
+:root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
 #mermaid {display: block; margin: 0 auto}
-.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0}`;
+.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; opacity: 0; visibility: hidden; transition: ${cssVar('--transition-fade')}}
+body:hover .view-controller {opacity: 1; visibility: visible}
+@media (hover: none) {.view-controller {opacity: 1; visibility: visible}}
+.view-controller button {cursor: pointer; display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 7.5px 10px; border: 1px solid ${cssVar('--color-light-border')}; border-radius: ${cssVar('--border-radius')}; background: ${cssVar('--color-button')}; color: ${cssVar('--color-text')}; user-select: none}
+.view-controller button:hover {background: ${cssVar('--color-hover')}}
+.view-controller button:active {background: ${cssVar('--color-active')}}`;
+}
 
 function isSourceTooLarge(source: string) {
   return mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters;
@@ -195,7 +205,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       // create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
-      iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeCss)}</style></head><body>${htmlRaw(viewController)}</body></html>`;
+      iframe.srcdoc = html`<html><head><style>${htmlRaw(getIframeCss())}</style></head><body>${htmlRaw(viewController)}</body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);

From e92705bbfd77e36542629f960961b96d0f6eaa87 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:24:54 +0100
Subject: [PATCH 03/36] Apply suggestion from @silverwind

Signed-off-by: silverwind <me@silverwind.io>
---
 web_src/js/markup/mermaid.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index eb2f73056577c..649d0d2f22b12 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -8,6 +8,7 @@ import type {MermaidConfig} from 'mermaid';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
+// keep button styling the same is `button.code-copy`
 function getIframeCss(): string {
   const style = getComputedStyle(document.documentElement);
   const cssVar = (name: string) => style.getPropertyValue(name).trim();

From 2c456044ea4b613c2f5f483bf0b294baa33895b8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:27:11 +0100
Subject: [PATCH 04/36] Rename --transition-fade to --transition-hover-fade

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/base.css            | 2 +-
 web_src/css/markup/codecopy.css | 2 +-
 web_src/js/markup/mermaid.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 6042d38724416..36da0c395098f 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -37,7 +37,7 @@
 
   --font-size-label: 12px; /* font size of individual labels */
 
-  --transition-fade: opacity 0.2s, visibility 0.2s;
+  --transition-hover-fade: opacity 0.2s, visibility 0.2s; /* fade transition for elements that show on hover */
   --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
   --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index 4ee0f7a4cd9d3..a397d5c02e71c 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -5,7 +5,7 @@
   padding: 9px;
   opacity: 0;
   visibility: hidden;
-  transition: var(--transition-fade);
+  transition: var(--transition-hover-fade);
 }
 
 /* adjustments for comment content having only 14px font size */
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 649d0d2f22b12..cde8f075cfa79 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -16,7 +16,7 @@ function getIframeCss(): string {
 :root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
 #mermaid {display: block; margin: 0 auto}
-.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; opacity: 0; visibility: hidden; transition: ${cssVar('--transition-fade')}}
+.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; opacity: 0; visibility: hidden; transition: ${cssVar('--transition-hover-fade')}}
 body:hover .view-controller {opacity: 1; visibility: visible}
 @media (hover: none) {.view-controller {opacity: 1; visibility: visible}}
 .view-controller button {cursor: pointer; display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 7.5px 10px; border: 1px solid ${cssVar('--color-light-border')}; border-radius: ${cssVar('--border-radius')}; background: ${cssVar('--color-button')}; color: ${cssVar('--color-text')}; user-select: none}

From b35760c8de75ddcde186c6161611f7d578a77ba6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:31:06 +0100
Subject: [PATCH 05/36] Always show copy and mermaid buttons on touch devices

Add hover-to-show for mermaid code-copy button and always show all
code-copy buttons on touch devices via @media (hover: none).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/markup/codecopy.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index a397d5c02e71c..3b7dcf2f602e3 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -25,7 +25,15 @@
 }
 
 .markup .code-block-container:hover .code-copy,
-.markup .code-block:hover .code-copy {
+.markup .code-block:hover .code-copy,
+.markup .mermaid-block:hover .code-copy {
   opacity: 1;
   visibility: visible;
 }
+
+@media (hover: none) {
+  .markup .code-copy {
+    opacity: 1;
+    visibility: visible;
+  }
+}

From f44409a13ee6c7f946a0e880bf64d66601af73bf Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 11:31:40 +0800
Subject: [PATCH 06/36] don't call iframeStyleText in a loop

---
 web_src/js/markup/mermaid.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index cde8f075cfa79..c97b58fb0bec6 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -186,6 +186,8 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
     suppressErrorRendering: true,
   });
 
+  const iframeStyleText = getIframeCss();
+
   // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."
   // so here we just simply render the mermaid blocks one by one, no need to do "Promise.all" concurrently
   for (const block of mermaidBlocks) {
@@ -206,7 +208,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       // create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
-      iframe.srcdoc = html`<html><head><style>${htmlRaw(getIframeCss())}</style></head><body>${htmlRaw(viewController)}</body></html>`;
+      iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeStyleText)}</style></head><body>${htmlRaw(viewController)}</body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);

From c724dc94e55e4c830051df07dada5fd0e349eff2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:43:28 +0100
Subject: [PATCH 07/36] Use fadein/fadeout animations consistently, remove
 --transition-hover-fade

Revert code-copy and mermaid view-controller to use fadein/fadeout
animations instead of transitions. The iframe extracts keyframe rules
from parent stylesheets at runtime to avoid redeclaring them.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/base.css            |  1 -
 web_src/css/markup/codecopy.css |  7 +++----
 web_src/js/markup/mermaid.ts    | 20 ++++++++++++++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 36da0c395098f..4dc19d9a5b072 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -37,7 +37,6 @@
 
   --font-size-label: 12px; /* font size of individual labels */
 
-  --transition-hover-fade: opacity 0.2s, visibility 0.2s; /* fade transition for elements that show on hover */
   --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
   --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index 3b7dcf2f602e3..9e8745898d14c 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -3,9 +3,8 @@
   top: 8px;
   right: 6px;
   padding: 9px;
-  opacity: 0;
   visibility: hidden;
-  transition: var(--transition-hover-fade);
+  animation: fadeout 0.2s both;
 }
 
 /* adjustments for comment content having only 14px font size */
@@ -27,13 +26,13 @@
 .markup .code-block-container:hover .code-copy,
 .markup .code-block:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
-  opacity: 1;
   visibility: visible;
+  animation: fadein 0.2s both;
 }
 
 @media (hover: none) {
   .markup .code-copy {
-    opacity: 1;
     visibility: visible;
+    animation: none;
   }
 }
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index c97b58fb0bec6..6854f6dfe5578 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -8,17 +8,29 @@ import type {MermaidConfig} from 'mermaid';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
-// keep button styling the same is `button.code-copy`
+// keep button styling the same as `button.code-copy`
 function getIframeCss(): string {
   const style = getComputedStyle(document.documentElement);
   const cssVar = (name: string) => style.getPropertyValue(name).trim();
+  // extract keyframe animations from parent stylesheets to reuse in the iframe
+  let keyframes = '';
+  for (const sheet of document.styleSheets) {
+    try {
+      for (const rule of sheet.cssRules) {
+        if (rule instanceof CSSKeyframesRule && (rule.name === 'fadein' || rule.name === 'fadeout')) {
+          keyframes += rule.cssText;
+        }
+      }
+    } catch { /* skip cross-origin sheets */ }
+  }
   return `html, body {height: 100%}
 :root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
 #mermaid {display: block; margin: 0 auto}
-.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; opacity: 0; visibility: hidden; transition: ${cssVar('--transition-hover-fade')}}
-body:hover .view-controller {opacity: 1; visibility: visible}
-@media (hover: none) {.view-controller {opacity: 1; visibility: visible}}
+${keyframes}
+.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; visibility: hidden; animation: fadeout 0.2s both}
+body:hover .view-controller {visibility: visible; animation: fadein 0.2s both}
+@media (hover: none) {.view-controller {visibility: visible; animation: none}}
 .view-controller button {cursor: pointer; display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 7.5px 10px; border: 1px solid ${cssVar('--color-light-border')}; border-radius: ${cssVar('--border-radius')}; background: ${cssVar('--color-button')}; color: ${cssVar('--color-text')}; user-select: none}
 .view-controller button:hover {background: ${cssVar('--color-hover')}}
 .view-controller button:active {background: ${cssVar('--color-active')}}`;

From 6c76c22dc13d042855d4a5131196f419f4d6a220 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:46:53 +0100
Subject: [PATCH 08/36] Extract getCssKeyFrame helper into dom.ts

Extract keyframe extraction logic from mermaid.ts into a reusable
getCssKeyFrame function in dom.ts with a test.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/js/markup/mermaid.ts | 16 +++-------------
 web_src/js/utils/dom.test.ts | 10 ++++++++++
 web_src/js/utils/dom.ts      | 14 ++++++++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 6854f6dfe5578..202842a0263b1 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssKeyFrame, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -12,22 +12,12 @@ const {mermaidMaxSourceCharacters} = window.config;
 function getIframeCss(): string {
   const style = getComputedStyle(document.documentElement);
   const cssVar = (name: string) => style.getPropertyValue(name).trim();
-  // extract keyframe animations from parent stylesheets to reuse in the iframe
-  let keyframes = '';
-  for (const sheet of document.styleSheets) {
-    try {
-      for (const rule of sheet.cssRules) {
-        if (rule instanceof CSSKeyframesRule && (rule.name === 'fadein' || rule.name === 'fadeout')) {
-          keyframes += rule.cssText;
-        }
-      }
-    } catch { /* skip cross-origin sheets */ }
-  }
   return `html, body {height: 100%}
 :root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
 #mermaid {display: block; margin: 0 auto}
-${keyframes}
+${getCssKeyFrame('fadein')}
+${getCssKeyFrame('fadeout')}
 .view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; visibility: hidden; animation: fadeout 0.2s both}
 body:hover .view-controller {visibility: visible; animation: fadein 0.2s both}
 @media (hover: none) {.view-controller {visibility: visible; animation: none}}
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index 61361e0168abc..3cdc1a3db1cef 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -1,6 +1,7 @@
 import {
   createElementFromAttrs,
   createElementFromHTML,
+  getCssKeyFrame,
   queryElemChildren,
   querySingleVisibleElem,
   toggleElem,
@@ -43,6 +44,15 @@ test('queryElemChildren', () => {
   expect(children.length).toEqual(1);
 });
 
+test('getCssKeyFrame', () => {
+  const style = document.createElement('style');
+  style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
+  document.head.append(style);
+  expect(getCssKeyFrame('testanim')).toContain('testanim');
+  expect(getCssKeyFrame('nonexistent')).toEqual('');
+  style.remove();
+});
+
 test('toggleElem', () => {
   const el = createElementFromHTML('<div><div>a</div><div class="tw-hidden">b</div></div>');
   toggleElem(el.children);
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index dc504b7056a27..49a6788e41eb3 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,6 +352,20 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
+/** Extract a CSS `@keyframes` rule by name from the document's stylesheets */
+export function getCssKeyFrame(name: string): string {
+  for (const sheet of document.styleSheets) {
+    try {
+      for (const rule of sheet.cssRules) {
+        if (rule instanceof CSSKeyframesRule && rule.name === name) {
+          return rule.cssText;
+        }
+      }
+    } catch { /* skip cross-origin sheets */ }
+  }
+  return '';
+}
+
 let elemIdCounter = 0;
 export function generateElemId(prefix: string = ''): string {
   return `${prefix}${elemIdCounter++}`;

From 421ea613c3019d800403444fbf3a2b06725d19ef Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:50:56 +0100
Subject: [PATCH 09/36] use snapshots

---
 web_src/js/utils/dom.test.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index 3cdc1a3db1cef..9ce0076898667 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -48,8 +48,13 @@ test('getCssKeyFrame', () => {
   const style = document.createElement('style');
   style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
   document.head.append(style);
-  expect(getCssKeyFrame('testanim')).toContain('testanim');
-  expect(getCssKeyFrame('nonexistent')).toEqual('');
+  expect(getCssKeyFrame('testanim')).toMatchInlineSnapshot(`
+    "@keyframes testanim { 
+      0% { opacity: 0; }
+      100% { opacity: 1; }
+    }"
+  `);
+  expect(getCssKeyFrame('nonexistent')).toMatchInlineSnapshot(`""`);
   style.remove();
 });
 

From 8c5fe6c3f0ccc20c36e2f460e55f2386cd7269b1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:54:16 +0100
Subject: [PATCH 10/36] use try-finally to ensure style cleanup in test

---
 web_src/js/utils/dom.test.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index 9ce0076898667..fedd2631cccc1 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -45,17 +45,21 @@ test('queryElemChildren', () => {
 });
 
 test('getCssKeyFrame', () => {
-  const style = document.createElement('style');
-  style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
-  document.head.append(style);
-  expect(getCssKeyFrame('testanim')).toMatchInlineSnapshot(`
-    "@keyframes testanim { 
-      0% { opacity: 0; }
-      100% { opacity: 1; }
-    }"
-  `);
-  expect(getCssKeyFrame('nonexistent')).toMatchInlineSnapshot(`""`);
-  style.remove();
+  let style: HTMLStyleElement | undefined;
+  try {
+    style = document.createElement('style');
+    style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
+    document.head.append(style);
+    expect(getCssKeyFrame('testanim')).toMatchInlineSnapshot(`
+      "@keyframes testanim { 
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+      }"
+    `);
+    expect(getCssKeyFrame('nonexistent')).toMatchInlineSnapshot(`""`);
+  } finally {
+    style?.remove();
+  }
 });
 
 test('toggleElem', () => {

From fbed58fdc1073901b4f7f3e771b688dcd256a8f7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 04:58:28 +0100
Subject: [PATCH 11/36] Use opaque colors for mermaid button hover and active
 states

Match code-copy button by using --color-secondary and
--color-secondary-dark-1 to prevent non-opaque hover bug.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/js/markup/mermaid.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 202842a0263b1..428404cf64f1a 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -22,8 +22,8 @@ ${getCssKeyFrame('fadeout')}
 body:hover .view-controller {visibility: visible; animation: fadein 0.2s both}
 @media (hover: none) {.view-controller {visibility: visible; animation: none}}
 .view-controller button {cursor: pointer; display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 7.5px 10px; border: 1px solid ${cssVar('--color-light-border')}; border-radius: ${cssVar('--border-radius')}; background: ${cssVar('--color-button')}; color: ${cssVar('--color-text')}; user-select: none}
-.view-controller button:hover {background: ${cssVar('--color-hover')}}
-.view-controller button:active {background: ${cssVar('--color-active')}}`;
+.view-controller button:hover {background: ${cssVar('--color-secondary')}}
+.view-controller button:active {background: ${cssVar('--color-secondary-dark-1')}}`;
 }
 
 function isSourceTooLarge(source: string) {

From 84d7d4a8a45936e91e2209e952ef63ca5691f6b2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 05:08:14 +0100
Subject: [PATCH 12/36] Rename getCssKeyFrame to getCssKeyframe, add cache and
 docstring

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/js/markup/mermaid.ts |  6 +++---
 web_src/js/utils/dom.test.ts |  8 ++++----
 web_src/js/utils/dom.ts      | 16 ++++++++++++----
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 428404cf64f1a..8d069bea72fe2 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssKeyFrame, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssKeyframe, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -16,8 +16,8 @@ function getIframeCss(): string {
 :root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
 #mermaid {display: block; margin: 0 auto}
-${getCssKeyFrame('fadein')}
-${getCssKeyFrame('fadeout')}
+${getCssKeyframe('fadein')}
+${getCssKeyframe('fadeout')}
 .view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; visibility: hidden; animation: fadeout 0.2s both}
 body:hover .view-controller {visibility: visible; animation: fadein 0.2s both}
 @media (hover: none) {.view-controller {visibility: visible; animation: none}}
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index fedd2631cccc1..faf2df541b666 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -1,7 +1,7 @@
 import {
   createElementFromAttrs,
   createElementFromHTML,
-  getCssKeyFrame,
+  getCssKeyframe,
   queryElemChildren,
   querySingleVisibleElem,
   toggleElem,
@@ -44,19 +44,19 @@ test('queryElemChildren', () => {
   expect(children.length).toEqual(1);
 });
 
-test('getCssKeyFrame', () => {
+test('getCssKeyframe', () => {
   let style: HTMLStyleElement | undefined;
   try {
     style = document.createElement('style');
     style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
     document.head.append(style);
-    expect(getCssKeyFrame('testanim')).toMatchInlineSnapshot(`
+    expect(getCssKeyframe('testanim')).toMatchInlineSnapshot(`
       "@keyframes testanim { 
         0% { opacity: 0; }
         100% { opacity: 1; }
       }"
     `);
-    expect(getCssKeyFrame('nonexistent')).toMatchInlineSnapshot(`""`);
+    expect(getCssKeyframe('nonexistent')).toMatchInlineSnapshot(`""`);
   } finally {
     style?.remove();
   }
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 49a6788e41eb3..c074be7448bf8 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,18 +352,26 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
-/** Extract a CSS `@keyframes` rule by name from the document's stylesheets */
-export function getCssKeyFrame(name: string): string {
+const cssKeyFrameCache = new Map<string, string>();
+
+/** Extract a CSS `@keyframes` rule by name from the document's stylesheets. The DOM lookup is only
+ *  performed once per keyframe name. */
+export function getCssKeyframe(name: string): string {
+  if (cssKeyFrameCache.has(name)) return cssKeyFrameCache.get(name)!;
+  let result = '';
   for (const sheet of document.styleSheets) {
     try {
       for (const rule of sheet.cssRules) {
         if (rule instanceof CSSKeyframesRule && rule.name === name) {
-          return rule.cssText;
+          result = rule.cssText;
+          break;
         }
       }
     } catch { /* skip cross-origin sheets */ }
+    if (result) break;
   }
-  return '';
+  cssKeyFrameCache.set(name, result);
+  return result;
 }
 
 let elemIdCounter = 0;

From f684b9d335399222051e2a44e032f02ca9f480ec Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 05:09:13 +0100
Subject: [PATCH 13/36] rename cache var

---
 web_src/js/utils/dom.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index c074be7448bf8..64ec065187280 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,12 +352,12 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
-const cssKeyFrameCache = new Map<string, string>();
+const cssKeyframeCache = new Map<string, string>();
 
 /** Extract a CSS `@keyframes` rule by name from the document's stylesheets. The DOM lookup is only
  *  performed once per keyframe name. */
 export function getCssKeyframe(name: string): string {
-  if (cssKeyFrameCache.has(name)) return cssKeyFrameCache.get(name)!;
+  if (cssKeyframeCache.has(name)) return cssKeyframeCache.get(name)!;
   let result = '';
   for (const sheet of document.styleSheets) {
     try {
@@ -370,7 +370,7 @@ export function getCssKeyframe(name: string): string {
     } catch { /* skip cross-origin sheets */ }
     if (result) break;
   }
-  cssKeyFrameCache.set(name, result);
+  cssKeyframeCache.set(name, result);
   return result;
 }
 

From 203dfc8cda5c4e7d7fe47921d63a21042b4048be Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 05:10:26 +0100
Subject: [PATCH 14/36] change cssKeyframeCache to object to avoid `!`

---
 web_src/js/utils/dom.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 64ec065187280..65a65173472d4 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,12 +352,12 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
-const cssKeyframeCache = new Map<string, string>();
+const cssKeyframeCache: Record<string, string> = {};
 
 /** Extract a CSS `@keyframes` rule by name from the document's stylesheets. The DOM lookup is only
  *  performed once per keyframe name. */
 export function getCssKeyframe(name: string): string {
-  if (cssKeyframeCache.has(name)) return cssKeyframeCache.get(name)!;
+  if (name in cssKeyframeCache) return cssKeyframeCache[name];
   let result = '';
   for (const sheet of document.styleSheets) {
     try {
@@ -370,7 +370,7 @@ export function getCssKeyframe(name: string): string {
     } catch { /* skip cross-origin sheets */ }
     if (result) break;
   }
-  cssKeyframeCache.set(name, result);
+  cssKeyframeCache[name] = result;
   return result;
 }
 

From 814659df754443cf1d32f398443c93f9d0939b4d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:19:05 +0800
Subject: [PATCH 15/36] fix

---
 web_src/js/markup/mermaid.ts | 64 +++++++++++++++++++++++++++++-------
 web_src/js/utils/dom.ts      |  1 +
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 8d069bea72fe2..5c99d4ee612f4 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -11,19 +11,61 @@ const {mermaidMaxSourceCharacters} = window.config;
 // keep button styling the same as `button.code-copy`
 function getIframeCss(): string {
   const style = getComputedStyle(document.documentElement);
-  const cssVar = (name: string) => style.getPropertyValue(name).trim();
-  return `html, body {height: 100%}
-:root {color-scheme: normal}
-body {margin: 0; padding: 0; overflow: hidden}
-#mermaid {display: block; margin: 0 auto}
+
+  let globalStyleText = ':root {';
+  for (let i = 0; i < style.length; i++) {
+    const name = style.item(i);
+    if (name.startsWith('--')) {
+      globalStyleText += ` ${name}: ${style.getPropertyValue(name)};\n`;
+    }
+  }
+  globalStyleText += '}\n';
+  globalStyleText += `
+html, body { height: 100%; }
+body { margin: 0; padding: 0; overflow: hidden; }
+
 ${getCssKeyframe('fadein')}
 ${getCssKeyframe('fadeout')}
-.view-controller {position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; gap: 4px; visibility: hidden; animation: fadeout 0.2s both}
-body:hover .view-controller {visibility: visible; animation: fadein 0.2s both}
-@media (hover: none) {.view-controller {visibility: visible; animation: none}}
-.view-controller button {cursor: pointer; display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 7.5px 10px; border: 1px solid ${cssVar('--color-light-border')}; border-radius: ${cssVar('--border-radius')}; background: ${cssVar('--color-button')}; color: ${cssVar('--color-text')}; user-select: none}
-.view-controller button:hover {background: ${cssVar('--color-secondary')}}
-.view-controller button:active {background: ${cssVar('--color-secondary-dark-1')}}`;
+
+#mermaid { display: block; margin: 0 auto; }
+
+.view-controller {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  gap: 4px;
+  visibility: hidden;
+  animation: fadeout 0.2s both;
+}
+body:hover .view-controller {
+  visibility: visible;
+  animation: fadein 0.2s both;
+}
+@media (hover: none) {
+  .view-controller {
+    visibility: visible;
+    animation: none;
+  }
+}
+.view-controller button {
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  padding: 7.5px 10px;
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--border-radius);
+  background: var(--color-button);
+  color: var(--color-text);
+  user-select: none;
+}
+.view-controller button:hover { background: var(--color-secondary); }
+.view-controller button:active { background: var(--color-secondary-dark-1); }
+`;
+  return globalStyleText;
 }
 
 function isSourceTooLarge(source: string) {
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 65a65173472d4..37efbfa40fc30 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -370,6 +370,7 @@ export function getCssKeyframe(name: string): string {
     } catch { /* skip cross-origin sheets */ }
     if (result) break;
   }
+  if (!result) throw new Error(`Unable to get css styles for keyframe ${name}`);
   cssKeyframeCache[name] = result;
   return result;
 }

From d675a8737dbdaf6cf5f7daadbfe201d108a830c5 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:26:00 +0800
Subject: [PATCH 16/36] fix

---
 web_src/js/markup/mermaid.ts | 18 ++++++------------
 web_src/js/utils/dom.ts      | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 5c99d4ee612f4..83b57aed55f24 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssKeyframe, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssKeyframe, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -21,12 +21,12 @@ function getIframeCss(): string {
   }
   globalStyleText += '}\n';
   globalStyleText += `
-html, body { height: 100%; }
-body { margin: 0; padding: 0; overflow: hidden; }
-
+${getCssRootVariablesText()}
 ${getCssKeyframe('fadein')}
 ${getCssKeyframe('fadeout')}
 
+html, body { height: 100%; }
+body { margin: 0; padding: 0; overflow: hidden; }
 #mermaid { display: block; margin: 0 auto; }
 
 .view-controller {
@@ -39,15 +39,9 @@ ${getCssKeyframe('fadeout')}
   visibility: hidden;
   animation: fadeout 0.2s both;
 }
-body:hover .view-controller {
-  visibility: visible;
-  animation: fadein 0.2s both;
-}
+body:hover .view-controller { visibility: visible; animation: fadein 0.2s both; }
 @media (hover: none) {
-  .view-controller {
-    visibility: visible;
-    animation: none;
-  }
+  .view-controller { visibility: visible; animation: none; }
 }
 .view-controller button {
   cursor: pointer;
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 37efbfa40fc30..3f2048e7a0044 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -375,6 +375,22 @@ export function getCssKeyframe(name: string): string {
   return result;
 }
 
+let cssRootVariablesTextCache: string = '';
+export function getCssRootVariablesText(): string {
+  if (cssRootVariablesTextCache) return cssRootVariablesTextCache;
+  const style = getComputedStyle(document.documentElement);
+  let text = ':root {\n';
+  for (let i = 0; i < style.length; i++) {
+    const name = style.item(i);
+    if (name.startsWith('--')) {
+      text += ` ${name}: ${style.getPropertyValue(name)};\n`;
+    }
+  }
+  text += '}\n';
+  cssRootVariablesTextCache = text;
+  return text;
+}
+
 let elemIdCounter = 0;
 export function generateElemId(prefix: string = ''): string {
   return `${prefix}${elemIdCounter++}`;

From cb5d18fd2a940eddb2a4a3f1ed6a7b76dfda7661 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:28:24 +0800
Subject: [PATCH 17/36] fix

---
 web_src/js/markup/mermaid.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 83b57aed55f24..d7f33793f248e 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -246,7 +246,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       // create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
-      iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeStyleText)}</style></head><body>${htmlRaw(viewController)}</body></html>`;
+      iframe.srcdoc = html`<html><head></head><body>${htmlRaw(viewController)}</body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
@@ -255,7 +255,11 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       // the iframe will be fully reloaded if its DOM context is changed (e.g.: moved in the DOM tree).
       // to avoid unnecessary reloading, we should insert the iframe to its final position only once.
       iframe.addEventListener('load', () => {
-        // same origin, so we can operate "iframe body" and all elements directly
+        // same origin, so we can operate "iframe head/body" and all elements directly
+        const style = document.createElement('style');
+        style.textContent = iframeStyleText;
+        iframe.contentDocument!.head.append(style);
+
         const iframeBody = iframe.contentDocument!.body;
         iframeBody.append(svgNode);
         bindFunctions?.(iframeBody); // follow "mermaid.render" doc, attach event handlers to the svg's container

From a775b347f3eb785c053c90e8056e4fe1d93500c0 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:32:47 +0800
Subject: [PATCH 18/36] fix

---
 web_src/js/markup/mermaid.ts | 19 ++++---------------
 web_src/js/utils/dom.test.ts | 24 +++++++-----------------
 web_src/js/utils/dom.ts      |  2 +-
 3 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index d7f33793f248e..5efb2b691339b 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssKeyframe, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssKeyframeText, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -10,20 +10,10 @@ const {mermaidMaxSourceCharacters} = window.config;
 
 // keep button styling the same as `button.code-copy`
 function getIframeCss(): string {
-  const style = getComputedStyle(document.documentElement);
-
-  let globalStyleText = ':root {';
-  for (let i = 0; i < style.length; i++) {
-    const name = style.item(i);
-    if (name.startsWith('--')) {
-      globalStyleText += ` ${name}: ${style.getPropertyValue(name)};\n`;
-    }
-  }
-  globalStyleText += '}\n';
-  globalStyleText += `
+  return `
 ${getCssRootVariablesText()}
-${getCssKeyframe('fadein')}
-${getCssKeyframe('fadeout')}
+${getCssKeyframeText('fadein')}
+${getCssKeyframeText('fadeout')}
 
 html, body { height: 100%; }
 body { margin: 0; padding: 0; overflow: hidden; }
@@ -59,7 +49,6 @@ body:hover .view-controller { visibility: visible; animation: fadein 0.2s both;
 .view-controller button:hover { background: var(--color-secondary); }
 .view-controller button:active { background: var(--color-secondary-dark-1); }
 `;
-  return globalStyleText;
 }
 
 function isSourceTooLarge(source: string) {
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index faf2df541b666..b9a810f17ffa7 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -1,7 +1,7 @@
 import {
   createElementFromAttrs,
   createElementFromHTML,
-  getCssKeyframe,
+  getCssKeyframeText,
   queryElemChildren,
   querySingleVisibleElem,
   toggleElem,
@@ -44,22 +44,12 @@ test('queryElemChildren', () => {
   expect(children.length).toEqual(1);
 });
 
-test('getCssKeyframe', () => {
-  let style: HTMLStyleElement | undefined;
-  try {
-    style = document.createElement('style');
-    style.textContent = '@keyframes testanim { from { opacity: 0 } to { opacity: 1 } }';
-    document.head.append(style);
-    expect(getCssKeyframe('testanim')).toMatchInlineSnapshot(`
-      "@keyframes testanim { 
-        0% { opacity: 0; }
-        100% { opacity: 1; }
-      }"
-    `);
-    expect(getCssKeyframe('nonexistent')).toMatchInlineSnapshot(`""`);
-  } finally {
-    style?.remove();
-  }
+test('getCssKeyframeText', () => {
+  const style = document.createElement('style');
+  style.textContent = '@keyframes test-anim { from { opacity: 0 } to { opacity: 1 } }';
+  document.head.append(style);
+  expect(getCssKeyframeText('test-anim')).toContain(`@keyframes test-anim {`);
+  expect(() => getCssKeyframeText('nonexistent')).toThrowError();
 });
 
 test('toggleElem', () => {
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 3f2048e7a0044..e41528c8656a9 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -356,7 +356,7 @@ const cssKeyframeCache: Record<string, string> = {};
 
 /** Extract a CSS `@keyframes` rule by name from the document's stylesheets. The DOM lookup is only
  *  performed once per keyframe name. */
-export function getCssKeyframe(name: string): string {
+export function getCssKeyframeText(name: string): string {
   if (name in cssKeyframeCache) return cssKeyframeCache[name];
   let result = '';
   for (const sheet of document.styleSheets) {

From 57889bb7f2107bc236792e0ab50012615dd0d87b Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:38:51 +0800
Subject: [PATCH 19/36] fix

---
 web_src/js/markup/mermaid.ts |  5 ++---
 web_src/js/utils/dom.test.ts |  8 ++++----
 web_src/js/utils/dom.ts      | 35 ++++++++++++++++++++---------------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 5efb2b691339b..4850a444ea3f4 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssKeyframeText, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssKeyframeTexts, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -12,8 +12,7 @@ const {mermaidMaxSourceCharacters} = window.config;
 function getIframeCss(): string {
   return `
 ${getCssRootVariablesText()}
-${getCssKeyframeText('fadein')}
-${getCssKeyframeText('fadeout')}
+${getCssKeyframeTexts(['fadein', 'fadeout'])}
 
 html, body { height: 100%; }
 body { margin: 0; padding: 0; overflow: hidden; }
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index b9a810f17ffa7..ef8e8a86a24ba 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -1,7 +1,7 @@
 import {
   createElementFromAttrs,
   createElementFromHTML,
-  getCssKeyframeText,
+  getCssKeyframeTexts,
   queryElemChildren,
   querySingleVisibleElem,
   toggleElem,
@@ -44,12 +44,12 @@ test('queryElemChildren', () => {
   expect(children.length).toEqual(1);
 });
 
-test('getCssKeyframeText', () => {
+test('getCssKeyframeTexts', () => {
   const style = document.createElement('style');
   style.textContent = '@keyframes test-anim { from { opacity: 0 } to { opacity: 1 } }';
   document.head.append(style);
-  expect(getCssKeyframeText('test-anim')).toContain(`@keyframes test-anim {`);
-  expect(() => getCssKeyframeText('nonexistent')).toThrowError();
+  expect(getCssKeyframeTexts(['test-anim'])).toContain(`@keyframes test-anim {`);
+  expect(() => getCssKeyframeTexts(['nonexistent'])).toThrowError();
 });
 
 test('toggleElem', () => {
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index e41528c8656a9..be9bcc5b328af 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -354,24 +354,29 @@ export function isPlainClick(e: MouseEvent) {
 
 const cssKeyframeCache: Record<string, string> = {};
 
-/** Extract a CSS `@keyframes` rule by name from the document's stylesheets. The DOM lookup is only
- *  performed once per keyframe name. */
-export function getCssKeyframeText(name: string): string {
-  if (name in cssKeyframeCache) return cssKeyframeCache[name];
+/** Extract a CSS `@keyframes` rule by name from the document's stylesheets. It is very slow. */
+export function getCssKeyframeTexts(names: string[]): string {
   let result = '';
-  for (const sheet of document.styleSheets) {
-    try {
-      for (const rule of sheet.cssRules) {
-        if (rule instanceof CSSKeyframesRule && rule.name === name) {
-          result = rule.cssText;
-          break;
+  for (const name of names) {
+    if (name in cssKeyframeCache) {
+      result += `${cssKeyframeCache[name]}\n`;
+      continue;
+    }
+    let found = false;
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSKeyframesRule && rule.name === name) {
+            result += `${rule.cssText}\n`;
+            cssKeyframeCache[name] = result;
+            found = true;
+            break;
+          }
         }
-      }
-    } catch { /* skip cross-origin sheets */ }
-    if (result) break;
+      } catch {} // skip cross-origin sheets
+      if (!found) throw new Error(`Unable to get css styles for keyframe ${name}`);
+    }
   }
-  if (!result) throw new Error(`Unable to get css styles for keyframe ${name}`);
-  cssKeyframeCache[name] = result;
   return result;
 }
 

From 1f2c9f08adfc9ccb9351c9bc0b721502430c91c3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:45:18 +0800
Subject: [PATCH 20/36] fix

---
 web_src/js/utils/dom.ts | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index be9bcc5b328af..cc06bc57a5fc1 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,29 +352,32 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
-const cssKeyframeCache: Record<string, string> = {};
+let cssKeyframeCache: Record<string, string> | null = null;
 
 /** Extract a CSS `@keyframes` rule by name from the document's stylesheets. It is very slow. */
 export function getCssKeyframeTexts(names: string[]): string {
-  let result = '';
-  for (const name of names) {
-    if (name in cssKeyframeCache) {
-      result += `${cssKeyframeCache[name]}\n`;
-      continue;
-    }
-    let found = false;
+  // It loops over 10000+ times because there are too many rules
+  // So we cache all keyframes rules in the first call (there aren't that many keyframes rules in a typical page, so it is acceptable)
+  // It only collects the top-level keyframes rules, it doesn't support nested keyframes rules (e.g. inside @media), but it is good enough for our use cases.
+  if (!cssKeyframeCache) {
+    cssKeyframeCache = {};
     for (const sheet of document.styleSheets) {
       try {
         for (const rule of sheet.cssRules) {
-          if (rule instanceof CSSKeyframesRule && rule.name === name) {
-            result += `${rule.cssText}\n`;
-            cssKeyframeCache[name] = result;
-            found = true;
-            break;
+          if (rule instanceof CSSKeyframesRule) {
+            cssKeyframeCache[rule.name] = rule.cssText;
           }
         }
       } catch {} // skip cross-origin sheets
-      if (!found) throw new Error(`Unable to get css styles for keyframe ${name}`);
+    }
+  }
+
+  let result = '';
+  for (const name of names) {
+    if (cssKeyframeCache[name]) {
+      result += `${cssKeyframeCache[name]}\n`;
+    } else {
+      throw new Error(`Unable to get css styles for keyframe ${name}`);
     }
   }
   return result;

From 83a9f9af60d9d3c375c50170d216c1e4f8bbd5b3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:51:21 +0800
Subject: [PATCH 21/36] fix comment

---
 web_src/js/markup/mermaid.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 4850a444ea3f4..8cc9a4013cb76 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -8,8 +8,9 @@ import type {MermaidConfig} from 'mermaid';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
-// keep button styling the same as `button.code-copy`
 function getIframeCss(): string {
+  // Inherit some styles (including root variables, keyframes) from parent document.
+  // The buttons should use the same styles as `button.code-copy`
   return `
 ${getCssRootVariablesText()}
 ${getCssKeyframeTexts(['fadein', 'fadeout'])}

From 00481ec19b852191bf04ee3a8157c03efa02eff2 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 12:56:02 +0800
Subject: [PATCH 22/36] fix drag

---
 web_src/js/markup/mermaid.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 8cc9a4013cb76..b0b7b77ea3faf 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -159,6 +159,9 @@ function initMermaidViewController(dragElement: SVGSVGElement) {
 
   dragElement.addEventListener('mousedown', (e) => {
     if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; // only left mouse button can drag
+    const target = e.target as Element;
+    if (target.closest('div, p, a, span, button, input')) return; // don't start the drag if the click is on an interactive element (e.g.: link, button) or text element
+
     initAbsolutePosition();
     isDragging = true;
     lastPageX = e.pageX;

From d431651a08113a81f54b545fced5d2938dc57a0c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 06:30:32 +0100
Subject: [PATCH 23/36] Use CSS transition variable instead of keyframe
 animations for hover fade

Replace fadein/fadeout keyframe animations with opacity transition using
a new --transition-hover-fade CSS variable for code-copy buttons and
mermaid view-controller. Remove unused getCssKeyframeTexts function,
its tests, and the fadeout keyframe.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/base.css               |  1 +
 web_src/css/markup/codecopy.css    | 10 ++++------
 web_src/css/modules/animations.css |  9 ---------
 web_src/js/markup/mermaid.ts       | 11 +++++------
 web_src/js/utils/dom.test.ts       |  9 ---------
 web_src/js/utils/dom.ts            | 31 ------------------------------
 6 files changed, 10 insertions(+), 61 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4dc19d9a5b072..c0caee51919c5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -30,6 +30,7 @@
   --page-spacing: 16px; /* space between page elements */
   --page-margin-x: 32px; /* minimum space on left and right side of page */
   --page-space-bottom: 64px; /* space between last page element and footer */
+  --transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
 
   /* z-index */
   --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index 9e8745898d14c..f09977ccf9ec7 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -3,8 +3,8 @@
   top: 8px;
   right: 6px;
   padding: 9px;
-  visibility: hidden;
-  animation: fadeout 0.2s both;
+  opacity: 0;
+  transition: var(--transition-hover-fade);
 }
 
 /* adjustments for comment content having only 14px font size */
@@ -26,13 +26,11 @@
 .markup .code-block-container:hover .code-copy,
 .markup .code-block:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
-  visibility: visible;
-  animation: fadein 0.2s both;
+  opacity: 1;
 }
 
 @media (hover: none) {
   .markup .code-copy {
-    visibility: visible;
-    animation: none;
+    opacity: 1;
   }
 }
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index aedf53569a95a..65d7a90e971b3 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -82,15 +82,6 @@ code.language-math.is-loading::after {
   }
 }
 
-@keyframes fadeout {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
 /* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
 @keyframes pulse-1p5 {
   0% {
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index b0b7b77ea3faf..8cdb1d8ac8299 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,7 +1,7 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssKeyframeTexts, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
@@ -13,7 +13,6 @@ function getIframeCss(): string {
   // The buttons should use the same styles as `button.code-copy`
   return `
 ${getCssRootVariablesText()}
-${getCssKeyframeTexts(['fadein', 'fadeout'])}
 
 html, body { height: 100%; }
 body { margin: 0; padding: 0; overflow: hidden; }
@@ -26,12 +25,12 @@ body { margin: 0; padding: 0; overflow: hidden; }
   bottom: 0;
   display: flex;
   gap: 4px;
-  visibility: hidden;
-  animation: fadeout 0.2s both;
+  opacity: 0;
+  transition: var(--transition-hover-fade);
 }
-body:hover .view-controller { visibility: visible; animation: fadein 0.2s both; }
+body:hover .view-controller { opacity: 1; }
 @media (hover: none) {
-  .view-controller { visibility: visible; animation: none; }
+  .view-controller { opacity: 1; }
 }
 .view-controller button {
   cursor: pointer;
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index ef8e8a86a24ba..61361e0168abc 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -1,7 +1,6 @@
 import {
   createElementFromAttrs,
   createElementFromHTML,
-  getCssKeyframeTexts,
   queryElemChildren,
   querySingleVisibleElem,
   toggleElem,
@@ -44,14 +43,6 @@ test('queryElemChildren', () => {
   expect(children.length).toEqual(1);
 });
 
-test('getCssKeyframeTexts', () => {
-  const style = document.createElement('style');
-  style.textContent = '@keyframes test-anim { from { opacity: 0 } to { opacity: 1 } }';
-  document.head.append(style);
-  expect(getCssKeyframeTexts(['test-anim'])).toContain(`@keyframes test-anim {`);
-  expect(() => getCssKeyframeTexts(['nonexistent'])).toThrowError();
-});
-
 test('toggleElem', () => {
   const el = createElementFromHTML('<div><div>a</div><div class="tw-hidden">b</div></div>');
   toggleElem(el.children);
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index cc06bc57a5fc1..12b984a9d5fca 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -352,37 +352,6 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
-let cssKeyframeCache: Record<string, string> | null = null;
-
-/** Extract a CSS `@keyframes` rule by name from the document's stylesheets. It is very slow. */
-export function getCssKeyframeTexts(names: string[]): string {
-  // It loops over 10000+ times because there are too many rules
-  // So we cache all keyframes rules in the first call (there aren't that many keyframes rules in a typical page, so it is acceptable)
-  // It only collects the top-level keyframes rules, it doesn't support nested keyframes rules (e.g. inside @media), but it is good enough for our use cases.
-  if (!cssKeyframeCache) {
-    cssKeyframeCache = {};
-    for (const sheet of document.styleSheets) {
-      try {
-        for (const rule of sheet.cssRules) {
-          if (rule instanceof CSSKeyframesRule) {
-            cssKeyframeCache[rule.name] = rule.cssText;
-          }
-        }
-      } catch {} // skip cross-origin sheets
-    }
-  }
-
-  let result = '';
-  for (const name of names) {
-    if (cssKeyframeCache[name]) {
-      result += `${cssKeyframeCache[name]}\n`;
-    } else {
-      throw new Error(`Unable to get css styles for keyframe ${name}`);
-    }
-  }
-  return result;
-}
-
 let cssRootVariablesTextCache: string = '';
 export function getCssRootVariablesText(): string {
   if (cssRootVariablesTextCache) return cssRootVariablesTextCache;

From 5671e9212618341eb0d01b845249a9ae80448380 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 06:39:35 +0100
Subject: [PATCH 24/36] Replace fadein keyframe with @starting-style
 transitions for modals

Use CSS @starting-style and transition with allow-discrete to animate
modal and dimmer opacity on appear, replacing the fadein keyframe
animation. Degrades gracefully to instant show on unsupported browsers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/css/modules/animations.css | 16 ++++------------
 web_src/css/modules/dimmer.css     |  6 ++++--
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 65d7a90e971b3..5e5cb0271d42f 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -73,15 +73,6 @@ code.language-math.is-loading::after {
   height: 1.25rem;
 }
 
-@keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 /* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
 @keyframes pulse-1p5 {
   0% {
@@ -102,9 +93,10 @@ code.language-math.is-loading::after {
 
 .ui.modal,
 .ui.dimmer.transition {
-  animation-name: fadein;
-  animation-duration: 100ms;
-  animation-timing-function: ease-in-out;
+  transition: var(--transition-hover-fade);
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .rotate-clockwise {
diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
index 7d1ca6171aa9e..023727276bb0a 100644
--- a/web_src/css/modules/dimmer.css
+++ b/web_src/css/modules/dimmer.css
@@ -10,14 +10,16 @@
   overflow-y: auto;
   justify-content: center;
   padding: 8px 0;
-  animation-name: fadein;
-  animation-duration: .2s;
+  transition: var(--transition-hover-fade);
   user-select: none;
 }
 
 .ui.active.dimmer {
   display: flex;
   opacity: 1;
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .ui.dimmer > .ui.modal {

From a453add455ab7823e38de82938cc40709895e22e Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 13:49:34 +0800
Subject: [PATCH 25/36] Revert "Replace fadein keyframe with @starting-style
 transitions for modals"

This reverts commit 5671e9212618341eb0d01b845249a9ae80448380.
---
 web_src/css/modules/animations.css | 16 ++++++++++++----
 web_src/css/modules/dimmer.css     |  6 ++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 5e5cb0271d42f..65d7a90e971b3 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -73,6 +73,15 @@ code.language-math.is-loading::after {
   height: 1.25rem;
 }
 
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 /* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
 @keyframes pulse-1p5 {
   0% {
@@ -93,10 +102,9 @@ code.language-math.is-loading::after {
 
 .ui.modal,
 .ui.dimmer.transition {
-  transition: var(--transition-hover-fade);
-  @starting-style {
-    opacity: 0;
-  }
+  animation-name: fadein;
+  animation-duration: 100ms;
+  animation-timing-function: ease-in-out;
 }
 
 .rotate-clockwise {
diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
index 023727276bb0a..7d1ca6171aa9e 100644
--- a/web_src/css/modules/dimmer.css
+++ b/web_src/css/modules/dimmer.css
@@ -10,16 +10,14 @@
   overflow-y: auto;
   justify-content: center;
   padding: 8px 0;
-  transition: var(--transition-hover-fade);
+  animation-name: fadein;
+  animation-duration: .2s;
   user-select: none;
 }
 
 .ui.active.dimmer {
   display: flex;
   opacity: 1;
-  @starting-style {
-    opacity: 0;
-  }
 }
 
 .ui.dimmer > .ui.modal {

From d153ea85c9aa174ccb94c3eb2ac1eca22b38f100 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 13:52:08 +0800
Subject: [PATCH 26/36] fix

---
 web_src/css/markup/codecopy.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index f09977ccf9ec7..b3bc9a67a6dfe 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -3,6 +3,7 @@
   top: 8px;
   right: 6px;
   padding: 9px;
+  visibility: hidden;
   opacity: 0;
   transition: var(--transition-hover-fade);
 }
@@ -23,14 +24,17 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
+/* all rendered code-block elements are in their container,
+the manually written code-block elements on "packages" pages don't have the container */
 .markup .code-block-container:hover .code-copy,
-.markup .code-block:hover .code-copy,
-.markup .mermaid-block:hover .code-copy {
+.markup .code-block:hover .code-copy  {
+  visibility: visible;
   opacity: 1;
 }
 
 @media (hover: none) {
   .markup .code-copy {
+    visibility: visible;
     opacity: 1;
   }
 }

From d4fe8c71594d3a59031f4010a42718a1d265f011 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 13:55:32 +0800
Subject: [PATCH 27/36] fix comment

---
 web_src/css/markup/codecopy.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index b3bc9a67a6dfe..c48f641f68b9b 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -3,7 +3,7 @@
   top: 8px;
   right: 6px;
   padding: 9px;
-  visibility: hidden;
+  visibility: hidden; /* prevent from click events even opacity=0 */
   opacity: 0;
   transition: var(--transition-hover-fade);
 }
@@ -27,7 +27,7 @@
 /* all rendered code-block elements are in their container,
 the manually written code-block elements on "packages" pages don't have the container */
 .markup .code-block-container:hover .code-copy,
-.markup .code-block:hover .code-copy  {
+.markup .code-block:hover .code-copy {
   visibility: visible;
   opacity: 1;
 }

From 017925a8ddb2a96e37f9ea016b9a757fbc4d01f8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 06:56:41 +0100
Subject: [PATCH 28/36] Add visibility:hidden to mermaid view controller for
 click inhibition

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/js/markup/mermaid.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 8cdb1d8ac8299..cd7646ca9370f 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -25,12 +25,13 @@ body { margin: 0; padding: 0; overflow: hidden; }
   bottom: 0;
   display: flex;
   gap: 4px;
+  visibility: hidden;
   opacity: 0;
   transition: var(--transition-hover-fade);
 }
-body:hover .view-controller { opacity: 1; }
+body:hover .view-controller { visibility: visible; opacity: 1; }
 @media (hover: none) {
-  .view-controller { opacity: 1; }
+  .view-controller { visibility: visible; opacity: 1; }
 }
 .view-controller button {
   cursor: pointer;

From e20a43843e13a61a91ddd9d5e0d2123156d50060 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 14:07:19 +0800
Subject: [PATCH 29/36] avoid ui flicker

---
 web_src/js/markup/mermaid.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index cd7646ca9370f..507bdcb9bc3a2 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,8 +1,8 @@
 import {isDarkTheme, parseDom} from '../utils.ts';
 import {makeCodeCopyButton} from './codecopy.ts';
 import {displayError} from './common.ts';
-import {createElementFromAttrs, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
-import {html, htmlRaw} from '../utils/html.ts';
+import {createElementFromAttrs, createElementFromHTML, getCssRootVariablesText, queryElems} from '../utils/dom.ts';
+import {html} from '../utils/html.ts';
 import {load as loadYaml} from 'js-yaml';
 import type {MermaidConfig} from 'mermaid';
 
@@ -233,12 +233,13 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       const svgDoc = parseDom(svgText, 'image/svg+xml');
       const svgNode = (svgDoc.documentElement as unknown) as SVGSVGElement;
 
-      const viewController = html`<div class="view-controller"><button data-control-action="zoom-in">+</button><button data-control-action="reset">reset</button><button data-control-action="zoom-out">-</button></div>`;
+      const viewControllerHtml = html`<div class="view-controller"><button data-control-action="zoom-in">+</button><button data-control-action="reset">reset</button><button data-control-action="zoom-out">-</button></div>`;
 
       // create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
-      iframe.srcdoc = html`<html><head></head><body>${htmlRaw(viewController)}</body></html>`;
+      // the styles are not ready, so don't really render anything before the "load" event, to avoid flicker of unstyled content
+      iframe.srcdoc = html`<html><head></head><body></div></body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
@@ -255,6 +256,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
         const iframeBody = iframe.contentDocument!.body;
         iframeBody.append(svgNode);
         bindFunctions?.(iframeBody); // follow "mermaid.render" doc, attach event handlers to the svg's container
+        iframeBody.append(createElementFromHTML(viewControllerHtml));
 
         // according to mermaid, the viewBox height should always exist, here just a fallback for unknown cases.
         // and keep in mind: clientHeight can be 0 if the element is hidden (display: none).

From 3f7a9d5c2a97b4f5cc76375c7d94b70033b28982 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 14:11:26 +0800
Subject: [PATCH 30/36] apply min height

---
 web_src/js/markup/mermaid.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 507bdcb9bc3a2..7b4775a2fd09b 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -217,6 +217,10 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
   });
 
   const iframeStyleText = getIframeCss();
+  const applyMermaidIframeHeight = (iframe: HTMLIFrameElement, height: number) => {
+    if (!height) return;
+    iframe.style.height = `${Math.max(height, 100)}px`;
+  };
 
   // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."
   // so here we just simply render the mermaid blocks one by one, no need to do "Promise.all" concurrently
@@ -243,7 +247,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
-      if (iframeHeightFromViewBox) iframe.style.height = `${iframeHeightFromViewBox}px`;
+      applyMermaidIframeHeight(iframe, iframeHeightFromViewBox);
 
       // the iframe will be fully reloaded if its DOM context is changed (e.g.: moved in the DOM tree).
       // to avoid unnecessary reloading, we should insert the iframe to its final position only once.
@@ -260,7 +264,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
 
         // according to mermaid, the viewBox height should always exist, here just a fallback for unknown cases.
         // and keep in mind: clientHeight can be 0 if the element is hidden (display: none).
-        if (!iframeHeightFromViewBox && iframeBody.clientHeight) iframe.style.height = `${iframeBody.clientHeight}px`;
+        if (!iframeHeightFromViewBox) applyMermaidIframeHeight(iframe, iframeBody.clientHeight);
         iframe.classList.remove('is-loading');
 
         initMermaidViewController(svgNode);

From 8af918e8dc8bf1f0a8c51144161466703b17cf69 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 07:12:14 +0100
Subject: [PATCH 31/36] Align mermaid view controller buttons with code-copy
 button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_src/js/markup/mermaid.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 7b4775a2fd09b..608dd213123c3 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -21,8 +21,8 @@ body { margin: 0; padding: 0; overflow: hidden; }
 .view-controller {
   position: absolute;
   z-index: 1;
-  right: 0;
-  bottom: 0;
+  right: 6px;
+  bottom: 6px;
   display: flex;
   gap: 4px;
   visibility: hidden;
@@ -34,6 +34,7 @@ body:hover .view-controller { visibility: visible; opacity: 1; }
   .view-controller { visibility: visible; opacity: 1; }
 }
 .view-controller button {
+  margin-right: 0.25em;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;

From d915554ab1d294da117a04de5e0cac8081123432 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 14:12:43 +0800
Subject: [PATCH 32/36] add comment

---
 web_src/js/markup/mermaid.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 608dd213123c3..7454ee75a1bad 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -9,8 +9,8 @@ import type {MermaidConfig} from 'mermaid';
 const {mermaidMaxSourceCharacters} = window.config;
 
 function getIframeCss(): string {
-  // Inherit some styles (including root variables, keyframes) from parent document.
-  // The buttons should use the same styles as `button.code-copy`
+  // Inherit some styles (e.g.: root variables) from parent document.
+  // The buttons should use the same styles as `button.code-copy`, and align with it.
   return `
 ${getCssRootVariablesText()}
 
@@ -220,6 +220,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
   const iframeStyleText = getIframeCss();
   const applyMermaidIframeHeight = (iframe: HTMLIFrameElement, height: number) => {
     if (!height) return;
+    // use a min-height to make sure the buttons won't overlap.
     iframe.style.height = `${Math.max(height, 100)}px`;
   };
 

From b2ab4a9721bce70a738924e09416adc8608c795a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 10 Feb 2026 14:15:58 +0800
Subject: [PATCH 33/36] fix html

---
 web_src/js/markup/mermaid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 7454ee75a1bad..6335da12354b5 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -245,7 +245,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
       const iframe = document.createElement('iframe');
       iframe.classList.add('markup-content-iframe', 'is-loading');
       // the styles are not ready, so don't really render anything before the "load" event, to avoid flicker of unstyled content
-      iframe.srcdoc = html`<html><head></head><body></div></body></html>`;
+      iframe.srcdoc = html`<html><head></head><body></body></html>`;
 
       // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
       const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);

From 1e7ef6580db7134a2ad4cc996841636d9189d0a3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 07:23:40 +0100
Subject: [PATCH 34/36] tweak min height

---
 web_src/js/markup/mermaid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 6335da12354b5..ab3e52d90d26e 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -221,7 +221,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
   const applyMermaidIframeHeight = (iframe: HTMLIFrameElement, height: number) => {
     if (!height) return;
     // use a min-height to make sure the buttons won't overlap.
-    iframe.style.height = `${Math.max(height, 100)}px`;
+    iframe.style.height = `${Math.max(height, 90)}px`;
   };
 
   // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."

From fb0805462863db9958e69c06c66c3873f0fe3814 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 07:32:51 +0100
Subject: [PATCH 35/36] fine-tune

---
 web_src/js/markup/mermaid.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index ab3e52d90d26e..9921fc2aeeda6 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -21,20 +21,20 @@ body { margin: 0; padding: 0; overflow: hidden; }
 .view-controller {
   position: absolute;
   z-index: 1;
-  right: 6px;
+  right: 5px;
   bottom: 6px;
   display: flex;
   gap: 4px;
   visibility: hidden;
   opacity: 0;
   transition: var(--transition-hover-fade);
+  margin-right: 0.25em;
 }
 body:hover .view-controller { visibility: visible; opacity: 1; }
 @media (hover: none) {
   .view-controller { visibility: visible; opacity: 1; }
 }
 .view-controller button {
-  margin-right: 0.25em;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
@@ -221,7 +221,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
   const applyMermaidIframeHeight = (iframe: HTMLIFrameElement, height: number) => {
     if (!height) return;
     // use a min-height to make sure the buttons won't overlap.
-    iframe.style.height = `${Math.max(height, 90)}px`;
+    iframe.style.height = `${Math.max(height, 86)}px`;
   };
 
   // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."

From 558e7f6192871636bd1117f6c19889c104680cf8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 10 Feb 2026 07:34:21 +0100
Subject: [PATCH 36/36] fine-tune

---
 web_src/js/markup/mermaid.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 9921fc2aeeda6..cd62990ffde61 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -22,7 +22,7 @@ body { margin: 0; padding: 0; overflow: hidden; }
   position: absolute;
   z-index: 1;
   right: 5px;
-  bottom: 6px;
+  bottom: 5px;
   display: flex;
   gap: 4px;
   visibility: hidden;
@@ -221,7 +221,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
   const applyMermaidIframeHeight = (iframe: HTMLIFrameElement, height: number) => {
     if (!height) return;
     // use a min-height to make sure the buttons won't overlap.
-    iframe.style.height = `${Math.max(height, 86)}px`;
+    iframe.style.height = `${Math.max(height, 85)}px`;
   };
 
   // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."