@helping-ai-workflow/md2doc 3.4.0 → 3.5.0

package/lib/editor/wave-ui.js

@@ -57,8 +57,50 @@
 
   const SVGNS = 'http://www.w3.org/2000/svg';
 
-  /** The brush palette, exactly the set the spec names, in that order. */
-  const BRUSHES = ['0', '1', 'x', 'z', 'p', 'n', 'h', 'l', 'u', 'd', '='];
+  /**
+   * The brush palette, exactly the set the spec names, in that order.
+   *
+   * v3.5.0 Task 10 widened this from 11 to 22: `P`/`N` (explicit-edge
+   * clocks — see the arrow measurement in `drawLane`'s isClock branch),
+   * `2`-`9` (bus levels beyond the plain `=`, already understood by
+   * `brickOf` and `codec.levelsOf` but never offered as a brush), and `|`
+   * (the gap marker) placed last because it is not a level at all —
+   * `codec.levelsOf('=.|')` measured it as "carry the previous level", so
+   * painting it does not change what a cycle shows, only that it shows a
+   * discontinuity.
+   */
+  const BRUSHES = ['0', '1', 'x', 'z', 'p', 'n', 'P', 'N', 'h', 'l', 'u', 'd',
+    '=', '2', '3', '4', '5', '6', '7', '8', '9', '|'];
+
+  /**
+   * Whether a `KeyboardEvent.key` value both PICKS and PAINTS a brush —
+   * `handleDrawingKey` (below `enterDrawing`) tests this exact call, not a
+   * copy of it, so the admission rule and what the keyboard can actually
+   * reach cannot drift apart the way the module's own prologue warns about
+   * (rule 3: two beliefs about the same thing is the failure this batch
+   * keeps producing). Named and exported on its own so a test can pin
+   * "every brush is keyboard-reachable" against the real rule instead of a
+   * re-implementation of it — see `wave-codec.test.js`'s
+   * `isBrushKey`-roster assertion.
+   *
+   * `key.length === 1` is what actually excludes navigation: every
+   * `BRUSHES` entry is one character, while `ArrowLeft`/`ArrowRight`/
+   * `ArrowUp`/`ArrowDown`/`Home`/`End` are multi-character key NAMES, so
+   * `BRUSHES.indexOf(key)` is already `-1` for all six regardless of this
+   * length check — it is kept anyway so that invariant is spelled out at
+   * the point of use rather than left to rely on `BRUSHES` never growing a
+   * multi-character entry by mistake. Deliberately NOT keyed on
+   * `ev.shiftKey`: v3.5.0 Task 10 added `P`/`N` (and `|` sits next to `\`
+   * on a US layout) to `BRUSHES`, and all three are typed WITH Shift on an
+   * ordinary keyboard, so a shiftKey exclusion here would make them
+   * mouse-only — see Task 10's fix-round report for the full reasoning on
+   * why dropping it does not reopen the Shift+arrow risk the old comment
+   * named (that risk is excluded above, by `nav`, on `key` identity, not on
+   * `ev.shiftKey`).
+   */
+  function isBrushKey(key) {
+    return typeof key === 'string' && key.length === 1 && BRUSHES.indexOf(key) !== -1;
+  }
 
   /** Drawing sizes. Handed to `wave-geometry` so the hit test and the paint
    *  cannot drift; nothing here re-derives a row position. */
@@ -227,6 +269,29 @@
     return out;
   }
 
+  /**
+   * v3.5.0 Task 12: the lowest display position inside `span`'s range whose
+   * lane is a DIRECT member of `span`'s own group array — one nested exactly
+   * one level deeper than `span.path` — rather than one that lives inside a
+   * sub-group `span` merely contains. This is the one lane `codec.ungroupLanes`
+   * can be asked about to name THIS group and not some inner one: a lane's
+   * immediate parent is unambiguous (see that function's own comment), so a
+   * group is addressable through it exactly when it has at least one lane
+   * that belongs to it directly.
+   *
+   * `null` when it does not — a group built entirely out of sub-groups, with
+   * no lane of its own at any depth of one. That group's tag still renders
+   * (it has a title, and `groupSpansOf` shows every titled one), but nothing
+   * in the rail offers to dissolve it, because there is no `at` this codec
+   * shape can express that names it and only it.
+   */
+  function directFirstLaneOf(layout, span) {
+    for (let i = span.from; i <= span.to; i++) {
+      if (layout.lanes[i].path.length === span.path.length + 1) return i;
+    }
+    return null;
+  }
+
   function valueAt(doc, path) {
     let node = doc;
     for (const seg of path) {
@@ -321,6 +386,102 @@
     // never end up pointing at different cells: painting with `1` after a click
     // paints the cell that was clicked.
     let cursor = null;
+    // The `edge` array entry the inspector row edits — the codec's ORIGINAL
+    // index into `doc.edge`, exactly what `geometry.edgeLayout` reports as
+    // `index` (NOT the filtered array position; a dangling entry ahead of it
+    // is skipped there and would otherwise shift everything after it out of
+    // step). Null means no edge is selected, and that is the whole of the
+    // inspector row's visibility rule — see `renderEdgeBar`. `render()`
+    // clamps it to null the moment the edge it names stops being drawable
+    // (deleted, or its entry no longer parses), so a stale index can never
+    // reach `renderEdgeBar` or a shape/label commit.
+    let selectedEdge = null;
+    // v3.5.0 Task 7: the edge-CREATION gesture's own state, shared verbatim
+    // by the pointer and the keyboard — one state machine, two input sources.
+    // `edgeMode` is explicit rather than inferred from "is a key held" or "is
+    // the mouse button down", for the same reason the brush canvas keeps
+    // `drag` as its own variable instead of asking `ev.buttons`: a painting
+    // drag and an edge-creation drag must never be read as each other, and a
+    // named mode is what lets `onCanvasDown` choose between them up front.
+    //   'idle'     — the 關聯線 button is off; every press paints or selects.
+    //   'armed'    — pressed once; the NEXT thing (a press, or a cell plus
+    //                Enter) marks the start of a line.
+    //   'dragging' — the mouse is down after that press; every move only
+    //                repaints a preview, the document is untouched.
+    // `pendingFrom` is the marked start cell, `{at, cell}` in the same two
+    // numbers `codec.ensureNode`/`geometry.cellRect` already take — the
+    // codec's flattened lane index and the cycle inside it. It is cleared
+    // only when `setEdgeMode` moves all the way back to 'idle': going back to
+    // 'armed' after a drop that produced nothing (rule 1 below) deliberately
+    // LEAVES it standing, so a keyboard user who marked a start and then
+    // pressed Enter over an empty row does not have to re-mark it — the next
+    // Enter still means "finish from where I already stood".
+    let edgeMode = 'idle';
+    let pendingFrom = null;
+    /** The one place `edgeMode` changes. Keeps the arm button's own visual
+     *  state, the overlay's `data-wave-edgemode` (what a test or a future
+     *  task reads instead of reaching into this closure) and the "is a start
+     *  cell marked" invariant all moving together. */
+    function setEdgeMode(next) {
+      edgeMode = next;
+      edgeBtn.setAttribute('aria-pressed', next === 'idle' ? 'false' : 'true');
+      edgeBtn.classList.toggle('is-on', next !== 'idle');
+      overlay.setAttribute('data-wave-edgemode', next);
+      if (next === 'idle') pendingFrom = null;
+    }
+    // v3.5.0 Task 8: dragging either END of the SELECTED edge to another
+    // cell. `{index, end, at, cell} | null` — `index` is the same original
+    // `doc.edge` index `selectedEdge` names (a drag can only start from that
+    // edge's own drawn handle, see `onCanvasDown`), `end` is `'from'` or
+    // `'to'`, and `at`/`cell` are the live drop target, `null` until the
+    // first `pointermove` lands on a real cell.
+    //
+    // Unlike `edgeMode`/`pendingFrom` — two separate variables that Task 7
+    // spent three fix rounds re-synchronising after one could go stale while
+    // the other stood — this is ONE variable that is both "is a drag
+    // happening" and "what does it know so far". There is no second flag to
+    // fall out of step with it: `onCanvasMove`/`onCanvasUp` test this value
+    // itself, so nulling it is the whole of cancelling the gesture, in one
+    // place, atomically. It still has to be threaded through the same two
+    // places Task 7's marks are, though, because the hazard those rounds
+    // found is not particular to `pendingFrom` — it is "a mark naming a lane
+    // outlives the document that lane numbering was valid in":
+    //   - `carryMarks` below carries `at` by lane IDENTITY, exactly like
+    //     `pendingFrom.at`, for the same reason: a structural undo/redo can
+    //     land while this drag is in flight (the keyboard stays live while a
+    //     mouse button is held — Ctrl+Z does not care what the mouse is
+    //     doing), and a raw row number surviving that would let the eventual
+    //     drop's `moveEdgeEnd` bounds-check successfully against a lane the
+    //     user was never actually pointing at.
+    //   - `render()`'s own `selectedEdge` clamp is widened to drop this too:
+    //     `index` can only ever be reached from `selectedEdge`'s own drawn
+    //     handle, so the two may never disagree — a drag whose edge stops
+    //     being drawable (deleted, or its selection cleared by that same
+    //     mid-drag undo) has to die with it rather than commit a move onto
+    //     whatever entry now happens to sit at that array position.
+    let endpointDrag = null;
+    // v3.5.0 Task 12: which lane rows are Shift+click multi-selected on the
+    // rail, for「建立群組」— an array of display-position integers, in
+    // whatever order the clicks added them, or `null` when nothing is
+    // picked (never `[]`; the empty case is collapsed to `null` the moment
+    // the last member is toggled off, so every other mark's "is anything
+    // standing" check — a plain `!== null` — stays true of this one too).
+    //
+    // This is a fourth mark of the exact family `pendingFrom`/`endpointDrag`
+    // already are: a set of lanes the user has committed to for an upcoming
+    // STRUCTURAL edit, named by row number, which a reorder or an undo/redo
+    // can invalidate out from under it. So it is carried the same way —
+    // widening `carryMarks`'s guard and its `rowOf` lookup rather than
+    // growing a second belief about lane identity — and dropped the same
+    // way: an entry that cannot be traced to a surviving lane is removed
+    // from the set rather than left pointing at whatever now sits at that
+    // row. `cursor`'s "leave the stale number, let `renderCanvas` clamp it"
+    // is the wrong instinct here for the reason `pendingFrom`'s own comment
+    // gives — this mark feeds a structural op (`groupLanes`) the moment the
+    // button is pressed, not a screen position, and a stale member silently
+    // renumbering onto an unrelated lane would group a lane the user never
+    // selected with nothing on screen saying so.
+    let laneMultiSelect = null;
     // The document the marks' lane numbers are numbers INTO.
     //
     // `cursor` and `selection` name a ROW, and a row number means a different
@@ -344,6 +505,14 @@
     // a rename field ran `close('escape')` and threw the WHOLE session away,
     // which is the most expensive answer available to「我改名改到一半不想改了」.
     let groupRename = null;
+    // v3.5.0 Task 11: the bus data-label field while it is open — this
+    // dialog's OTHER sub-panel, same shape as `groupRename` above (a
+    // `{cancel, retire}` pair) and layered the same way in `onKeyDown`'s
+    // Escape handling. Unlike the rail's rename field, this one's node lives
+    // beside the canvas SVG that `renderCanvas` rebuilds on every cursor
+    // move, not only on a structural edit — so `retire()` is called from
+    // THERE, not only from `render()` (see `renderCanvas`'s own first line).
+    let dataEdit = null;
 
     // ── the modal focus model ─────────────────────────────────────────────
     //
@@ -461,6 +630,7 @@
       if (closed) return;
       closed = true;
       drag = null;
+      endpointDrag = null;
       if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
       d.removeEventListener('keydown', onKeyDown, true);
       d.removeEventListener('mousemove', onCanvasMove, true);
@@ -530,6 +700,27 @@
         // user had made, and the one Ctrl+Z that takes a discard back is not
         // something the keystroke announces.
         if (groupRename !== null) { groupRename.cancel(); return; }
+        // v3.5.0 Task 11: the bus data-label field, this dialog's OTHER
+        // text sub-panel — same layering reason as `groupRename` just
+        // above: without this, Escape typed while labelling a bus value
+        // discarded the whole editing session instead of just the field.
+        if (dataEdit !== null) { dataEdit.cancel(); return; }
+        // v3.5.0 Task 7: the armed/dragging edge gesture is this dialog's
+        // OTHER sub-panel-shaped thing — not a text field, but still a
+        // half-done action standing in front of the dialog's own Escape.
+        // Cancelling it never touches the document (rule 2: nothing was
+        // written yet), so there is no undo step to leave behind either.
+        if (edgeMode !== 'idle') { setEdgeMode('idle'); render(); return; }
+        // v3.5.0 Task 8: a third sub-panel-shaped thing, same rule — the
+        // document is untouched during an endpoint drag (rule 3), so
+        // cancelling it is nulling the one variable that both is and knows
+        // the drag, then a repaint. The mousemove/mouseup listeners are left
+        // attached exactly as `edgeMode`'s own cancel above leaves them:
+        // `onCanvasUp` unconditionally removes both at its very first line
+        // whenever the button eventually comes up, so a stray move in
+        // between finds `endpointDrag === null`, falls through every other
+        // branch and repaints nothing — no listener leak, no second rule.
+        if (endpointDrag !== null) { endpointDrag = null; render(); return; }
         close('escape');
         return;
       }
@@ -756,6 +947,57 @@
       afterStoreMoved('redo');
     });
 
+    // v3.5.0 Task 12: wrap the current Shift+click multi-select (see
+    // `laneMultiSelect` above, and `laneRow` below for the gesture itself)
+    // into one new group. The codec is the one that decides contiguity —
+    // this button does not pre-filter what is selectable, it only decides
+    // whether there is enough of a selection to bother trying, so the
+    // refusal message the user actually needed ("these lanes are not next
+    // to each other") comes from `commit`'s own status line rather than
+    // being silently swallowed here.
+    //
+    // The group is created with an EMPTY label and the rename field is
+    // opened immediately — the same affordance `insertButton` already gives
+    // a brand new lane (empty `name`, keyboard straight into the field) —
+    // rather than a placeholder string the user has to notice and clear.
+    const groupBtn = toolButton('ed-wave-group-make', '建立群組',
+      '把左邊用 Shift+點 選起來的那幾條連續 lane 包成一個新群組', function () {
+        if (laneMultiSelect === null || laneMultiSelect.length < 2) {
+          say('先在左邊用 Shift+點 連續選至少兩條 lane，才有東西可以群組');
+          return;
+        }
+        const ats = laneMultiSelect.slice().sort(function (a, b) { return a - b; });
+        const minAt = ats[0];
+        const committed = commit('group-lanes', function (doc2) {
+          return codec.groupLanes(doc2, ats, '');
+        });
+        if (!committed) {
+          say('這幾條 lane 不連續（或選取已經失效），WaveJSON 的群組只能是連續的一段');
+          return;
+        }
+        laneMultiSelect = null;
+        // The commit above already repainted with the (now stale) highlight
+        // showing; one more repaint clears it before handing the keyboard to
+        // the rename field, the same two-step `renameGroup` itself already
+        // is — a rebuild first, then the sub-panel laid over what it built.
+        render();
+        const layout = geometry.layoutOf(store.doc, SIZES);
+        const spans = groupSpansOf(store.doc, layout);
+        for (const span of spans) {
+          if (span.from === minAt) { renameGroup(span); break; }
+        }
+      });
+
+    // v3.5.0 Task 7: arm the edge-creation gesture. One-shot in the sense
+    // that a drag which PRODUCES an edge disarms it (`finishEdgeDrag` below);
+    // pressing the button itself is a plain toggle, so a change of mind
+    // before ever pressing on the canvas costs one more click, not Escape.
+    const edgeBtn = toolButton('ed-wave-edge-arm', '關聯線',
+      '按一下武裝，然後從一格拖到另一格畫出關聯線（Escape 取消）', function () {
+        setEdgeMode(edgeMode === 'idle' ? 'armed' : 'idle');
+      });
+    setEdgeMode('idle');
+
     // head / foot — the document-level fields this drawing can honour.
     //
     // `config.hscale` USED to be a third field here and has been removed. The
