@helping-ai-workflow/md2doc 3.9.0 → 3.10.0

package/lib/md2doc.js

@@ -22,6 +22,7 @@ const fs            = require('fs');
 const path          = require('path');
 const drawio        = require('./drawio.js');
 const { applyReaderTheme } = require('./theme/tokens');
+const { highlightCode } = require('./highlight');
 
 // How long to let client-side WaveDrom / Mermaid scripts render before we
 // snapshot the DOM (PDF print, or --bake-svg inert-SVG bake).
@@ -1033,9 +1034,16 @@ ${itemsHtml}
         const b64 = Buffer.from(code, 'utf8').toString('base64');
         return '\n' + GRAPHVIZ_PLACEHOLDER.html([b64]) + '\n';
       }
-      // Default: syntax-highlighted code block
+      // Default: fenced code. v3.10.0 colours registered languages here, at
+      // render time (lib/highlight.js); an unknown or missing language stays
+      // plain escaped text.
+      const coloured = highlightCode(code, lang);
+      // The info string goes into an attribute: escape it (an info string such
+      // as x" onmouseover=… must stay text). Ordinary language names are unchanged.
+      const langAttr = escapeHtml(lang);
+      if (coloured !== null) return `<pre><code class="language-${langAttr} hljs">${coloured}</code></pre>\n`;
       const escaped = code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-      return `<pre><code class="language-${lang}">${escaped}</code></pre>\n`;
