@helping-ai-workflow/md2doc 2.11.0 → 2.12.0

package/lib/editor/indent-clamp.js

@@ -30,7 +30,12 @@
   //                  §3.4's global convention). For a multi-block operation
   //                  this is the SMALLEST old indent in the set — anchoring on
   //                  the first member instead drives later members negative on
-  //                  a delete and no-ops an entire batch Tab.
+  //                  a delete (§3.4 rule 3's first worked failure). It is the
+  //                  bound for the blocks BELOW the set only; how far the set
+  //                  ITSELF may move is a separate question the caller answers
+  //                  (client.js batchIndentDelta(), which since the 2026-08-31
+  //                  D1 review takes the minimum head-room across ALL members,
+  //                  not the head-room of this shallowest one).
   //   opts.removed          — the operated block(s) no longer exist.
   //   opts.operatedBecomes  — the operated block is still there but is no
   //                           longer a list item (§3.3 conversion); the value

package/lib/editor/list-md.js

@@ -377,6 +377,61 @@
     return n > 0 ? new Array(n + 1).join(' ') : '';
   }
 
+  // ── The setext-underline hazard on an EMPTY bulleted item ───────────────
+  // An empty item is emitted as a BARE marker ('-', no trailing space): '- '
+  // lexes as a PARAGRAPH, which is why lib/editor/client.js's
+  // BLOCK_SKELETONS.list is a bare marker too, and that reasoning is not being
+  // undone here. But CommonMark gives that same bare '-' a SECOND reading, and
+  // which one wins is decided by the line ABOVE it: an EMPTY list item may not
+  // interrupt a paragraph, and a line consisting of nothing but '-' standing
+  // at an open paragraph's own content column is a SETEXT H2 UNDERLINE.
+  //
+  // That is exactly the line an indent produces. `- beta` + Enter + Tab wrote
+  //
+  //     - alpha
+  //     - beta
+  //       -
+  //
+  // and marked (14.1.4) reads it back as `<li><h2>beta</h2></li>`: the new
+  // item is gone and the parent's text has been re-typed as a heading. Two
+  // ordinary keystrokes, silent content destruction, measured on 2.11.0.
+  //
+  // The hazard is POSITIONAL, not a property of the marker. It exists only
+  // where the previously emitted line is a paragraph at this line's own
+  // column, which inside a run means precisely "this item is the FIRST item of
+  // a deeper nesting" (`prev.indent < indent`) — the parent's own text (or its
+  // lazy continuation) is then the line immediately above, and a child's
+  // marker column IS the parent's content column by construction. An empty
+  // item that follows a SAME-level sibling is safe (the line above is a marker
+  // line, so '-' can only be another marker there), and so is one whose
+  // predecessor is deeper.
+  //
+  // Every other shape is left byte-identical:
+  //   * ordered — '1.' is not a run of dashes, so it is not a setext underline;
+  //   * task    — a content-free task item never emits a marker line at all
+  //               (it becomes `pending`, a same-line prefix), which is what the
+  //               `head === indentPrefix + marker` test below detects;
+  //   * non-empty items, and every empty item at top level.
+  //
+  // The escape is a U+200B ZERO WIDTH SPACE: real, non-whitespace content to
+  // the block lexer (so the line is a list item, not an underline) and nothing
+  // at all to a reader. It is the same trade-off client.js already documents
+  // for BLOCK_SKELETONS.paragraph. It never becomes part of the user's text:
+  // lib/md2doc.js's edit-mode list renderer renders a U+200B-only item as an
+  // EMPTY surface, so the next keystroke lands in an empty item, and the
+  // itemMd normalisation above takes the character back off on the way out.
+  const SETEXT_ESCAPE = '\u200b';
+  const SETEXT_ESCAPE_RE = /^\u200b+$/;
+  function escapeSetextHazard(firstOwnLine, ctx) {
+    if (firstOwnLine !== '') return firstOwnLine;
+    if (ctx.listType !== 'ul' || ctx.isTask) return firstOwnLine;
+    // A `pending` task prefix has already been joined onto `head`, so the line
+    // is not a bare run of dashes and needs nothing.
+    if (ctx.head !== ctx.indentPrefix + ctx.marker) return firstOwnLine;
+    if (!ctx.prev || ctx.indent <= ctx.prev.indent) return firstOwnLine;
+    return SETEXT_ESCAPE;
+  }
+
   // `opts.carryOver` (spec §3.4, 多行 li 的旁觀者規則): a map of block id →
   // that block's ORIGINAL source lines. A hard-wrapped item named there is NOT
   // re-serialized; its own bytes are replayed with the column difference of its