@@ -802,9 +1044,139 @@
 
     const headInput = metaField('ed-wave-head-text', 'head', '上方標題');
     const footInput = metaField('ed-wave-foot-text', 'foot', '下方標題');
+    // v3.5.0 Task 13, fix round 1: the ruler fields — the COMPLETE set, not
+    // the three Task 13's own brief happened to name. Measured directly
+    // against the pinned engine rather than recalled: `renderMarks` in
+    // `node_modules/wavedrom/lib/render-marks.js` calls
+    // `ticktock(lane, 'head', 'tick', ...)`, `ticktock(lane, 'head', 'tock',
+    // ...)`, `ticktock(lane, 'foot', 'tick', ...)` and
+    // `ticktock(lane, 'foot', 'tock', ...)` — all four, not just
+    // `head.tick`/`foot.tock` — and inside `ticktock` itself,
+    // `cxt[ref1].every` is read off whichever of `head`/`foot` `ref1` is, so
+    // `every` applies under BOTH, not only `head`. That is eight keys —
+    // `{head, foot} × {text, tick, tock, every}` — of which the first Task
+    // 13 round shipped five (`head.text`/`foot.text` from v3.4.0, plus
+    // `head.tick`/`head.every`/`foot.tock`). The three missing ones
+    // (`head.tock`/`foot.tick`/`foot.every`) are added here so the set is
+    // complete rather than an arbitrary subset a user cannot predict — "why
+    // can I put a tick above the diagram but not below it" is exactly the
+    // shape of bug five-of-eight invites.
+    //
+    // Labels are the literal WaveJSON PATH (`head.tick`, not bare `tick`),
+    // not just the leaf key the first round used — with only one of
+    // tick/tock/every ever existing under `head` (and the mirror one under
+    // `foot`), a bare leaf label could not be confused for its sibling; with
+    // all four now under both, `tick` alone would leave two fields on screen
+    // both labelled `tick` with no way to tell which of them draws above the
+    // diagram and which below. `head`/`foot` on the two `.text` fields stay
+    // bare, since those never had a same-named sibling to begin with.
+    // Grouped head-then-foot in DOM order (four fields, then four fields)
+    // rather than the first round's ad hoc growth order, for the same
+    // readability reason.
+    const headTickInput = metaField('ed-wave-head-tick', 'head.tick', '起始刻度，例如 0');
+    const headTockInput = metaField('ed-wave-head-tock', 'head.tock', '半格刻度起始值，例如 0');
+    const headEveryInput = metaField('ed-wave-head-every', 'head.every', '每幾格顯示一次刻度');
+    const footTickInput = metaField('ed-wave-foot-tick', 'foot.tick', '下方起始刻度，例如 0');
+    const footTockInput = metaField('ed-wave-foot-tock', 'foot.tock', '下方半格刻度起始值，例如 0');
+    const footEveryInput = metaField('ed-wave-foot-every', 'foot.every', '下方每幾格顯示一次刻度');
+
+    headInput.addEventListener('change', function () { commitBanner('head', 'text', headInput.value); });
+    footInput.addEventListener('change', function () { commitBanner('foot', 'text', footInput.value); });
+    headTickInput.addEventListener('change', function () { commitBanner('head', 'tick', headTickInput.value); });
+    headTockInput.addEventListener('change', function () {
+      commitBanner('head', 'tock', headTockInput.value);
+    });
+    headEveryInput.addEventListener('change', function () { commitBanner('head', 'every', headEveryInput.value); });
+    footTickInput.addEventListener('change', function () {
+      commitBanner('foot', 'tick', footTickInput.value);
+    });
+    footTockInput.addEventListener('change', function () { commitBanner('foot', 'tock', footTockInput.value); });
+    footEveryInput.addEventListener('change', function () {
+      commitBanner('foot', 'every', footEveryInput.value);
+    });
 
-    headInput.addEventListener('change', function () { commitBanner('head', headInput.value); });
-    footInput.addEventListener('change', function () { commitBanner('foot', footInput.value); });
+    // ── the edge inspector row ──────────────────────────────────────────
+    //
+    // Same rule as `renderUnmodelled` below: HIDDEN, with no box on screen at
+    // all, unless `selectedEdge` names one — `renderEdgeBar` is what flips
+    // `edgeBar.hidden` and it is only ever called from `render()`, so the two
+    // can never disagree. Built once here, like `headInput`/`footInput`
+    // above; `render()` repaints its VALUES on every pass through
+    // `renderEdgeBar`, and the usual `data-focus-key` / `restoreFocus` pair
+    // is what keeps a half-typed label from losing the caret on that repaint.
+    const edgeBar = d.createElement('div');
+    edgeBar.className = 'ed-wave-edgebar';
+    edgeBar.hidden = true;
+    toolbar.appendChild(edgeBar);
+
+    const shapeWrap = d.createElement('label');
+    shapeWrap.className = 'ed-wave-metafield';
+    const shapeWrapText = d.createElement('span');
+    shapeWrapText.textContent = '形狀';
+    shapeWrap.appendChild(shapeWrapText);
+    const shapeSel = d.createElement('select');
+    shapeSel.className = 'ed-wave-edge-shape';
+    shapeSel.setAttribute('data-focus-key', 'ed-wave-edge-shape');
+    for (const s of codec.EDGE_SHAPES) {
+      const o = d.createElement('option');
+      o.value = s;
+      o.textContent = s;
+      shapeSel.appendChild(o);
+    }
+    shapeSel.addEventListener('change', function () {
+      if (selectedEdge === null) return;
+      commit('edge-shape', function (doc) {
+        const cur = codec.parseEdge((doc.edge || [])[selectedEdge]);
+        if (cur === null) return doc;
+        return codec.updateEdge(doc, selectedEdge,
+          { from: cur.from, to: cur.to, shape: shapeSel.value, label: cur.label });
+      });
+    });
+    shapeWrap.appendChild(shapeSel);
+    edgeBar.appendChild(shapeWrap);
+
+    const edgeLabelWrap = d.createElement('label');
+    edgeLabelWrap.className = 'ed-wave-metafield';
+    const edgeLabelWrapText = d.createElement('span');
+    edgeLabelWrapText.textContent = '標籤';
+    edgeLabelWrap.appendChild(edgeLabelWrapText);
+    const edgeLabelInput = d.createElement('input');
+    edgeLabelInput.type = 'text';
+    edgeLabelInput.className = 'ed-wave-edge-label';
+    edgeLabelInput.setAttribute('data-focus-key', 'ed-wave-edge-label');
+    edgeLabelInput.placeholder = '這條線的標籤';
+    edgeLabelInput.addEventListener('change', function () {
+      if (selectedEdge === null) return;
+      commit('edge-label', function (doc) {
+        const cur = codec.parseEdge((doc.edge || [])[selectedEdge]);
+        if (cur === null) return doc;
+        return codec.updateEdge(doc, selectedEdge,
+          { from: cur.from, to: cur.to, shape: cur.shape, label: edgeLabelInput.value });
+      });
+    });
+    edgeLabelWrap.appendChild(edgeLabelInput);
+    edgeBar.appendChild(edgeLabelWrap);
+
+    const edgeDeleteBtn = d.createElement('button');
+    edgeDeleteBtn.type = 'button';
+    edgeDeleteBtn.className = 'ed-wave-edge-delete';
+    edgeDeleteBtn.setAttribute('data-focus-key', 'ed-wave-edge-delete');
+    edgeDeleteBtn.textContent = '刪除這條線';
+    edgeDeleteBtn.title = '刪掉這條關聯線（連帶清掉沒有其他 edge 再用的 anchor 字母）';
+    edgeDeleteBtn.addEventListener('click', function () {
+      if (selectedEdge === null) return;
+      const at = selectedEdge;
+      // Cleared BEFORE `commit`, not after: `commit` repaints synchronously,
+      // and `removeEdge` shifts every later entry's index down by one — so an
+      // index cleared only after `commit` returns would let `render()`'s
+      // clamp see a DIFFERENT edge that happens to have landed on the same
+      // number, and silently keep the inspector open on it.
+      selectedEdge = null;
+      commit('edge-remove', function (doc) {
+        return codec.pruneNodes(codec.removeEdge(doc, at));
+      });
+    });
+    edgeBar.appendChild(edgeDeleteBtn);
 
     // The "this drawing is not showing you everything" notice. Empty, and with
     // no box on screen, for the documents that carry none of the three.
@@ -822,15 +1194,34 @@
     noSignal.hidden = true;
     toolbar.appendChild(noSignal);
 
-    function commitBanner(which, value) {
-      commit(which, function (doc) {
-        const had = doc[which];
-        if (value === '' && (had === undefined || had === null)) return doc;
-        const next = Object.assign({}, doc);
-        next[which] = Object.assign({}, (had !== null && typeof had === 'object') ? had : {});
-        next[which].text = value;
-        return next;
-      });
+    // v3.5.0 Task 13: widened from `(which, value)` — always writing `.text`
+    // — to `(which, key, value)` so the same function also carries the other
+    // five ruler fields.
+    //
+    // Fix round 2: the write itself moved into `codec.setBannerField` rather
+    // than staying inline here. The inline version's own no-op guard —
+    // `value === '' && (hadObj[key] === undefined || hadObj[key] === null)`
+    // — only refused to WRITE when the key had never been set; once a key
+    // WAS set, clearing the field fell through to `next[which][key] = ''`,
+    // an empty string rather than an absent key. `.text` hid that: the
+    // engine's `captext` treats `''` the same as absent (a plain truthy
+    // check). `tick`/`tock`/`every` do not — `ticktock` in
+    // `node_modules/wavedrom/lib/render-marks.js` only skips a field that is
+    // `=== undefined`, so `''` reached its array branch, `Number('')` is
+    // `0`, and the engine drew a full default 0-based ruler on a field that
+    // LOOKED empty on screen — the exact confident-wrong-state class this
+    // file exists to avoid, reintroduced by the write side after the read
+    // side (`tickTockText`) got it right. `setBannerField` deletes the key
+    // (and the parent object, if that empties it) instead of writing `''`,
+    // closing that gap once for all six fields rather than special-casing
+    // `.text`'s accidental safety.
+    //
+    // This also gives these six fields their first test seam:
+    // `commitBanner` itself is a closure with no unit-test access, but
+    // `setBannerField` is a plain, exported, pure function — pinned in
+    // `test/wave-codec.test.js`.
+    function commitBanner(which, key, value) {
+      commit(which + '.' + key, function (doc) { return codec.setBannerField(doc, which, key, value); });
     }
 
     // ── body: lane list | drawing | preview ───────────────────────────────
@@ -932,10 +1323,55 @@
       if (marksDoc === nextDoc) return;
       const before = marksDoc;
       marksDoc = nextDoc;
-      if (before === null || (cursor === null && selection === null)) return;
+      // Fix round 2: `pendingFrom` joins the guard's own "is there anything
+      // to carry" question — widened rather than given a second guard of
+      // its own, so there stays ONE call to `opts.laneTrace` and ONE
+      // `rowOf` built from it, not a second belief about the lookup living
+      // next to the first. Reachable with `cursor`/`selection` both null:
+      // the keyboard's `armed` state is not locked to a document capture
+      // the way a mouse drag is, so a user can mark a start cell with
+      // Enter, delete every lane from the toolbar (which nulls `cursor`/
+      // `selection` in `renderCanvas`'s own clamp but left `pendingFrom`
+      // alone before this fix), add lanes back past the stale index, and
+      // finish the gesture — silently anchoring an edge to a lane the
+      // trace never actually confirmed, because the lookup below was
+      // skipped entirely while `pendingFrom` was the only mark still
+      // standing. `ensureNode` bounds-checks against whatever document is
+      // in hand at THAT moment, not against the one `pendingFrom` was
+      // marked in, so a stale-but-back-in-range index is silently valid to
+      // it — this file's worst failure class, wrong data written with
+      // nothing on screen that explains it.
+      // v3.5.0 Task 8: `endpointDrag` widens this same guard rather than
+      // getting one of its own, for the identical reason `pendingFrom` did
+      // in fix round 2 — one call to `opts.laneTrace`, one `rowOf`, not a
+      // second belief about the lookup. Reachable with the other three all
+      // null: a keyboard undo/redo reached WHILE a mouse button is down
+      // dragging an endpoint is exactly the same shape of gap `pendingFrom`
+      // closed — the pointer holds no document capture of its own, only
+      // this variable's `at` does.
+      // v3.5.0 Task 12: `laneMultiSelect` joins the same guard for the same
+      // reason again — a Shift+click multi-select standing while an unrelated
+      // undo/redo or move lands underneath it is exactly this shape of gap,
+      // just with a SET of row numbers instead of one.
+      if (before === null ||
+          (cursor === null && selection === null && pendingFrom === null &&
+           endpointDrag === null && laneMultiSelect === null)) {
+        return;
+      }
       const trace = typeof opts.laneTrace === 'function'
         ? opts.laneTrace(before, nextDoc) : null;
-      if (trace === null) { cursor = null; selection = null; return; }
+      // No `laneTrace` injected: "I no longer know where you were" applies
+      // to `pendingFrom` exactly as it already does to `cursor`/`selection`
+      // — dropped, not guessed at. `endpointDrag` joins them: a drag naming
+      // a lane nothing here can still vouch for is the same hazard either
+      // way. `laneMultiSelect` is dropped wholesale here too, the same as
+      // every other mark: with no trace at all there is nothing to check
+      // any of its members against.
+      if (trace === null) {
+        cursor = null; selection = null; pendingFrom = null; endpointDrag = null;
+        laneMultiSelect = null;
+        return;
+      }
       // Structural or not: a content operation traces as the identity, so this
       // is a no-op for a paint without having to know that it is one.
       const rowOf = function (was) {
@@ -954,6 +1390,64 @@
           selection = { laneIndex: at, from: selection.from, to: selection.to };
         }
       }