+      return `<pre><code class="language-${langAttr}">${escaped}</code></pre>\n`;
     };
 
     renderer.heading = function(token) {
@@ -1070,7 +1078,18 @@ ${itemsHtml}
     const baseListitem = renderer.listitem.bind(renderer);
     renderer.listitem = function(token) {
       appendSectionText(flattenTokenText(token.tokens));
-      return baseListitem(token);
+      const html = baseListitem(token);
+      if (!token.task) return html;
+      // v3.10.0: a task item drops its bullet and keeps its own text in a span,
+      // so a checked item's strike-through stops at its own words — CSS
+      // text-decoration cannot be undone on a nested child list. Shapes: tight
+      // (text then an optional block child — a nested list, blockquote, code,
+      // table…), loose (inside a <p>), leaf. The span ends at whichever comes
+      // first: a block child's opening tag, the loose item's </p>, or </li>.
+      const cls = token.checked ? 'task-item is-checked' : 'task-item';
+      const m = html.match(/^<li>([\s\S]*?<input[^>]*>)([\s\S]*?)(<(?:ul|ol|blockquote|pre|table|div|p|h[1-6])[\s>][\s\S]*|<\/p>[\s\S]*|<\/li>\s*)$/);
+      if (!m) return html.replace(/^<li>/, '<li class="' + cls + '">');
+      return '<li class="' + cls + '">' + m[1] + ' <span class="task-text">' + m[2].trim() + '</span>' + m[3];
     };
 
     const baseBlockquote = renderer.blockquote.bind(renderer);
@@ -1305,7 +1324,10 @@ ${itemsHtml}
   var __md2docWavedromSeq = 0;
   window.__md2docInitDiagrams = function (rootEl) {
     rootEl = rootEl || document;
-    if (typeof mermaid !== 'undefined') {
+    // v3.10.0: with the theme runtime on the page (lib/theme/runtime.js), new
+    // mermaid hosts are drawn through it, in the theme on screen, so a block
+    // rebuilt after an edit does not come back light (or recoloured) in dark.
+    if (typeof mermaid !== 'undefined' && !(window.__md2docThemeMermaid && window.__md2docThemeMermaid())) {
       mermaid.initialize({ startOnLoad: false, ${MERMAID_CONFIG_JS} });
       var mermaidNodes = rootEl.querySelectorAll ? rootEl.querySelectorAll('.mermaid') : [];
       var pending = [];
@@ -1434,6 +1456,17 @@ ${itemsHtml}
       '\n  .ed-block[data-list-type="ol"][data-indent="' + d + '"] > .ed-li-marker::before' +
       ' { content: counter(ed-ol-' + d + ') "."; }';
   }
+  // v3.10.0: bullets change by depth like the reader's disc / circle / square,
+  // cycling every three levels. Task items keep their own content:none rule
+  // (same specificity, later in the sheet, so it still wins).
+  const ED_UL_GLYPHS = ['\\2022', '\\25E6', '\\25AA'];
+  // Depth-agnostic fallback first (deeper than ED_OL_MAX_DEPTH keeps a •
+  // rather than going blank); the per-depth rules outrank it.
+  let edUlMarkerCss = '\n  .ed-block[data-list-type="ul"] > .ed-li-marker::before { content: "' + ED_UL_GLYPHS[0] + '"; }';
+  for (let d = 0; d <= ED_OL_MAX_DEPTH; d++) {
+    edUlMarkerCss += '\n  .ed-block[data-list-type="ul"][data-indent="' + d + '"] > .ed-li-marker::before' +
+      ' { content: "' + ED_UL_GLYPHS[d % 3] + '"; }';
+  }
 
   const editModeLayoutCss = `
   /* 56px, not 48px — spec §4.2's hit-test conflict 1 (gutter vs
@@ -1463,8 +1496,16 @@ ${itemsHtml}
      comment above .ed-handle below. That still leaves 6px of clearance from
      splitterRight (contentLeft-56), so the conflict-1 guard still holds.
      Guarded by the elementFromPoint(splitter.right - 2, y) assertion §4.2
-     asks for, in test/editor-client-runtime.test.js. */
-  .content { padding-left: 56px; }
+     asks for, in test/editor-client-runtime.test.js.
+
+     v3.10.0: 62px. The B look makes the buttons 24px; with --ed-gutter-gap
+     2px and the 10px shift the pair spans [contentLeft-60, contentLeft-12],
+     and at 56px of padding the ＋ hung back over the splitter again (the
+     spec's gap 0 already did: measured 1400x900, splitter [324, 356], ＋
+     [354, 378], elementFromPoint(355, ＋'s y) === .ed-insert). 62px restores
+     2px of clearance: re-measured ＋ [358, 382], ⠿ [382, 406], row grip
+     [408, 428], contentLeft 418. */
+  .content { padding-left: 62px; }
 
   /* S1: every block is one full-width row, whatever its type or depth. The
      indent is a property of the item's own MARKER, never of its box, so all
@@ -1510,7 +1551,7 @@ ${itemsHtml}
     margin-left: calc(var(--ed-indent, 0) * 1.6em);
     width: 1.2em;
     display: flex; justify-content: flex-end;
-    color: #6b7280; -webkit-user-select: none; user-select: none;
+    color: var(--md-muted); -webkit-user-select: none; user-select: none;
   }
   /* min-width: 0 so an unbreakable token inside an item cannot widen the row
      past its siblings — that would break the equal-width guarantee above. */
@@ -1525,7 +1566,7 @@ ${itemsHtml}
   .ed-block[data-block-type="li"] > .ed-editing { flex: 1 1 auto; min-width: 0; }
   /* column-gap already provides the marker/checkbox separation. */
   .ed-block[data-block-type="li"] > .ed-li-check { flex: 0 0 auto; margin-right: 0; }
-  .ed-block[data-list-type="ul"] > .ed-li-marker::before { content: "\\2022"; }${edOlCounterCss}
+${edUlMarkerCss}${edOlCounterCss}
   /* A BULLETED task item's checkbox IS its marker, so the • is suppressed and
      the marker box collapses (the indent lives on its margin and survives).
      An ORDERED task item keeps its number — that is what GFM renders — and
@@ -1554,8 +1595,8 @@ ${itemsHtml}
      whatever --ed-gutter-shift moved the pair by. Writing any of them as a
      second literal is how the corridor comes back. */
   :root {
-    --ed-gutter-btn: 18px;
-    --ed-gutter-gap: 4px;
+    --ed-gutter-btn: 24px;
+    --ed-gutter-gap: 2px;
     --ed-gutter-w: calc(var(--ed-gutter-btn) * 2 + var(--ed-gutter-gap));
   }
   /* v3.0.1: the pair moves LEFT by --ed-gutter-shift so the table row grip
@@ -1567,15 +1608,21 @@ ${itemsHtml}
      tableLeft=412; a 10px shift lands ⠿=[380,398] ＋=[362,380], grip
      (straddling, 20px wide, centred on tableLeft) = [402,422], leaving
      exactly --ed-gutter-gap (4px) between the ⠿'s right edge (398) and the
-     grip's left edge (402), and ＋'s left edge (362) stays well clear of 0. */
+     grip's left edge (402), and ＋'s left edge (362) stays well clear of 0.
+     v3.10.0 re-measured (same page, 24px buttons, --ed-gutter-gap 2px, 62px
+     content padding): ⠿=[382,406] ＋=[358,382] tableLeft=418, grip=[408,428].
+     The spec asked for gap 0; that left the ⠿ abutting the grip, and on CI's
+     fractional layout the grip took the ⠿'s last half-pixel column (§4.2
+     conflict 2, editor-client-runtime: x 73.5 in a [50, 74] box answered
+     ROW-GRIP). 2px is the clearance that survives sub-pixel snapping. */
   :root { --ed-gutter-shift: 10px; }
   .ed-handle {
     left: calc(-1 * (var(--ed-gutter-btn) + var(--ed-gutter-gap) + var(--ed-gutter-shift)));
-    top: 0;
+    top: var(--ed-pair-top, 0px);
     width: var(--ed-gutter-btn);
   }
   .ed-insert {
-    left: calc(-1 * (var(--ed-gutter-w) + var(--ed-gutter-shift))); top: 0;
+    left: calc(-1 * (var(--ed-gutter-w) + var(--ed-gutter-shift))); top: var(--ed-pair-top, 0px);
     width: var(--ed-gutter-btn);
   }
   /* v2.11.1: the gutter's HOVER ZONE, and it is the reason the pair could move
@@ -1705,22 +1752,6 @@ ${itemsHtml}
   /* The reader bar is gone in edit mode, so its 52px anchor offset goes too
      (it moved scrollIntoView landings under the edit toolbar). */
   .content [id] { scroll-margin-top: 0; }
-  /* T11-2 step 5: enterSourceMode() (lib/editor/client.js) sets
-     contentEl.hidden = true and mounts a plain textarea in its place, and
-     setDocMode() writes docMode onto body as data-ed-mode. Measured on that
-     build: with ten TOC links listed, clicking the last one moved neither
-     the (hidden) reading position nor the textarea's own scrollTop
-     (3924 before and after) — the click target was a normal anchor jump /
-     scrollIntoView() reaching into a subtree rooted at .content, and
-     .content's own display:none is what absorbed it; the same subtree
-     relationship holds for a search result's jump target. Hiding the TOC
-     nav and the search-results panel while data-ed-mode="source" removes
-     the two controls whose only reachable target sits in that hidden
-     subtree; the search input row (.reader-tools) is left as-is — driving
-     it against the textarea's own line numbers instead is a separate
-     feasibility question, not answered here. */
-  body[data-ed-mode="source"] .toc,
-  body[data-ed-mode="source"] .search-results { display: none !important; }
 
   /* ── v3.4.0 batch3 Task 6: the wavedrom editing surface ───────────────
      Both of these are mounted on document.body by lib/editor/client.js, and
@@ -1735,10 +1766,10 @@ ${itemsHtml}
      toolbar's own band, because the editor is modal over the document. */
   .ed-wave-edit-btn {
     position: fixed; z-index: 12; padding: 3px 10px; font-size: 12px;
-    border: 1px solid #bbb; border-radius: 4px; background: #ffffffee;
-    color: #222; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2);
+    border: 1px solid var(--md-border); border-radius: 4px; background: var(--md-ed-surface);
+    color: var(--md-strong); cursor: pointer; box-shadow: 0 1px 3px var(--md-ed-shadow);
   }
-  .ed-wave-edit-btn:hover { background: #fff; border-color: #888; }
+  .ed-wave-edit-btn:hover { background: var(--md-ed-surface); border-color: var(--md-border); }
   .ed-wave-overlay {
     position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.45);
     display: flex; align-items: center; justify-content: center;
@@ -2783,6 +2814,24 @@ const html = `<!DOCTYPE html>
     overflow-wrap: anywhere;
     word-break: break-word;
   }
+  /* v3.10.0: task items. The checkbox is the marker, so no bullet; a checked
+     item's OWN text is struck — child selectors only, because a descendant
+     rule would strike the nested child items too (text-decoration cannot be
+     undone further down). */
+  .content ul > li.task-item { list-style: none; }
+  .content li.task-item > input[type="checkbox"],
+  .content li.task-item > p > input[type="checkbox"] {
+    appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0 6px 0 0;
+    vertical-align: -3px; border: 1.5px solid var(--md-muted); border-radius: 4px; background: transparent; }
+  /* In a bulleted list the checkbox takes the bullet's place; an ORDERED task
+     item keeps its number (what GFM renders, and what the editor does). */
+  .content ul > li.task-item > input[type="checkbox"],
+  .content ul > li.task-item > p > input[type="checkbox"] { margin-left: -22px; }
+  .content li.task-item.is-checked > input[type="checkbox"],
+  .content li.task-item.is-checked > p > input[type="checkbox"] {
+    border-color: var(--md-accent); background: var(--md-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
+  .content li.task-item.is-checked > .task-text,
+  .content li.task-item.is-checked > p > .task-text { color: var(--md-muted); text-decoration: line-through; }
   .content > * { max-width: 100%; }
   .content iframe, .content video, .content canvas { max-width: 100%; height: auto; }
   .doc-meta {
@@ -2837,6 +2886,16 @@ const html = `<!DOCTYPE html>
     line-height: 1.45;
   }
   pre code { background: none; padding: 0; font-size: 0.875em; }
+  /* v3.10.0: fenced-code syntax colour, written at render time by
+     lib/highlight.js (no script on the page). Colours are the syn-* roles. */
+  .hljs-keyword, .hljs-selector-tag, .hljs-literal { color: var(--md-syn-keyword); }
+  .hljs-number, .hljs-attr, .hljs-attribute { color: var(--md-syn-number); }
+  .hljs-comment, .hljs-quote { color: var(--md-syn-comment); font-style: italic; }
+  .hljs-string, .hljs-regexp { color: var(--md-syn-string); }
+  .hljs-type, .hljs-built_in, .hljs-meta { color: var(--md-syn-type); }
+  .hljs-title, .hljs-variable, .hljs-params, .hljs-section { color: var(--md-syn-title); }
+  .hljs-addition { color: var(--md-syn-string); }
+  .hljs-deletion { color: var(--md-syn-keyword); }
   .content :not(pre) > code {
     background: none;
     padding: 0;
@@ -3222,11 +3281,10 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      above), so shipping this unconditionally is inert on normal HTML
      output, same precedent as the lightbox selectors above. */
   .ed-block { position: relative; cursor: pointer; }
-  .ed-block:hover { outline: 1px dashed #b0b0b0; }
   /* S3: the block-level multi-select tint (spec §3.6). rgba, never opaque —
-     §3.6 says the text underneath stays readable. #3b82f6 is the editor's
-     established blue (.ed-wys-armed:focus, .ed-li-check[data-checked="1"],
-     .ed-te-hl).
+     §3.6 says the text underneath stays readable. Since v3.10.0 the tint is
+     the --md-ed-sel role, the reader accent at low alpha, shared with
+     .ed-te-hl (focus rings and the checked box use --md-accent itself).
 
      The descendant rules and their !important are not decoration, they are
      the whole problem: <pre> (#f6f8fa) and the sticky first column (#ffffff)
@@ -3245,12 +3303,12 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      :focus outline is suppressed because the roving tabindex below focuses a
      .ed-block for real (spec §4.4 wants a real focus holder, not <body>) and
      the tint — not a second ring — is the selection's affordance. */
-  .ed-block.ed-selected { background: rgba(59, 130, 246, 0.15); }
+  .ed-block.ed-selected { background: var(--md-ed-sel); }
   .ed-block.ed-selected pre,
   .ed-block.ed-selected th,
   .ed-block.ed-selected tr:nth-child(even),
   .ed-block.ed-selected tbody td:first-child,
-  .ed-block.ed-selected thead th:first-child { background: rgba(59, 130, 246, 0.15) !important; }
+  .ed-block.ed-selected thead th:first-child { background: var(--md-ed-sel) !important; }
   .ed-block.ed-selected:focus { outline: none; }
   /* white-space: pre-line is LOAD-BEARING, not styling — do not relax it.
      A hard-wrapped ("lazy continuation") list item's own content contains a
@@ -3270,9 +3328,10 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      Task 5's and live in editModeLayoutCss (edit-mode only), fed by the hooks
      renderEditModeList() emits here. */
   .ed-block[data-block-type="li"] { cursor: text; }
-  .ed-li-check { display: inline-block; width: 14px; height: 14px; margin-right: 6px;
-    border: 1px solid #8a8a8a; border-radius: 3px; vertical-align: middle; cursor: pointer; }
-  .ed-li-check[data-checked="1"] { background: #3b82f6; border-color: #3b82f6; }
+  .ed-li-check { display: inline-block; width: 16px; height: 16px; margin-right: 6px; box-sizing: border-box;
+    border: 1.5px solid var(--md-ed-glyph); border-radius: 4px; vertical-align: middle; cursor: pointer; }
+  .ed-li-check[data-checked="1"] { border-color: var(--md-accent); background: var(--md-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
+  .ed-block[data-task="1"]:has(> .ed-li-check[data-checked="1"]) > .ed-li-text { color: var(--md-muted); text-decoration: line-through; }
   /* Phase 3 Task 2: always-on paragraph/heading/list editing. Every eligible
      block's content element is contenteditable from the moment it renders
      (armEditables() in the client runtime) — no persistent outline (that
@@ -3283,8 +3342,8 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      toggling. */
   .ed-wys-armed { cursor: text; }
   .ed-wys-armed:focus {
-    outline: 2px solid #3b82f6; outline-offset: 2px;
-    caret-color: #3b82f6;
+    outline: 2px solid var(--md-accent); outline-offset: 2px;
+    caret-color: var(--md-accent);
   }
   /* Task 5: table cells armed PERMANENTLY (one edit surface per CELL, not
      per table root — see armEditables()'s 'table' branch in the client
@@ -3295,8 +3354,8 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      table's horizontal edges. */
   .ed-wys-cell { cursor: text; }
   .ed-wys-cell:focus {
-    outline: 2px solid #3b82f6; outline-offset: -2px;
-    caret-color: #3b82f6;
+    outline: 2px solid var(--md-accent); outline-offset: -2px;
+    caret-color: var(--md-accent);
   }
   /* Phase 3 Task 2: the ⠿ block-actions handle — one real per-block node
      (not a floating, JS-repositioned element like .ed-seltb/.ed-tb-insert),
@@ -3304,10 +3363,10 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      visibility toggle (opacity), never display or pointer-events, so a
      script-driven click still reaches it even without a real hover. */
   .ed-handle {
-    position: absolute; left: -22px; top: 0; width: 18px; height: 20px;
+    position: absolute; left: -22px; top: 0; width: 24px; height: 24px;
     display: flex; align-items: center; justify-content: center;
     padding: 0; margin: 0; border: none; border-radius: 4px;
-    background: transparent; color: #8a8a8a; font-size: 13px; line-height: 1;
+    background: transparent; color: var(--md-ed-glyph); font-size: 13px; line-height: 1;
     cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease;
   }
   .ed-block:hover .ed-handle,
@@ -3323,7 +3382,7 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      a recorded, unfixed residue. */
   .ed-block.ed-keep-lit .ed-handle,
   .ed-block.ed-keep-lit .ed-insert { opacity: 1; }
-  .ed-handle:hover { background: rgba(0, 0, 0, 0.08); }
+  .ed-handle:hover { background: var(--md-ed-hover); color: var(--md-strong); }
   /* The ⠿ handle's menu: 轉換成 › / 建立副本 / 刪除 / MD 原始碼 (spec §3.7),
      each led by a 16px currentColor icon (v2.12.0; drawn in
      lib/editor/client.js's MENU_ICON_PATHS).
@@ -3341,8 +3400,8 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     position: absolute; top: -4px; left: -4px; z-index: 6;
     display: flex; flex-direction: column; align-items: stretch; gap: 2px;
     padding: 4px; border-radius: 8px;
-    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
   }
   .ed-handle-menu-btn {
     /* v3.0.1: the icon sits FLUSH LEFT and the label sits one space-width
@@ -3350,8 +3409,8 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
        The right padding is untouched — it is what keeps the 轉換成 row's
        chevron off the panel edge. */
     min-width: 132px; height: 26px; padding: 0 10px 0 6px;
-    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08); color: inherit;
+    border: 1px solid transparent; border-radius: 6px;
+    background: transparent; color: inherit;
     font: inherit; font-size: 12px; line-height: 1;
     text-align: left; white-space: nowrap; cursor: pointer;
     /* v2.12.0: a flex ROW so the icon and the label share a baseline-free
@@ -3406,7 +3465,7 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      tighter than the list at 18px per row. (No backticks in this comment:
      it lives inside a JS template literal.) */
   .ed-handle-submenu { left: 100%; margin-left: 4px; max-height: calc(100vh - 8px); overflow-y: auto; }
-  .ed-handle-menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
+  .ed-handle-menu-btn:hover { background: var(--md-ed-hover); }
   .ed-handle-menu-btn[hidden] { display: none; }
   /* §10-gap fix: block-level INSERT — the ＋ button sits NEXT TO the ⠿
      handle in the left gutter, same node/visibility-toggle shape as
@@ -3430,32 +3489,32 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      than deleted because it is the correct fallback if the gutter padding is
      ever conditioned differently. */
   .ed-insert {
-    position: absolute; left: -22px; top: -22px; width: 18px; height: 20px;
+    position: absolute; left: -22px; width: 24px; height: 24px;
     display: flex; align-items: center; justify-content: center;
     padding: 0; margin: 0; border: none; border-radius: 4px;
-    background: transparent; color: #8a8a8a; font-size: 13px; line-height: 1;
+    background: transparent; color: var(--md-ed-glyph); font-size: 13px; line-height: 1;
     cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease;
   }
   .ed-block:hover .ed-insert,
   .ed-insert:focus { opacity: 1; }
-  .ed-insert:hover { background: rgba(0, 0, 0, 0.08); }
+  .ed-insert:hover { background: var(--md-ed-hover); color: var(--md-strong); }
   /* The ＋ button's small menu: 段落/標題/清單/表格/程式碼 — same dark
      translucent pill language as .ed-handle-menu above. */
   .ed-insert-menu {
     position: absolute; top: -4px; left: -4px; z-index: 6;
     display: flex; align-items: center; gap: 4px;
     padding: 4px 6px; border-radius: 8px;
-    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
   }
   .ed-insert-menu-btn {
     min-width: 28px; height: 26px; padding: 0 8px;
-    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08); color: inherit;
+    border: 1px solid transparent; border-radius: 6px;
+    background: transparent; color: inherit;
     font: inherit; font-size: 12px; line-height: 1;
     white-space: nowrap; cursor: pointer;
   }
-  .ed-insert-menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
+  .ed-insert-menu-btn:hover { background: var(--md-ed-hover); }
   /* Task 5: hover-edge column/row insert bubbles — a SINGLETON pair of "＋"
      buttons (client runtime repositions them via getBoundingClientRect(),
      never creates more than these two). Visual language deliberately
@@ -3468,11 +3527,11 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     position: fixed; z-index: 8;
     width: 18px; height: 18px; padding: 0; margin: 0;
     display: flex; align-items: center; justify-content: center;
-    border: 1px solid #3b82f6; border-radius: 50%;
-    background: #fff; color: #3b82f6; font-size: 13px; line-height: 1;
-    cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--md-accent); border-radius: 50%;
+    background: var(--md-ed-surface); color: var(--md-accent); font-size: 13px; line-height: 1;
+    cursor: pointer; box-shadow: 0 0 0 1px var(--md-ed-ring), 0 2px 6px var(--md-ed-shadow);
   }
-  .ed-tb-insert:hover { background: #3b82f6; color: #fff; }
+  .ed-tb-insert:hover { background: var(--md-accent); color: var(--md-ed-surface); }
   .ed-tb-insert[hidden] { display: none; }
   /* Task 6: table edge-click menus (delete/align) + row drag-reorder.
      '.ed-te-hl' marks the currently-selected column's or row's CELLS
@@ -3487,32 +3546,32 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      relabeled/repositioned per click rather than rebuilt. '.ed-te-drop-
      indicator' is the singleton line shown while dragging a row.
      '.ed-te-row-dragging' dims the row actually being dragged. */
-  .ed-te-hl { background: rgba(59, 130, 246, 0.15) !important; }
+  .ed-te-hl { background: var(--md-ed-sel) !important; }
   /* Table cell-range selection: the painted rectangle, and the table that
      holds one (its caret and native selection are hidden while it stands). */
-  .ed-cell-range { background: rgba(59, 130, 246, 0.18) !important; }
+  .ed-cell-range { background: var(--md-ed-range) !important; }
   .ed-cell-range-active { caret-color: transparent; }
   .ed-cell-range-active ::selection { background: transparent; }
   .ed-te-menu {
     position: fixed; z-index: 12;
     display: flex; align-items: center; gap: 4px;
     padding: 4px 6px; border-radius: 8px;
-    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
   }
   .ed-te-menu[hidden] { display: none; }
   .ed-te-menu-btn {
     min-width: 28px; height: 26px; padding: 0 8px;
-    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08); color: inherit;
+    border: 1px solid transparent; border-radius: 6px;
+    background: transparent; color: inherit;
     font: inherit; font-size: 12px; line-height: 1;
     white-space: nowrap; cursor: pointer;
   }
-  .ed-te-menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
+  .ed-te-menu-btn:hover { background: var(--md-ed-hover); }
   .ed-te-menu-btn[hidden] { display: none; }
   .ed-te-drop-indicator {
     position: fixed; z-index: 8; height: 3px; border-radius: 2px;
-    background: #3b82f6; pointer-events: none;
+    background: var(--md-accent); pointer-events: none;
   }
   .ed-te-drop-indicator[hidden] { display: none; }
   .ed-te-row-dragging { opacity: 0.4; }
@@ -3527,7 +3586,7 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      the BLOCK line rather than table chrome that happened to be on screen. */
   .ed-block-drop-indicator {
     position: fixed; z-index: 8; height: 3px; border-radius: 2px;
-    background: #3b82f6; pointer-events: none;
+    background: var(--md-accent); pointer-events: none;
   }
   .ed-block-drop-indicator[hidden] { display: none; }
   /* S4 Task 2b (user request, 2026-09-01): the drag's feedback on the SOURCE
@@ -3579,9 +3638,9 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     transition: background .12s ease;
   }
   .ed-te-grip[hidden] { display: none; }
-  .ed-te-grip:hover { background: rgba(0, 0, 0, 0.06); }
-  .ed-te-grip-dot { width: 3px; height: 3px; border-radius: 50%; background: #9ca3af; }
-  .ed-te-grip:hover .ed-te-grip-dot { background: #6b7280; }
+  .ed-te-grip:hover { background: var(--md-ed-hover); }
+  .ed-te-grip-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--md-ed-glyph); }
+  .ed-te-grip:hover .ed-te-grip-dot { background: var(--md-muted); }
   /* spec §4.2 hit-test conflict 2: the row grip's width is a TOKEN because
      lib/editor/client.js's updateTableEdgeGrips() reads it (via
      gripRowWidthPx()) to CENTRE the grip on the table's left border —
@@ -3611,17 +3670,17 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     position: fixed; z-index: 15;
     display: flex; align-items: center; gap: 4px;
     padding: 4px 6px; border-radius: 8px;
-    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
   }
   .ed-seltb-btn {
     min-width: 28px; height: 26px; padding: 0 8px;
-    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08); color: inherit;
+    border: 1px solid transparent; border-radius: 6px;
+    background: transparent; color: inherit;
     font: inherit; font-size: 13px; line-height: 1;
     white-space: nowrap; cursor: pointer;
   }
-  .ed-seltb-btn:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.18); }
+  .ed-seltb-btn:hover:not([aria-disabled="true"]) { background: var(--md-ed-hover); }
   /* v3.3.0 (F2): the four states these buttons report about the selection.
      'true' (the selection is entirely inside a mark of this type) is the
      filled treatment the fixed toolbar already uses. 'mixed' (the selection
@@ -3631,17 +3690,18 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      rule above. INERT is aria-disabled, never the disabled DOM property; see
      paintSelToolbarMarks() in lib/editor/client.js for why. */
   .ed-seltb-btn[aria-pressed="true"] {
-    background: #e6edf3; color: #101215; border-color: #e6edf3;
+    background: var(--md-active-bg); color: var(--md-active-fg); border-color: transparent;
   }
   .ed-seltb-btn[aria-pressed="mixed"] {
-    background: rgba(230, 237, 243, 0.3);
-    border-style: dashed; border-color: rgba(230, 237, 243, 0.8);
+    background: transparent;
+    border-style: dashed; border-color: var(--md-border);
   }
   .ed-seltb-btn[aria-disabled="true"] { opacity: 0.38; cursor: default; }
-  .ed-seltb-b { font-weight: bold; }
-  .ed-seltb-i { font-style: italic; }
-  .ed-seltb-s { text-decoration: line-through; }
-  .ed-seltb-u { text-decoration: underline; }
+  .ed-seltb { padding: 3px; gap: 2px; }
+  .ed-seltb-btn { width: 30px; height: 30px; min-width: 0; padding: 0; display: inline-grid; place-items: center; color: var(--md-muted); }
+  .ed-seltb-btn:hover:not([aria-disabled="true"]) { color: var(--md-strong); }
+  .ed-seltb-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--md-rule); align-self: center; }
+  .ed-ico { display: block; flex: none; }
   /* v3.1.0 §4: the always-visible editing toolbar. Its numeric language is
      .lightbox-bar's (8px/12px padding, 6px gap, 13px type) over .ed-seltb's
      dark pill, so the two floating surfaces read as one family.
@@ -3684,7 +3744,9 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
        save included, still reaches an empty unreachable list and an empty
        neverClear list at all three — this change does not trade the T11-2
        no-scroll guarantee for the F12 with-scroll one. */
-    gap: 3px; padding: 8px 12px;
+    /* v3.10.0 B 外觀: buttons grew to 32x32 (+~4px each) and separators to
+       6px margins, so the gap went 3px -> 0 to keep outline (hamburger) inside 800px. */
+    gap: 0; padding: 8px 12px;
     /* F12, both halves measured on this build at 900px viewport height.
        justify-content was center. Centering an overflowing flex row splits
        the overflow across BOTH ends, and the leading end of a scroll
@@ -3704,9 +3766,13 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
        scrollLeft 0 after this change, [outline, preview] still overlap the
        slot at a 900px viewport and [check, bold, italic, strike] do at 420px.
        What makes that harmless is the slot's own pointer-events: none, in
-       the rule further down — the load-bearing line, not this one. */
-    padding-right: 124px;
-    background: rgba(16, 18, 21, 0.92); color: #e6edf3;
+       the rule further down — the load-bearing line, not this one.
+       v3.10.0: 260px. The slot now carries the save state, and its longest
+       text (the dirty one, "有未儲存的變更 · Ctrl+S 儲存" after a dot) is far
+       wider than the old 7rem mode name. */
+    padding-right: 260px;
+    background: var(--md-ed-chrome); color: var(--md-muted);
+    border-bottom: 1px solid var(--md-rule);
     /* F12, second half: before this the bar scrolled but nothing on screen
        said so, so a button parked outside the viewport looked absent rather
        than off to one side. Two edge gradients, painted only on the side
@@ -3730,32 +3796,34 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
        than light — darkening the ground a translucent button sits on is what
        reads as content passing under an edge, where a light wash behind the
        same button would not. */
-    --ed-tb-edge-l: rgba(0, 0, 0, 0);
-    --ed-tb-edge-r: rgba(0, 0, 0, 0);
+    --ed-tb-edge-l: transparent;
+    --ed-tb-edge-r: transparent;
     background-image:
-      linear-gradient(to right, var(--ed-tb-edge-l), rgba(0, 0, 0, 0)),
-      linear-gradient(to left, var(--ed-tb-edge-r), rgba(0, 0, 0, 0));
+      linear-gradient(to right, var(--ed-tb-edge-l), transparent),
+      linear-gradient(to left, var(--ed-tb-edge-r), transparent);
     background-repeat: no-repeat;
     background-position: left center, right center;
     background-size: 26px 100%, 26px 100%;
     font-size: 13px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    box-shadow: none;
   }
-  .ed-toolbar[data-ed-tb-overflow~="left"] { --ed-tb-edge-l: rgba(0, 0, 0, 0.55); }
-  .ed-toolbar[data-ed-tb-overflow~="right"] { --ed-tb-edge-r: rgba(0, 0, 0, 0.55); }
+  .ed-toolbar[data-ed-tb-overflow~="left"] { --ed-tb-edge-l: var(--md-ed-shadow); }
+  .ed-toolbar[data-ed-tb-overflow~="right"] { --ed-tb-edge-r: var(--md-ed-shadow); }
   .ed-toolbar-sep {
-    flex: 0 0 auto; width: 1px; height: 18px; margin: 0 2px;
-    background: rgba(255, 255, 255, 0.25);
+    flex: 0 0 auto; width: 1px; height: 20px; margin: 0 6px;
+    background: var(--md-rule);
   }
   .ed-toolbar-btn {
     flex: 0 0 auto;
-    min-width: 28px; height: 26px; padding: 0 8px;
-    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08); color: inherit;
+    min-width: 32px; height: 32px; padding: 0;
+    display: inline-grid; place-items: center; color: var(--md-muted);
+    border: 0 solid transparent; border-radius: 6px;
+    background: transparent;
     font: inherit; font-size: 13px; line-height: 1;
     white-space: nowrap; cursor: pointer;
   }
-  .ed-toolbar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
+  .ed-toolbar-btn:hover:not(:disabled) { background: var(--md-ed-hover); color: var(--md-strong); }
+  .ed-toolbar-btn .ed-ico { width: 18px; height: 18px; }
   /* F12: where the toolbar's keyboard cursor is. An outline rather than a
      background so it stays legible on a button that is already pressed-in
      (aria-pressed paints that one nearly white). Claim no more for it than a
@@ -3764,21 +3832,18 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      follow, and what this cue does for a screen reader has not been measured
      here. What it does do is let the row be walked without a mouse. */
   .ed-toolbar-btn[data-ed-tb-cursor] {
-    outline: 2px solid #6ea8fe; outline-offset: 1px;
+    outline: 2px solid var(--md-accent); outline-offset: 1px;
   }
   .ed-toolbar-btn:disabled { opacity: 0.38; cursor: default; }
   .ed-toolbar-btn[aria-pressed="true"] {
-    background: #e6edf3; color: #101215; border-color: #e6edf3;
+    background: var(--md-active-bg); color: var(--md-active-fg); border-color: transparent;
   }
   /* v3.3.0 (F2): the middle state, matching .ed-seltb-btn[aria-pressed="mixed"]
      above so the two bars answer the same question the same way. */
   .ed-toolbar-btn[aria-pressed="mixed"] {
-    background: rgba(230, 237, 243, 0.3);
-    border-style: dashed; border-color: rgba(230, 237, 243, 0.8);
+    background: transparent;
+    border-width: 1px; border-style: dashed; border-color: var(--md-border);
   }
-  .ed-toolbar-b { font-weight: bold; }
-  .ed-toolbar-i { font-style: italic; }
-  .ed-toolbar-s { text-decoration: line-through; }
   /* H1 fix — and its reason has since moved, so both readings are kept here
      rather than one silently standing in for the other. The brief's literal
      margin-left: auto (a flex-flow item) was measured on v3.2.0 to break
@@ -3824,9 +3889,13 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      regression, this time on content someone can actually see and try to
      click. */
   .ed-toolbar-status { position: fixed; top: 0; right: 12px;
-    height: var(--ed-toolbar-h); line-height: var(--ed-toolbar-h);
-    min-width: 7rem; text-align: right; font-size: 12px; opacity: .8;
+    height: var(--ed-toolbar-h); display: flex; align-items: center; gap: 6px;
+    min-width: 7rem; justify-content: flex-end; font-size: 13px; color: var(--md-muted);
     pointer-events: none; }
+  .ed-toolbar-status[data-state="clean"] .ed-ico { color: var(--md-ed-ok); }
+  .ed-toolbar-status[data-state="failed"] { color: var(--md-ed-err); }
+  .ed-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-ed-dirty); display: inline-block; }
+  .ed-toolbar-btn[data-ed-tb="save"][aria-pressed="true"] { color: var(--md-accent); background: var(--md-active-bg); }
   /* The H▾ dropdown: same singleton-panel idiom as .ed-insert-menu, but
      anchored to a fixed bar rather than moved into a block, so it is
      positioned in viewport coordinates by the client runtime.
@@ -3839,8 +3908,8 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     position: fixed; z-index: 102;
     display: flex; flex-direction: column; gap: 2px;
     padding: 4px; border-radius: 8px;
-    background: rgba(16, 18, 21, 0.96); color: #e6edf3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+    background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
     max-height: calc(100vh - 8px); overflow-y: auto;
   }
   .ed-toolbar-menu[hidden] { display: none; }
@@ -3849,7 +3918,7 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
     border: none; border-radius: 4px; background: transparent; color: inherit;
     font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
   }
-  .ed-toolbar-menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
+  .ed-toolbar-menu-btn:hover { background: var(--md-ed-hover); }
   /* backlog #7 (Task 9 review, M1): the panel's OWN keyboard cursor
      (lib/editor/client.js's toolbarMenuIndex / data-ed-tb-menu-cursor) had
      no matching rule at all — the fix made the six items operable by
@@ -3859,32 +3928,24 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      over :hover's own background, and over nothing at all when neither
      applies). */
   .ed-toolbar-menu-btn[data-ed-tb-menu-cursor] {
-    outline: 2px solid #6ea8fe; outline-offset: -2px;
-    background: rgba(255, 255, 255, 0.18);
-  }
-  /* 追加 4: the whole-document source escape hatch. Replaces the rendered
-     content column for the duration of source mode; the document's own
-     lines[] is untouched until the mode is left (see docsource.js). */
-  .ed-source {
-    display: block; width: 100%; box-sizing: border-box;
-    min-height: 70vh; padding: 12px;
-    font-family: monospace; font-size: 13px; line-height: 1.6;
-    border: 1px solid #d0d7de; border-radius: 8px; resize: vertical;
-    white-space: pre; overflow-wrap: normal;
+    outline: 2px solid var(--md-accent); outline-offset: -2px;
+    background: var(--md-ed-hover);
   }
   .ed-editing { position: relative; }
   .ed-raw {
-    display: block; width: 100%; font-family: monospace; font-size: 13px;
+    display: block; width: 100%; font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 13px;
     min-height: 3em; box-sizing: border-box; padding: 6px;
-    border: 1px solid #808080; resize: vertical;
+    border: 1px solid var(--md-border); border-radius: 6px;
+    background: var(--md-ed-field); color: var(--md-strong); resize: vertical;
   }
   .ed-controls { display: flex; gap: 6px; margin-top: 4px; }
   .ed-controls button {
     font-size: 13px; padding: 2px 10px; cursor: pointer;
-    border: 1px solid #b0b0b0; border-radius: 4px; background: #fff;
+    border: 1px solid var(--md-border); border-radius: 6px;
+    background: var(--md-ed-surface); color: var(--md-strong);
   }
-  .ed-commit { color: #0a7a0a; }
-  .ed-cancel { color: #b00020; }
+  .ed-commit { color: var(--md-ed-ok); }
+  .ed-cancel { color: var(--md-ed-err); }
   /* backlog #8: 'top: 0' used to put this banner directly OVER .ed-toolbar
      (same top-of-viewport band, and z-index 999 against the bar's 101 wins
      the paint) — MEASURED (task-10-toolbar-probe.js): all 23 toolbar
@@ -3921,16 +3982,38 @@ ${usesDrawio ? `  /* v3.4.0 §4: a document with no drawio reference must not pa
      land nearby as a side effect of their own trigger's position, not a
      shared clamp — see showBanner()'s parallel comment in
      lib/editor/client.js. Closed regardless, so a banner can never land on
-     top of one of those instead. */
+     top of one of those instead.
+     v3.10.0 (two message levels): only the ERROR card floors at the token
+     now — its top is --ed-toolbar-h plus 10px, a centred card rather than a
+     full-width band — and a NOTICE sits at the bottom of the viewport, so it
+     never reaches the toolbar's band at all. */
+  /* Centred with left/right + auto margins and a fit-content width, NOT
+     left: 50% + translateX(-50%): a fixed box anchored at left: 50% may only
+     grow into the right half of the viewport, so the 760px cap never applied
+     and a long message wrapped into a card half the viewport wide and several
+     times as tall (measured 800x600: 400px wide, y 54-284, covering the
+     waveform editor's group buttons). */
   .ed-conflict {
-    position: fixed; top: var(--ed-toolbar-h); left: 0; right: 0; padding: 10px;
-    background: #b00020; color: #fff; z-index: 999; text-align: center;
-    display: flex; align-items: center; justify-content: center; gap: 12px;
-  }
-  .ed-conflict button {
-    background: #fff; color: #b00020; border: none; border-radius: 4px;
-    padding: 4px 12px; cursor: pointer; font-weight: bold;
-  }
+    position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; z-index: 999;
+    display: flex; align-items: center; gap: 10px;
+    max-width: 760px; box-sizing: border-box;
+    padding: 10px 10px 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5;
+  }
+  .ed-conflict[data-level="error"] {
+    top: calc(var(--ed-toolbar-h) + 10px);
+    background: var(--md-ed-err-bg); color: var(--md-ed-err-ink);
+    box-shadow: inset 3px 0 0 var(--md-ed-err), 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
+  }
+  .ed-conflict[data-level="notice"] {
+    bottom: 28px; background: var(--md-ed-surface); color: var(--md-strong);
+    box-shadow: 0 0 0 1px var(--md-ed-ring), 0 8px 24px var(--md-ed-shadow);
+  }
+  .ed-msg-ico { display: grid; color: var(--md-muted); }
+  .ed-conflict[data-level="error"] .ed-msg-ico { color: var(--md-ed-err); }
+  .ed-msg-text { flex: 1 1 auto; }
+  .ed-conflict button { font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 6px;
+    padding: 4px 12px; cursor: pointer; background: var(--md-ed-err); color: var(--md-ed-surface); }
+  .ed-conflict button.ed-msg-x { background: transparent; color: inherit; padding: 4px; display: grid; }
 ${opts.editMode ? editModeLayoutCss : ''}
 </style>
 ${usesMath ? buildKatexStyleTag() : ''}
@@ -4668,11 +4751,19 @@ ${mermaidInitTag}`)
   var anchorTop = 0;
   var anchorFrame = 0;
   var suppressAnchorCapture = false;
+  // Column width the anchor was last captured/held at; -1 until the column
+  // ResizeObserver below is installed. See captureScrollAnchor's first guard.
+  var lastAnchorColW = -1;
   var lastLayoutWidth = document.documentElement.clientWidth;
   var lastPixelRatio = window.devicePixelRatio;
 
   function captureScrollAnchor() {
     if (suppressAnchorCapture || !contentEl) return;
+    // A column reflow the ResizeObserver has not delivered yet: during a
+    // splitter drag the next pointermove lands before holdScrollAnchor's
+    // trailing capture frame, so capturing now would pin a post-reflow node
+    // and the observer's restore would then find nothing to correct.
+    if (lastAnchorColW >= 0 && contentEl.clientWidth !== lastAnchorColW) return;
     var rect = contentEl.getBoundingClientRect();
     var hit = document.elementFromPoint(rect.left + rect.width / 2, ANCHOR_LINE);
     var node = (hit && hit.closest) ? hit.closest('main.content > *') : null;
@@ -4724,14 +4815,7 @@ ${mermaidInitTag}`)
     });
   }, { passive: true });
 