@@ -536,6 +591,15 @@
         const res = inlineMd.serializeInline({ childNodes: inlineKids });
         itemMd = res.md;
         res.unsupported.forEach((u) => innerUnsupported.push(u));
+        // The other half of the SETEXT ESCAPE applied at the emission site
+        // below: a U+200B is this serializer's own way of saying "empty item
+        // in a position where a bare marker would re-lex as a heading
+        // underline", so this serializer is also the one that takes it back
+        // off. Without it, an escaped item that later moves somewhere the
+        // escape is not needed (Shift+Tab back to the top level) would keep a
+        // zero-width character it never asked for, and the item would stop
+        // reading as empty to every `itemMd === ''` test in this function.
+        if (SETEXT_ESCAPE_RE.test(itemMd)) itemMd = '';
       }
 
       // Anything in the block that is neither chrome nor the text surface is
@@ -717,7 +781,10 @@
         prev = { indent: indent, listType: listType };
         return;
       }
-      lines.push((head + ownLines[0]).replace(/[ \t]+$/, ''));
+      lines.push((head + escapeSetextHazard(ownLines[0], {
+        head: head, indentPrefix: indentPrefix, marker: marker,
+        listType: listType, isTask: isTask, indent: indent, prev: prev,
+      })).replace(/[ \t]+$/, ''));
       lineMeta.push({ blockId: blockId, indentPrefix: metaPrefix, marker: marker });
       for (let k = 1; k < ownLines.length; k++) {
         const body = ownLines[k].replace(/^[ \t]+/, '').replace(/[ \t]+$/, '');

package/lib/editor/selection.js

@@ -0,0 +1,204 @@
+'use strict';
+/* Spec §3.3 / §3.6 / §4.4 — block 多選的純模型.
+   UMD, same shape as indent-clamp.js: `require`-able in node for the unit
+   tests, and injected into the editor page as `window.md2docSelection`. */
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory();
+  else root.md2docSelection = factory();
+})(typeof self !== 'undefined' ? self : this, function () {
+
+  // A selection's identity is a LINE RANGE — never block ids, never DOM nodes.
+  // buildBlockMap() renumbers every id from 0 on every render (blockmap.js:170)
+  // and every batch operation triggers a full rerenderAll(), so an id or an
+  // element held across a commit is a dangling reference into a document that
+  // no longer exists. Every post-commit recovery path already in client.js
+  // (blockElAtLine, reresolveBlockEl, focusBlockAtLine) goes through startLine
+  // for exactly this reason. Nothing in this file reads the DOM, and nothing
+  // outside it may hand this file an id.
+  //
+  //   a selection   — { anchorLine, focusLine }, or null for "nothing selected"
+  //   a block       — a record from buildBlockMap(): { id, type, startLine,
+  //                   endLine, ... }. Read here for startLine/endLine only;
+  //                   `id` is passed through untouched for the caller's own use.
+  //   `blocks`      — the whole live block list, in document order.
+
+  // ── the no-line exclusion ────────────────────────────────────────────
+  // buildBlockMap emits a block for the OUTER item of a same-line nest
+  // ("- - a" -> outer {startLine:3, endLine:2}, inner {startLine:3,
+  // endLine:3}), and its range is INVERTED because it owns no source line of
+  // its own. Such a block has no line for a range to touch, so it can never be
+  // a member of a line-range selection. This is the same predicate as
+  // blockOwnsNoLine() in client.js:928, which is the guard every structural
+  // path in the editor already checks before it writes bytes.
+  function ownsALine(b) {
+    return !!b && typeof b.startLine === 'number' && typeof b.endLine === 'number'
+      && b.endLine >= b.startLine;
+  }
+
+  function lineOf(v) {
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  }
+
+  // ── normalize ────────────────────────────────────────────────────────
+  // Orders anchor/focus into the {startLine, endLine} shape the block records
+  // and the UndoStack op shape already use, so the two never have to be
+  // mentally converted at a call site. Returns null rather than a NaN range
+  // for "no selection" — a NaN range compares false against everything and
+  // would silently produce an empty member set that looks like a real answer.
+  function normalize(sel) {
+    if (!sel) return null;
+    const a = lineOf(sel.anchorLine);
+    const f = lineOf(sel.focusLine);
+    if (a === null || f === null) return null;
+    return { startLine: Math.min(a, f), endLine: Math.max(a, f) };
+  }
+
+  // ── membership ───────────────────────────────────────────────────────
+  // Membership is INTERSECTION, not containment: a multi-line block touched
+  // anywhere is wholly selected. Block selection has no partial state (§3.6 —
+  // the visual is a tint over whole blocks), so a code fence whose middle line
+  // is in range is in the set exactly as much as a one-line paragraph is.
+  // Returns block RECORDS in document order, never ids and never elements.
+  function membersOf(sel, blocks) {
+    const r = normalize(sel);
+    if (!r) return [];
+    return (blocks || []).filter(
+      (b) => ownsALine(b) && b.startLine <= r.endLine && b.endLine >= r.startLine);
+  }
+
+  // There is deliberately NO per-block `isSelected()` here. One existed until
+  // 2026-08-31 and never had a production caller in `lib/`: every paint and
+  // every operation asks membersOf() for the whole set at once, because a batch
+  // needs the set's contiguity and its index range, not N independent yes/no
+  // answers. Its assertions were all over SINGLE-line blocks, so the
+  // intersection-not-containment rule was pinned by membersOf()'s multi-line
+  // fixture alone and nothing was lost by removing it. A future caller that
+  // genuinely wants one block's answer should re-add it WITH that caller and
+  // with a multi-line fixture, rather than inherit an untested export.
+
+  // ── extendTo ─────────────────────────────────────────────────────────
+  // Shift+Click and a drag both move the FOCUS and keep the anchor where the
+  // gesture started; that is what makes a selection reversible by dragging
+  // back. With no prior selection there is no anchor to keep, so the gesture
+  // starts one collapsed at that line.
+  function extendTo(sel, line) {
+    const l = lineOf(line);
+    if (l === null) return sel || null;
+    const a = sel ? lineOf(sel.anchorLine) : null;
+    return { anchorLine: a === null ? l : a, focusLine: l };
+  }
+
+  // ── stepFocus ────────────────────────────────────────────────────────
+  // §4.4's Shift+↑↓. Moves by BLOCK, not by line: blocks do not tile the
+  // document (blank separator lines belong to nothing), so a per-line step
+  // would park the focus on a line that owns no block and collapse the set to
+  // nothing on the way past. Blocks that own no source line are skipped for
+  // the same reason membersOf() excludes them — landing on one would leave a
+  // selection whose member set is empty.
+  //
+  // Clamped at both ends: stepping past either end is a no-op, never an error
+  // and never a wrap. `dir` is any negative number for up, anything else down.
+  function stepFocus(sel, blocks, dir) {
+    if (!sel) return sel || null;
+    const nav = (blocks || []).filter(ownsALine);
+    if (!nav.length) return sel;
+    const focus = lineOf(sel.focusLine);
+    if (focus === null) return sel;
+    const step = dir < 0 ? -1 : 1;
+
+    // The focus normally sits exactly on a block's startLine, because that is
+    // what this function and the gesture handlers write. If it does not (a
+    // caller resolved a raw click y-coordinate, say), take the nearest block
+    // at or after it, and the last block when the line is past the end.
+    let i = nav.findIndex((b) => b.startLine === focus);
+    if (i === -1) i = nav.findIndex((b) => b.startLine > focus);
+    if (i === -1) i = nav.length - 1;
+
+    const j = Math.max(0, Math.min(nav.length - 1, i + step));
+    return { anchorLine: sel.anchorLine, focusLine: nav[j].startLine };
+  }
+
+  // ── §3.3's membership rule ───────────────────────────────────────────
+  // "grip 在選取集合內 → 作用整個集合；grip 在集合外 → 先把集合換成該單一
+  // block 再作用." One helper so every operation asks the question the same
+  // way instead of each menu handler re-deriving it.
+  //
+  // `opBlock` MUST be a record out of `blocks` — identity is by reference, not
+  // by id (this module never touches ids) and not by line tuple (a nest three
+  // deep like "- - - a" produces two structurally identical phantoms, so a
+  // tuple compare is genuinely ambiguous). A record from anywhere else answers
+  // 'single', which is the conservative direction: it operates on one block
+  // rather than silently on N.
+  //
+  // "By reference" is a TESTED contract, not a description of the current line
+  // of code. `id` is passed through untouched and never compared, so a shallow
+  // COPY of a member — same id, same lines, different object — is a different
+  // block here and answers 'single'. test/selection.test.js pins exactly that
+  // case, because it is the only fixture that separates this from
+  // `members.some((m) => m.id === opBlock.id)`: every other fixture in the
+  // suite hands in a record straight out of `blocks`, where the two agree.
+  //
+  // A selection of exactly the grip block is 'batch' with one member, not a
+  // fallthrough to 'single'. The two answers are byte-identical for a single
+  // block today, but a caller that special-cased size 1 would drift the moment
+  // batch and single paths diverge.
+  function resolveMembership(sel, blocks, opBlock) {
+    const members = membersOf(sel, blocks);
+    if (opBlock && members.indexOf(opBlock) !== -1) return { mode: 'batch', members };
+    return { mode: 'single', members: opBlock ? [opBlock] : [] };
+  }
+
+  // ── collapseTo ───────────────────────────────────────────────────────
+  // §3.3: "操作後集合塌縮為「操作結果所涵蓋的行區間」". Every structural
+  // operation declares the line range it produced; rerenderAll() re-derives
+  // the member set from that range against the freshly built block list. §4.4:
+  // if the range does not resolve, the selection is CLEARED rather than left
+  // dangling — an operation that removed everything it touched declares an
+  // empty (inverted) range, and that is not a selection of one line.
+  function collapseTo(range) {
+    if (!range) return null;
+    const s = lineOf(range.startLine);
+    const e = lineOf(range.endLine);
+    if (s === null || e === null || e < s) return null;
+    return { anchorLine: s, focusLine: e };
+  }
+
+  // ── spanIsContiguous ─────────────────────────────────────────────────
+  // Batch convert/delete/duplicate rewrite their single-item entry points to
+  // take ONE contiguous index range — a loop would re-render between items and
+  // invalidate every id in between, which is the defect class recorded at
+  // client.js:3298 and :4806. This is the gate that says a set can be
+  // expressed that way.
+  //
+  // Indices are taken over the WHOLE `blocks` list, phantoms included. A
+  // no-line phantom sitting between two members ('- a\n- - b\n- c\n' ->
+  // li{1,1} | phantom{2,1} | li{2,2} | li{3,3}) is never a member, but it IS
+  // in the DOM run a batch operation would slice, and every structural path
+  // already refuses a phantom (blockOwnsNoLine). Reporting false there hands
+  // the caller a refusal instead of a range it cannot honour.
+  function spanIsContiguous(members, blocks) {
+    const list = members || [];
+    if (list.length <= 1) {
+      // 0 members has no gap to find; the caller checks emptiness itself,
+      // because "nothing selected" and "a set with a hole in it" deserve
+      // different messages.
+      return list.every((m) => (blocks || []).indexOf(m) !== -1);
+    }
+    const idx = list.map((m) => (blocks || []).indexOf(m));
+    if (idx.some((i) => i < 0)) return false;
+    idx.sort((a, b) => a - b);
+    for (let k = 1; k < idx.length; k++) if (idx[k] !== idx[k - 1] + 1) return false;
+    return true;
+  }
+
+  return {
+    normalize,
+    membersOf,
+    extendTo,
+    stepFocus,
+    resolveMembership,
+    collapseTo,
+    spanIsContiguous,
+  };
+});