+      // `pendingFrom` is a mark of the exact same shape as `cursor` (a row
+      // number plus a cycle), carried the same way — by lane IDENTITY
+      // through this same trace, not by raw row number (see the guard
+      // above for why it must reach here even when `cursor`/`selection`
+      // cannot). It deliberately does NOT copy cursor's "leave the number
+      // alone when untraceable" half, though: `cursor` gets away with that
+      // because `renderCanvas` re-clamps it into range on every repaint, and
+      // because a cursor landing on "whatever now occupies that visual
+      // position" after its own lane vanished is the right instinct for a
+      // position marker. `pendingFrom` has no such clamp anywhere, and it is
+      // not a position — it is a lane the user already committed to as one
+      // fixed end of an edge. Fix round 2: leaving it at a stale raw index
+      // is exactly the hazard the coordinator's review walked to the end —
+      // delete the marked lane, add unrelated lanes back until the count
+      // passes the stale number again, and `ensureNode` would bounds-check
+      // successfully against a lane the user never chose. So an untraceable
+      // `pendingFrom` is DROPPED here, the same as `trace === null` above
+      // drops it wholesale — never left standing on a number nothing
+      // vouches for.
+      if (pendingFrom !== null) {
+        const at = rowOf(pendingFrom.at);
+        pendingFrom = at === null ? null : { at: at, cell: pendingFrom.cell };
+      }
+      // `endpointDrag.at` is a mark of the exact same shape as
+      // `pendingFrom.at` — a lane the user is currently pointing a live
+      // gesture at, not a position `renderCanvas` re-clamps on every
+      // repaint — so it is carried the same way and dropped the same way
+      // when the lane it named cannot be traced. Left alone while `at` is
+      // still `null` (mousedown fired, no `pointermove` has landed on a
+      // real cell yet): there is no row number there yet to go stale.
+      // `index`/`end`/`cell` are not row numbers and need no retracing
+      // here — `index` is guarded separately by `render()`'s widened
+      // `selectedEdge` clamp (the drag dies with the selection it drags).
+      if (endpointDrag !== null && endpointDrag.at !== null) {
+        const at = rowOf(endpointDrag.at);
+        endpointDrag = at === null ? null
+          : { index: endpointDrag.index, end: endpointDrag.end, at: at, cell: endpointDrag.cell };
+      }
+      // `laneMultiSelect` is a SET of marks of the same shape as
+      // `pendingFrom.at` — each one a lane the user has already committed to
+      // for the group they are about to build — carried and dropped the same
+      // way, member by member rather than all-or-nothing: a reorder that
+      // only invalidates ONE of several selected rows should not throw away
+      // the rest of a selection the user is still building. An entry that
+      // cannot be traced is removed rather than left on a stale number, for
+      // the identical reason `pendingFrom` never keeps one either — a
+      // structural op reads this set directly, not a screen position
+      // `renderCanvas` re-clamps on every repaint. Emptied down to nothing,
+      // it collapses to `null` so every other guard's plain `!== null` check
+      // stays the whole truth about "is anything still selected".
+      if (laneMultiSelect !== null) {
+        const kept = [];
+        for (let m = 0; m < laneMultiSelect.length; m++) {
+          const at = rowOf(laneMultiSelect[m]);
+          if (at !== null) kept.push(at);
+        }
+        laneMultiSelect = kept.length === 0 ? null : kept;
+      }
     }
 
     function afterStoreMoved(name) {
@@ -1008,13 +1502,59 @@
       const before = focusMark();
       const doc = store.doc;
       const layout = geometry.layoutOf(doc, SIZES);
+      // Clamped BEFORE `renderCanvas`/`renderEdgeBar` read it, and against
+      // `edgeLayout`'s own filtered list rather than `doc.edge.length` — an
+      // edge whose anchor letter went missing is still an array element (so
+      // a length check would miss it) but `edgeLayout` already will not draw
+      // it, and an inspector row pointed at an edge nothing on screen shows
+      // is exactly the stale-selection defect `carryMarks` above exists to
+      // avoid for lanes.
+      if (selectedEdge !== null && !edgeIsDrawable(doc, layout, selectedEdge)) {
+        selectedEdge = null;
+      }
+      // v3.5.0 Task 8: `endpointDrag.index` can only ever be reached from
+      // `selectedEdge`'s own drawn handle (see `onCanvasDown`), so the two
+      // may never disagree — checked with `!==` rather than "is `index`
+      // still drawable" on its own, because that would let a drag survive a
+      // mid-drag undo that DESELECTS the edge without deleting it (the
+      // clamp above nulls `selectedEdge` on its own timing). A drag that
+      // outlives the selection it was dragging is exactly the class of
+      // hazard Task 7 paid three rounds to close for `pendingFrom`/
+      // `edgeMode`; this is the same rule applied to this task's own mark.
+      if (endpointDrag !== null && endpointDrag.index !== selectedEdge) {
+        endpointDrag = null;
+      }
+      // v3.5.0 Task 12: the same defensive clamp `selectedEdge` gets just
+      // above, for a mark of its own row-number shape — belt to
+      // `carryMarks`'s suspenders, not a replacement for it: `carryMarks`
+      // is what keeps a member POINTING AT THE RIGHT LANE across an edit,
+      // and runs before this on every path that reaches `render()`. This
+      // only catches a member that is merely out of range for whatever
+      // reason (there should not be one left standing; a repaint is cheap
+      // insurance against a future caller of `render()` that forgets to
+      // route through `afterStoreMoved` first).
+      if (laneMultiSelect !== null) {
+        const kept = [];
+        for (let m = 0; m < laneMultiSelect.length; m++) {
+          if (laneMultiSelect[m] >= 0 && laneMultiSelect[m] < layout.lanes.length) {
+            kept.push(laneMultiSelect[m]);
+          }
+        }
+        laneMultiSelect = kept.length === 0 ? null : kept;
+      }
       renderLanes(doc, layout);
       renderCanvas(doc, layout);
+      renderEdgeBar(doc);
       renderPreview(doc);
       renderMeta(doc);
-      renderUnmodelled(doc);
+      renderUnmodelled(doc, layout);
       undoBtn.disabled = !store.canUndo();
       redoBtn.disabled = !store.canRedo();
+      groupBtn.disabled = laneMultiSelect === null || laneMultiSelect.length < 2;
+      overlay.setAttribute('data-wave-multiselect',
+        laneMultiSelect === null ? '' : laneMultiSelect.slice().sort(function (a, b) {
+          return a - b;
+        }).join(','));
       overlay.setAttribute('data-wave-gestures', String(gestures));
       overlay.setAttribute('data-wave-lanes', String(layout.lanes.length));
       overlay.setAttribute('data-wave-cycles', String(layout.cycles));
@@ -1025,6 +1565,38 @@
       restoreFocus(before);
     }
 
+    /** Whether `geometry.edgeLayout` would still draw the edge at `index` —
+     *  the same test the drawing itself applies, asked rather than repeated. */
+    function edgeIsDrawable(doc, layout, index) {
+      const edges = geometry.edgeLayout(doc, layout);
+      for (const e of edges) {
+        if (e.index === index) return true;
+      }
+      return false;
+    }
+
+    /**
+     * Show or hide the inspector row, and — when it is showing — fill it in
+     * from the selected edge's own entry.
+     *
+     * The ONLY thing that may set `edgeBar.hidden`, so "is an edge selected"
+     * and "is there a box on screen" cannot come apart: precondition T1 at
+     * the top of this file's docstring for the overlay itself, applied to
+     * this row. Called only from `render()`, after `selectedEdge` has already
+     * been clamped, so the `codec.parseEdge` below is not expected to fail —
+     * it is checked anyway because "expected to" is not "guaranteed to".
+     */
+    function renderEdgeBar(doc) {
+      overlay.setAttribute('data-wave-selected-edge',
+        selectedEdge === null ? '' : String(selectedEdge));
+      edgeBar.hidden = selectedEdge === null;
+      if (selectedEdge === null) return;
+      const cur = codec.parseEdge((doc.edge || [])[selectedEdge]);
+      if (cur === null) { edgeBar.hidden = true; return; }
+      shapeSel.value = cur.shape;
+      edgeLabelInput.value = cur.label;
+    }
+
     /** What has the keyboard now, as something that survives a rebuild. */
     function focusMark() {
       const el = d.activeElement;
@@ -1070,6 +1642,27 @@
       } catch (e) { /* not a text field */ }
     }
 
+    /**
+     * `tick`/`every`/`tock` are read by the pinned engine as a number, a
+     * string, or an array of either (`ticktock` in
+     * `node_modules/wavedrom/lib/render-marks.js`) — unlike `head`/`foot`'s
+     * own `.text`, which is always a plain string. A text `<input>` can only
+     * hold one shape, so a hand-authored numeric or array value is shown in
+     * its string form (an array space-joined, the same shape the engine's
+     * own `val.trim().split(/\s+/)` turns a plain string back into) rather
+     * than blanked out — blanking a field that actually holds `tick: 0`
+     * would show a confident wrong state, the same failure `renderUnmodelled`
+     * exists to avoid elsewhere in this file. Editing the field always
+     * commits a plain string back, which the engine treats identically to
+     * whichever shape it replaced.
+     */
+    function tickTockText(v) {
+      if (typeof v === 'string') return v;
+      if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+      if (Array.isArray(v)) return v.join(' ');
+      return '';
+    }
+
     function renderMeta(doc) {
       const h = doc.head;
       const f = doc.foot;
@@ -1077,6 +1670,12 @@
         ? h.text : '';
       footInput.value = (f !== null && typeof f === 'object' && typeof f.text === 'string')
         ? f.text : '';
+      headTickInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.tick) : '';
+      headEveryInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.every) : '';
+      footTockInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.tock) : '';
+      headTockInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.tock) : '';
+      footTickInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.tick) : '';
+      footEveryInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.every) : '';
     }
 
     /**
@@ -1089,8 +1688,35 @@
      * the failure this whole overlay is arranged to avoid, so a document that
      * carries any of them says so, names them, and points at the preview —
      * which IS faithful, because it is the engine.
+     *
+     * Edges join this same notice for the opposite reason. As of this task
+     * they ARE drawn — `renderEdges` below — so the claim for them is not "the
+     * drawing ignores this property" but "this specific edge cannot be
+     * placed".
+     *
+     * final review finding 3: this used to re-derive only ONE of
+     * `geometry.edgeLayout`'s three skip reasons (the dangling-letter one) by
+     * walking `doc.edge` a second time with its own copy of that check —
+     * which is also the one case the pinned engine agrees with us on
+     * (measured: an edge naming an absent letter draws nothing there either).
+     * The other two — an unparseable shape, and a `node` index that has
+     * outlived its lane's length (reachable from the editor's own
+     * insert/delete-cycles buttons, since neither reindexes `node`) — are
+     * exactly where the engine DOES draw a line and we silently do not,
+     * which is the one divergence this whole overlay exists to prevent, and
+     * the old code said nothing about either.
+     *
+     * So this asks `geometry.edgeLayoutDetail` — the SAME walk `renderEdges`
+     * draws from — which edges it could not place and why, instead of
+     * re-deriving any check of its own. Skips are bucketed by whatever
+     * `reason` string comes back, not by a hardcoded list of the two or three
+     * reasons known today: a fourth `continue` added to `edgeLayoutDetail`
+     * later shows up here as its own bucket (worded generically if
+     * `REASON_TEXT` has not been taught a nicer sentence for it yet) with no
+     * change needed in this function, rather than escaping the notice the way
+     * the third one did until now.
      */