-  window.addEventListener('resize', function () {
-    var width = document.documentElement.clientWidth;
-    var ratio = window.devicePixelRatio;
-    // A height-only change (a mobile browser hiding its toolbar, a devtools
-    // dock) reflows nothing, so correcting the scroll would only jerk the page.
-    if (width === lastLayoutWidth && ratio === lastPixelRatio) return;
-    lastLayoutWidth = width;
-    lastPixelRatio = ratio;
+  function holdScrollAnchor() {
     // Hold the anchor across the whole reflow: the scrollTo below fires scroll
     // events that would otherwise re-capture a mid-reflow position.
     suppressAnchorCapture = true;
@@ -4743,8 +4827,37 @@ ${mermaidInitTag}`)
         captureScrollAnchor();
       });
     });
+  }
+
+  window.addEventListener('resize', function () {
+    var width = document.documentElement.clientWidth;
+    var ratio = window.devicePixelRatio;
+    // A height-only change (a mobile browser hiding its toolbar, a devtools
+    // dock) reflows nothing, so correcting the scroll would only jerk the page.
+    if (width === lastLayoutWidth && ratio === lastPixelRatio) return;
+    lastLayoutWidth = width;
+    lastPixelRatio = ratio;
+    holdScrollAnchor();
   });
 
+  // The column also narrows and widens with no window resize at all: a
+  // sidebar-splitter drag, its double-click reset and the TOC collapse toggle
+  // only move --md2doc-sidebar-w / data-toc-collapsed, so the 'resize' listener
+  // above never hears about them and the reflow slid the page by thousands of
+  // px. Watch the column itself. Width only: its height changes whenever an
+  // image or diagram finishes loading, which reflows nothing above the anchor.
+  // The first callback (fired by observe()) sees the starting width and does
+  // nothing, so a load that lands on a #hash is never pulled back.
+  if (contentEl && typeof ResizeObserver === 'function') {
+    lastAnchorColW = contentEl.clientWidth;
+    new ResizeObserver(function () {
+      var w = contentEl.clientWidth;
+      if (w === lastAnchorColW) return;
+      lastAnchorColW = w;
+      holdScrollAnchor();
+    }).observe(contentEl);
+  }
+
   captureScrollAnchor();
 
   // ── drawio sheet bar ─────────────────────────────────────────────────────
@@ -5919,8 +6032,8 @@ ${usesDrawioMultiPage ? `  // v3.4.0 batch2 Task 6: wired through a NAMED, reusa
     await drawioBrowser.closeIfOpen();
   }
   // v3.9.0 dark mode: a post-pass over the finished reader HTML (lib/theme/).
-  // Edit mode is light-only; noTheme is an internal switch for the light-lock test.
-  if (!opts.editMode && !opts.noTheme) bakedHtml = applyReaderTheme(bakedHtml);
+  // v3.10.0: edit mode is themed too. noTheme is an internal switch for the light-lock test.
+  if (!opts.noTheme) bakedHtml = applyReaderTheme(bakedHtml);
   return {
     html: bakedHtml, bodyHtml: bakedBody, parts, blocks,
     // v3.4.0 batch2 Task 6: an added field, not a shape change to the four