package/lib/editor/server.js

@@ -23,6 +23,12 @@ const INDENT_CLAMP_SRC = fs.readFileSync(path.join(__dirname, 'indent-clamp.js')
 // indent-clamp.js above — it only has to land before client.js reads
 // window.md2docConvertMd.
 const CONVERT_MD_SRC = fs.readFileSync(path.join(__dirname, 'convert-md.js'), 'utf8');
+// S3 spec §3.3/§3.6/§4.4: the pure block multi-select model — line-range
+// normalization, membership, Shift+arrow stepping, the §3.3 grip rule and the
+// post-operation collapse. Same "no dependency on any other editor module"
+// property as indent-clamp.js and convert-md.js above; it only has to land
+// before client.js reads window.md2docSelection.
+const SELECTION_SRC = fs.readFileSync(path.join(__dirname, 'selection.js'), 'utf8');
 
 function readJson(req, limitBytes = 50 * 1024 * 1024) {
   return new Promise((resolve, reject) => {
@@ -159,6 +165,7 @@ async function createEditorServer({ files, idleTimeoutMs = 30000, clientJs = '',
           `<script>${HISTORY_SRC}</script>\n` +
           `<script>${INDENT_CLAMP_SRC}</script>\n` +
           `<script>${CONVERT_MD_SRC}</script>\n` +
+          `<script>${SELECTION_SRC}</script>\n` +
           `<script>${clientJs}</script>\n`;
         // Splice at the LAST "</body>" — the document's real closing tag.
         // The first occurrence can sit inside an inlined diagram bundle's JS

package/lib/md2doc.js

@@ -284,6 +284,15 @@ function renderEditModeList(listToken, blocks, biRef, out) {
       // but would render as a phantom blank line inside the item.
       inner = marked.parser(ownTokens).trim();
     }
+    // The receiving half of list-md.js's SETEXT ESCAPE (see
+    // escapeSetextHazard() there): an empty list item that is the first child
+    // of a deeper nesting is written to disk as `- <U+200B>`, because a bare
+    // `-` on that line is a setext H2 underline for the parent's own text and
+    // destroys both blocks. The zero-width space is the serializer's, not the
+    // user's, so it is taken back off here — the surface renders EMPTY, which
+    // is what keeps the next keystroke from landing next to an invisible
+    // character and writing it back out inside the user's own text.
+    if (/^\u200b+$/.test(inner)) inner = '';
     const check = b.task
       ? `<span class="ed-li-check" data-checked="${b.checked ? 1 : 0}" role="checkbox" aria-checked="${!!b.checked}"></span>`
       : '';
@@ -1078,8 +1087,9 @@ ${itemsHtml}
   // (now reverted) "inset the row grip into the table" hack that ended up
   // covering the first cell's text. 56px of content padding plus moving the
   // gutter buttons out (⠿ to left:-36px, ＋ to left:-54px) separates them
-  // properly: the gutter pair occupies [contentLeft-54, contentLeft-18] and
-  // the 20px-wide row grip straddles contentLeft at
+  // properly: the gutter pair occupies [contentLeft-40, contentLeft-4]
+  // (v2.11.1; it was [contentLeft-54, contentLeft-18] until spec §4.2's own
+  // numbers were restored) and the 20px-wide row grip straddles contentLeft at
   // [contentLeft-10, contentLeft+10] — an 8px gap, and the grip's inner half
   // stays within the cell's own 14px padding, so it never touches cell text.
   // (The padding was 48px until §4.2's hit-test conflict 1 was fixed; see the
@@ -1133,7 +1143,11 @@ ${itemsHtml}
 
      8 more pixels of padding move the pair to [contentLeft-54,
      contentLeft-18] = [splitterRight+2, splitterRight+20], i.e. entirely
-     inside the content column with 2px of clearance. The 20px table row grip
+     inside the content column with 2px of clearance. (v2.11.1 pulled the pair
+     further in, to spec §4.2's own [contentLeft-40, contentLeft-4] — the
+     clearance is 16px at this padding rather than 2px. The padding stays at
+     56px: nothing asks for the text column to move, and this measurement is
+     the one the §4.2 conflict-1 guard is written against.) The 20px table row grip
      still straddles contentLeft at [contentLeft-10, contentLeft+10], so its
      8px gap to ⠿ is unchanged. Guarded by the elementFromPoint(splitter.right
      - 2, y) assertion §4.2 asks for, in
@@ -1210,8 +1224,66 @@ ${itemsHtml}
      reaches a negative viewport x and never covers the splitter. The 20px
      table row grip still straddles contentLeft at
      [contentLeft-10, contentLeft+10] - an 8px gap, unchanged. */
-  .ed-handle { left: -36px; top: 0; }
-  .ed-insert { left: -54px; top: 0; }`;
+  /* Stated ONCE, as tokens, because §4.2's three numbers are not independent:
+     the gutter is exactly two buttons wide plus the deliberate right-hand
+     breathing gap, and the hover zone below is exactly the gutter. 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-w: calc(var(--ed-gutter-btn) * 2 + var(--ed-gutter-gap));
+  }
+  .ed-handle {
+    left: calc(-1 * (var(--ed-gutter-btn) + var(--ed-gutter-gap))); top: 0;
+    width: var(--ed-gutter-btn);
+  }
+  .ed-insert {
+    left: calc(-1 * var(--ed-gutter-w)); top: 0;
+    width: var(--ed-gutter-btn);
+  }
+  /* v2.11.1: the gutter's HOVER ZONE, and it is the reason the pair could move
+     back to spec §4.2's own numbers at all.
+
+     Both buttons are revealed by .ed-block:hover, and :hover is true only
+     over the block's border box or over one of the buttons themselves. At
+     -36/-54 that left the band [blockLeft-18, blockLeft) belonging to neither:
+     measured at 1400x900, elementFromPoint() returned main.content for
+     x 394..411, and a real pointer walking out of the text at 100 px/s held
+     the ⠿ at opacity 0 for 16 consecutive frames (~270 ms) — the cursor is
+     between the text and the ⠿ and the ⠿ is not there. Conforming to §4.2
+     ([contentLeft-40, contentLeft-4], the ＋ and ⠿ flush, 4px of breathing
+     room on the right) narrows that band to the 4px gap but does not close it:
+     with the pair moved and this rule taken back out, a 2px-per-frame walk
+     across the same row measured 0.06 / 0.49 / 0.53 at three of its 23 stops —
+     a flicker instead of a disappearance, but still the ⠿ dimming under the
+     cursor that is travelling to it. Geometry alone cannot close it, because §4.2's 4px gap is
+     deliberate (5.3 item 3a's elementFromPoint must land ON the ⠿).
+
+     Two more holes have the same shape and the same cure: the buttons are 20px
+     tall at top:0 while an li row is 24.75px, so the bottom ~4.75px of EVERY
+     row is an empty gutter; and a 61.5px heading's vertical centre is 20px
+     below the bottom of its own ⠿, so moving left from the middle of a heading
+     never reached anything at all.
+
+     One absolutely-positioned pseudo-element spanning the whole gutter for the
+     block's whole height makes :hover continuously true from the text out
+     past the ＋, at every Y. Its width is the --ed-gutter-w token the pair's
+     own offsets are built from, so the two cannot drift apart — if they do,
+     the corridor comes straight back.
+     .ed-block is already position:relative, and position: absolute keeps
+     this out of the li row's flex flow. It is deliberately NOT
+     pointer-events: none: that would stop it being hit-tested, which is the
+     entire mechanism. It therefore also changes what a click in the band
+     hits (main.content -> the block), which wireBlockSelection() in
+     lib/editor/client.js compensates for explicitly — see the
+     clientX-vs-block-rect guard just above its "clicked outside any block"
+     branch. (No backticks in this comment: it lives inside a JS template
+     literal.) */
+  .ed-block::before {
+    content: ""; position: absolute;
+    left: calc(-1 * var(--ed-gutter-w)); top: 0;
+    width: var(--ed-gutter-w); height: 100%;
+  }`;
 
   const html = `<!DOCTYPE html>
 <html lang="en">
@@ -1978,6 +2050,36 @@ ${itemsHtml}
      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).
+
+     The descendant rules and their !important are not decoration, they are
+     the whole problem: <pre> (#f6f8fa), <th> (#f6f8fa), the zebra stripe
+     tr:nth-child(even) (#fafbfc) and the sticky first column (#ffffff) all
+     carry OPAQUE backgrounds, and the sticky column additionally paints at
+     z-index: 1 over anything drawn beneath it. Two of those beat a plain
+     descendant selector on specificity alone — counted:
+     .content table tbody tr:nth-child(even) td:first-child is (0,3,4)
+     against this rule's (0,3,2), and .content table tbody td:first-child is
+     (0,2,3) against the same (0,3,2) — so without !important the tint is
+     invisible on exactly the blocks a user is most likely to select. .ed-te-hl
+     needed the identical treatment for the identical reason. This ADDS rules
+     rather than reordering the sticky/zebra/header set, which CLAUDE.md says
+     wins by source order and must not be moved.
+     (No backticks in this comment: it lives inside a JS template literal.)
+
+     :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 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: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
      real newline, and its .ed-li-text is an editing host. Under the default
@@ -2039,7 +2141,9 @@ ${itemsHtml}
   .ed-block:hover .ed-handle,
   .ed-handle:focus { opacity: 1; }
   .ed-handle:hover { background: rgba(0, 0, 0, 0.08); }
-  /* The ⠿ handle's menu: 轉換成 › / 複製 / 刪除 / MD 原始碼 (spec §3.7).
+  /* 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).
      Dark translucent panel, bordered rows — same visual language as
      .ed-seltb below.
 
@@ -2063,7 +2167,23 @@ ${itemsHtml}
     background: rgba(255, 255, 255, 0.08); 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
+       centre line and a fixed gap. The row is still one flex item of the
+       column above, and align-items: stretch there keeps every row the same
+       width, so S2's one-left-edge / monotonic-top invariants are untouched.
+       The submenu's own buttons carry this class and no icon; a lone text node
+       is an anonymous flex item at flex-start, i.e. exactly where text-align
+       put it. */
+    display: flex; align-items: center; gap: 8px;
+  }
+  /* Notion's own sizing. The stroke colour is NOT set here on purpose: the
+     markup carries stroke="currentColor" (lib/editor/client.js), so the icon
+     is whatever colour .ed-handle-menu's own color property is, and follows a
+     retheme for free. A hex here would break that silently. (No backticks in
+     this comment: it lives inside a JS template literal.)
+     flex: 0 0 auto because a 16px-wide flex item next to a nowrap label
+     would otherwise be the thing that shrinks. */
+  .ed-menu-icon { flex: 0 0 auto; width: 16px; height: 16px; }
   /* The 轉換成 submenu carries BOTH classes, so it inherits every rule above
      and only overrides the horizontal offset. It is a CHILD of the menu, and
      the menu is itself position:absolute, so the menu's own padding box is
@@ -2086,7 +2206,9 @@ ${itemsHtml}
      wording allows this ("left gutter, above or beside it").
 
      S1 Task 5 (D6): edit mode now overrides BOTH buttons to sit side by side
-     (＋ at left:-54px, ⠿ at left:-36px, both top:0) — see editModeLayoutCss.
+     (v2.11.1, spec §4.2's own numbers: ＋ at left:-40px, ⠿ at left:-22px,
+     both top:0, plus a .ed-block::before hover zone spanning the pair) — see
+     editModeLayoutCss.
      That became possible only once .content gained 48px of edit-mode padding;
      the stacked geometry declared here is what any NON-edit render would use,
      and those never emit .ed-block at all, so it is inert there. Kept rather

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/blockmap.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/lightbox-anno.test.js && node test/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js && node test/convert-md.test.js && node test/render-api.test.js && node test/lineops.test.js && node test/indent-clamp.test.js && node test/editmode-render.test.js && node test/editmode-wavedrom-reinit.test.js && node test/editor-server.test.js && node test/cli-edit.test.js && node test/open-viewer.test.js && node test/editor-client.test.js && node test/editor-client-runtime.test.js && node test/roundtrip.test.js && node test/byte-stability.test.js && node test/editor-server-throw.test.js && node test/editor-reader-rebind.test.js && node test/inline-md.test.js && node test/table-md.test.js && node test/gate-compat.test.js && node test/history.test.js && node test/list-md.test.js"
+    "test": "node test/md2doc.test.js && node test/blockmap.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/lightbox-anno.test.js && node test/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js && node test/convert-md.test.js && node test/render-api.test.js && node test/lineops.test.js && node test/indent-clamp.test.js && node test/selection.test.js && node test/editmode-render.test.js && node test/editmode-wavedrom-reinit.test.js && node test/editor-server.test.js && node test/cli-edit.test.js && node test/open-viewer.test.js && node test/editor-client.test.js && node test/editor-client-runtime.test.js && node test/roundtrip.test.js && node test/byte-stability.test.js && node test/editor-server-throw.test.js && node test/editor-reader-rebind.test.js && node test/inline-md.test.js && node test/table-md.test.js && node test/gate-compat.test.js && node test/history.test.js && node test/list-md.test.js"
   },
   "repository": {
     "type": "git",