-    function renderUnmodelled(doc) {
+    function renderUnmodelled(doc, layout) {
       const found = [];
       const cfg = doc.config;
       if (cfg !== null && typeof cfg === 'object' && cfg.hscale !== undefined) {
@@ -1102,11 +1728,67 @@
         if (lane.period !== undefined && found.indexOf('period') === -1) found.push('period');
         if (lane.phase !== undefined && found.indexOf('phase') === -1) found.push('phase');
       }
+
+      const detail = geometry.edgeLayoutDetail(doc, layout);
+      // Bucket every skip by its own reported `reason` — discovered from what
+      // came back, not enumerated in advance, so nothing here has to change
+      // for a reason this function has never heard of.
+      const buckets = new Map();
+      for (const skip of detail.skipped) {
+        if (!buckets.has(skip.reason)) buckets.set(skip.reason, []);
+        buckets.get(skip.reason).push(skip);
+      }
+
+      function letters(list) {
+        const out = [];
+        for (const skip of list) {
+          if (skip.edge === null) continue;
+          if (out.indexOf(skip.edge.from) === -1) out.push(skip.edge.from);
+          if (out.indexOf(skip.edge.to) === -1) out.push(skip.edge.to);
+        }
+        return out;
+      }
+
+      // Known reasons get a sentence that says what a user can act on.
+      // `dangling` matches the engine (nothing to reconcile against the
+      // preview); `unparseable` and `out-of-range` are the two the engine
+      // draws and we do not, so both point at the preview as the tie-breaker.
+      const REASON_TEXT = {
+        dangling: function (list) {
+          return '這個區塊有 ' + list.length + ' 條關聯線引用了不存在的 anchor（' +
+            letters(list).join('、') + '），左邊畫不出它們。';
+        },
+        unparseable: function (list) {
+          return '這個區塊有 ' + list.length +
+            ' 條關聯線的寫法連引擎也認不得，左邊畫不出它們（跟右邊的 WaveDrom 預覽一致）。';
+        },
+        'out-of-range': function (list) {
+          return '這個區塊有 ' + list.length + ' 條關聯線的 anchor（' +
+            letters(list).join('、') + '）落在那條 lane 目前的長度之外，左邊畫不出它們' +
+            '——但右邊的 WaveDrom 預覽仍然會畫，兩邊會不一致，以預覽為準。';
+        },
+      };
+
+      const sentences = [];
+      if (found.length > 0) {
+        sentences.push('這份文件用了 ' + found.join('、') +
+          '，左邊的手繪波形不表現它們（寬度與相位會不一樣）——以右邊的 WaveDrom 預覽為準。');
+      }
+      for (const [reason, list] of buckets) {
+        const text = REASON_TEXT[reason];
+        sentences.push(text ? text(list) :
+          '這個區塊有 ' + list.length + ' 條關聯線因為「' + reason + '」畫不出來，' +
+          '以右邊的 WaveDrom 預覽為準。');
+      }
+
+      const danglingCount = buckets.has('dangling') ? buckets.get('dangling').length : 0;
       overlay.setAttribute('data-wave-unmodelled', found.join(' '));
-      unmodelled.hidden = found.length === 0;
-      unmodelled.textContent = found.length === 0 ? '' :
-        '這份文件用了 ' + found.join('、') +
-        '，左邊的手繪波形不表現它們（寬度與相位會不一樣）——以右邊的 WaveDrom 預覽為準。';
+      overlay.setAttribute('data-wave-dangling-edges', String(danglingCount));
+      // The total the dangling-only count above cannot say: every edge entry
+      // `edgeLayoutDetail` could not place, for any reason at all.
+      overlay.setAttribute('data-wave-skipped-edges', String(detail.skipped.length));
+      unmodelled.hidden = sentences.length === 0;
+      unmodelled.textContent = sentences.join(' ');
 
       // …and the bigger version of the same honesty. This editor edits
       // `signal:` and nothing else, so a `reg:` or `assign:` block opens a
@@ -1145,9 +1827,19 @@
       rows.style.height = layout.height + 'px';
       laneCol.appendChild(rows);
 
+      const spans = groupSpansOf(doc, layout);
+      // v3.5.0 Task 12: which row, if any, hosts THIS group's own 解散
+      // button — see `directFirstLaneOf`'s comment for why at most one row
+      // can, and why some groups (made entirely of sub-groups) have none.
+      const ungroupAt = new Map();
+      for (const span of spans) {
+        const at = directFirstLaneOf(layout, span);
+        if (at !== null) ungroupAt.set(at, span);
+      }
+
       // Group titles first, so they sit UNDER the rows in paint order and a
       // lane's own controls stay clickable over them.
-      for (const span of groupSpansOf(doc, layout)) {
+      for (const span of spans) {
         const tag = d.createElement('button');
         tag.type = 'button';
         tag.className = 'ed-wave-group';
@@ -1164,7 +1856,7 @@
       }
 
       for (let i = 0; i < layout.lanes.length; i++) {
-        rows.appendChild(laneRow(doc, layout, i));
+        rows.appendChild(laneRow(doc, layout, i, ungroupAt.get(i)));
       }
       // The tail insert. `laneInsertPath(doc, laneCount)` goes on the end of
       // `signal` itself, which is what makes the group asymmetry visible here
@@ -1172,7 +1864,13 @@
       rows.appendChild(insertButton(doc, layout.lanes.length, layout, true));
     }
 
-    function laneRow(doc, layout, i) {
+    /**
+     * `ungroupSpan` is the group THIS row's 解散 button dissolves, or
+     * `undefined` on every row that is not a group's own direct-first-lane —
+     * `renderLanes` hands it over from the one `directFirstLaneOf` pass it
+     * already made rather than this function re-deriving it per row.
+     */
+    function laneRow(doc, layout, i, ungroupSpan) {
       const row = d.createElement('div');
       row.className = 'ed-wave-lane-row';
       row.setAttribute('data-lane', String(i));
@@ -1180,6 +1878,54 @@
       row.style.height = layout.laneHeight + 'px';
       row.style.paddingLeft = (layout.lanes[i].depth * 16) + 'px';
       if (selection !== null && selection.laneIndex === i) row.classList.add('is-selected');
+      if (laneMultiSelect !== null && laneMultiSelect.indexOf(i) !== -1) {
+        row.classList.add('is-multi-selected');
+      }
+      // v3.5.0 Task 12: Shift+click anywhere on the row toggles it into or
+      // out of `laneMultiSelect`, the set「建立群組」reads. Capture phase, so
+      // this decides BEFORE the row's own children do — a Shift+click landing
+      // on ▲/▼/✕/the name field is claimed here rather than moving the lane,
+      // deleting it, or opening its name for editing, the same reason
+      // `onKeyDown` claims Escape/Tab in the capture phase at the dialog
+      // level. An ordinary click (no Shift) is NOT claimed at all: it falls
+      // through untouched to whichever child the user actually pressed,
+      // which is what keeps every existing gesture in this row working
+      // exactly as it did before this task.
+      //
+      // Fix round 1 (item 1): the name `<input>` is excluded from that catch.
+      // `render()` below rebuilds the WHOLE lane rail from `store.doc`, and a
+      // Shift+click that reached this listener while the user was still
+      // typing in that field — no `change` fired yet, so nothing had been
+      // committed — rebuilt the input from the OLD value, discarding
+      // whatever they had typed with nothing on screen explaining it. That
+      // is the exact failure family this batch has already paid for
+      // (`pendingFrom`/`endpointDrag`'s own fix rounds), arriving by a route
+      // THIS task opened: before it, `render()` never ran while the keyboard
+      // was still in a field with no blur. Shift+click inside a text field
+      // is also, on every platform, understood as "extend the text
+      // selection" — leaving it alone here is not just the safe choice, it
+      // is the expected one. MEASURED (a real Puppeteer page, the nested-
+      // group / long-name / ungroup-button-present row — the most crowded
+      // this rail ever gets): the input covers at most 45 of the row's
+      // 200px; 129–155px of every row stays outside it. So there is always a
+      // large, ordinary Shift+click target left — the ▲/▼/✕/＋/解散群組
+      // buttons and the row's own padding — and excluding the input costs
+      // nothing a user could actually reach for.
+      row.addEventListener('click', function (ev) {
+        if (ev.shiftKey !== true) return;
+        if (ev.target !== null && typeof ev.target.classList === 'object' &&
+            ev.target.classList.contains('ed-wave-lane-name')) {
+          return;
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (laneMultiSelect === null) laneMultiSelect = [];
+        const at = laneMultiSelect.indexOf(i);
+        if (at === -1) laneMultiSelect.push(i);
+        else laneMultiSelect.splice(at, 1);
+        if (laneMultiSelect.length === 0) laneMultiSelect = null;
+        render();
+      }, true);
 
       row.appendChild(insertButton(doc, i, layout, false));
 
@@ -1244,6 +1990,86 @@
         commit('remove-lane', function (doc2) { return codec.removeLane(doc2, i); });
       });
       row.appendChild(del);
+
+      // v3.5.0 Task 13: duplicate this lane — a full deep copy (`data` / any
+      // other key, via `codec.duplicateLane`) landing right after it at
+      // `i + 1`. Same landing-awareness `insertButton` below already gives
+      // the user for an ordinary insert: `duplicateLane` is built on the very
+      // `addLane`/`laneInsertPath` door that button uses, so it inherits the
+      // identical group-tail asymmetry, and the status line says so the same
+      // way.
+      //
+      // final review finding 2: `node` is deliberately NOT among the copied
+      // keys. It names anchor letters that resolve to THIS lane; carrying it
+      // onto the duplicate would give two lanes the same letters and silently
+      // relocate every edge already anchored here onto the copy instead. The
+      // duplicate starts with no anchors of its own.
+      const dup = d.createElement('button');
+      dup.type = 'button';
+      dup.className = 'ed-wave-lane-duplicate';
+      dup.setAttribute('data-focus-key', 'lane-duplicate-' + i);
+      dup.textContent = '複製';
+      dup.title = '複製這條 lane，接在它後面（data 等欄位一起複製；node 錨點不會跟著複製，避免兩條 lane 搶同一個字母）';
+      dup.addEventListener('click', function () {
+        const landing = landingOf(doc, i + 1);
+        const where = landing.title === null ? '群組外' : '群組「' + landing.title + '」裡';
+        // The copy's own name field is the one control a duplicate exists
+        // for the user to reach next — same reasoning as `insertButton`'s
+        // `focusOverride` below.
+        focusOverride = 'lane-name-' + (i + 1);
+        const didDup = commit('duplicate-lane', function (doc2) { return codec.duplicateLane(doc2, i); });
+        if (didDup) say('複製的 lane 落在' + where);
+      });
+      row.appendChild(dup);
+
+      // v3.5.0 Task 13: insert a spacer — WaveDrom's own blank row, `{}` —
+      // right after this lane. There is deliberately no dedicated "remove
+      // spacer" control: a spacer is a lane like any other, so the ✕ button
+      // every row already has removes it exactly as it removes any other
+      // lane. `codec.addLane` already accepts `{}` (`isLane` only requires a
+      // non-array object), so this needs no new codec function of its own —
+      // unlike `duplicateLane`, which needed one because nothing in the
+      // codec already answers "the lane at this position, copied".
+      const spacer = d.createElement('button');
+      spacer.type = 'button';
+      spacer.className = 'ed-wave-lane-spacer';
+      spacer.setAttribute('data-focus-key', 'lane-spacer-' + i);
+      spacer.textContent = '空白列';
+      spacer.title = '在這條後面插入一個空白列（WaveJSON 的 {}，用來空出間距；' +
+        '刪除跟刪一般的 lane 一樣，用 ✕）';
+      spacer.addEventListener('click', function () {
+        const landing = landingOf(doc, i + 1);
+        const where = landing.title === null ? '群組外' : '群組「' + landing.title + '」裡';
+        // A spacer has no name to type, so the control the user is most
+        // likely to reach for next is ✕ — on the new row itself, at i + 1.
+        focusOverride = 'lane-remove-' + (i + 1);
+        const didAdd = commit('add-spacer', function (doc2) { return codec.addLane(doc2, i + 1, {}); });
+        if (didAdd) say('空白列落在' + where);
+      });
+      row.appendChild(spacer);
+
+      // v3.5.0 Task 12: 解散, only on the one row `renderLanes` handed a
+      // span for — the group's own direct first lane (see
+      // `directFirstLaneOf`). The lanes it held stay exactly where they
+      // were; only the wrapping array and its title go.
+      if (ungroupSpan !== undefined) {
+        const ungroup = d.createElement('button');
+        ungroup.type = 'button';
+        ungroup.className = 'ed-wave-lane-ungroup';
+        ungroup.setAttribute('data-focus-key', 'lane-ungroup-' + i);
+        ungroup.textContent = '解散群組';
+        ungroup.title = '解散「' + ungroupSpan.title +
+          '」這個群組（裡面的 lane 都留著，只是不再是一組）';
+        ungroup.addEventListener('click', function () {
+          // The lane at `i` survives ungrouping at the same display position
+          // (see `ungroupLanes`'s own comment: the flattened order and count
+          // never change), so its own name field is exactly where the
+          // keyboard should land.
+          focusOverride = 'lane-name-' + i;
+          commit('ungroup', function (doc2) { return codec.ungroupLanes(doc2, i); });
+        });
+        row.appendChild(ungroup);
+      }
       return row;
     }
 
@@ -1412,6 +2238,187 @@
       input.select();
     }
 
+    /**
+     * The in-place editor for one bus cell's `data` label — this dialog's
+     * OTHER sub-panel, same `{cancel, retire}` shape as `renameGroup` just
+     * above and opened the same two ways every other gesture in this file
+     * is: a pointer press (`onCanvasDown`) or the keyboard's own Enter
+     * (`handleDrawingKey`), both of which have already asked
+     * `codec.dataSlotOf` before calling this, so `slot` below is never
+     * recomputed from a belief of its own about which cycles consume one.
+     *
+     * Positioned with `geometry.cellRect` — the exact numbers the keyboard
+     * cursor and the pointer's own hit test already share — offset by
+     * `canvas.offsetLeft`/`offsetTop` rather than the wrap's own padding
+     * written out as a constant: the field is a plain sibling of the SVG
+     * inside `.ed-wave-canvas-wrap` (now `position: relative`, see
+     * `lib/md2doc.js`), so reading the SVG's OWN measured offset is what
+     * keeps the two from drifting apart if that padding ever changes.
+     *
+     * Unlike `renameGroup`'s field, this one's node sits beside a canvas
+     * `renderCanvas` rebuilds on every cursor move — see that function's own
+     * first line for why `retire()` has to be called from there too, not
+     * only from `render()`.
+     */
+    function openDataEdit(laneIndex, cycle) {
+      if (canvas === null) return;
+      const layout = geometry.layoutOf(store.doc, SIZES);
+      const row = layout.lanes[laneIndex];
+      const lane = row === undefined ? null : row.lane;
+      const slot = lane === null ? null : codec.dataSlotOf(lane, cycle);
+      if (slot === null) return;
+      const box = geometry.cellRect(layout, laneIndex, cycle);
+      if (box === null) return;
+      // A press or an Enter that lands on a second bus cell while the field
+      // is still open on the first one: the open field never got the blur
+      // that a plain click elsewhere would have given it (the keyboard's
+      // Enter path never moves focus at all), so it is cancelled here,
+      // by hand, before this one opens. Unsaved text in the first field is
+      // discarded — the same trade `renameGroup` makes for its own field on
+      // every route that is not `finish()` itself.
+      if (dataEdit !== null) dataEdit.cancel();
+
+      const current = labelsOf(lane)[slot];
+      const startValue = typeof current === 'string' ? current : '';
+
+      const input = d.createElement('input');
+      input.type = 'text';
+      input.className = 'ed-wave-data-input';
+      input.setAttribute('data-focus-key', 'data-input-' + laneIndex + '-' + cycle);
+      input.value = startValue;
+      input.style.left = (canvas.offsetLeft + box.x) + 'px';
+      input.style.top = (canvas.offsetTop + box.y) + 'px';
+      input.style.width = box.width + 'px';
+      input.style.height = box.height + 'px';
+
+      /** The field off. A no-op once a repaint has already taken it away. */
+      const takeDown = function () {
+        if (input.parentNode !== null) input.parentNode.removeChild(input);
+      };
+      /** Whether the keyboard is IN the field right now. False on the
+       *  `blur` path — the browser has already moved it by then. */
+      const holdsKeyboard = function () { return d.activeElement === input; };
+
+      const finish = function () {
+        // Once. `blur` and this file's own explicit Enter handler can both
+        // reach here for the one commit (Enter removes the field, which
+        // fires a `blur` of its own) — the latch is the same "whoever gets
+        // here first owns the gesture" rule `renameGroup.finish` uses.
+        if (dataEdit === null) return;
+        dataEdit = null;
+        const hadKeyboard = holdsKeyboard();
+        const value = input.value;
+        takeDown();
+        if (value === startValue) {
+          // Nothing to write, so nothing to repaint — `canvas` is already
+          // the element it was before this field opened.
+          if (hadKeyboard) canvas.focus();
+          return;
+        }
+        // The keyboard is only NAMED when it would otherwise be lost — same
+        // condition `renameGroup.finish` uses: either this field had it, or
+        // whatever DOES have it right now is not even inside the overlay
+        // (both mean the coming repaint would otherwise leave it on
+        // `document.body`). `focusOverride` already set by someone else's
+        // more specific promise is left alone.
+        if (focusOverride === null && (hadKeyboard || !overlay.contains(d.activeElement))) {
+          focusOverride = 'canvas';
+        }
+        commit('data-label', function (doc) {
+          return codec.setDataAt(doc, laneIndex, slot, value);
+        });
+      };
+      /** The canvas is about to be rebuilt underneath this field by
+       *  `renderCanvas` — an undo, a redo, any gesture that repaints while
+       *  it is open. The node goes with that rebuild; what matters is
+       *  dropping the latch and naming where the keyboard lands, exactly
+       *  the same reason `renameGroup.retire` exists. */
+      const retire = function () {
+        if (dataEdit === null) return;
+        dataEdit = null;
+        if (focusOverride === null && holdsKeyboard()) focusOverride = 'canvas';
+      };
+      /** Escape's half: the field goes, the label does not change, the
+       *  session stands, and the keyboard goes back to the drawing — never
+       *  to `document.body`. No repaint: the canvas was never touched. */
+      const cancel = function () {
+        if (dataEdit === null) return;
+        dataEdit = null;
+        takeDown();
+        canvas.focus();
+      };
+      // The explicit commit key: Enter. Left to a plain native `change`
+      // event the way `renameGroup`'s field is would depend on whether this
+      // browser fires `change` for a lone text input on Enter alone, which
+      // is not a promise this file makes elsewhere — asked for outright
+      // instead, the same way Escape is asked for explicitly one level up
+      // in `onKeyDown` rather than left to a default.
+      input.addEventListener('keydown', function (ev) {
+        if (ev.key !== 'Enter') return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        finish();
+      });
+      input.addEventListener('change', finish);
+      input.addEventListener('blur', finish);
+      canvasWrap.appendChild(input);
+      dataEdit = { cancel: cancel, retire: retire };
+      input.focus();
+      input.select();
+    }
+
+    /**
+     * Where a press or an Enter on cycle `cycle` of `lane` should open the
+     * data-label field — or whether it must refuse the gesture outright
+     * instead of letting it fall through to an ordinary paint.
+     *
+     * v3.5.0 Task 11 fix round 1: a cycle INSIDE a bus run that itself owns
+     * no slot (`codec.dataSlotOf` answers `null` — a `.` continuation or a
+     * `|` gap) used to fall straight through to the paint-arming code with
+     * nothing catching it. Reviewer-traced: the press silently repainted
+     * that continuation with whatever brush was current, turning it into a
+     * fresh EXPLICIT value cycle and shifting every LATER label in the lane
+     * one slot to the right — silent data corruption, not an inert click,
+     * because the box this cycle sits inside is exactly what this task now
+     * invites the user to press.
+     *
+     * `isBus(brickOf(...))` is the same test `drawLane` uses to decide
+     * whether a cycle is a bus box at all for the PICTURE, asked here to
+     * decide it for the GESTURE — so a plain non-bus cycle (`0`, `1`, `x`, a
+     * clock, …) is untouched and keeps painting exactly as it always has;
+     * only a cycle INSIDE a bus box is ever diverted. Walking backward for
+     * the owning cycle stops the moment the resolved LEVEL changes — two
+     * adjacent bus runs of the identical value (`2.2.` — measured against
+     * `codec`'s own doc comment: two separate labels, not one) must not
+     * have a later cycle resolve into the EARLIER run's slot.
+     *
+     * Returns:
+     *   `{cycle, slot}` — open the field for THIS cycle's slot: either
+     *                      `cycle` itself owns one, or the walk back to its
+     *                      run's owning explicit cycle found one.
+     *   `'blocked'`      — inside a bus box, but no owning cycle exists (a
+     *                       leading repeater with nothing to continue —
+     *                       MEASURED, `levelsOf` draws such a lane as `x`,
+     *                       so this should be unreachable in practice, but
+     *                       the check is kept rather than assumed so a
+     *                       future change to that rule fails LOUD here
+     *                       rather than silently reaching paint again).
+     *                       Callers must refuse the gesture on this answer,
+     *                       never fall through.
+     *   `null`           — not a bus box; ordinary behaviour is unaffected.
+     */
+    function resolveBusTarget(lane, cycle) {
+      const slot = codec.dataSlotOf(lane, cycle);
+      if (slot !== null) return { cycle: cycle, slot: slot };
+      const levels = codec.levelsOf(typeof lane.wave === 'string' ? lane.wave : '');
+      if (!isBus(brickOf(levels[cycle]))) return null;
+      for (let i = cycle - 1; i >= 0 && levels[i] === levels[cycle]; i--) {
+        const s = codec.dataSlotOf(lane, i);
+        if (s !== null) return { cycle: i, slot: s };
+      }
+      return 'blocked';
+    }
+
     /**
      * A copy of `doc` with one scalar replaced, for the two fields the codec's
      * lane operations do not cover (a group's own title).
@@ -1447,6 +2454,14 @@
      * names its bricks in its `<use xlink:href="#…">` list.
      */
     function renderCanvas(doc, layout) {
+      // v3.5.0 Task 11: the data-label field's node sits beside the canvas
+      // SVG inside `canvasWrap` (see `openDataEdit`), and the wipe two lines
+      // below (`canvasWrap.textContent = ''`) would tear it out from under
+      // the user on the very next cursor move if this did not retire it
+      // first — every path that reaches this function counts, not only
+      // `render()`, which is why this lives HERE and not only next to
+      // `groupRename.retire()` in `render()` itself.
+      if (dataEdit !== null) dataEdit.retire();
       // Every repaint REPLACES the canvas element, so a canvas that had the
       // keyboard loses it to `document.body` the instant it is detached —
       // exactly the state F7 and T6h exist to prevent, and here it would fire
@@ -1538,6 +2553,55 @@
         drawLane(canvas, layout, i);
       }
 
+      const edges = renderEdges(canvas, doc, layout);
+
+      // v3.5.0 Task 8: the in-flight endpoint drag's own preview — UI state
+      // only, never a document read (rule 3: nothing is written until
+      // `finishEndpointDrag` commits it, and Escape mid-drag never reaches
+      // that far). `renderEdges` above already faded the dragged edge's OWN,
+      // still-current path (`.is-drag-source`, read from this same
+      // `endpointDrag`); this draws the other half — a dashed line from the
+      // edge's UNMOVED end to wherever the drag is currently over. Reuses
+      // `.ed-wave-edge-pending`, the exact dashed style Task 7's own
+      // not-yet-written preview line already uses, for the identical
+      // reason: this line is not `doc.edge` either, until the drop.
+      //
+      // Looked up in `edges` — the SAME array `renderEdges` just built this
+      // pass, not a second call to `geometry.edgeLayout` — so the two can
+      // never draw from different snapshots of the layout. `render()`'s own
+      // clamp guarantees `endpointDrag.index === selectedEdge` whenever
+      // `endpointDrag` is non-null, so a lookup miss here would mean that
+      // invariant broke, not that the edge is merely unselected — the `!==
+      // undefined` check is defensive rather than expected to matter.
+      let endpointDragMark = '';
+      if (endpointDrag !== null) {
+        const dragged = edges.filter(function (e) { return e.index === endpointDrag.index; })[0];
+        if (dragged !== undefined) {
+          const otherEnd = endpointDrag.end === 'from' ? 'to' : 'from';
+          const from = dragged[otherEnd];
+          // Falls back to the dragged end's OWN current position — the
+          // degenerate "no visible change yet" line — until a `pointermove`
+          // has actually landed on a real cell (`endpointDrag.at !== null`).
+          let to = dragged[endpointDrag.end];
+          if (endpointDrag.at !== null) {
+            const cell = geometry.cellRect(layout, endpointDrag.at, endpointDrag.cell);
+            if (cell !== null) {
+              to = { x: cell.x + cell.width / 2, y: cell.y + cell.height / 2 };
+              endpointDragMark = endpointDrag.index + ':' + endpointDrag.end + '@' +
+                endpointDrag.at + ',' + endpointDrag.cell;
+            }
+          }
+          const line = d.createElementNS(SVGNS, 'line');
+          line.setAttribute('class', 'ed-wave-edge-pending');
+          line.setAttribute('x1', String(from.x));
+          line.setAttribute('y1', String(from.y));
+          line.setAttribute('x2', String(to.x));
+          line.setAttribute('y2', String(to.y));
+          canvas.appendChild(line);
+        }
+      }
+      overlay.setAttribute('data-wave-endpoint-drag', endpointDragMark);
+
       if (selection !== null) {
         const from = Math.min(selection.from, selection.to);
         const to = Math.max(selection.from, selection.to);
@@ -1550,6 +2614,33 @@
         canvas.appendChild(box);
       }
 
+      // v3.5.0 Task 7: the pending edge — `pendingFrom` to wherever `cursor`
+      // is now — drawn from UI state alone, never from the document (rule 2:
+      // nothing about the doc changes until the drop). `cursor` is shared
+      // with the keyboard cell below it in paint order for the same reason
+      // the two are drawn from the same variable: a mouse drag and the
+      // keyboard's two-Enter version are one gesture wearing two input
+      // devices, so there is exactly one line to preview, however it is
+      // being aimed at this instant. Skipped once `pendingFrom` is null,
+      // which is every state except "armed with a marked start" and
+      // "dragging" — see `setEdgeMode`.
+      let pendingCell = '';
+      if (pendingFrom !== null && cursor !== null) {
+        const from = geometry.cellRect(layout, pendingFrom.at, pendingFrom.cell);
+        const to = geometry.cellRect(layout, cursor.laneIndex, cursor.cycle);
+        if (from !== null && to !== null) {
+          pendingCell = pendingFrom.at + ',' + pendingFrom.cell;
+          const line = d.createElementNS(SVGNS, 'line');
+          line.setAttribute('class', 'ed-wave-edge-pending');
+          line.setAttribute('x1', String(from.x + from.width / 2));
+          line.setAttribute('y1', String(from.y + from.height / 2));
+          line.setAttribute('x2', String(to.x + to.width / 2));
+          line.setAttribute('y2', String(to.y + to.height / 2));
+          canvas.appendChild(line);
+        }
+      }
+      overlay.setAttribute('data-wave-edge-pending', pendingCell);
+
       // The keyboard's cell, drawn last so it is over the selection tint and
       // over the trace. Its geometry comes from `wave-geometry.cellRect` — the
       // inverse of the hit test the pointer uses — so the cell the cursor is
@@ -1629,6 +2720,25 @@
       for (let c = 0; c < cells.length; c++) {
         if (cells[c].held !== true && cells[c].ch === '|') gaps.push(c);
       }
+      // v3.5.0 Task 10 fix round 2: which cycles carry the P/N explicit-edge
+      // arrow, and which one. Read off `levels` directly rather than off
+      // `bricks`, for the same reason `gaps` above reads off `cells` rather
+      // than off `bricks`: `brickOf` collapses `P` into the SAME brick id as
+      // `p` (that is what makes the arrow the one thing `brickOf`'s own
+      // model cannot carry — see its comment, and the measurement above the
+      // arrow's own drawing code below), so asking `bricks` here would
+      // always come back empty. One entry per cycle that has an arrow,
+      // `"<cycle>:<P|N>"`, in the same index-not-one-slot-per-cycle shape
+      // `data-gaps-<i>` already uses — an empty lane (no `P`/`N` anywhere,
+      // e.g. every existing fixture's plain `p`/`n` clocks) reads as `''`,
+      // which is the ABSENCE half of the contract this attribute exists to
+      // let a test pin: a `P` lane must show an entry here, a `p` lane must
+      // not, and drawing the arrow on every clock (the regression this
+      // attribute is for) would make the second half false.
+      const clockEdges = [];
+      for (let c = 0; c < levels.length; c++) {
+        if (levels[c] === 'P' || levels[c] === 'N') clockEdges.push(c + ':' + levels[c]);
+      }
       // `data-wave-<i>` cannot carry the difference between "no `wave` key" and
       // `wave: ''` — both are the empty string — and that difference is exactly
       // what the engine draws differently, so it gets its own attribute.
@@ -1637,6 +2747,7 @@
       svg.setAttribute('data-levels-' + i, levels.join(''));
       svg.setAttribute('data-bricks-' + i, bricks.join(' '));
       svg.setAttribute('data-gaps-' + i, gaps.join(' '));
+      svg.setAttribute('data-clock-edge-' + i, clockEdges.join(' '));
 
       const hi = row.y + 7;
       const lo = row.y + row.height - 9;
@@ -1688,6 +2799,31 @@
             t.setAttribute('text-anchor', 'middle');
             t.textContent = text;
             svg.appendChild(t);
+          } else {
+            // v3.5.0 Task 11 fix round 3: an UNLABELLED bus run has no
+            // `<text>` for a press to land on — fix round 2's own rule
+            // ("open the field only on a press that hits the label text")
+            // otherwise leaves the single most ordinary flow in this editor
+            // (paint a `=`, then name it) mouse-unreachable. This dot is
+            // that run's hit target when there is no label yet: same
+            // class as the text (`ed-wave-buslabel`, so `onCanvasDown`'s
+            // existing hit test needs no change at all — it already asks
+            // for that one class, not for an element type) plus
+            // `ed-wave-buslabel-empty` for the dim, small styling
+            // (`lib/md2doc.js`) that keeps a diagram full of unlabelled
+            // buses from turning into a field of marks. Radius bounded by
+            // the run's own box on both axes, not a bare constant, so the
+            // box stays MOSTLY paintable even at the narrowest cycle width
+            // this editor draws, and a press anywhere else in the box still
+            // falls through to the ordinary paint dispatch exactly as
+            // round 2 established.
+            const r = Math.min(3.5, (x1 - x0) / 6, (lo - hi) / 6);
+            const dot = d.createElementNS(SVGNS, 'circle');
+            dot.setAttribute('class', 'ed-wave-buslabel ed-wave-buslabel-empty');
+            dot.setAttribute('cx', String((x0 + x1) / 2));
+            dot.setAttribute('cy', String(mid));
+            dot.setAttribute('r', String(r));
+            svg.appendChild(dot);
           }
           labelSlot++;
         } else if (brick === 'xxx') {
@@ -1708,6 +2844,70 @@
             : 'M' + x0 + ',' + hi + ' L' + x0 + ',' + lo + ' L' + xm + ',' + lo +
               ' L' + xm + ',' + hi + ' L' + x1 + ',' + hi);
           svg.appendChild(p);
+
+          // v3.5.0 Task 10: `P`/`N` are explicit-edge clocks. `brickOf` maps
+          // both to the SAME brick id as `p`/`n` (`nclk`/`pclk` — see its own
+          // comment), which is correct for the level the engine SHOWS but
+          // erases the one thing that makes `P`/`N` look different: an
+          // arrowhead. MEASURED against the pinned wavedrom 3.5.0 — rendered
+          // `{signal:[{name:'a',wave:'zpp'}]}` next to `{wave:'zPP'}` via
+          // `wd.renderAny(0, doc, wd.waveSkin)` and diffed the `<use
+          // xlink:href>` list:
+          //
+          //     p: #zzz #zzz #pclk #nclk #pclk #nclk
+          //     P: #zzz #zzz #Pclk #nclk #Pclk #nclk
+          //     n: #zzz #zzz #nclk #pclk #nclk #pclk
+          //     N: #zzz #zzz #Nclk #pclk #Nclk #pclk
+          //
+          // — same SECOND half-brick every time (that is what `brickOf`'s own
+          // measurement already pins), but the FIRST half-brick gets its own
+          // symbol. Read straight out of `node_modules/wavedrom/skins/default.js`:
+          //
+          //     pclk  'M0,20 0,0 20,0'                                   (just the edge)
+          //     Pclk  same edge PLUS 'M-3,12 0,3 3,12 C 1,11 -1,11 -3,12 z'  (filled, class s6)
+          //     nclk  'm0,0 0,20 20,0'
+          //     Nclk  same edge PLUS 'M-3,8 0,17 3,8 C 1,9 -1,9 -3,8 z'      (filled, class s6)
+          //
+          // i.e. in the engine's own 20-unit symbol space (y=0 top, y=20
+          // bottom, matching this file's hi/lo), a small filled triangle
+          // straddling local x=0 — `P`'s apex at local y=3 pointing UP
+          // (toward hi), `N`'s apex at local y=17 pointing DOWN (toward lo).
+          // Both sit on the FIRST half-brick, which in this drawing's
+          // one-brick-per-period model (a whole `p`/`P` cycle is ONE `nclk`
+          // path, not two half-bricks — see `isClock`'s own comment) is
+          // always the vertical stroke at x0, the edge INTO this cycle. So
+          // the level char (not the brick id, which is identical for
+          // `p`/`P`) is what has to be read to know an arrow is owed, and
+          // `levels[run.from]` is it — clock bricks never merge (the `!
+          // isClock` guard below), so `run.from === run.to` and this is
+          // exactly the cycle being drawn. `data-clock-edge-<i>`, set above
+          // (this function's own top, next to `data-gaps-<i>`) from the same
+          // `levels` array, is the one place this fact is exposed for a test
+          // to pin — nothing here duplicates it onto the shape itself, so
+          // there is one belief about which cycles have an arrow, not two.
+          //
+          // Reproduced as a plain filled triangle, not the engine's
+          // bezier-curved one: every other brick this file draws is already
+          // a simplified redraw (the bus is a hexagon, the gap is a pair of
+          // chevrons), not a pixel copy of wavedrom's own glyphs. Scaled out
+          // of the engine's 20-unit symbol into this cell's own geometry —
+          // local x by (xm - x0) / 20, local y by (lo - hi) / 20, both
+          // anchored at (x0, hi) — rather than hand-picked pixel offsets, so
+          // it tracks `SIZES.cycleWidth`/`laneHeight` if those ever change.
+          const edgeLevel = levels[run.from];
+          if (edgeLevel === 'P' || edgeLevel === 'N') {
+            const sx = (xm - x0) / 20;
+            const sy = (lo - hi) / 20;
+            const apexY = edgeLevel === 'P' ? hi + 3 * sy : hi + 17 * sy;
+            const baseY = edgeLevel === 'P' ? hi + 12 * sy : hi + 8 * sy;
+            const arrow = d.createElementNS(SVGNS, 'path');
+            arrow.setAttribute('class', 'ed-wave-clock-arrow');
+            arrow.setAttribute('d',
+              'M' + (x0 - 3 * sx) + ',' + baseY +
+              ' L' + x0 + ',' + apexY +
+              ' L' + (x0 + 3 * sx) + ',' + baseY + ' Z');
+            svg.appendChild(arrow);
+          }
         } else {
           const y = bandOf(brick)[0];
           const line = d.createElementNS(SVGNS, 'line');
@@ -1755,6 +2955,161 @@
       }
     }
 
+    /**
+     * Every `edge` entry, drawn after every lane: one `<path>` (`d` from
+     * `geometry.edgeLayout`), a label `<text>` when the entry has one, and —
+     * for `selectedEdge` only — two endpoint handles from
+     * `geometry.edgeHandleRect`, exactly the rectangles `onCanvasDown` below
+     * hit-tests against, so the drawn handle and the clickable one cannot
+     * drift apart.
+     *
+     * A second, invisible, wide-stroke `<path>` (`class="ed-wave-edge-hit"`)
+     * is layered over each visible one purely so it can be clicked: the
+     * visible path is 1px wide, and `document.elementFromPoint` (what
+     * `onCanvasDown` reads to answer "did this press land on a line") would
+     * otherwise miss any press that is not on that exact pixel.
+     * `lib/md2doc.js`'s `.ed-wave-edge-hit` rule sets `pointer-events: stroke`
+     * — what makes a `stroke: transparent` path hit-testable at all, without
+     * which a transparent stroke paints nothing and "nothing painted" is what
+     * `visiblePainted` (the SVG default) refuses to hit.
+     *
+     * Arrow markers are picked from the shape string, MEASURED against
+     * `node_modules/wavedrom/lib/arc-shape.js`'s own `style` table (every
+     * `case` there that sets a `style` string): a shape containing `<` sets
+     * `marker-start:url(#arrowtail)`, one containing `>` sets
+     * `marker-end:url(#arrowhead)`, and `+` is the one shape that sets BOTH
+     * markers, to `url(#tee)` — the seven plain shapes (`-`, `~`, `-~`, `~-`,
+     * `-|`, `|-`, `-|-`) set no `style` at all and draw no arrowhead.
+     * (`applyEdgeMarkers` below is unaffected by the exact count either way —
+     * it tests `indexOf('<')` / `indexOf('>')` rather than enumerating a
+     * list — but this comment's own count should still match the pinned
+     * engine.) `edgeArrowMarker` below reproduces the head/tail split with
+     * ONE shared marker definition rather than two: `orient="auto-start-reverse"`
+     * is what flips a `marker-start` 180° from a `marker-end` automatically,
+     * so the single triangle already points the right way at both ends.
+     */
+    function renderEdges(svg, doc, layout) {
+      const edges = geometry.edgeLayout(doc, layout);
+      overlay.setAttribute('data-wave-edge-count', String(edges.length));
+      if (edges.length === 0) return edges;
+
+      const defs = d.createElementNS(SVGNS, 'defs');
+      defs.appendChild(edgeArrowMarker());
+      defs.appendChild(edgeTeeMarker());
+      svg.appendChild(defs);
+
+      for (const e of edges) {
+        const isSelected = e.index === selectedEdge;
+        // v3.5.0 Task 8: the edge an in-flight endpoint drag is dragging
+        // keeps drawing at its ACTUAL (still-committed) position — the
+        // document is untouched until the drop (rule 3) — but is faded so
+        // it reads as "not where this will end up" once the dashed preview
+        // (`renderCanvas`, below `renderEdges`'s own call) is standing next
+        // to it. `endpointDrag` can only ever name `selectedEdge` itself
+        // (`render()`'s own clamp), so `isSelected` is already true here too
+        // and this only ever adds a class, never substitutes for `.is-on`.
+        const isDragSource = endpointDrag !== null && e.index === endpointDrag.index;
+        const path = d.createElementNS(SVGNS, 'path');
+        // Every visual property (stroke, fill, width) lives in
+        // `lib/md2doc.js`'s `.ed-wave-edge-path` / `.is-on` CSS, the same
+        // mechanism the rest of this drawing's colours already go through
+        // (`.ed-wave-line`, `.ed-wave-selection`, `.ed-wave-cursor`, …) —
+        // one place to repaint the editor, not two. Only genuinely geometric
+        // attributes (`d`, the marker refs) stay here as attributes.
+        path.setAttribute('class', 'ed-wave-edge-path' + (isSelected ? ' is-on' : '') +
+          (isDragSource ? ' is-drag-source' : ''));
+        path.setAttribute('data-edge-index', String(e.index));
+        path.setAttribute('d', e.d);
+        applyEdgeMarkers(path, e.edge.shape);
+        svg.appendChild(path);
+
+        const hit = d.createElementNS(SVGNS, 'path');
+        hit.setAttribute('class', 'ed-wave-edge-hit');
+        hit.setAttribute('data-edge-index', String(e.index));
+        hit.setAttribute('d', e.d);
+        svg.appendChild(hit);
+
+        if (e.edge.label !== '') {
+          const t = d.createElementNS(SVGNS, 'text');
+          t.setAttribute('class', 'ed-wave-edge-label');
+          t.setAttribute('x', String(e.labelPos.x));
+          t.setAttribute('y', String(e.labelPos.y - 4));
+          // `text-anchor` positions the glyphs against (x, y) — geometry, not
+          // colour — so it stays an attribute, exactly as the existing
+          // `.ed-wave-buslabel` text already does a few lines up.
+          t.setAttribute('text-anchor', 'middle');
+          t.textContent = e.edge.label;
+          svg.appendChild(t);
+        }
+
+        if (isSelected) {
+          for (const end of ['from', 'to']) {
+            const r = geometry.edgeHandleRect(e[end]);
+            const h = d.createElementNS(SVGNS, 'rect');
+            h.setAttribute('class', 'ed-wave-edge-handle');
+            h.setAttribute('data-edge-handle', end);
+            h.setAttribute('data-edge-index', String(e.index));
+            h.setAttribute('x', String(r.x));
+            h.setAttribute('y', String(r.y));
+            h.setAttribute('width', String(r.width));
+            h.setAttribute('height', String(r.height));
+            svg.appendChild(h);
+          }
+        }
+      }
+      return edges;
+    }
+
+    /** `marker-start` / `marker-end` for one shape — see `renderEdges`'s own
+     *  comment for the measurement behind this split. */
+    function applyEdgeMarkers(path, shape) {
+      if (shape === '+') {
+        path.setAttribute('marker-start', 'url(#ed-wave-tee)');
+        path.setAttribute('marker-end', 'url(#ed-wave-tee)');
+        return;
+      }
+      if (shape.indexOf('<') !== -1) path.setAttribute('marker-start', 'url(#ed-wave-arrowhead)');
+      if (shape.indexOf('>') !== -1) path.setAttribute('marker-end', 'url(#ed-wave-arrowhead)');
+    }
+
+    /** One triangle, reused for both ends via `auto-start-reverse`. */
+    function edgeArrowMarker() {
+      const m = d.createElementNS(SVGNS, 'marker');
+      m.setAttribute('id', 'ed-wave-arrowhead');
+      m.setAttribute('viewBox', '0 0 8 8');
+      m.setAttribute('markerWidth', '8');
+      m.setAttribute('markerHeight', '8');
+      m.setAttribute('refX', '7');
+      m.setAttribute('refY', '4');
+      m.setAttribute('orient', 'auto-start-reverse');
+      const poly = d.createElementNS(SVGNS, 'polygon');
+      poly.setAttribute('points', '0,0 8,4 0,8');
+      poly.setAttribute('class', 'ed-wave-edge-arrow');
+      m.appendChild(poly);
+      return m;
+    }
+
+    /** The `+` shape's tee: a crossbar perpendicular to the path at either
+     *  end, symmetric under a 180° flip so `orient="auto"` needs no reverse. */
+    function edgeTeeMarker() {
+      const m = d.createElementNS(SVGNS, 'marker');
+      m.setAttribute('id', 'ed-wave-tee');
+      m.setAttribute('viewBox', '0 0 8 8');
+      m.setAttribute('markerWidth', '8');
+      m.setAttribute('markerHeight', '8');
+      m.setAttribute('refX', '4');
+      m.setAttribute('refY', '4');
+      m.setAttribute('orient', 'auto');
+      const line = d.createElementNS(SVGNS, 'line');
+      line.setAttribute('x1', '4');
+      line.setAttribute('y1', '0');
+      line.setAttribute('x2', '4');
+      line.setAttribute('y2', '8');
+      line.setAttribute('class', 'ed-wave-edge-tee');
+      m.appendChild(line);
+      return m;
+    }
+
     // ── the keyboard on the drawing ───────────────────────────────────────
     /**
      * Every gesture the drawing has, without a pointer.
@@ -1807,14 +3162,69 @@
         moveCursor(key, ev.shiftKey === true);
         return true;
       }
+      // v3.5.0 Task 7: the keyboard's two-step version of the drag, ahead of
+      // the plain Enter-paints case below so an armed Enter never falls
+      // through to it. First Enter marks `cursor` as `pendingFrom` (arrows
+      // above already moved it, exactly as a mouse press would have);
+      // second Enter — from wherever the cursor walked to since — is the
+      // SAME `finishEdgeDrag` the mouse's `onCanvasUp` calls, so the three
+      // no-op drops and the one-armed-if-nothing-happened rule are decided
+      // in that one place, not re-decided here.
+      if (edgeMode === 'armed' && key === 'Enter' && cursor !== null) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (pendingFrom === null) {
+          pendingFrom = { at: cursor.laneIndex, cell: cursor.cycle };
+          say('起點已標記，移到終點再按一次 Enter');
+          render();
+        } else {
+          finishEdgeDrag(cursor.laneIndex, cursor.cycle);
+        }
+        return true;
+      }
+      // v3.5.0 Task 11: Enter on a cell inside a bus box opens that box's
+      // label field instead of painting over it with the brush — the
+      // keyboard's own version of the pointer's click below in
+      // `onCanvasDown`. `resolveBusTarget` is the SAME resolution
+      // `onCanvasDown` uses (fix round 1: a cursor resting on a `.`/`|`
+      // continuation inside a run used to fall straight through to
+      // `paintAtCursor()` below with nothing catching it — the identical
+      // silent-corruption hazard the pointer path had, closed the same way
+      // here rather than only on the mouse), so the two input devices can
+      // never disagree about which cells are labellable or where a press
+      // on a continuation actually lands. Placed AFTER the armed-edge Enter
+      // above (arming an edge outranks opening a label field — the same
+      // press cannot mean both) and BEFORE the generic Enter-paints case
+      // below, which it must pre-empt.
+      if (key === 'Enter' && cursor !== null) {
+        const dlLayout = geometry.layoutOf(store.doc, SIZES);
+        const dlRow = dlLayout.lanes[cursor.laneIndex];
+        const dlLane = dlRow === undefined ? null : dlRow.lane;
+        if (dlLane !== null) {
+          const dlTarget = resolveBusTarget(dlLane, cursor.cycle);
+          if (dlTarget === 'blocked') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
+            return true;
+          }
+          if (dlTarget !== null) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            cursor = { laneIndex: cursor.laneIndex, cycle: dlTarget.cycle };
+            openDataEdit(cursor.laneIndex, dlTarget.cycle);
+            return true;
+          }
+        }
+      }
       // A brush character both PICKS the brush and paints with it. Picking
       // without painting would need a second keystroke to do the thing the
       // user already said, and the toolbar's own brush buttons are still there
-      // for「選起來待會再用」. `ev.shiftKey` is excluded so a shifted key can
-      // never paint: with Shift the browser reports `H`, not `h`, and a brush
-      // table that quietly lower-cased it would make Shift+arrow's neighbour
-      // keys destructive.
-      if (!ev.shiftKey && BRUSHES.indexOf(key) !== -1) {
+      // for「選起來待會再用」. `isBrushKey` is the admission rule — see its
+      // own comment (this file's top) for why it is not keyed on
+      // `ev.shiftKey` (v3.5.0 Task 10 fix round 1: that used to block
+      // `P`/`N`/`|`, all typed with Shift, from the keyboard entirely).
+      if (isBrushKey(key)) {
         ev.preventDefault();
         ev.stopPropagation();
         brush = key;
@@ -1990,8 +3400,213 @@
     function onCanvasDown(ev) {
       if (ev.button !== 0) return;
       const layout = geometry.layoutOf(store.doc, SIZES);
+      // v3.5.0 Task 7: armed edge-creation claims the press outright, before
+      // the edge-select / deselect / paint dispatch below ever runs — the
+      // whole point of arming is that the NEXT press starts the drag, so it
+      // must not be shadowed by "did this land on an existing edge" or "did
+      // this land on a cell to paint". A press that misses every lane
+      // (`at === null`, e.g. the canvas's own padding) leaves the button
+      // armed rather than eating it for nothing: missing the diagram is not
+      // the same as aiming at the wrong cell, but the recovery is the same —
+      // try the press again.
+      if (edgeMode === 'armed') {
+        const at = cellFromEvent(ev, layout);
+        if (at === null) return;
+        ev.preventDefault();
+        pendingFrom = { at: at.laneIndex, cell: at.cycle };
+        setEdgeMode('dragging');
+        // The keyboard follows the pointer here for the same reason it does
+        // in the paint path below: `cursor` is the ONE notion of "where is
+        // the other end right now" that the mouse move handler, the preview
+        // line and (on the keyboard's own path) `handleDrawingKey` all read,
+        // so drag and keystroke can never disagree about the live endpoint.
+        cursor = { laneIndex: at.laneIndex, cycle: at.cycle };
+        canvas.focus();
+        render();
+        d.addEventListener('mousemove', onCanvasMove, true);
+        d.addEventListener('mouseup', onCanvasUp, true);
+        return;
+      }
+      // v3.5.0 Task 8: a press on the SELECTED edge's own handle starts an
+      // endpoint drag, ahead of the plain select/deselect dispatch a few
+      // lines down — that dispatch's own `edgeHitAt` would otherwise see the
+      // exact same press and read it as "re-select the edge that is already
+      // selected", which is a real answer but the wrong one for a press ON
+      // its handle. Recomputed fresh here (`geometry.edgeLayout`, not a
+      // cached list) for the same reason `cellFromEvent`/`edgeHitAt`
+      // already are — a press can never be judged against a layout
+      // `renderCanvas` has moved on from.
+      //
+      // Scoped to `handle.index === selectedEdge` on purpose:
+      // `geometry.edgeHandleAt` answers for EVERY edge's endpoints
+      // regardless of selection (see its own comment), but `renderEdges`
+      // only ever DRAWS handles on the selected one — a press near a
+      // DIFFERENT edge's endpoint has no handle on screen to have landed on,
+      // and falls through to the ordinary select-by-path/point dispatch
+      // below exactly as it always has.
+      if (selectedEdge !== null) {
+        const edges = geometry.edgeLayout(store.doc, layout);
+        const box = canvas.getBoundingClientRect();
+        const handle = geometry.edgeHandleAt(edges, ev.clientX - box.left, ev.clientY - box.top);
+        if (handle !== null && handle.index === selectedEdge) {
+          ev.preventDefault();
+          // Fix round 1, item 1: a self-loop (`from === to`) puts both ends
+          // at the exact same pixel, so `geometry.edgeHandleAt`'s own
+          // `['to', 'from']` iteration always resolves the press to `'to'` —
+          // there is no position this file (or the user) can use to tell
+          // the two apart, and inferring one would just be a guess dressed
+          // up as an answer. What was missing was not a fix, it was the
+          // honest half: before this, the press silently moved `'to'` with
+          // nothing on screen saying that is what happened, or that `'from'`
+          // was never reachable at all.
+          const dragged = edges.filter(function (e) { return e.index === handle.index; })[0];
+          if (dragged !== undefined && dragged.edge.from === dragged.edge.to) {
+            say('這是一條 self-loop（起點跟終點在同一格），兩端的把手疊在同一個位置：' +
+              '只有拖得到的這一端可以搬，另一端目前搬不到。');
+          }
+          endpointDrag = { index: handle.index, end: handle.end, at: null, cell: null };
+          canvas.focus();
+          // Fix round 1, item 2: without a repaint here the press looks
+          // inert until the first `pointermove` — `.is-drag-source` (set
+          // from this same `endpointDrag`, read by `renderEdges`) would not
+          // fade the dragged edge until then, unlike the sibling
+          // `edgeMode === 'armed'` branch above, which repaints immediately
+          // on its own press. `renderCanvas`, not the full `render()`: this
+          // state change touches only the canvas SVG (the faded path; the
+          // dashed landing preview has nothing to draw yet since `at` is
+          // still `null`) — `selectedEdge` is unchanged, so the edge
+          // inspector row and the lane list are both already showing exactly
+          // what they should, and paying for `renderLanes`/`renderEdgeBar`
+          // again would be the same needless cost the existing
+          // `hadSelectedEdge`-gated branch further down in this function
+          // already avoids.
+          renderCanvas(store.doc, layout);
+          d.addEventListener('mousemove', onCanvasMove, true);
+          d.addEventListener('mouseup', onCanvasUp, true);
+          return;   // 不塗、不選格
+        }
+      }
+      // v3.5.0 Task 11 fix round 2 (widened in round 3): a press that lands
+      // on the label's own mark — the `<text>` when the run has a label, or
+      // (round 3) the small `<circle class="ed-wave-buslabel-empty">`
+      // `drawLane` draws in its place when the run has none — opens the
+      // data-label field instead of arming a paint drag, rather than merely
+      // somewhere inside the box the mark sits in. Round 1 gated this on
+      // the CELL (`codec.dataSlotOf`/`resolveBusTarget` alone, asked off
+      // the pressed cycle with no regard to what was actually under the
+      // pointer) and that was reviewer-verified to be its own regression:
+      // T6b paints `N` onto a bus cell with the mouse, and painting a
+      // bus cell is exactly what twenty-two brushes exist for — a gesture
+      // that swallows every press anywhere in the box leaves the user no
+      // pointer route to repaint one at all. The string is what a press on
+      // its mark means to change, so the mark is the target; a press
+      // anywhere else in the SAME box — the polygon, its bevelled ends, a
+      // held continuation's own cell — falls straight through to the
+      // ordinary paint dispatch below exactly as it always has, ROUND 1's
+      // fix included: that fix's `resolveBusTarget` still runs, just gated
+      // on the mark hit rather than on cell membership, so a press on the
+      // label of a merged run still resolves to the run's owning explicit
+      // cycle regardless of which cycle's pixels the mark happens to
+      // straddle (see `resolveBusTarget`'s own comment — its answer is the
+      // same whichever cycle a press on that shared mark geometrically
+      // lands on). Both marks carry the SAME `ed-wave-buslabel` class —
+      // round 3's placeholder ADDS `ed-wave-buslabel-empty` on top of it
+      // rather than replacing it — so this check needed no change at all
+      // to cover the empty case; it was already asking for the class, not
+      // for an element type. `.ed-wave-buslabel`'s `pointer-events:
+      // visiblePainted` (`lib/md2doc.js`) plus paint order — each mark is
+      // appended AFTER its box's `<polygon>` in `drawLane`, so it sits on
+      // top and wins the hit test in its own footprint — is what makes the
+      // two targets disjoint instead of the mark being invisibly swallowed
+      // by the polygon underneath it.
+      //
+      // final review finding 4: this block moved AHEAD of `edgeHitAt` below
+      // (it used to run after it), and its condition now asks
+      // `busLabelHitAt` instead of testing `ev.target` directly.
+      //
+      // Gating `edgeHandleAt` on `selectedEdge` (the change in `edgeHitAt`
+      // itself, above) stops a PHANTOM, undrawn handle from claiming a press
+      // by pure coordinate math — but MEASURED against a real page, that
+      // alone does not make this block reachable: `renderEdges` draws
+      // `.ed-wave-edge-hit` (a 10px-wide, invisible-but-hit-testable stroke,
+      // `pointer-events: stroke`) AFTER every lane's own content, so for any
+      // edge whose endpoint lands on a bus cell, that invisible stroke
+      // paints ON TOP of the cell's `.ed-wave-buslabel` mark. `ev.target` —
+      // the browser's own topmost-element answer — is `path.ed-wave-edge-
+      // hit` at that pixel regardless of source order in THIS function:
+      // moving this block ahead of `edgeHitAt` does not change what
+      // `ev.target` IS, only when it gets asked. Reordering plus the
+      // original `ev.target` check was tried first and measured to still
+      // fail — `elementFromPoint` at the labelled cell's own centre resolved
+      // to the hit path, not the label, exactly as before.
+      //
+      // `busLabelHitAt` answers a different question: not "what is the
+      // TOPMOST element here" but "is there a bus-label mark ANYWHERE in the
+      // stack of elements under this press", via `elementsFromPoint`
+      // (plural) — the standard way to see past one hit-testable layer
+      // sitting on top of another at the same point. That is a real,
+      // measured difference in outcome, not a matter of code order.
+      if (busLabelHitAt(ev) !== null) {
+        const busAt = cellFromEvent(ev, layout);
+        if (busAt !== null) {
+          const busLane = layout.lanes[busAt.laneIndex].lane;
+          const busTarget = resolveBusTarget(busLane, busAt.cycle);
+          // `resolveBusTarget` should never actually answer `null` here —
+          // the label only ever exists over a cycle the codec itself calls
+          // a bus level — but the check is kept rather than assumed, same
+          // reasoning as the `'blocked'` branch just below it.
+          if (busTarget === 'blocked') {
+            ev.preventDefault();
+            say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
+            return;
+          }
+          if (busTarget !== null) {
+            ev.preventDefault();
+            const busHadSelectedEdge = selectedEdge !== null;
+            selectedEdge = null;
+            cursor = { laneIndex: busAt.laneIndex, cycle: busTarget.cycle };
+            selection = { laneIndex: busAt.laneIndex, from: busTarget.cycle, to: busTarget.cycle };
+            canvas.focus();
+            if (busHadSelectedEdge) render();
+            else renderCanvas(store.doc, layout);
+            openDataEdit(busAt.laneIndex, busTarget.cycle);
+            return;
+          }
+        }
+      }
+      // An edge — its endpoint handle first (it sits ON TOP of the cell it
+      // anchors to, and a selected edge's handle must win the press even
+      // though the cell underneath is perfectly paintable), then its path —
+      // is asked BEFORE the cell/brush dispatch below (but AFTER the bus
+      // label block above — see its own comment for why that one now goes
+      // first). A hit selects and returns without arming `drag`: this
+      // dispatch draws and selects edges; a press on the SELECTED edge's own
+      // handle never reaches here at all (see the drag-start branch above),
+      // so this remains a plain select — it does not itself drag anything.
+      const edgeHit = edgeHitAt(ev, layout);
+      if (edgeHit !== null) {
+        ev.preventDefault();
+        selectedEdge = edgeHit;
+        canvas.focus();
+        render();
+        return;
+      }
+      // A press that hit neither an edge's handle nor its path deselects
+      // whatever WAS selected. The inspector row is the only visible sign a
+      // selection exists, and a selection that outlives a click elsewhere
+      // would let a later 刪除這條線 act on an edge the user has stopped
+      // looking at. This is IN ADDITION to the paint gesture below, on the
+      // very same press — not instead of it.
+      const hadSelectedEdge = selectedEdge !== null;
+      selectedEdge = null;
       const at = cellFromEvent(ev, layout);
-      if (at === null) return;
+      if (at === null) {
+        // Missed the diagram entirely (e.g. the canvas's own padding). Only
+        // the deselect, if there was one to make, needs a repaint; nothing
+        // else here changed.
+        if (hadSelectedEdge) render();
+        return;
+      }
       ev.preventDefault();
       drag = { laneIndex: at.laneIndex, from: at.cycle, to: at.cycle };
       selection = { laneIndex: at.laneIndex, from: at.cycle, to: at.cycle };
@@ -2002,12 +3617,54 @@
       // then pressing `1` would paint wherever the keyboard had been left.
       cursor = { laneIndex: at.laneIndex, cycle: at.cycle };
       canvas.focus();
-      renderCanvas(store.doc, layout);
+      // The common case — no edge was selected — keeps the cheap
+      // `renderCanvas`-only repaint this always did. A full `render()` is
+      // only paid on the transition that actually needs it: hiding the
+      // inspector row, which lives in the toolbar `renderCanvas` never
+      // touches.
+      if (hadSelectedEdge) render();
+      else renderCanvas(store.doc, layout);
       d.addEventListener('mousemove', onCanvasMove, true);
       d.addEventListener('mouseup', onCanvasUp, true);
     }
 
     function onCanvasMove(ev) {
+      if (endpointDrag !== null) {
+        // Same abandoned-button recovery as the two drags below: the button
+        // came up somewhere this page never heard about.
+        if (ev.buttons === 0) { onCanvasUp(); return; }
+        const layout = geometry.layoutOf(store.doc, SIZES);
+        const at = cellFromEvent(ev, layout);
+        // A move that strays off the diagram leaves `at`/`cell` exactly
+        // where they last were, same recovery as `edgeMode === 'dragging'`
+        // below and for the same reason: the drop target the user is
+        // currently over is still the last cell the pointer was actually on
+        // top of, not "nowhere".
+        if (at !== null) {
+          endpointDrag = { index: endpointDrag.index, end: endpointDrag.end,
+            at: at.laneIndex, cell: at.cycle };
+        }
+        // The document is untouched during the drag (rule 3): this repaints
+        // the preview only, never a `commit`.
+        renderCanvas(store.doc, layout);
+        return;
+      }
+      if (edgeMode === 'dragging') {
+        // Same abandoned-button recovery as the paint drag below: the button
+        // came up somewhere this page never heard about.
+        if (ev.buttons === 0) { onCanvasUp(); return; }
+        const layout = geometry.layoutOf(store.doc, SIZES);
+        const at = cellFromEvent(ev, layout);
+        // A move that strays off the diagram leaves `cursor` — and so the
+        // preview line — exactly where it last was, rather than snapping the
+        // line away: the drop target the user is currently over is still the
+        // last cell the pointer was actually on top of.
+        if (at !== null) cursor = { laneIndex: at.laneIndex, cycle: at.cycle };
+        // The document is untouched during the drag (rule 2): this repaints
+        // the preview line only, never a `commit`.
+        renderCanvas(store.doc, layout);
+        return;
+      }
       if (drag === null) return;
       // The button came up somewhere this page never heard about — outside the
       // window, or over the browser's own chrome. Without this the drag stays
@@ -2032,6 +3689,21 @@
     function onCanvasUp() {
       d.removeEventListener('mousemove', onCanvasMove, true);
       d.removeEventListener('mouseup', onCanvasUp, true);
+      if (endpointDrag !== null) {
+        finishEndpointDrag();
+        return;
+      }
+      if (edgeMode === 'dragging') {
+        // `cursor` is never null here: `onCanvasDown` set it to the press
+        // cell before this drag was ever armed, and every move since then
+        // only ever moved it to another real cell (see `onCanvasMove`
+        // above). The null-safe form costs nothing and matches the
+        // `finishEdgeDrag`/`codec.ensureNode` contract exactly rather than
+        // asserting a fact this file does not have to assert.
+        finishEdgeDrag(cursor === null ? null : cursor.laneIndex,
+          cursor === null ? null : cursor.cycle);
+        return;
+      }
       if (drag === null) return;
       const g = drag;
       drag = null;
@@ -2040,6 +3712,131 @@
       });
     }
 
+    /**
+     * The end of an endpoint drag on the SELECTED edge — one `commit`, so one
+     * undo step, matching every other gesture in this file (constraint 5).
+     *
+     * Unlike `finishEdgeDrag` below, this has no keyboard-driven twin and
+     * takes no parameters: there is no second input device sharing `cursor`
+     * to aim it, so everything the drop needs already lives in `endpointDrag`
+     * itself, read and cleared in the same first two lines the same way
+     * `finishEdgeDrag` clears `pendingFrom`'s owning mode up front.
+     *
+     * `drag.at === null` means the pointer never landed on a real cell for
+     * the whole gesture (pressed the handle, released off the diagram or
+     * without ever moving) — nothing to drop onto, so this only repaints to
+     * take the (already absent) preview line off screen and does not call
+     * `commit` at all; a `commit` with a non-integer `at` would just be
+     * `codec.moveEdgeEnd`'s own bounds check refusing it one function later
+     * for no benefit.
+     *
+     * Every other landing — including the three no-ops `moveEdgeEnd` itself
+     * refuses (dropping back on the end's own cell, dropping on the cell
+     * holding the edge's OTHER end, and an out-of-range target) — reaches
+     * `commit` exactly once and is judged by `commit`'s own return value,
+     * the same "one test of did-anything-change" rule `finishEdgeDrag`
+     * documents at length below: nothing here re-derives any of those three
+     * checks, that would be a second belief about the same refusal living
+     * next to `moveEdgeEnd`'s own.
+     */
+    function finishEndpointDrag() {
+      const drag = endpointDrag;
+      endpointDrag = null;
+      if (drag === null) return;
+      if (drag.at === null) { render(); return; }
+      commit('edge-move', function (doc) {
+        return codec.moveEdgeEnd(doc, drag.index, drag.end, drag.at, drag.cell);
+      });
+      render();
+    }
+
+    /**
+     * The end of an edge-creation gesture, reached from both input devices —
+     * the mouse's `onCanvasUp` above and the keyboard's second Enter in
+     * `handleDrawingKey` below. Constraint 4: one function, not two
+     * histories of the same decision.
+     *
+     * `at`/`cell` name the drop cell, or `null`/`null` when the gesture did
+     * not land on any lane at all. Nothing below special-cases the no-op
+     * drops rule 3 lists — dropping back on the start cell, dropping on a
+     * row with no waveform (a spacer — a group's own title is never a row
+     * to drop on in the first place: `codec.isLane` rejects the title
+     * string, so `flattenLanes` never allocates one, and there is no
+     * coordinate here to mis-hit), dropping on the cell that already holds
+     * this edge's OTHER end, and — fix round 1 — repeating the exact same
+     * drag a second time:
+     *
+     *   - a spacer's row IS a real, hittable cell (`geometry.cellAt` answers
+     *     it like any other), but `codec.ensureNode`'s own lane-local bound
+     *     refuses it: an empty `wave` reads as zero cells, so no cycle is
+     *     ever in range. The "missed the diagram entirely" case
+     *     (`at === null`) falls through the SAME check for a different
+     *     reason — neither `at` nor `cell` is an integer `ensureNode`'s
+     *     bounds test accepts;
+     *   - the start cell and the drop cell landing on the same anchor —
+     *     whether because they truly are the same cell, or because the drop
+     *     cell is wherever this edge's other end already lives — is exactly
+     *     `a.letter === b.letter` below;
+     *   - a repeat of this exact gesture between the same two cells would,
+     *     without the check below, silently push a byte-identical second
+     *     `doc.edge` entry — two arrows drawn exactly on top of each other,
+     *     indistinguishable on screen, plus a second undo step for nothing
+     *     visible (MEASURED against the real store: drag (0,1)->(0,3) twice,
+     *     `doc.edge` becomes `["a~>b","a~>b"]`). Refused here rather than
+     *     before `commit`, same as the other three: an entry with the same
+     *     four fields (`from`, `to`, `shape`, `label`) already in `doc.edge`
+     *     makes this call's own output redundant. This is narrower than
+     *     "refuse any second edge between these two anchors" — two
+     *     DIFFERENT annotations between the same pair (`a~>b setup` next to
+     *     `a-b hold`) are legitimate and stay possible; only a verbatim
+     *     repeat of THIS gesture's own fixed output (`shape: '~>'`,
+     *     `label: ''`) is refused.
+     *
+     * So there is one test of "did anything change", not four: `commit`'s
+     * own return value. A refused/no-op commit pushes no undo step (`commit`
+     * already guarantees that) and — rule 1 — leaves the gesture `'armed'`
+     * rather than disarming it, because the user pressed the button and got
+     * nothing for it; a real edge disarms back to `'idle'`. Either way this
+     * repaints once more on its own, because `commit` only repaints when it
+     * changed something, and the pending-line preview has to come off the
+     * screen in the no-op case too.
+     *
+     * Fix round 3: `pendingFrom === null` on entry is no longer read as
+     * "nothing to do" and left at that. `carryMarks` can now drop
+     * `pendingFrom` to `null` on its own (round 2, both when a structural
+     * change makes it untraceable and when no `laneTrace` is injected at
+     * all) WITHOUT touching `edgeMode` — before round 2 the only code path
+     * that ever nulled `pendingFrom` was `setEdgeMode('idle')` itself, so
+     * the two could never come apart. Reached from `onCanvasUp` while
+     * `edgeMode === 'dragging'` (the mouse button was down when the
+     * document changed out from under it), leaving `edgeMode` untouched
+     * here would strand it at `'dragging'` forever: `onCanvasMove` and
+     * `onCanvasUp` both check that mode FIRST, so every later paint drag's
+     * `mousemove`/`mouseup` would be swallowed by this function instead of
+     * painting, silently and with no error. So this resyncs the mode to
+     * the mark it depends on before doing anything else.
+     */
+    function finishEdgeDrag(at, cell) {
+      if (pendingFrom === null) { setEdgeMode('idle'); render(); return; }
+      const from = pendingFrom;
+      const changed = commit('edge-add', function (doc) {
+        const a = codec.ensureNode(doc, from.at, from.cell);
+        if (a.letter === null) return doc;
+        const b = codec.ensureNode(a.doc, at, cell);
+        if (b.letter === null) return doc;
+        if (a.letter === b.letter) return doc;   // same anchor both ends
+        const dup = (b.doc.edge || []).some(function (entry) {
+          const e = codec.parseEdge(entry);
+          return e !== null && e.from === a.letter && e.to === b.letter &&
+            e.shape === '~>' && e.label === '';
+        });
+        if (dup) return doc;   // byte-identical repeat of this gesture
+        return codec.addEdge(b.doc, { from: a.letter, to: b.letter, shape: '~>', label: '' });
+      });
+      setEdgeMode(changed ? 'idle' : 'armed');
+      render();
+    }
+
     /** Pointer coordinates in the drawing's own space, then the codec's cell. */
     function cellFromEvent(ev, layout) {
       if (canvas === null) return null;
@@ -2047,6 +3844,137 @@
       return geometry.cellAt(layout, ev.clientX - box.left, ev.clientY - box.top);
     }
 
+    /**
+     * The `doc.edge` index the press landed on, or `null`.
+     *
+     * Two questions, in order, both against `geometry.edgeLayout(store.doc,
+     * layout)` computed fresh here — the same recompute-don't-cache rule
+     * `cellFromEvent`/`geometry.cellAt` already follow, so a press can never
+     * be judged against a layout `renderCanvas` has moved on from:
+     *
+     *   1. `geometry.edgeHandleAt` — a handle is a small rect centred on an
+     *      endpoint, asked in the SAME layout-local space `cellFromEvent`
+     *      uses (the canvas's own `getBoundingClientRect()`; `SIZES.nameColWidth`
+     *      is 0 in this file, so that space starts at cycle 0 with no offset
+     *      to subtract). final review finding 4: trusted when it names the
+     *      edge that is actually SELECTED — `renderEdges` only DRAWS a
+     *      handle on the selected edge, so its answer for any OTHER edge is a
+     *      rectangle with nothing on screen, and letting that phantom
+     *      rectangle claim the press is what used to swallow a bus label's
+     *      press whenever the label's cell doubled as an unselected edge's
+     *      endpoint (see `onCanvasDown`'s `busLabelHitAt` check, which now
+     *      runs before this function is even called, for the other half of
+     *      that fix). A press within a handle-sized target of the SELECTED
+     *      edge's own endpoint still selects it rather than painting the
+     *      cell under it. final review re-review, item 1: ALSO trusted when
+     *      the named edge is a self-loop (`from === to`), selected or not —
+     *      a self-loop's `pathFor` output is a zero-length path (every
+     *      command's endpoint equals its start), which Chrome gives no hit
+     *      area at all, so #2 below can never find one; the handle is the
+     *      only thing a self-loop can ever be selected by, and a self-loop
+     *      the user hand-writes into the markdown must stay selectable and
+     *      deletable even before it has ever been clicked once.
+     *   2. The `<path class="ed-wave-edge-hit">` twin `renderEdges` layers
+     *      over each visible edge, read back through `document.elementFromPoint`
+     *      at the press's SCREEN coordinates (no conversion needed — that is
+     *      what `elementFromPoint` already takes).
+     */
+    function edgeHitAt(ev, layout) {
+      if (canvas === null) return null;
+      const edges = geometry.edgeLayout(store.doc, layout);
+      if (edges.length === 0) return null;
+      const box = canvas.getBoundingClientRect();
+      const handle = geometry.edgeHandleAt(edges, ev.clientX - box.left, ev.clientY - box.top);
+      // final review finding 4: only trust the handle answer when it names
+      // the edge that is actually SELECTED — the same scoping the
+      // endpoint-drag branch in `onCanvasDown` already applies, for the same
+      // reason (see its comment): `renderEdges` only ever DRAWS a handle on
+      // the selected edge, so `geometry.edgeHandleAt`'s answer for any OTHER
+      // edge index is a rectangle with nothing on screen at all. Before this,
+      // that undrawn rectangle still won the press here — a bus label whose
+      // cell happened to double as an unselected edge's endpoint could never
+      // open its label editor, because this branch claimed the press first.
+      // An edge stays selectable regardless: the fall-through below still
+      // hit-tests every edge's own 10px `.ed-wave-edge-hit` path.
+      //
+      // final review re-review, item 1: EXCEPT a self-loop (`from === to`),
+      // which this "an edge stays selectable regardless" promise does not
+      // actually cover — MEASURED regression, not a hypothetical: `pathFor`
+      // degenerates to a zero-length path for every shape family when
+      // `from === to` (every `L`/`C` command's endpoint equals its start),
+      // and Chrome gives a zero-length, butt-cap path NO hit area at all —
+      // `elementsFromPoint` returns nothing there, so the `.ed-wave-edge-hit`
+      // fallback below can never find it either. The phantom handle this
+      // finding gates off was the ONLY thing that could ever select a
+      // self-loop that has never been selected before (`selectedEdge` is set
+      // from exactly this function's return value, nowhere else) — a
+      // self-loop the user hand-writes into the markdown (the UI itself
+      // never creates one; `finishEdgeDrag` refuses a same-letter drag) would
+      // otherwise be permanently unselectable and undeletable by mouse. So a
+      // handle match is trusted when it is drawn (`handle.index ===
+      // selectedEdge`, as before) OR when the edge it names is a self-loop —
+      // a self-loop's handle is the one hit target it has, selected or not.
+      if (handle !== null) {
+        if (handle.index === selectedEdge) return handle.index;
+        const named = edges.filter(function (e) { return e.index === handle.index; })[0];
+        if (named !== undefined && named.edge.from === named.edge.to) return handle.index;
+      }
+      if (typeof d.elementFromPoint !== 'function') return null;
+      const el = d.elementFromPoint(ev.clientX, ev.clientY);
+      const hitPath = el !== null && el !== undefined && typeof el.closest === 'function'
+        ? el.closest('.ed-wave-edge-hit') : null;
+      if (hitPath === null || !canvas.contains(hitPath)) return null;
+      const idx = hitPath.getAttribute('data-edge-index');
+      return idx === null ? null : Number(idx);
+    }
+
+    /**
+     * The `.ed-wave-buslabel` mark under a press, or `null` — final review
+     * finding 4.
+     *
+     * NOT `ev.target`: `renderEdges` draws `.ed-wave-edge-hit` (invisible,
+     * `pointer-events: stroke`, 10px wide) AFTER every lane's own content, so
+     * whenever an edge's endpoint lands on a bus cell, that stroke paints ON
+     * TOP of the cell's own label mark — `ev.target` at that pixel is the
+     * edge-hit path, never the label underneath it, and no amount of
+     * reordering the CALLS in `onCanvasDown` changes that, because `ev.target`
+     * is the browser's own topmost-element answer, decided at dispatch time
+     * by paint order, not by which `if` this file happens to ask first.
+     * MEASURED against a real page: moving the bus-label check ahead of
+     * `edgeHitAt` while still reading `ev.target` left the label unreachable,
+     * identically to before.
+     *
+     * `document.elementsFromPoint` (plural — distinct from the singular
+     * `elementFromPoint` `edgeHitAt` above reads) answers a different
+     * question: the WHOLE stack of elements under the point, in z-order, not
+     * only the topmost one. Walking it for a `.ed-wave-buslabel` finds the
+     * mark even when something else is painted over it, which is exactly
+     * this finding's fix. The walk stops at `canvas` itself so a label-shaped
+     * class elsewhere in the document (outside the canvas this press is
+     * even inside) can never match.
+     *
+     * Falls back to the old `ev.target`-only check when `elementsFromPoint`
+     * is not available at all (older engines) — that keeps every OTHER bus
+     * label (the overwhelming majority, which do not sit under an edge's
+     * endpoint) working exactly as it always has; only the overlap case this
+     * finding is about stays unfixed on such an engine.
+     */
+    function busLabelHitAt(ev) {
+      function isLabel(el) {
+        return el !== null && el !== undefined && typeof el.classList === 'object' &&
+          el.classList !== null && el.classList.contains('ed-wave-buslabel');
+      }
+      if (typeof d.elementsFromPoint === 'function') {
+        const stack = d.elementsFromPoint(ev.clientX, ev.clientY);
+        for (const el of stack) {
+          if (isLabel(el)) return el;
+          if (el === canvas) break;
+        }
+        return null;
+      }
+      return isLabel(ev.target) ? ev.target : null;
+    }
+
     // ── the preview ───────────────────────────────────────────────────────
     /**
      * The engine's own rendering of the very same document.
@@ -2119,6 +4047,7 @@
     groupSpansOf: groupSpansOf,
     mountedInsideContent: mountedInsideContent,
     BRUSHES: BRUSHES,
+    isBrushKey: isBrushKey,
     SIZES: SIZES,
   };
 });