@helping-ai-workflow/md2doc 3.5.0 → 3.6.0

package/lib/editor/wave-ui.js

@@ -9,9 +9,10 @@
  * inlined as a plain <script>, not bundled, so a bare require() here would be
  * undefined in the browser — every dependency arrives as a parameter instead
  * (`opts.codec`, `opts.geometry`, `opts.createStore`, `opts.wavedrom`,
- * `opts.document`). That is also why this file names no global of its own: the
- * layer that knows which `document` and which engine build are in play is
- * client.js, and it is the only one that should be deciding.
+ * `opts.document`, `opts.draw`, `opts.panels`). That is also why this file
+ * names no global of its own: the layer that knows which `document` and which
+ * engine build are in play is client.js, and it is the only one that should be
+ * deciding.
  *
  * FIVE things this file is not allowed to get wrong, each of them a ruling from
  * Tasks 1-5 rather than a preference:
@@ -103,8 +104,25 @@
   }
 
   /** Drawing sizes. Handed to `wave-geometry` so the hit test and the paint
-   *  cannot drift; nothing here re-derives a row position. */
-  const SIZES = { laneHeight: 34, cycleWidth: 48, nameColWidth: 0 };
+   *  cannot drift; nothing here re-derives a row position.
+   *
+   *  v3.6.0 Task 6: nameColWidth was 0 — the canvas always supported a name
+   *  column (`wave-geometry.DEFAULTS` carried 40), the UI was just passing 0.
+   *  120px: the canvas needs to say what a lane is called, not lean on the
+   *  rail beside it. Task 8 re-measures this against the longest lane name in
+   *  the repo's fixtures and may change it — this value is not re-derived
+   *  here.
+   *
+   *  v3.6.0 Task 8 — MEASURED: the longest `name:` fixture across
+   *  test/editor-journey.test.js, test/wave-codec.test.js and
+   *  test/wave-geometry.test.js is 12 chars (`he said "hi"`). Rendered as an
+   *  SVG `<text>` at 11px (`wave-draw.js`'s `.ed-wave-lane-label`) it measures
+   *  54.9px in the app's default sans-serif stack and 79.5px in the worst
+   *  case tried (monospace) — both comfortably under the 110px a top-level
+   *  (depth 0) name gets (`nameColWidth 120 - NAME_GAP 10`), so 120 stays.
+   *  See task-8-report.md for the full measurement (puppeteer,
+   *  `getComputedTextLength`). */
+  const SIZES = { laneHeight: 34, cycleWidth: 48, nameColWidth: 120 };
 
   /**
    * The index the preview is rendered under, and why it is not 0.
@@ -131,52 +149,6 @@
   const PREVIEW_INDEX = 9000;
   const PREVIEW_ID_PREFIX = 'md2doc-wave-preview-';
 
-  /**
-   * What wavedrom 3.5.0 actually draws for one level, by its own brick id.
-   *
-   * Every row was MEASURED in this session against the pinned engine, by
-   * rendering `wave: 'z' + c + c` (the `z` anchors the char so it is never at
-   * cycle 0) and reading the second half-brick of each cycle out of the
-   * rendered SVG's `<use xlink:href="#…">` list:
-   *
-   *     0 000   1 111   x xxx   z zzz   u uuu   d ddd
-   *     h 111   l 000   H 111   L 000
-   *     p nclk  P nclk  n pclk  N pclk
-   *     = vvv-2  2 vvv-2  3 vvv-3 … 9 vvv-9
-   *     anything else  xxx      (measured with 'Q' and 'ä')
-   *
-   * So this is not a re-implementation of the engine's level model — `levelsOf`
-   * is that, and it lives in the codec. This is the last step: which PICTURE
-   * the engine paints for a level it has already decided. Keeping it in
-   * production code rather than in the test is deliberate: the drawing has to
-   * make exactly this decision anyway (an `h` lane is drawn high, an `=` lane
-   * is drawn as a bus), and a copy of it living only in a test would be a
-   * second belief about the engine with nothing pinning it to the first.
-   */
-  function brickOf(level) {
-    if (typeof level !== 'string' || level.length === 0) return 'xxx';
-    if (level === '0' || level === 'l' || level === 'L') return '000';
-    if (level === '1' || level === 'h' || level === 'H') return '111';
-    if (level === 'z') return 'zzz';
-    if (level === 'u') return 'uuu';
-    if (level === 'd') return 'ddd';
-    if (level === 'p' || level === 'P') return 'nclk';
-    if (level === 'n' || level === 'N') return 'pclk';
-    if (level === '=') return 'vvv-2';
-    if (level >= '2' && level <= '9') return 'vvv-' + level;
-    return 'xxx';
-  }
-
-  /** A brick that draws a whole clock period and therefore never merges with
-   *  its neighbour: two `p` cycles are two clock periods, not one long one. */
-  function isClock(brick) {
-    return brick === 'nclk' || brick === 'pclk';
-  }
-
-  function isBus(brick) {
-    return brick.slice(0, 4) === 'vvv-';
-  }
-
   /**
    * Whether `el` is inside the editor's serialisation surface.
    *
@@ -194,28 +166,6 @@
     return false;
   }
 
-  /**
-   * A plain, unfrozen copy of a document.
-   *
-   * The store's documents are deep-frozen — that is what stops a stray write
-   * from corrupting an undo entry — and wavedrom's renderer WRITES INTO the
-   * source object it is handed. Under this file's strict prologue that is a
-   * throw, so the preview gets its own copy every time. Bounded by the codec's
-   * own nesting ceiling so a pathological document cannot run the stack out
-   * here either.
-   */
-  function plainCopy(value, depth) {
-    if (depth > 64 || value === null || typeof value !== 'object') return value;
-    if (Array.isArray(value)) {
-      const out = [];
-      for (let i = 0; i < value.length; i++) out.push(plainCopy(value[i], depth + 1));
-      return out;
-    }
-    const out = {};
-    for (const key of Object.keys(value)) out[key] = plainCopy(value[key], depth + 1);
-    return out;
-  }
-
   /** Line and column of a byte offset, 1-based — what a parse failure has to
    *  say beyond its own message for the offset to mean anything to a person. */
   function whereIs(text, offset) {
@@ -224,82 +174,14 @@
     return { line: lines.length, column: lines[lines.length - 1].length + 1 };
   }
 
-  /**
-   * The group titles in the lane tree, each with the span of display rows it
-   * covers.
-   *
-   * A group title occupies NO ROW — measured in Task 2 against the pinned
-   * engine, and `wave-geometry` is built on it. What it occupies is horizontal
-   * space in the name column, so that is where this puts it: a label in the
-   * lane list's rail, spanning its lanes' rows. Drawing it as a row of its own
-   * would put the lane list one row out of step with the waveform beside it for
-   * every lane below the group, which is exactly the class of silent
-   * disagreement this batch keeps producing.
-   *
-   * The span is derived from the lanes' own paths — `layout.lanes[i].path` is
-   * the codec's — so a group with no lanes under it has no span and is not
-   * shown here; it is not addressable through the bridge either.
-   */
-  function groupSpansOf(doc, layout) {
-    const byKey = new Map();
-    for (let i = 0; i < layout.lanes.length; i++) {
-      const path = layout.lanes[i].path;
-      // Every proper ancestor between `signal` and the lane itself is a group.
-      for (let cut = 2; cut < path.length; cut++) {
-        const prefix = path.slice(0, cut);
-        const key = JSON.stringify(prefix);
-        const seen = byKey.get(key);
-        if (seen === undefined) {
-          byKey.set(key, { path: prefix, depth: cut - 1, from: i, to: i });
-        } else {
-          seen.to = i;
-        }
-      }
-    }
-    const out = [];
-    for (const span of byKey.values()) {
-      const container = valueAt(doc, span.path);
-      const title = Array.isArray(container) && typeof container[0] === 'string'
-        ? container[0] : null;
-      if (title === null) continue;   // an untitled group has nothing to show
-      out.push({ path: span.path, title: title, depth: span.depth,
-        from: span.from, to: span.to });
-    }
-    out.sort(function (a, b) { return a.from - b.from || a.depth - b.depth; });
-    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) {
-      if (node === null || typeof node !== 'object') return undefined;
-      node = node[seg];
-    }
-    return node;
-  }
+  // `plainCopy`, `groupSpansOf`, `directFirstLaneOf` and `valueAt` used to
+  // live here. v3.6.0 Task 2 moved `plainCopy` and `directFirstLaneOf` to
+  // `wave-panels.js` with the rendering functions that were their only
+  // callers (and Task 14 then deleted `directFirstLaneOf` outright, with the
+  // per-row 解散群組 button that was its one caller); `groupSpansOf` and
+  // `valueAt` moved to `wave-geometry.js` per ruling R9, since both
+  // `wave-panels.js` and `wave-draw.js` need them and that module is the one
+  // place both already depend on.
 
   /** The labels a lane's `data` supplies, one per explicit value cycle. */
   function labelsOf(lane) {
@@ -350,9 +232,63 @@
       throw new Error('wave-ui: the overlay may not be mounted inside .content ' +
         '(its children are serialised back into the user markdown)');
     }
+    // `opts.draw` (wave-draw.js's `createDrawer`) arrives as a parameter like
+    // every other dependency here, per this file's own header comment — a
+    // bare `require('./wave-draw.js')` would be undefined in the browser,
+    // where wave-ui.js is injected as a plain <script> with no shim of its
+    // own (see lib/editor/server.js). Missing it fails LOUD rather than
+    // quietly drawing nothing: a diagram with no drawing layer behind it must
+    // never look like a diagram that simply has nothing to draw.
+    if (!opts.draw) {
+      throw new Error('wave-ui: opts.draw (wave-draw.js\'s createDrawer) is required');
+    }
+    // v3.6.0 Task 2: `opts.panels` (wave-panels.js's `createPanels`) is the
+    // toolbar/lane-rail/right-hand-panels counterpart to `opts.draw` just
+    // above, arriving as a parameter for the identical reason — no shim for
+    // a bare `require('./wave-panels.js')` in the browser injection path.
+    if (!opts.panels) {
+      throw new Error('wave-ui: opts.panels (wave-panels.js\'s createPanels) is required');
+    }
 
     const store = opts.createStore(opts.source);
 
+    /**
+     * v3.6.0 Task 13: the 原始碼 panel's whole reason to exist — the exact
+     * bytes 保留並關閉 would write right now, not a re-serialisation made
+     * for display. The SAME `store.toPatch()` path `afterStoreMoved` already
+     * runs after every gesture (`lastPatch`, below), recomputed fresh here
+     * rather than reusing that cached value: this can be asked before the
+     * very first gesture, while `lastPatch` is still `null`.
+     *
+     * A refusal is shown as a sentence, not thrown — the same "say what it
+     * cannot do" rule `renderUnmodelled` and the unreadable-source panel
+     * both already follow, rather than crashing a panel over a state the
+     * user can act on (undo one step, or make a smaller change).
+     */
+    function sourceText() {
+      const patch = store.toPatch();
+      return patch.ok === true ? patch.text
+        : '（這個改動目前沒辦法只改幾個位元組寫回去：' + patch.reason + '）';
+    }
+    // Test-visible, same convention `client.js` already uses for its own
+    // `window.__edTest*` probes: a plain global a Puppeteer test can call
+    // directly, assigned through `d.defaultView` rather than a bare
+    // `window` reference — this file names no global of its own (see its
+    // header) and is reachable from node with a fake `opts.document`, where
+    // a bare `window` would throw.
+    const probeWin = d.defaultView;
+    if (probeWin) probeWin.__edWaveSourceProbe = sourceText;
+
+    const drawer = opts.draw.createDrawer({
+      d: d,
+      geometry: geometry,
+      codec: codec,
+      SIZES: SIZES,
+      SVGNS: SVGNS,
+      BRUSHES: BRUSHES,
+      labelsOf: labelsOf,
+    });
+
     const overlay = d.createElement('div');
     overlay.className = 'ed-wave-overlay';
     overlay.setAttribute('role', 'dialog');
@@ -367,15 +303,32 @@
     // closing.
     let brush = '1';
     let clip = null;
-    let selection = null;        // {laneIndex, from, to} — the cycles a gesture acts on
+    // v3.6.0 Task 14: `{laneIndex, laneTo, from, to}` — THE selection, and
+    // the only one this dialog has. `laneIndex`..`laneTo` (inclusive,
+    // normalised so `laneTo >= laneIndex`) is the lane range the 訊號/群組
+    // sections act on; `from`..`to` is the cycle range on `laneIndex` that
+    // the 週期 section and the brushes act on. An ordinary selection has
+    // `laneTo === laneIndex`; only Shift+click on the rail widens it.
+    //
+    // Every producer writes all four keys. That is deliberate rather than
+    // "absent means single lane": this repo has already paid for one value
+    // whose two ends disagreed about what `undefined` meant (wavedrom's own
+    // `captext` vs `ticktock`), and a reader here does
+    // `i >= laneIndex && i <= laneTo` with no second rule to remember.
+    let selection = null;
     let drag = null;             // live pointer drag, never pushed until mouseup
     let gestures = 0;
     let lastPatch = null;
     // Where the keyboard should end up after the NEXT repaint, when that is not
-    // simply "wherever it was". A move button is the case that needs it: the
-    // control the user pressed belongs to a row, and after the move the lane
-    // they are pushing around is at a different row — so pressing ▲ twice has
-    // to move the same lane twice, not two different ones.
+    // simply "wherever it was". A gesture that MOVES a lane is the case that
+    // needs it: whatever the keyboard was on belongs to a row, and after the
+    // move the lane the user is pushing around sits at a different row — so
+    // Alt+↓ twice has to move the same lane twice, not two different ones.
+    // (v3.6.0 Task 16 re-pointed this sentence: it used to name the rail's
+    // per-row ▲, which Task 14 removed; `moveSelectedLane` now carries the
+    // same fact and nominates the moved lane's own name field. The narrative
+    // further down about what ▲/▼ USED to do is a record of a past version
+    // and is deliberately left as it was.)
     let focusOverride = null;
     // Where the KEYBOARD is on the drawing: one cell, and the keyboard's whole
     // equivalent of the pointer. Null until the keyboard has actually entered
@@ -396,6 +349,12 @@
     // (deleted, or its entry no longer parses), so a stale index can never
     // reach `renderEdgeBar` or a shape/label commit.
     let selectedEdge = null;
+    // v3.6.0 Task 13 fix round 3: the PREVIOUS render's `selectedEdge`, so
+    // `render()` below can tell "just became selected" (null -> a number)
+    // apart from "still selected, repainting for some other reason" (a
+    // number -> the same or a different number) — see the comment at that
+    // check for why the distinction matters.
+    let lastSelectedEdge = 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
@@ -418,6 +377,15 @@
     // Enter still means "finish from where I already stood".
     let edgeMode = 'idle';
     let pendingFrom = null;
+    // v3.6.0 Task 11: which transition anchor the pointer is nearest while
+    // armed — `{laneIndex, cell}`, `geometry.boundaryAt`'s own field names,
+    // never converted to `cellFromEvent`'s `cycle` (see that function's own
+    // comment). Cleared whenever `edgeMode` leaves 'armed' for any reason
+    // (idle or dragging) so a stale hot dot never survives past the state
+    // that produced it — set alongside `edgeMode` in `setEdgeMode` itself,
+    // the one place that already keeps every other edge-gesture mark
+    // (`pendingFrom`) in sync with it.
+    let hoverBoundary = 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
@@ -428,6 +396,13 @@
       edgeBtn.classList.toggle('is-on', next !== 'idle');
       overlay.setAttribute('data-wave-edgemode', next);
       if (next === 'idle') pendingFrom = null;
+      // v3.6.0 Task 11: the hover dot only ever means anything while
+      // 'armed' (dragging repaints its own hot dot via `onCanvasMove`'s
+      // `at`, computed fresh every move) — leaving 'armed' for either
+      // neighbour state without clearing this would let a stale hot dot
+      // from the last hover survive into a repaint nothing is tracking it
+      // for any more.
+      if (next !== 'armed') hoverBoundary = 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
@@ -460,28 +435,6 @@
     //     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
@@ -739,6 +692,114 @@
         next.focus();
         return;
       }
+      /**
+       * v3.6.0 Task 16: the dialog's four Alt+arrow chords.
+       *
+       *   Alt+↑ / Alt+↓   move the SELECTED LANE up or down the list.
+       *   Alt+← / Alt+→   move the CELL CURSOR to the next transition, while
+       *                   the 關聯線 gesture is armed.
+       *
+       * Alt is this dialog's "the arrow key, but coarser" modifier, and the
+       * two halves are honestly not the same KIND of operation — vertically
+       * it acts on the document (a lane changes place, `commit` runs),
+       * horizontally only on the cursor (nothing is written). What they share
+       * is that each is the larger-grained reading of the arrow beneath it,
+       * and that neither is reachable any other way from the keyboard.
+       *
+       * Alt+←/→ arrived here in fix round 3, moved off plain ←/→. See the
+       * long comment in `handleDrawingKey` for what that binding cost (T9b:
+       * a jump can only land on a transition, so it left several cells with
+       * no keyboard route at all, and the keyboard could no longer reproduce
+       * the mouse's edge byte for byte). This branch is the only home
+       * available to it: the call to `handleDrawingKey` below is gated on
+       * `!ev.altKey`, so no Alt-modified key can reach that function, and
+       * re-opening that gate is how `Ctrl+Z` routing would get disturbed.
+       *
+       * ALL FOUR ARE CLAIMED DIALOG-WIDE, including the two that then refuse.
+       * `Alt+←`/`Alt+→` is Back/Forward in a desktop browser, and an
+       * unclaimed one inside a modal editing session is a keystroke that can
+       * navigate the whole session away. Claiming it — `preventDefault()` in
+       * the capture phase, on every target inside this overlay — is the
+       * direction that reduces that risk whichever way a given browser
+       * behaves. MEASURED, and the measurement is INCONCLUSIVE rather than
+       * reassuring: this repo's headless Chrome does not fire back-navigation
+       * on a CDP-synthesised `Alt+ArrowLeft` at all — verified on a bare page
+       * with no key handler of any kind, history length 3, document unchanged
+       * — so the harness cannot answer the question either way, and a real
+       * desktop browser is where it would have to be confirmed. The cost of
+       * claiming it is one: Option+←/→ word navigation inside a lane's name
+       * field, a single-line input, stops working.
+       *
+       * Task 14 took the rail's per-row ▲/▼ off — one pair per lane, none of
+       * which fit in the slimmed row — and left the handle's drag-and-drop
+       * as the only way to reorder a lane at all. A gesture that exists only
+       * under a pointer is the gap v3.5.0 Task 10 spent a whole task closing
+       * on this same surface, so it does not get to reopen here. The
+       * reference fork never had a second door either: its shortcut parser
+       * returns null the moment it sees `altKey`, so `moveLane` is
+       * drag-only there. Ours has two doors and both go through the SAME
+       * `codec.moveLane`, with display positions — the rail's own drop
+       * handler in `wave-panels.js` is the other one — rather than growing a
+       * second opinion about lane order.
+       *
+       * The LANE half is claimed here rather than inside `handleDrawingKey`
+       * for two reasons that are both load-bearing. `handleDrawingKey`
+       * accepts exactly two targets (the canvas and the dialog) and returns
+       * false on anything else, while the place a person reordering lanes
+       * actually sits is the lane's own NAME FIELD — which is where
+       * `moveSelectedLane`'s `focusOverride` puts them and keeps them, so
+       * Alt+↓ twice moves the same lane twice instead of two different ones.
+       * And the call to it just below is gated on `!ev.altKey`, so an
+       * Alt-modified key cannot reach it at all.
+       *
+       * Above the `!(ctrl||meta) || alt` gate further down, which returns on
+       * any Alt key: everything Alt-modified this dialog claims has to be
+       * claimed before that line.
+       *
+       * TWO THINGS THE CONDITION DELIBERATELY DOES NOT SAY, both v3.6.0 Task
+       * 16 fix round 1, both documented rather than guarded:
+       *
+       * `ev.shiftKey` is not tested, so **Alt+Shift+↑/↓ moves the lane too**.
+       * That is the same shape `isBrushKey` settled on (see its own comment
+       * at the top of this file): keying an admission rule on Shift is what
+       * blocked `P`/`N`/`|` from the keyboard entirely in v3.5.0 Task 10.
+       * There is no second meaning for Shift here — a lane move has no range
+       * to extend — so the extra modifier is harmless rather than ambiguous,
+       * and refusing it would only make the key stop working for anyone
+       * whose hand is still on Shift from a Shift+click on the rail.
+       *
+       * No sub-panel gate either. A press taken while the rail's rename
+       * field or the bus data-label field is open moves the lane and lets
+       * the repaint retire that field, dropping whatever was half-typed in
+       * it — exactly what `Ctrl+Z` already does there (see `render()`'s own
+       * first line, and `renderCanvas`'s). Both text sub-panels behave the
+       * same way and neither wedges the keyboard: `moveSelectedLane` has
+       * already written `focusOverride`, so `dataEdit.retire`'s own
+       * `focusOverride === null` claim never fires and `restoreFocus` lands
+       * on a real element. Standing this gesture behind the sub-panels the
+       * way Escape does is a design call this task did not take.
+       */
+      if (store.ok === true && ev.altKey === true && !ev.ctrlKey && !ev.metaKey &&
+          (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' ||
+           ev.key === 'ArrowLeft' || ev.key === 'ArrowRight')) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+          moveSelectedLane(ev.key === 'ArrowUp' ? -1 : 1);
+          return;
+        }
+        // Armed only, and it REFUSES OUT LOUD otherwise rather than becoming
+        // a silent no-op. `jumpTransition` writes `hoverBoundary`, which
+        // `setEdgeMode` documents as meaningful only while 'armed' — a jump
+        // taken while idle would leave a hot dot behind that nothing is
+        // tracking, and it would light up the moment the user did arm.
+        if (edgeMode !== 'armed') {
+          panels.say('先按「關聯線」武裝，Alt+←／→ 才有轉態點可以跳');
+          return;
+        }
+        jumpTransition(ev.key === 'ArrowRight' ? 1 : -1);
+        return;
+      }
       // The drawing's own keys, claimed here rather than on the canvas element
       // so they are decided in the same place — and in the same phase — as
       // Escape, Tab and undo/redo. Deliberately BELOW those three (a cell
@@ -768,14 +829,14 @@
         ev.preventDefault();
         ev.stopPropagation();
         if (store.undo()) afterStoreMoved('undo');
-        else say('沒有可以復原的動作');
+        else panels.say('沒有可以復原的動作');
         return;
       }
       if (key === 'y' || (key === 'z' && ev.shiftKey)) {
         ev.preventDefault();
         ev.stopPropagation();
         if (store.redo()) afterStoreMoved('redo');
-        else say('沒有可以重做的動作');
+        else panels.say('沒有可以重做的動作');
       }
     }
     d.addEventListener('keydown', onKeyDown, true);
@@ -859,13 +920,101 @@
     marksDoc = store.doc;
 
     // ── toolbar ───────────────────────────────────────────────────────────
+    //
+    // v3.6.0 Task 12: eight captioned `.ed-wave-tool-group` sections
+    // (週期/電位/訊號/群組/關聯線/歷史/匯出/檔案) instead of the two flat bars
+    // this used to be. See `wave-panels.js`'s `toolGroup()` for why each
+    // caption sits to the LEFT of its buttons rather than above them.
     const toolbar = d.createElement('div');
-    toolbar.className = 'ed-wave-toolbar';
+    toolbar.className = 'ed-wave-toolbar ed-wave-tools';
     panel.appendChild(toolbar);
 
+    // v3.6.0 Task 2/12: the toolbar/right-hand-panels/lane-rail factory.
+    // Called here, right after `panel` exists, which is BEFORE several
+    // elements its OTHER returned functions need (`metaBar`'s own fields,
+    // the edge inspector, `laneCol`, the preview host, `status`). `deps` is
+    // the same object referenced below at each of those elements' own
+    // creation — see `deps.metaBar =` etc. — and `wave-panels.js`'s own
+    // header explains why that is not a reorder. `actions` is the callback
+    // bag for the `wave-ui.js`-owned state a moved function still needs to
+    // read or write; see that same header for what each entry is for and
+    // why `close` is not among them (nothing that moved calls it).
+    const deps = {
+      d: d,
+      geometry: geometry,
+      codec: codec,
+      SIZES: SIZES,
+      actions: {
+        commit: commit,
+        render: render,
+        selectionSet: function (value) { selection = value; },
+        focusOverrideGet: function () { return focusOverride; },
+        focusOverrideSet: function (key) { focusOverride = key; },
+        groupRenameGet: function () { return groupRename; },
+        groupRenameSet: function (value) { groupRename = value; },
+        sourceText: sourceText,
+      },
+      overlay: overlay,
+      panel: panel,
+      PREVIEW_INDEX: PREVIEW_INDEX,
+      PREVIEW_ID_PREFIX: PREVIEW_ID_PREFIX,
+      wavedrom: opts.wavedrom,
+    };
+    const panels = opts.panels.createPanels(deps);
+
+    // v3.6.0 Task 15: the shared `NOT_YET_WIRED` title that used to stand
+    // here went out with its last three holders — 匯出's SVG / PNG /
+    // 複製 WaveJSON. Every button this toolbar builds now does something,
+    // and nothing is created disabled to make a section's shape look real.
+
+    // ── 週期 ──────────────────────────────────────────────────────────────
+    const cycleGroup = panels.toolGroup('週期');
+    toolbar.appendChild(cycleGroup);
+    panels.toolButton('ed-wave-cycle-insert', '插入 cycle',
+      '在選取的位置插入一個 cycle（每一條 lane 同時加寬，不會有人掉隊）', function () {
+        const at = selection === null ? 0 : Math.min(selection.from, selection.to);
+        commit('insert-cycle', function (doc) { return codec.insertCycles(doc, at, 1); });
+      }, cycleGroup);
+    panels.toolButton('ed-wave-cycle-delete', '刪除 cycle',
+      '刪掉選取的 cycle（每一條 lane 同時變窄）', function () {
+        if (selection === null) { panels.say('先選一段 cycle 再刪'); return; }
+        const from = Math.min(selection.from, selection.to);
+        const count = Math.abs(selection.to - selection.from) + 1;
+        commit('delete-cycle', function (doc) { return codec.deleteCycles(doc, from, count); });
+      }, cycleGroup);
+    panels.toolButton('ed-wave-cycle-copy', '複製',
+      '把選取的 cycle 從每一條 lane 上拷一份', function () {
+        if (selection === null) { panels.say('先選一段 cycle 再複製'); return; }
+        const from = Math.min(selection.from, selection.to);
+        const count = Math.abs(selection.to - selection.from) + 1;
+        clip = codec.copyCycles(store.doc, from, count);
+        panels.say('複製了 ' + count + ' 個 cycle');
+        render();
+      }, cycleGroup);
+    panels.toolButton('ed-wave-cycle-paste', '貼上（插入）',
+      '把剪貼簿插進選取的位置', function () { pasteAt('insert'); }, cycleGroup);
+    panels.toolButton('ed-wave-cycle-paste-over', '貼上（覆蓋）',
+      '用剪貼簿蓋掉選取位置起算的那幾個 cycle', function () { pasteAt('overwrite'); }, cycleGroup);
+
+    function pasteAt(mode) {
+      if (clip === null) { panels.say('剪貼簿是空的'); return; }
+      const at = selection === null ? 0 : Math.min(selection.from, selection.to);
+      commit('paste-' + mode, function (doc) {
+        return codec.pasteCycles(doc, at, clip, mode);
+      });
+    }
+
+    // ── 電位 ──────────────────────────────────────────────────────────────
+    //
+    // v3.6.0 Task 12: this section WRAPS the existing brush bar — the 22
+    // brush buttons are still built inline by this same loop, with
+    // `drawer.levelIcon` glyphs (Task 10) — `panels.toolButton` is not used
+    // for them, so only the container they land in is new here.
+    const brushGroup = panels.toolGroup('電位');
+    toolbar.appendChild(brushGroup);
     const brushBar = d.createElement('div');
     brushBar.className = 'ed-wave-brushes';
-    toolbar.appendChild(brushBar);
+    brushGroup.appendChild(brushBar);
     const brushButtons = [];
     for (const ch of BRUSHES) {
       const b = d.createElement('button');
@@ -873,7 +1022,21 @@
       b.className = 'ed-wave-brush';
       b.setAttribute('data-brush', ch);
       b.setAttribute('data-focus-key', 'brush-' + ch);
-      b.textContent = ch;
+      // v3.6.0 Task 10: the glyph is built by `drawer.levelIcon` — the SAME
+      // brick-drawing code `renderCanvas` paints the diagram with, not a
+      // second hand-drawn set (see wave-draw.js's own `levelIcon` comment).
+      // `panels.toolButton` is NOT used for these buttons: brush buttons are
+      // built here, inline, not through that helper, so wiring the icon
+      // where `toolButton` lives would put glyphs on the cycle-operation
+      // buttons instead and leave every brush bare. The character stays on
+      // the button too, as a caption next to the icon rather than instead
+      // of it — a user who already knows the wavedrom letter should not
+      // have to relearn a picture-only toolbar.
+      b.appendChild(drawer.levelIcon(ch));
+      const cap = d.createElement('span');
+      cap.className = 'ed-wave-brush-char';
+      cap.textContent = ch;
+      b.appendChild(cap);
       b.addEventListener('click', function () {
         brush = ch;
         paintBrushState();
@@ -881,6 +1044,76 @@
       brushBar.appendChild(b);
       brushButtons.push(b);
     }
+    /**
+     * The toolbar sections that act on `selection`, repainted from it.
+     *
+     * v3.6.0 Task 14. Called from `render()`, from `repaintDrawing()`, and
+     * from every INLINE `drawer.renderCanvas` site in this file — which is
+     * not a set of duplicate calls. `render()` is the slow path; every other
+     * one of them both writes `selection` and reads it back out of the
+     * drawer's own clamp, and none of them rebuilds the toolbar. Wired only
+     * into `render()`, these buttons kept whatever state the LAST full
+     * repaint left them in.
+     *
+     * Two rescues used to hide most of that, and fix round 1 is the gesture
+     * where both are shut at once:
+     *
+     *   - `onCanvasUp`'s `commit('paint', …)` re-renders — but `commit`
+     *     returns false without calling `afterStoreMoved` when the gesture
+     *     changed nothing, and pressing a cell that already holds the
+     *     brush's own value changes nothing.
+     *   - `onCanvasDown`'s `canvas.focus()` fires the drawer-wired
+     *     `enterDrawing` → `repaintDrawing` — but only when the canvas did
+     *     not already have the keyboard, i.e. never on the second press in
+     *     a row.
+     *
+     * MEASURED, both symptoms: (a) open the dialog (no selection, 刪除
+     * disabled), walk to a lane with the arrow keys, and 刪除 was still
+     * disabled although the lane was selected and highlighted on both the
+     * rail and the canvas; (b) press req's cycle 2, then ack's cycle 4 —
+     * `data-insert-at`/`data-lands-in` stayed on 2/`bus` while the button,
+     * which reads the LIVE `selection`, would have inserted at 4 outside
+     * every group. (b) is the worse of the two: it is this task's own
+     * contract — the button says which container it is about to use BEFORE
+     * it is pressed — broken by the button itself.
+     *
+     * So it is called at every writer of the state it paints, not at the
+     * one whose symptom was reported. The rail's own `.is-selected` is a
+     * separate, pre-existing staleness on those same inline paths (they do
+     * not call `panels.renderLanes` either) and is deliberately NOT fixed
+     * here.
+     *
+     * 新增 and 空白列 stay enabled with nothing selected — that case has a
+     * real answer of its own (position 0; see `signalInsertAt`) — and they
+     * publish WHERE the insert lands before they are pressed, which is the
+     * property the rail's per-row ＋ used to carry in `data-lands-in` and
+     * its tooltip. The other three need a lane named, and 解散群組 needs
+     * that lane to be inside a group; a button that looks pressable and
+     * then answers「先選一條 lane」is the affordance this batch is
+     * removing, not reproducing.
+     */
+    function paintSelectionState(doc, layout) {
+      const insertAt = signalInsertAt(layout);
+      const insertLanding = panels.landingOf(doc, insertAt);
+      const insertWhere = insertLanding.title === null
+        ? '群組外' : '群組「' + insertLanding.title + '」裡';
+      for (const b of [signalAddBtn, signalBlankBtn]) {
+        b.setAttribute('data-insert-at', String(insertAt));
+        b.setAttribute('data-lands-in',
+          insertLanding.title === null ? '' : insertLanding.title);
+      }
+      signalAddBtn.title = '在選取的 lane 後面加一條（沒有選取就加在最前面）—— 會落在' + insertWhere;
+      signalBlankBtn.title = '在選取的 lane 後面插入一個空白列（WaveJSON 的 {}，' +
+        '用來空出間距；刪除跟刪一般的 lane 一樣）—— 會落在' + insertWhere;
+      signalDeleteBtn.disabled = selection === null;
+      signalCopyBtn.disabled = selection === null;
+      groupBtn.disabled = selection === null || selection.laneTo === selection.laneIndex;
+      groupDissolveBtn.disabled = selection === null ||
+        !laneIsInGroup(layout, selection.laneIndex);
+      overlay.setAttribute('data-wave-lane-range', selection === null ? ''
+        : selection.laneIndex + ',' + selection.laneTo);
+    }
+
     function paintBrushState() {
       for (const b of brushButtons) {
         b.classList.toggle('is-on', b.getAttribute('data-brush') === brush);
@@ -888,162 +1121,608 @@
       overlay.setAttribute('data-wave-brush', brush);
     }
 
-    const cycleBar = d.createElement('div');
-    cycleBar.className = 'ed-wave-cycleops';
-    toolbar.appendChild(cycleBar);
+    // ── 訊號 ──────────────────────────────────────────────────────────────
+    //
+    // v3.6.0 Task 14: these four came off the lane rail, where every row
+    // carried its own copy and none of them fit (see `wave-panels.js`'s
+    // `laneRow`). One copy each, here, acting on `selection` — the same mark
+    // the 週期 section and the brushes read, not a second one kept only for
+    // them.
+    //
+    // WHERE an insert lands is `laneInsertPath`'s asymmetry and cannot be
+    // argued away: an insert at a group's first lane joins that group, an
+    // insert just past its last lane does not. So the button says which
+    // container it is about to use BEFORE it is pressed — `data-lands-in`
+    // and the tooltip, both refreshed by `paintSelectionState` below on
+    // every repaint, full or fast — and the status line says it again
+    // after. That is the property the rail's per-row ＋ used to carry,
+    // moved rather than dropped.
+    const signalGroup = panels.toolGroup('訊號');
+    toolbar.appendChild(signalGroup);
 
-    function toolButton(cls, label, hint, fn) {
-      const b = d.createElement('button');
-      b.type = 'button';
-      b.className = cls;
-      b.setAttribute('data-focus-key', cls);
-      b.textContent = label;
-      b.title = hint;
-      b.addEventListener('click', fn);
-      cycleBar.appendChild(b);
-      return b;
+    /**
+     * Where 新增 / 空白列 put their new lane: right after the selection, and
+     * at the very top when there is nothing selected.
+     *
+     * "After the selection" is `laneTo + 1`, not `laneIndex + 1`: with a
+     * whole range picked, adding below the range is the only reading that
+     * does not silently cut it in half.
+     *
+     * The no-selection answer is 0 rather than the end, and that is the one
+     * choice here that is not obvious. The rail used to carry a ＋ at every
+     * position — one per row plus a tail — so every insert position from 0
+     * to n was reachable in one press. One button that only ever inserts
+     * AFTER something cannot offer position 0 at all: there is no lane to
+     * be after. Pairing "after the selection" with "0 when there is no
+     * selection" restores the full range — 0 with nothing picked, k+1 with
+     * lane k picked, the end with the last lane picked — and it costs one
+     * surprising default instead of one unreachable position. The button
+     * says which it is about to do before it is pressed (`data-lands-in`
+     * and the tooltip), so the surprise is visible rather than discovered.
+     */
+    function signalInsertAt(layout) {
+      const l = layout === undefined || layout === null
+        ? geometry.layoutOf(store.doc, SIZES) : layout;
+      if (selection === null) return 0;
+      return Math.min(selection.laneTo + 1, l.lanes.length);
     }
 
-    toolButton('ed-wave-cycle-insert', '插入 cycle',
-      '在選取的位置插入一個 cycle（每一條 lane 同時加寬，不會有人掉隊）', function () {
-        const at = selection === null ? 0 : Math.min(selection.from, selection.to);
-        commit('insert-cycle', function (doc) { return codec.insertCycles(doc, at, 1); });
-      });
-    toolButton('ed-wave-cycle-delete', '刪除 cycle',
-      '刪掉選取的 cycle（每一條 lane 同時變窄）', function () {
-        if (selection === null) { say('先選一段 cycle 再刪'); return; }
-        const from = Math.min(selection.from, selection.to);
-        const count = Math.abs(selection.to - selection.from) + 1;
-        commit('delete-cycle', function (doc) { return codec.deleteCycles(doc, from, count); });
-      });
-    toolButton('ed-wave-cycle-copy', '複製',
-      '把選取的 cycle 從每一條 lane 上拷一份', function () {
-        if (selection === null) { say('先選一段 cycle 再複製'); return; }
-        const from = Math.min(selection.from, selection.to);
-        const count = Math.abs(selection.to - selection.from) + 1;
-        clip = codec.copyCycles(store.doc, from, count);
-        say('複製了 ' + count + ' 個 cycle');
-        render();
-      });
-    toolButton('ed-wave-cycle-paste', '貼上（插入）',
-      '把剪貼簿插進選取的位置', function () { pasteAt('insert'); });
-    toolButton('ed-wave-cycle-paste-over', '貼上（覆蓋）',
-      '用剪貼簿蓋掉選取位置起算的那幾個 cycle', function () { pasteAt('overwrite'); });
+    function addLaneFromToolbar(name, lane) {
+      const at = signalInsertAt();
+      const landing = panels.landingOf(store.doc, at);
+      const where = landing.title === null ? '群組外' : '群組「' + landing.title + '」裡';
+      // Straight into the new lane's own name field — it is what the user
+      // types next, and on a spacer (no name to type) there is nothing
+      // else on that row to land on either. The lane arrives at display
+      // position `at`, so that is the key.
+      focusOverride = 'lane-name-' + at;
+      const added = commit(name, function (doc2) { return codec.addLane(doc2, at, lane); });
+      // fix round 1 (F6): the whole prefix per branch, not one concatenation
+      // with a shared 落在. The two bases this replaced differ by exactly one
+      // space — `say('新增的 lane 落在' + …)` has it because the phrase ends
+      // in a Latin word (so does 複製's message further down), and
+      // `say('空白列落在' + …)` does not because it ends in a CJK one. A
+      // single shared suffix has to get one of them wrong.
+      const lead = lane.wave === undefined ? '空白列落在' : '新增的 lane 落在';
+      if (added) panels.say(lead + where);
+    }
+
+    const signalAddBtn = panels.toolButton('ed-wave-signal-add', '新增',
+      '在選取的 lane 後面加一條（沒有選取就加在最前面）', function () {
+        addLaneFromToolbar('add-lane', { name: '', wave: 'x' });
+      }, signalGroup);
+    // v3.5.0 Task 13: WaveDrom's own blank row, `{}`. There is deliberately
+    // no dedicated "remove spacer" control: a spacer is a lane like any
+    // other, so 刪除 below removes it exactly as it removes anything else.
+    const signalBlankBtn = panels.toolButton('ed-wave-signal-blank', '空白列',
+      '在選取的 lane 後面插入一個空白列（WaveJSON 的 {}，用來空出間距；刪除跟刪一般的 lane 一樣）',
+      function () { addLaneFromToolbar('add-spacer', {}); }, signalGroup);
+    const signalDeleteBtn = panels.toolButton('ed-wave-signal-delete', '刪除',
+      '刪掉選取的那幾條 lane（如果群組因此空掉，群組也會一起走）', function () {
+        if (selection === null) { panels.say('先選一條 lane 再刪'); return; }
+        const lo = selection.laneIndex;
+        const hi = selection.laneTo;
+        const n = hi - lo + 1;
+        // The rows about to stop existing are exactly the ones the marks
+        // name, so the selection goes FIRST — a selection naming cycles on
+        // a lane that is about to disappear is stale the instant `commit`
+        // runs, and that staleness is what `carryMarks` exists to prevent
+        // everywhere else.
+        selection = null;
+        // The rows about to vanish are also where the keyboard is allowed to
+        // land, and the button the user pressed is about to disable itself
+        // (no selection left), so naming a destination here is not a nicety:
+        // `restoreFocus`'s fallback would otherwise be a disabled button.
+        // Display position `lo` is whatever lane inherits the place the
+        // deleted range occupied — on a document emptied down to nothing the
+        // key simply is not there and `restoreFocus` falls back to the
+        // dialog, which is the right answer for「there is no row left」.
+        focusOverride = 'lane-name-' + lo;
+        // Bottom-up: every removal renumbers the rows BELOW it, so taking
+        // the highest index first leaves the ones still to go untouched.
+        //
+        // fix round 1: an earlier draft of this comment claimed a top-down
+        // loop would delete a DIFFERENT set of lanes. It would not, and the
+        // claim is withdrawn rather than reworded — checked against the
+        // codec over five ranges, group-spanning ones included: deleting
+        // `lo` n times and deleting hi..lo give the identical document,
+        // because whatever shifts into `lo` is the next member of a
+        // CONTIGUOUS range. What bottom-up actually buys is that each index
+        // still means the lane it meant when the range was measured, so the
+        // loop stays correct if a range that is not contiguous ever reaches
+        // it; top-down would be silently relying on the contiguity.
+        const removed = commit('remove-lane', function (doc2) {
+          let out = doc2;
+          for (let k = hi; k >= lo; k -= 1) out = codec.removeLane(out, k);
+          return out;
+        });
+        if (removed) panels.say('已刪掉 ' + n + ' 條 lane —— Ctrl+Z 可以拿回來');
+      }, signalGroup);
+    const signalCopyBtn = panels.toolButton('ed-wave-signal-copy', '複製',
+      '複製選取的 lane，接在它後面（data 等欄位一起複製；node 錨點不會跟著複製，' +
+      '避免兩條 lane 搶同一個字母）', function () {
+        if (selection === null) { panels.say('先選一條 lane 再複製'); return; }
+        // One lane, the range's first: `duplicateLane` copies one lane and
+        // lands it at `at + 1`, and a loop over a range would interleave
+        // each copy with the original it renumbers. The range's own far end
+        // is left alone rather than guessed at.
+        const at = selection.laneIndex;
+        const landing = panels.landingOf(store.doc, at + 1);
+        const where = landing.title === null ? '群組外' : '群組「' + landing.title + '」裡';
+        focusOverride = 'lane-name-' + (at + 1);
+        const didDup = commit('duplicate-lane', function (doc2) {
+          return codec.duplicateLane(doc2, at);
+        });
+        if (didDup) panels.say('複製的 lane 落在' + where);
+      }, signalGroup);
 
-    function pasteAt(mode) {
-      if (clip === null) { say('剪貼簿是空的'); return; }
-      const at = selection === null ? 0 : Math.min(selection.from, selection.to);
-      commit('paste-' + mode, function (doc) {
-        return codec.pasteCycles(doc, at, clip, mode);
+    /**
+     * v3.6.0 Task 16: move the selected lane one row up (`step === -1`) or
+     * down (`step === 1`) — the keyboard's half of the rail handle's drag,
+     * reached by Alt+↑ / Alt+↓ in `onKeyDown`.
+     *
+     * ONE lane, the range's first, exactly as 複製 just above: `moveLane`
+     * moves one lane, and a loop over a range would renumber each member out
+     * from under the next. The range's far end is collapsed rather than
+     * guessed at, so what moved and what is selected afterwards are the same
+     * one lane.
+     *
+     * Both ends of the list REFUSE OUT LOUD instead of silently doing
+     * nothing. A key that does nothing and says nothing is, to the person
+     * pressing it, indistinguishable from a key this dialog never bound —
+     * and the status line is where every other refusal in here already goes.
+     *
+     * WHERE THE MARKS END UP. They are collapsed onto the moved lane BEFORE
+     * the commit, at its OLD row, and `carryMarks` — this file's single
+     * mechanism for "a mark follows its lane", by lane identity through
+     * `wave-store.laneTrace` — is what carries them to the new row.
+     * Re-pointing them by hand afterwards would cost a second `render()`
+     * (the one inside `commit` has already run and already consumed
+     * `focusOverride`) and would stand a second belief about where the lane
+     * went beside the trace's, which is the shape of defect this batch has
+     * paid for repeatedly. MEASURED in a real browser on the journey
+     * fixture, both from the trace alone: Alt+↓ on the lane selected at row
+     * 0 with no cell cursor yet took `data-wave-lane-range` 0,0 → 1,1 and
+     * left `data-wave-cursor` empty (no cursor is invented for a gesture
+     * that never entered the drawing); Alt+↑ with the cell cursor sitting on
+     * the moved lane at row 2 took `data-wave-cursor` 2,0 → 1,0 and
+     * `data-wave-lane-range` 2,2 → 1,1.
+     *
+     * The invariant 訊號's 刪除 quietly depends on — a non-null `selection`
+     * always names a lane that exists, so its `commit` always returns true —
+     * survives every exit here. The two refusals leave `selection` exactly
+     * as they found it. The commit path writes `{laneIndex: at, laneTo: at}`
+     * with `at` an index `renderCanvas`'s clamp has already vouched for, and
+     * a move changes no lane's EXISTENCE, so whether `carryMarks` then
+     * traces it to `to` (both ends of a collapsed range trace together) or
+     * drops it to null for want of an injected `laneTrace`, what is left is
+     * either a real row or nothing at all — never a row number with no lane
+     * under it.
+     */
+    function moveSelectedLane(step) {
+      if (selection === null) { panels.say('先選一條 lane 再搬'); return; }
+      const layout = geometry.layoutOf(store.doc, SIZES);
+      const at = selection.laneIndex;
+      const to = at + step;
+      if (to < 0) { panels.say('這已經是第一條 lane 了，沒有更上面的位置'); return; }
+      if (to >= layout.lanes.length) {
+        panels.say('這已經是最後一條 lane 了，沒有更下面的位置');
+        return;
+      }
+      selection = { laneIndex: at, laneTo: at, from: selection.from, to: selection.to };
+      // The lane arrives at row `to`, so the keyboard goes to the field it
+      // arrives in — the same rule the rail's own `drop` handler follows,
+      // and the whole reason `focusOverride` exists (see its declaration).
+      focusOverride = 'lane-name-' + to;
+      const didMove = commit('move-lane', function (doc2) {
+        return codec.moveLane(doc2, at, to);
       });
-    }
-
-    const undoBtn = toolButton('ed-wave-undo', '復原', '退回上一個動作', function () {
-      if (!store.undo()) { say('沒有可以復原的動作'); return; }
-      afterStoreMoved('undo');
-    });
-    const redoBtn = toolButton('ed-wave-redo', '重做', '再做一次剛剛復原掉的動作', function () {
-      if (!store.redo()) { say('沒有可以重做的動作'); return; }
-      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.
+      // v3.6.0 Task 16 fix round 1: SAY WHICH CONTAINER IT LANDED IN.
+      //
+      // `moveLane` may cross a group boundary — `laneInsertPath`'s asymmetry,
+      // which the whole 訊號 section already announces before and after every
+      // insert. MEASURED against the real codec on the journey fixture:
+      // Alt+↓ on `clk` at row 0 moves it INTO the group `bus`
+      // (`["clk",["bus",…]]` → `[["bus",["req","clk","dat"]],…]`), and the
+      // flattened name order is the only thing that changes on screen. Before
+      // this, the single word the user got back was `afterStoreMoved`'s
+      // generic「已寫回：move-lane」, so the one case in this function that
+      // re-parents a lane was also its quietest — while BOTH refusals spoke.
+      //
+      // Asked of the document AFTER the move, unlike 複製 above, which asks
+      // before because its lane does not exist yet. `laneInsertPath(doc, to)`
+      // means "in front of whichever lane sits at `to`, in THAT lane's own
+      // container", and after the move the lane at `to` is the moved one — so
+      // its answer is the moved lane's own container, including the
+      // group's-first-lane edge. Verified against the codec for all four
+      // moves the journey scenario makes: bus / 群組外 / bus / bus.
+      //
+      // ONE shared lead — `'搬動的 lane 落在'` — with only the container name
+      // branching. That is what the line below does, and the whole of what it
+      // needs to do.
+      //
+      // fix round 2 (N2) WITHDRAWS the claim that stood here ("the whole
+      // prefix per branch rather than one shared 落在, the same rule
+      // 新增/空白列 above record"), which said the opposite of the code
+      // directly beneath it. That rule exists because 新增 and 空白列 are TWO
+      // gestures sharing ONE handler whose leads differ by a space —
+      // `'新增的 lane 落在'` ends in a Latin word, `'空白列落在'` in a CJK one
+      // — and this function has no such axis: one gesture, one lead. The
+      // space after `lane` here is that typographic rule on its own, and the
+      // 群組外 / 群組「…」裡 tail is the identical two-way split 複製 uses.
+      if (didMove) {
+        const landing = panels.landingOf(store.doc, to);
+        panels.say('搬動的 lane 落在' +
+          (landing.title === null ? '群組外' : '群組「' + landing.title + '」裡'));
+      }
+    }
+
+    // ── 群組 ──────────────────────────────────────────────────────────────
+    const groupGroup = panels.toolGroup('群組');
+    toolbar.appendChild(groupGroup);
+    // Wrap the selected lane range 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.
+    //
+    // v3.6.0 Task 14: the range is `selection`'s, not a second mark's — so
+    //「選起來的那幾條」names the same highlight the canvas and the Lane
+    // panel are showing, rather than a second one only this button could
+    // see. Shift+click on the rail is the one gesture that WIDENS it;
+    // Shift+↑/↓ on the canvas still collapses onto the lane it lands on
+    // (see `moveCursor`), which is why the tooltip names the rail and not
+    // the keyboard.
     //
     // 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，才有東西可以群組');
+    // opened immediately — the same affordance 新增 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 = panels.toolButton('ed-wave-group-make', '建立群組',
+      '把選起來的那幾條連續 lane 包成一個新群組（在左邊的 lane 列表上 Shift+點選一段）',
+      function () {
+        if (selection === null || selection.laneTo === selection.laneIndex) {
+          panels.say('先選至少兩條連續的 lane，才有東西可以群組');
           return;
         }
-        const ats = laneMultiSelect.slice().sort(function (a, b) { return a - b; });
+        const ats = [];
+        for (let k = selection.laneIndex; k <= selection.laneTo; k += 1) ats.push(k);
         const minAt = ats[0];
         const committed = commit('group-lanes', function (doc2) {
           return codec.groupLanes(doc2, ats, '');
         });
         if (!committed) {
-          say('這幾條 lane 不連續（或選取已經失效），WaveJSON 的群組只能是連續的一段');
+          panels.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.
+        selection = null;
         render();
         const layout = geometry.layoutOf(store.doc, SIZES);
-        const spans = groupSpansOf(store.doc, layout);
+        const spans = geometry.groupSpansOf(store.doc, layout);
         for (const span of spans) {
-          if (span.from === minAt) { renameGroup(span); break; }
+          if (span.from === minAt) { panels.renameGroup(span); break; }
         }
-      });
+      }, groupGroup);
+    // v3.6.0 Task 14: 解散 the group the selected lane is a DIRECT member
+    // of. The lanes it held stay exactly where they were; only the wrapping
+    // array and its title go. `ungroupLanes`'s own docstring explains why
+    // "direct" is the only thing a display position can name — and why a
+    // group built entirely out of sub-groups therefore has no lane that
+    // names it, which is exactly the case `laneIsInGroup` below reports as
+    // "nothing to dissolve here" by disabling this button.
+    const groupDissolveBtn = panels.toolButton('ed-wave-group-dissolve', '解散群組',
+      '解散選取的 lane 所屬的那個群組（裡面的 lane 都留著，只是不再是一組）', function () {
+        if (selection === null) { panels.say('先選一條群組裡的 lane'); return; }
+        const at = selection.laneIndex;
+        // The lane at `at` survives ungrouping at the same display position
+        // (`ungroupLanes`: the flattened order and count never change), so
+        // its own name field is exactly where the keyboard should land.
+        focusOverride = 'lane-name-' + at;
+        const done = commit('ungroup', function (doc2) { return codec.ungroupLanes(doc2, at); });
+        if (!done) panels.say('這條 lane 不在任何群組裡');
+      }, groupGroup);
 
+    /**
+     * Whether display position `at` is a direct member of some group —
+     * `ungroupLanes`'s own precondition, asked of the layout rather than
+     * re-derived. A lane sitting straight under `signal` has a path of
+     * length 2 (`['signal', k]`); anything longer is inside at least one
+     * group.
+     */
+    function laneIsInGroup(layout, at) {
+      if (at < 0 || at >= layout.lanes.length) return false;
+      return layout.lanes[at].path.length > 2;
+    }
+    // ── 關聯線 ────────────────────────────────────────────────────────────
+    const edgeGroup = panels.toolGroup('關聯線');
+    toolbar.appendChild(edgeGroup);
     // 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', '關聯線',
+    const edgeBtn = panels.toolButton('ed-wave-edge-arm', '關聯線',
       '按一下武裝，然後從一格拖到另一格畫出關聯線（Escape 取消）', function () {
         setEdgeMode(edgeMode === 'idle' ? 'armed' : 'idle');
-      });
+        // v3.6.0 Task 11: the transition dots (and their removal) are the
+        // only on-canvas evidence arming happened — `setEdgeMode` above
+        // only touches the button/overlay attributes, so without this the
+        // dots would not appear until some OTHER repaint happened to run
+        // first (the next cursor move, say), which is not "the instant you
+        // press the button".
+        render();
+      }, edgeGroup);
     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
-    // drawing does not model `hscale`, `period` or `phase` at all (zero
-    // occurrences in wave-codec, wave-geometry or this file), and measured
-    // against the pinned engine each of them changes what the engine paints
-    // while leaving the drawing exactly as it was:
+    // ── 歷史 ──────────────────────────────────────────────────────────────
+    const historyGroup = panels.toolGroup('歷史');
+    toolbar.appendChild(historyGroup);
+    const undoBtn = panels.toolButton('ed-wave-undo', '復原', '退回上一個動作', function () {
+      if (!store.undo()) { panels.say('沒有可以復原的動作'); return; }
+      afterStoreMoved('undo');
+    }, historyGroup);
+    const redoBtn = panels.toolButton('ed-wave-redo', '重做', '再做一次剛剛復原掉的動作', function () {
+      if (!store.redo()) { panels.say('沒有可以重做的動作'); return; }
+      afterStoreMoved('redo');
+    }, historyGroup);
+
+    // ── 匯出 ──────────────────────────────────────────────────────────────
     //
-    //     {wave:'0101'}                 engine 8 half-bricks   drawing 4 cycles
-    //     {wave:'0101', period:2}       engine 16              drawing 4, unchanged
-    //     {wave:'0101', phase:0.5}      engine 7               drawing 4, unshifted
-    //     {wave:'0101'} config.hscale:2 engine 16              drawing 4, unchanged
+    // v3.6.0 Task 15: the three buttons Task 12 created as shape.
     //
-    // Shipping a CONTROL for a property the canvas ignores is the worst of the
-    // three options: it invites the user to make the two pictures disagree and
-    // then shows them a confident wrong one. Modelling the three properly is
-    // not a change this file may make on its own either — cycle width lives in
-    // `wave-geometry`, which is closed and whose arithmetic Task 3 pinned, and
-    // a half-model here would be a SECOND belief about cycle geometry in the
-    // same tree, which is the exact failure this batch keeps producing.
+    // THE SOURCE IS THE PREVIEW'S SVG, never the canvas. The preview is the
+    // ENGINE'S OWN OUTPUT, so what a user exports is the same picture the
+    // rendered document shows; exporting the canvas would export this file's
+    // second implementation of that picture — the one precondition 3 in this
+    // module's header exists to stop from becoming a second belief on screen.
     //
-    // So: the control is gone, and a document that carries any of the three is
-    // told so out loud by `renderUnmodelled()` below rather than drawn wrongly
-    // in silence.
-    const metaBar = d.createElement('div');
-    metaBar.className = 'ed-wave-meta';
-    toolbar.appendChild(metaBar);
-
-    function metaField(cls, label, placeholder) {
-      const wrap = d.createElement('label');
-      wrap.className = 'ed-wave-metafield';
-      const text = d.createElement('span');
-      text.textContent = label;
-      wrap.appendChild(text);
-      const input = d.createElement('input');
-      input.type = 'text';
-      input.className = cls;
-      input.setAttribute('data-focus-key', cls);
-      input.placeholder = placeholder;
-      wrap.appendChild(input);
-      metaBar.appendChild(wrap);
-      return input;
+    // Every browser global the three need — `XMLSerializer`, `Blob`, `URL`,
+    // `Image`, `setTimeout`, `navigator` — is reached through `probeWin`
+    // (`d.defaultView`, declared beside `sourceText` above), never as a bare
+    // identifier: this file is require-able in node against a fake
+    // `opts.document` (see its header) and names no global of its own.
+
+    /**
+     * The preview's SVG, serialised so that it still draws OUTSIDE this page.
+     *
+     * The plain `serializeToString(svg)` that this obviously wants to be is a
+     * trap, and a quiet one. `renderPreview` renders with `notFirstSignal`
+     * true whenever a WaveDrom skin is already on the page — which is ALWAYS
+     * in the flow that reaches this editor, because the entry affordance only
+     * appears over a rendered diagram — so the preview SVG carries neither the
+     * skin's `<defs>` nor its `<style>`. MEASURED on this repo's own wave
+     * fixture: the preview SVG is 5057 bytes with 51 `<use>` elements, 0
+     * `<defs>` and 0 `<style>`, every one of those 51 pointing at an id that
+     * lives in a DIFFERENT SVG on the page. Serialised as-is it opens as half
+     * a picture — the whole clock lane and every brick shape gone, all text in
+     * the browser's default font — and it opens that way without erroring, so
+     * a check that the file was written, or that the click did not throw, sees
+     * nothing at all. Rasterised: 1409 non-white pixels of 54000 against 5693
+     * for the self-contained file.
+     *
+     * So: clone the preview, and if the clone has no `<defs>` of its own,
+     * prepend a CLONE of the page skin's `<style>` and `<defs>`.
+     */
+    function exportSvgText() {
+      const host = deps.previewHost;
+      const svg = (host === null || host === undefined) ? null : host.querySelector('svg');
+      if (svg === null || svg === undefined) return '';
+      const clone = svg.cloneNode(true);
+      if (clone.querySelector('defs') === null) {
+        // `#socket` is the skin's own first entry, asked for INSIDE a
+        // WaveDrom-rendered SVG's defs — the identical question, asked the
+        // identical way, that `renderPreview` asks to decide whether to emit a
+        // skin at all. Two different answers to "is the skin on this page"
+        // would be exactly the disagreement that leaves this export broken.
+        const socket = d.querySelector('svg.WaveDrom defs #socket');
+        const skin = socket === null ? null : socket.closest('svg');
+        if (skin !== null) {
+          const defs = skin.querySelector('defs');
+          const style = skin.querySelector('style');
+          // CLONED, never moved. These nodes are what every diagram ON THE
+          // PAGE draws from; an export that took them would blank the whole
+          // document behind the dialog the first time anyone pressed 匯出.
+          if (defs !== null) clone.insertBefore(defs.cloneNode(true), clone.firstChild);
+          if (style !== null) clone.insertBefore(style.cloneNode(true), clone.firstChild);
+        }
+      }
+      return new probeWin.XMLSerializer().serializeToString(clone);
+    }
+
+    function downloadBlob(blob, filename) {
+      const url = probeWin.URL.createObjectURL(blob);
+      const a = d.createElement('a');
+      a.href = url;
+      a.download = filename;
+      d.body.appendChild(a);
+      a.click();
+      a.remove();
+      // revoke 延後一拍：立刻 revoke 會讓某些瀏覽器在下載開始前就失去來源。
+      probeWin.setTimeout(function () { probeWin.URL.revokeObjectURL(url); }, 1000);
+    }
+
+    function exportSvg() {
+      const text = exportSvgText();
+      if (text === '') { panels.say('預覽還沒畫出來，沒有東西可以匯出'); return; }
+      downloadBlob(new probeWin.Blob([text], { type: 'image/svg+xml' }), exportName('svg'));
+      panels.say('已匯出 ' + exportName('svg'));
+    }
+
+    function exportPng() {
+      const text = exportSvgText();
+      if (text === '') { panels.say('預覽還沒畫出來，沒有東西可以匯出'); return; }
+      const svg = deps.previewHost.querySelector('svg');
+      const w = Number(svg.getAttribute('width'));
+      const h = Number(svg.getAttribute('height'));
+      // A zero-sized canvas is not an error to `toBlob`: it hands back a
+      // perfectly valid, perfectly empty PNG. Refuse it in words rather than
+      // let the user save a file that is a picture of nothing.
+      if (!(w > 0) || !(h > 0)) {
+        panels.say('預覽的尺寸讀不出來，PNG 匯不出去');
+        return;
+      }
+      const img = d.createElement('img');
+      img.onload = function () {
+        const cv = d.createElement('canvas');
+        cv.width = w; cv.height = h;
+        const ctx2 = cv.getContext('2d');
+        // The SVG's own background rect is white, but only over its own box;
+        // painting white first means a PNG dropped into a dark-themed document
+        // does not show that document's background through the margins.
+        ctx2.fillStyle = '#ffffff';
+        ctx2.fillRect(0, 0, w, h);
+        ctx2.drawImage(img, 0, 0);
+        cv.toBlob(function (blob) {
+          if (blob === null) { panels.say('PNG 轉檔失敗'); return; }
+          downloadBlob(blob, exportName('png'));
+          panels.say('已匯出 ' + exportName('png'));
+        }, 'image/png');
+      };
+      img.onerror = function () { panels.say('PNG 轉檔失敗'); };
+      // A data URI, not an object URL: an SVG loaded into an `<img>` renders
+      // in the browser's secure static mode either way, and a data URI needs
+      // no revoke to pair with it on a path that can end in `onerror`.
+      img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
+    }
+
+    function exportJson() {
+      // `sourceText()`, not a second serialisation: this is the same walk of
+      // `store.toPatch()` that the 原始碼 panel shows and that 保留並關閉
+      // would write, so what lands on the clipboard can never disagree with
+      // either of them.
+      const text = sourceText();
+      const clip = probeWin.navigator && probeWin.navigator.clipboard;
+      if (clip && typeof clip.writeText === 'function') {
+        clip.writeText(text).then(function () {
+          panels.say('WaveJSON 已複製到剪貼簿');
+        }, function () {
+          panels.say('複製失敗，可以從右欄的原始碼面板手動選取');
+        });
+        return;
+      }
+      panels.say('這個瀏覽器不給用剪貼簿，可以從右欄的原始碼面板手動選取');
     }
 
-    const headInput = metaField('ed-wave-head-text', 'head', '上方標題');
-    const footInput = metaField('ed-wave-foot-text', 'foot', '下方標題');
+    /**
+     * 檔名：markdown 檔名 + block 序號 + 副檔名。
+     *
+     * `opts.fileLabel` IS the source, and the caller has to pass it. The
+     * sentence that used to stand here — that `d.title` is "the same answer by
+     * another road", because md2doc writes `path.basename(src, '.md')` into
+     * `<title>` — was false the moment anyone edited anything. client.js owns
+     * the page title while a session is open and decorates it:
+     * `document.title = (documentIsDirty() ? '● ' : '') + baseTitle`. MEASURED
+     * on this repo's wave fixture, one lane-copy before pressing 匯出:
+     * `document.title` is `'● doc'` and the export lands as
+     * `●-doc-wave-1.svg`. The marker survives the sanitiser (`●` is not in its
+     * class, and stripping leading `-` runs does not reach it), and it only
+     * appears for a user who actually edited — so an export tried straight
+     * after opening gives the clean name and hides it.
+     *
+     * The fix is not to strip `'● '` here. That would put client.js's
+     * decoration format into a second file, and the next change to the marker
+     * would rot it silently. client.js passes `baseTitle` instead — the title
+     * as it was BEFORE it began decorating, which is the one value in this
+     * system that is exactly the markdown file's basename.
+     *
+     * `d.title` therefore stays only as a last resort for a host that passes
+     * no `fileLabel` at all (today there is none). It is NOT equivalent: it is
+     * whatever that host has written into the title by the time 匯出 is
+     * pressed.
+     *
+     * The sanitiser is not cosmetic: a filename with a `/` in it would
+     * otherwise reach `a.download` as a path separator.
+     */
+    function exportName(ext) {
+      const raw = String(opts.fileLabel || d.title || 'wave');
+      const label = raw.replace(/[\\/:*?"<>|\s]+/g, '-').replace(/^-+|-+$/g, '') || 'wave';
+      return label + '-wave-' + Number(opts.blockIndex || 0) + '.' + ext;
+    }
+
+    const exportGroup = panels.toolGroup('匯出');
+    toolbar.appendChild(exportGroup);
+    panels.toolButton('ed-wave-export-svg', 'SVG',
+      '把預覽那張圖存成 SVG 檔（含 WaveDrom 的 skin，離開這一頁也畫得出來）',
+      exportSvg, exportGroup);
+    panels.toolButton('ed-wave-export-png', 'PNG',
+      '把預覽那張圖存成 PNG 檔（白底，尺寸跟預覽一樣）',
+      exportPng, exportGroup);
+    panels.toolButton('ed-wave-export-wavejson', '複製 WaveJSON',
+      '把右欄原始碼面板上那份 WaveJSON 複製到剪貼簿',
+      exportJson, exportGroup);
+
+    // ── 檔案 ──────────────────────────────────────────────────────────────
+    //
+    // v3.6.0 Task 12: both wired now, unlike every disabled section above —
+    // neither waits on a later task. 保留並關閉 runs the SAME commit path the
+    // header's 關閉 button already runs (`close('commit')`); 放棄 is new:
+    // before this, discarding an edit was keyboard-only (Escape), so a
+    // pointer user had no way to abandon one. `close`'s own contract makes
+    // "anything that is not `'escape'` is a commit" the default, so wiring
+    // 放棄 is one line.
+    const fileGroup = panels.toolGroup('檔案');
+    toolbar.appendChild(fileGroup);
+    panels.toolButton('ed-wave-file-close', '保留並關閉',
+      '保留這次編輯並關閉（跟標題列的「關閉」是同一個動作）', function () {
+        close('commit');
+      }, fileGroup);
+    panels.toolButton('ed-wave-file-discard', '放棄',
+      '放棄這次編輯（跟 Esc 是同一個動作；按一次 Ctrl+Z 可以拿回來）', function () {
+        close('escape');
+      }, fileGroup);
+
+    // head / foot / hscale — the document-level fields the 文件 panel
+    // exposes, plus (below, in the Lane panel) a per-lane period/phase.
+    //
+    // v3.6.0 Task 8 fix round 2: the sentence that used to stand here —
+    // "the drawing does not model `hscale`, `period` or `phase` at all
+    // (zero occurrences in wave-codec, wave-geometry or this file)" — went
+    // false at Task 4 and nobody caught it until a review two tasks later.
+    // `wave-geometry.js`'s `layoutOf` reads a lane's own `period`/`phase`
+    // into `originX`/`cycleWidth`, and `hscaleOf(cfg)` reads `config.hscale`
+    // globally; `wave-draw.js` uses those per-lane values for every brick's
+    // x-coordinate. That is real modelling, not zero occurrences.
+    //
+    // v3.6.0 Task 9 fix round 2 (ruling R30) then closed the half that was
+    // still open when the paragraph above was written: the shared cycle grid
+    // and the ruler are DIAGRAM-wide and now derive from the same
+    // `hscale`-scaled diagram pitch the bricks are painted at, so they move
+    // with `period` and `config.hscale` too. `test/wave-draw.test.js` pins
+    // both fixtures value-by-value against the engine's own render —
+    // `period: 4` draws the engine's 17 ticks (0..16), not `cycles + 1`;
+    // `hscale: 2` draws them 96 apart (48 × 2), the case whose tick COUNT is
+    // unchanged and whose pitch is the only tell.
+    //
+    // So as of Task 18 `panels.renderUnmodelled()` no longer fires for any of
+    // the three: they are modelled, and saying otherwise is now the false
+    // statement. See that function's own block comment.
+    //
+    // v3.6.0 Task 13: a CONTROL for these three is back — `config.hscale`
+    // here, `period`/`phase` in the Lane panel below — because what made
+    // shipping one "the worst of the three options" (see the Task 8 comment
+    // this replaces) was a control that INVITES the two pictures to
+    // disagree while showing a confident wrong one. Relocating the fields
+    // into named, individually-labelled panel rows does not change that risk
+    // by itself. What closed it is Tasks 4 and 9 actually MODELLING the
+    // three — in `wave-geometry.js`'s `layoutOf`/`hscaleOf` and
+    // `wave-draw.js`'s diagram pitch, the one place cycle geometry is
+    // allowed to live, so this file never grew a second belief about it.
+    // A control that sets a value the canvas then draws is not the failure
+    // the Task 8 comment was guarding against.
+    const headInput = panels.metaField(
+      'ed-wave-head-text', 'head', '上方標題', 'head.text', panels.sections.document);
+    const headTickInput = panels.metaField('ed-wave-head-tick', 'head.tick',
+      '起始刻度，例如 0', 'head.tick', panels.sections.document);
+    const headTockInput = panels.metaField('ed-wave-head-tock', 'head.tock',
+      '半格刻度起始值，例如 0', 'head.tock', panels.sections.document);
+    const headEveryInput = panels.metaField('ed-wave-head-every', 'head.every',
+      '每幾格顯示一次刻度', 'head.every', panels.sections.document);
+    const footInput = panels.metaField(
+      'ed-wave-foot-text', 'foot', '下方標題', 'foot.text', panels.sections.document);
     // 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
@@ -1072,27 +1751,74 @@
     // 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); });
+    // readability reason. v3.6.0 Task 13: head/tick/tock/every are now
+    // created ABOVE, before `footInput`, so the document panel's DOM order
+    // is the full `head.*` group followed by the full `foot.*` group —
+    // `test/editor-journey.test.js`'s five-panel scenario pins this exact
+    // order.
+    const footTickInput = panels.metaField('ed-wave-foot-tick', 'foot.tick',
+      '下方起始刻度，例如 0', 'foot.tick', panels.sections.document);
+    const footTockInput = panels.metaField('ed-wave-foot-tock', 'foot.tock',
+      '下方半格刻度起始值，例如 0', 'foot.tock', panels.sections.document);
+    const footEveryInput = panels.metaField('ed-wave-foot-every', 'foot.every',
+      '下方每幾格顯示一次刻度', 'foot.every', panels.sections.document);
+    // v3.6.0 Task 13: the document panel's ninth field — see the block
+    // comment above for why a control for this is back at all.
+    const hscaleInput = panels.metaField('ed-wave-config-hscale', 'hscale',
+      '整份圖的水平縮放倍率（config.hscale，1-100 的整數；空白＝不設定）',
+      'config.hscale', panels.sections.document);
+    // Published for `panels.renderMeta`'s lazy read, same reason as
+    // `deps.headInput` etc. below — see `wave-panels.js`'s own header for
+    // why these stay a lazy `deps` read rather than a return value.
+    deps.headInput = headInput;
+    deps.footInput = footInput;
+    deps.headTickInput = headTickInput;
+    deps.headTockInput = headTockInput;
+    deps.headEveryInput = headEveryInput;
+    deps.footTickInput = footTickInput;
+    deps.footTockInput = footTockInput;
+    deps.footEveryInput = footEveryInput;
+    deps.hscaleInput = hscaleInput;
+
+    headInput.addEventListener('change', function () { panels.commitBanner('head', 'text', headInput.value); });
+    footInput.addEventListener('change', function () { panels.commitBanner('foot', 'text', footInput.value); });
+    headTickInput.addEventListener('change', function () { panels.commitBanner('head', 'tick', headTickInput.value); });
     headTockInput.addEventListener('change', function () {
-      commitBanner('head', 'tock', headTockInput.value);
+      panels.commitBanner('head', 'tock', headTockInput.value);
     });
-    headEveryInput.addEventListener('change', function () { commitBanner('head', 'every', headEveryInput.value); });
+    headEveryInput.addEventListener('change', function () { panels.commitBanner('head', 'every', headEveryInput.value); });
     footTickInput.addEventListener('change', function () {
-      commitBanner('foot', 'tick', footTickInput.value);
+      panels.commitBanner('foot', 'tick', footTickInput.value);
     });
-    footTockInput.addEventListener('change', function () { commitBanner('foot', 'tock', footTockInput.value); });
+    footTockInput.addEventListener('change', function () { panels.commitBanner('foot', 'tock', footTockInput.value); });
     footEveryInput.addEventListener('change', function () {
-      commitBanner('foot', 'every', footEveryInput.value);
+      panels.commitBanner('foot', 'every', footEveryInput.value);
+    });
+    hscaleInput.addEventListener('change', function () {
+      panels.commitConfigField('hscale', hscaleInput.value);
+    });
+
+    // ── the Lane panel: period / phase for the currently selected lane ─────
+    //
+    // v3.6.0 Task 13: new. "Selected lane" here is the CYCLE selection's own
+    // `laneIndex` (`selection`, below) — this dialog has never had a
+    // separate "selected lane" concept, and inventing a second one only for
+    // these two fields would be a second belief about what "selected" means
+    // in the same file. Disabled whenever `selection` is null; see
+    // `panels.renderLaneField`'s own comment for the render side.
+    const lanePeriodInput = panels.metaField('ed-wave-lane-period', 'period',
+      '先選一段 cycle 才能設定', 'period', panels.sections.lane);
+    const lanePhaseInput = panels.metaField('ed-wave-lane-phase', 'phase',
+      '先選一段 cycle 才能設定', 'phase', panels.sections.lane);
+    deps.lanePeriodInput = lanePeriodInput;
+    deps.lanePhaseInput = lanePhaseInput;
+    lanePeriodInput.addEventListener('change', function () {
+      if (selection === null) return;
+      panels.commitLaneField(selection.laneIndex, 'period', lanePeriodInput.value);
+    });
+    lanePhaseInput.addEventListener('change', function () {
+      if (selection === null) return;
+      panels.commitLaneField(selection.laneIndex, 'phase', lanePhaseInput.value);
     });
 
     // ── the edge inspector row ──────────────────────────────────────────
@@ -1107,7 +1833,10 @@
     const edgeBar = d.createElement('div');
     edgeBar.className = 'ed-wave-edgebar';
     edgeBar.hidden = true;
-    toolbar.appendChild(edgeBar);
+    // v3.6.0 Task 13: the 關聯線 panel's body, not the toolbar — see
+    // `wave-panels.js`'s `sections` for why the container is available
+    // synchronously here.
+    panels.sections.edge.appendChild(edgeBar);
 
     const shapeWrap = d.createElement('label');
     shapeWrap.className = 'ed-wave-metafield';
@@ -1177,6 +1906,11 @@
       });
     });
     edgeBar.appendChild(edgeDeleteBtn);
+    // Published for `panels.renderEdgeBar`'s lazy read, same reason as
+    // `deps.metaBar` above.
+    deps.edgeBar = edgeBar;
+    deps.shapeSel = shapeSel;
+    deps.edgeLabelInput = edgeLabelInput;
 
     // 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.
@@ -1193,38 +1927,18 @@
     noSignal.className = 'ed-wave-unmodelled ed-wave-nolanes';
     noSignal.hidden = true;
     toolbar.appendChild(noSignal);
+    // Published for `panels.renderUnmodelled`'s lazy read, same reason as
+    // `deps.headInput` etc. above.
+    deps.unmodelled = unmodelled;
+    deps.noSignal = noSignal;
 
-    // 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.
+    // ── body: lane list | drawing | right-hand column ──────────────────────
     //
-    // 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 ───────────────────────────────
+    // v3.6.0 Task 13: the body's third column USED to be `previewWrap`
+    // directly; it is now `panels.side`, the five-section right-hand column
+    // built inside `createPanels()` (see `wave-panels.js`'s own comment
+    // above `side`/`sections`), and `previewWrap` moves one level deeper,
+    // into `panels.sections.preview`.
     const body = d.createElement('div');
     body.className = 'ed-wave-body';
     panel.appendChild(body);
@@ -1232,6 +1946,9 @@
     const laneCol = d.createElement('div');
     laneCol.className = 'ed-wave-lanes';
     body.appendChild(laneCol);
+    // Published for `panels.renderLanes`/`panels.renameGroup`'s lazy read,
+    // same reason as `deps.headInput` etc. above.
+    deps.laneCol = laneCol;
 
     const canvasWrap = d.createElement('div');
     canvasWrap.className = 'ed-wave-canvas-wrap';
@@ -1251,7 +1968,15 @@
     // This preview belongs to neither.
     previewHost.id = PREVIEW_ID_PREFIX + PREVIEW_INDEX;
     previewWrap.appendChild(previewHost);
-    body.appendChild(previewWrap);
+    panels.sections.preview.appendChild(previewWrap);
+    // Published for `panels.renderPreview`'s lazy read, same reason as
+    // `deps.headInput` etc. above.
+    deps.previewWrap = previewWrap;
+    deps.previewHost = previewHost;
+
+    // The right-hand column itself, appended once — the position the old
+    // `previewWrap` occupied directly in `body`.
+    body.appendChild(panels.side);
 
     const status = d.createElement('div');
     status.className = 'ed-wave-status';
@@ -1260,11 +1985,9 @@
     // the one place that has to be announced rather than merely painted.
     status.setAttribute('role', 'status');
     panel.appendChild(status);
-
-    function say(text) {
-      status.textContent = text;
-      overlay.setAttribute('data-wave-status', text);
-    }
+    // Published for `panels.say`'s lazy read, same reason as `deps.metaBar`
+    // above.
+    deps.status = status;
 
     // ── the one road from a gesture to the document ───────────────────────
     /**
@@ -1289,7 +2012,7 @@
       if (closed) return false;
       const changed = store.apply(name, fn);
       if (!changed) {
-        say('這個動作沒有改變任何東西');
+        panels.say('這個動作沒有改變任何東西');
         return false;
       }
       gestures++;
@@ -1349,13 +2072,12 @@
       // 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.
+      // v3.6.0 Task 14: `selection` carries the rail's lane range itself
+      // now, so these three are the whole list again — there is no fourth
+      // set of row numbers standing beside them to ask about.
       if (before === null ||
           (cursor === null && selection === null && pendingFrom === null &&
-           endpointDrag === null && laneMultiSelect === null)) {
+           endpointDrag === null)) {
         return;
       }
       const trace = typeof opts.laneTrace === 'function'
@@ -1364,12 +2086,9 @@
       // 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.
+      // way.
       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
@@ -1385,10 +2104,41 @@
         if (at !== null) cursor = { laneIndex: at, cycle: cursor.cycle };
       }
       if (selection !== null) {
-        const at = rowOf(selection.laneIndex);
-        if (at !== null) {
-          selection = { laneIndex: at, from: selection.from, to: selection.to };
-        }
+        // v3.6.0 Task 14, tightened in fix round 1: BOTH ends of the lane
+        // range are retraced, independently, and an end the trace cannot
+        // vouch for is DROPPED rather than left on a stale number. That is
+        // the member-by-member rule the retired lane multi-select used
+        // ("an entry that cannot be traced is removed"), applied to a pair.
+        //
+        // Round 0 put this whole block inside `if (rowOf(laneIndex) !== null)`,
+        // which reads like a guard and is not one: when the range's FIRST
+        // lane was the one that vanished, nothing ran and BOTH numbers were
+        // left standing. `renderCanvas`'s clamp does not save it — that
+        // only pulls `laneTo` down to the last row and never collapses a
+        // range — so 建立群組 and 訊號's 刪除 acted on a span the user never
+        // selected. Reachable in three gestures: insert a lane, Shift-select
+        // from it downwards, undo the insert.
+        //
+        // What survives, by case:
+        //   both ends traced → the traced range (re-normalised: a reorder
+        //                      can swap which end is lower)
+        //   one end traced   → collapsed onto that end — the one lane still
+        //                      vouched for
+        //   neither traced   → collapsed onto `laneIndex`'s OLD number. The
+        //                      number is kept because `laneIndex` doubles as
+        //                      a screen position `renderCanvas` re-clamps and
+        //                      `cursor`'s own "land on whoever took the
+        //                      place" instinct is right for that; the SPAN is
+        //                      not kept, so a structural op can at worst
+        //                      touch that one row, never a range.
+        const near = rowOf(selection.laneIndex);
+        const far = rowOf(selection.laneTo);
+        const a = near !== null ? near : (far !== null ? far : selection.laneIndex);
+        const b = far !== null ? far : a;
+        selection = {
+          laneIndex: Math.min(a, b), laneTo: Math.max(a, b),
+          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
@@ -1428,26 +2178,6 @@
         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) {
@@ -1459,9 +2189,9 @@
       lastPatch = store.toPatch();
       render();
       if (lastPatch.ok === true) {
-        say('已寫回：' + name);
+        panels.say('已寫回：' + name);
       } else {
-        say('這個改動沒辦法只改幾個位元組寫回去：' + lastPatch.reason);
+        panels.say('這個改動沒辦法只改幾個位元組寫回去：' + lastPatch.reason);
       }
       if (typeof opts.onGesture === 'function') {
         opts.onGesture({ name: name, patch: lastPatch, store: store });
@@ -1471,6 +2201,192 @@
     // ── painting ──────────────────────────────────────────────────────────
     let canvas = null;
 
+    /**
+     * v3.6.0 Task 13 fix round 4: keep the CURRENTLY selected edge's own
+     * drawn handles clear of the expanded side rail — by narrowing the
+     * RAIL, never by moving the canvas.
+     *
+     * Diagnosed against a real page before writing this (see task-13-
+     * report.md, fix round 4), and the first two things tried both failed
+     * against that diagnosis before this one was chosen:
+     *
+     *   1. Hypothesis (mine and the reviewer's, both wrong): the expand
+     *      reflows the canvas mid-gesture, so a point resolved before it
+     *      goes stale. MEASURED false — `.ed-wave-canvas`'s own
+     *      `getBoundingClientRect()` is IDENTICAL before, during and after
+     *      the whole gesture. Nothing moves.
+     *   2. First fix tried: scroll the canvas horizontally to carry the
+     *      handle out from under the rail (`canvasWrap.scrollLeft`), the
+     *      same technique `pointInCanvas` uses in the test suite. MEASURED
+     *      to do nothing on the fixture that actually fails: a short
+     *      document's drawn content is NARROWER than the wrap's own
+     *      `clientWidth`, so `scrollWidth === clientWidth` — there is no
+     *      scrollABLE range at all, and setting `scrollLeft` past 0 is
+     *      silently clamped straight back to 0. The rail's expansion does
+     *      not add any scrollable width to the wrap (it is an absolutely
+     *      positioned overlay, outside the wrap's own box model), so a
+     *      short document can never be scrolled clear of it.
+     *
+     * The actual defect both of those diagnosed correctly but did not fix
+     * is occlusion, not displacement: the expanded rail is `position:
+     * absolute`, OPAQUE, `z-index: 3`, painted ON TOP of the canvas at a
+     * narrow viewport (round 1's own deliberate design — the rail overlays
+     * rather than squeezes, so the canvas keeps its width-budget win).
+     * `elementFromPoint` at the handle's own coordinates resolved to a
+     * `<span>` INSIDE the rail, not the handle — because the rail is what
+     * is actually painted there now, regardless of scroll position.
+     *
+     * So this narrows the rail instead: its `width` (normally 340px, the
+     * CSS default) is set only as far down as needed to keep the selected
+     * edge's rightmost handle clear, floored at `MIN_WIDTH` so the panel
+     * never shrinks to something unusable. `right: 0` stays anchored (the
+     * CSS is untouched), so shrinking width moves the rail's LEFT edge
+     * right, away from the handle, while the canvas itself never moves at
+     * all — satisfying the same invariant the "reflow mid-gesture"
+     * hypothesis was chasing (`.ed-wave-canvas`'s rect never changes
+     * between a press and its release) for a different, correct reason.
+     *
+     * Recomputed from scratch on every call (the leading `style.width =
+     * ''` is not an optimization to skip) rather than only on a change of
+     * `selectedEdge` — an unrelated repaint can still move a lane's own
+     * geometry (hscale, a resize) while the SAME edge stays selected, and
+     * a stale width would either pointlessly over-narrow the rail or,
+     * worse, under-narrow it and silently reopen the exact defect this
+     * exists to close.
+     *
+     * Selecting an edge is very often immediately followed by dragging the
+     * very handle selection just exposed — it is the ONLY way to adjust an
+     * endpoint (`onCanvasDown`'s drag-start branch only ever fires for the
+     * SELECTED edge's own handle), so select-then-drag is not an edge
+     * case, it is the whole mechanism this protects.
+     *
+     * v3.6.0 final fix (M2): every handle is measured against the WRAP's own
+     * visible rect before it is allowed to move anything. `.ed-wave-canvas-
+     * wrap` is `overflow: auto`, and `getBoundingClientRect()` on a child it
+     * has scrolled or clipped out of sight still returns a full viewport
+     * rect for a box that is painted NOWHERE — this repo's own documented
+     * trap, which the test helper `pointInCanvas` already applies and this
+     * function did not. Two things follow, and both are load-bearing:
+     *
+     *   - A handle with no intersection with the wrap's rect is SKIPPED
+     *     outright. It cannot be overlapped by the rail, because it is not
+     *     on screen to overlap.
+     *   - A handle that is only PARTLY visible contributes the right edge of
+     *     its visible part (`min(r.right, wrapRect.right)`), not its full
+     *     rect's right. Clamping alone would not do: a fully clipped handle
+     *     clamps to `wrapRect.right`, which is the largest value in the
+     *     whole calculation and would narrow the rail harder than the real
+     *     defect did. The skip is what makes the clamp safe.
+     *
+     * MEASURED on the fixture `test/wave-rail-clearance.test.js` now carries
+     * (24 cycles, `edge: ['a~>b']` from cycle 1 to cycle 20, a real press on
+     * the drawn `.ed-wave-edge-hit` stroke), at 1000x900 — the viewport this
+     * whole version exists for, since `.ed-wave-side[data-expanded]` is
+     * `position: absolute` below 1100px:
+     *
+     *     to-handle right 1332.2   wrap right 970   visible false
+     *     before: side.style.width '160px'  rendered 160px  label input 23px
+     *     after:  side.style.width ''       rendered 340px  label input 203px
+     *
+     * The rail was being collapsed to its floor by a handle drawn 362px
+     * past the clip. The edge-shape `<select>` measures 50px in BOTH states
+     * and is deliberately NOT quoted as a symptom — it is a fixed-width
+     * control, so it survives the squeeze that guts the `<input>` beside it,
+     * and quoting it would read as damage that was never there.
+     *
+     * The wrap's border box is used for that visibility test rather than its
+     * padding box, matching `pointInCanvas`'s own visibility check (which
+     * reserves the padding box for scroll ARITHMETIC). The wrap carries
+     * padding and no border, and content is visible inside padding, so the
+     * two boxes are the same rect here anyway.
+     *
+     * Where this genuinely does nothing, stated as the code behaves rather
+     * than as round 4 hoped: an inline width IS still applied at a wide
+     * viewport — MEASURED 160px at 1280x900 and 198px at 1600x900 on that
+     * same 24-cycle document before this fix, i.e. the old "no inline width
+     * is ever applied at a wide viewport" claim was simply false. It was
+     * harmless there for a DIFFERENT reason than the one claimed:
+     * `.ed-wave-side`'s `flex: 0 0 340px` beats an inline `width` for a flex
+     * item's main size, so the rendered column stayed 340px regardless. The
+     * same mechanism covers the collapsed 28px rail (`flex: 0 0 28px`), so a
+     * leftover inline style from a PRIOR expansion cannot keep it
+     * artificially wide. Only the `position: absolute` expanded state below
+     * 1100px takes the inline width for real — which is exactly why that is
+     * the state the defect showed up in.
+     *
+     * Residual, accepted limit — and it IS reached, including by this
+     * function's own test fixture. When `bodyRight - rightmost - MARGIN`
+     * falls below `MIN_WIDTH`, this clamps to `MIN_WIDTH` rather than
+     * shrinking further, and the selected handle stays covered by the rail.
+     *
+     * MEASURED at HEAD on `MEDIUM_MD` — the 12-cycle fixture in
+     * `test/wave-rail-clearance.test.js`'s own scenario 2 — at 1000x900:
+     *
+     *     to-handle 888.2–900.2, painted and not clipped at all
+     *     bodyRight 970 -> fits = 970 - 900.2 - 4 = 65.8  (< MIN_WIDTH)
+     *     side.style.width '160px', so the rail's left edge lands at 810
+     *     => 90.2px of the handle is still under the rail, and
+     *        `elementFromPoint` at the handle's own centre returns a
+     *        `<span>` INSIDE `.ed-wave-side`, not the handle
+     *
+     * It needs no contrived fixture: 16 cycles with the `to` end at cycle
+     * 12, at 970x900, leaves 166.4px of overlap the same way.
+     *
+     * The sentence that stood here — "a small residual overlap in a
+     * genuinely too-narrow-to-satisfy-both-at-once case … which no fixture
+     * here produces" — was therefore wrong three times: the overlap is most
+     * of the handle rather than small, the case is ordinary rather than
+     * genuinely-too-narrow, and the fixture that produces it shipped in the
+     * SAME commit as the sentence denying it. It is recorded rather than
+     * quietly replaced because it is this batch's signature defect (a true
+     * piece of code with a false sentence beside it) landing inside the
+     * delivery that exists to fix that defect — one clause after the
+     * warning that "no fixture here reaches it" is a claim about fixtures,
+     * never about what a user can reach.
+     *
+     * Why it is accepted rather than fixed here: below 1100px the rail is
+     * `position: absolute` and `bodyRight === wrapRight` (MEASURED: both
+     * 970 above), so a handle drawn near the right-hand end of a wide
+     * diagram cannot be cleared by narrowing the rail AT ALL — no width
+     * satisfies both, and `MIN_WIDTH` is the floor precisely so the panel
+     * does not become unusable while trying. Clearing it needs a different
+     * mechanism (scroll the wrap, or anchor the overlay to the other edge),
+     * which is a design change and not a bound to re-tune.
+     *
+     * One more thing this does not do, in the opposite direction, and it
+     * behaves identically before and after the fix above so it is not a
+     * regression: the wrap has no scroll listener, so scrolling AFTER an
+     * edge is selected does not re-run the verdict. MEASURED on the
+     * 24-cycle fixture at 1000x900 — `scrollLeft = 356` brings the `to`
+     * handle back to 964.2–976.2, i.e. painted and squarely under the rail,
+     * while `side.style.width` stays `''` from the reading taken at
+     * `scrollLeft 0`. That is the only measurable way the new
+     * skip-what-the-wrap-clipped rule can be wrong, and it is a STALE
+     * verdict rather than a wrong one.
+     */
+    function clearSelectedEdgeOfSide() {
+      panels.side.style.width = '';
+      if (selectedEdge === null) return;
+      const bodyRight = body.getBoundingClientRect().right;
+      const wrapRect = canvasWrap.getBoundingClientRect();
+      let rightmost = null;
+      for (const end of ['from', 'to']) {
+        const h = d.querySelector('.ed-wave-edge-handle[data-edge-index="' +
+          selectedEdge + '"][data-edge-handle="' + end + '"]');
+        if (h === null) continue;
+        const r = h.getBoundingClientRect();
+        if (r.right <= wrapRect.left || r.left >= wrapRect.right) continue;
+        if (r.bottom <= wrapRect.top || r.top >= wrapRect.bottom) continue;
+        const painted = Math.min(r.right, wrapRect.right);
+        if (rightmost === null || painted > rightmost) rightmost = painted;
+      }
+      if (rightmost === null) return;
+      const MARGIN = 4;
+      const MIN_WIDTH = 160;
+      const fits = bodyRight - rightmost - MARGIN;
+      if (fits < 340) panels.side.style.width = Math.max(MIN_WIDTH, Math.round(fits)) + 'px';
+    }
+
     /**
      * Repaint everything, and give the keyboard cursor back where it was.
      *
@@ -1524,37 +2440,79 @@
       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, layout);
+      panels.renderLanes(doc, layout, { selection: selection });
+      // v3.6.0 Task 13: the Lane panel's period/phase — same `selection` mark
+      // `renderLanes` above already reads for the CYCLE highlight, not a
+      // second "selected lane" concept.
+      panels.renderLaneField(doc, layout, { selection: selection });
+      const wds = {
+        cursor: cursor,
+        selection: selection,
+        pendingFrom: pendingFrom,
+        endpointDrag: endpointDrag,
+        selectedEdge: selectedEdge,
+        overlay: overlay,
+        canvasWrap: canvasWrap,
+        dataEdit: dataEdit,
+        enterDrawing: enterDrawing,
+        onCanvasDown: onCanvasDown,
+        onCanvasHover: onCanvasHover,
+        edgeMode: edgeMode,
+        hoverBoundary: hoverBoundary,
+      };
+      canvas = drawer.renderCanvas(canvas, doc, layout, wds);
+      cursor = wds.cursor;
+      selection = wds.selection;
+      panels.renderEdgeBar(doc, { selectedEdge: selectedEdge });
+      // v3.6.0 Task 13 fix round 3: selecting an edge is an action whose
+      // ENTIRE feedback surface is the 關聯線 panel just painted above —
+      // at a narrow viewport (<1100px) that panel sits inside the
+      // collapsed rail, where every one of its controls renders at zero
+      // size (`wave-panels.js`'s `section()` docstring and `lib/md2doc.js`'s
+      // `.ed-wave-side` media query: `data-open` is the SECTION's own
+      // toggle state and says nothing about whether the RAIL is currently
+      // showing it). Left alone, a narrow-viewport user who selects an edge
+      // gets no hint that the only surface to edit or delete it exists at
+      // all. So this expands the rail — but only on the TRANSITION into
+      // having a selection (`lastSelectedEdge === null`, checked against
+      // the PREVIOUS render, not "selectedEdge !== null" on its own):
+      // expanding on every repaint would fight a user who deliberately
+      // collapses the rail back (the fix-round-1 button) while still
+      // working on the same selected edge — the very next keystroke would
+      // pop it back open. Firing once, at the moment of selection, is the
+      // honest response without becoming a second one-way door.
+      //
+      // Lane/cycle selection does NOT get the same treatment, by deliberate
+      // choice, not oversight: unlike an edge, selecting a lane already has
+      // visible feedback OUTSIDE the side column — `renderLanes` highlights
+      // the row (`.is-selected`) and the canvas itself draws the cycle
+      // selection — so a narrow-viewport user who selects a lane is never
+      // left looking at nothing the way an edge-select would leave them.
+      if (selectedEdge !== null && lastSelectedEdge === null) {
+        panels.expandSide();
+      }
+      lastSelectedEdge = selectedEdge;
+      // v3.6.0 Task 13 fix round 4: re-checked on EVERY render while an
+      // edge is selected, not only on the transition that just (maybe)
+      // expanded the rail above — see `clearSelectedEdgeOfSide`'s own
+      // comment for the mechanism. Unlike `expandSide()`, this has no
+      // "only once" concern: it recomputes and resets from scratch each
+      // call, so it stays correct across switching directly from one
+      // selected edge to another, an unrelated repaint moving the SAME
+      // edge's own handle (a resize, an hscale change), or the rail
+      // collapsing back (where it correctly clears its own inline style).
+      clearSelectedEdgeOfSide();
+      panels.renderPreview(doc);
+      panels.renderMeta(doc);
+      panels.renderUnmodelled(doc, layout);
+      // v3.6.0 Task 13: the 原始碼 panel. Repainted every pass, like every
+      // other panel above — cheap (one `store.toPatch()`, already run once
+      // per gesture by `afterStoreMoved`) and it means the panel can never
+      // show a patch older than what is on screen.
+      panels.renderSource();
       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(','));
+      paintSelectionState(doc, layout);
       overlay.setAttribute('data-wave-gestures', String(gestures));
       overlay.setAttribute('data-wave-lanes', String(layout.lanes.length));
       overlay.setAttribute('data-wave-cycles', String(layout.cycles));
@@ -1575,28 +2533,6 @@
       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;
@@ -1618,6 +2554,16 @@
       const want = focusOverride !== null ? focusOverride : (mark === null ? null : mark.key);
       focusOverride = null;
       if (want === null) return;
+      // v3.6.0 Task 14: "did not come back" includes "came back DISABLED".
+      // `.focus()` on a disabled control is inert — the fact T6h pinned for
+      // the rail's ▲ at the top of the list — and the toolbar is now where
+      // the gestures that disable their own button live: 訊號's 刪除 empties
+      // the selection, so the very button the user pressed is disabled by
+      // the repaint that press caused. Found-but-inert fell straight through
+      // to `document.body`, which is the state this whole function exists to
+      // prevent, and which turns the next Backspace into「delete the
+      // selected blocks」.
+      const inert = function (node) { return node === null || node.disabled === true; };
       let el = overlay.querySelector('[data-focus-key="' + want + '"]');
       // A named destination the repaint did not bring back. It happens: a
       // group's key is its first lane's row number, so inserting a lane above
@@ -1626,10 +2572,10 @@
       // where the keyboard actually was, and failing that to the dialog
       // itself. Never to nothing: nothing is `document.body`, and this whole
       // task is about not ending there.
-      if (el === null && mark !== null && mark.key !== want) {
+      if (inert(el) && mark !== null && mark.key !== want) {
         el = overlay.querySelector('[data-focus-key="' + mark.key + '"]');
       }
-      if (el === null) {
+      if (inert(el)) {
         if (!overlay.contains(d.activeElement)) panel.focus();
         return;
       }
@@ -1642,602 +2588,6 @@
       } 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;
-      headInput.value = (h !== null && typeof h === 'object' && typeof h.text === 'string')
-        ? 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) : '';
-    }
-
-    /**
-     * Say out loud which properties of this document the drawing is not
-     * showing.
-     *
-     * `config.hscale`, and a lane's `period` / `phase`, all change what the
-     * engine paints and none of them is modelled here (see the toolbar comment
-     * for the measurements). Drawing a confident picture that ignores them is
-     * 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, layout) {
-      const found = [];
-      const cfg = doc.config;
-      if (cfg !== null && typeof cfg === 'object' && cfg.hscale !== undefined) {
-        found.push('config.hscale');
-      }
-      for (const path of codec.lanePaths(doc)) {
-        const lane = valueAt(doc, path);
-        if (lane === null || typeof lane !== 'object') continue;
-        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(' '));
-      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
-      // canvas with no lanes on it: `lanePaths()` is empty, `addLane()` hands
-      // the document straight back, and pressing ＋ produced one status line
-      //「這個動作沒有改變任何東西」— true, and no explanation at all. An
-      // editor that looks broken is worse than one that says what it cannot
-      // do, and the notice above is the precedent: the drawing already tells
-      // the user which properties it is not showing them.
-      const kinds = [];
-      for (const key of ['reg', 'assign']) {
-        if (doc[key] !== undefined) kinds.push(key + ':');
-      }
-      const noLanes = codec.lanePaths(doc).length === 0;
-      overlay.setAttribute('data-wave-nolanes', noLanes ? '1' : '0');
-      noSignal.hidden = !noLanes;
-      noSignal.textContent = !noLanes ? '' :
-        (kinds.length === 0
-          ? '這個區塊裡沒有 signal:，所以沒有可以編輯的 lane。'
-          : '這個區塊用的是 ' + kinds.join(' / ') +
-            '，這個編輯器只編輯 signal: 的 lane。') +
-        '右邊的 WaveDrom 預覽仍然是引擎畫的原圖；要改這個區塊請用「⠿ → MD 原始碼」。';
-    }
-
-    /**
-     * The lane list.
-     *
-     * Rows are `layout.laneHeight` tall and in `layout.lanes` order, so row k
-     * here and row k of the drawing are the same lane by construction rather
-     * than by a second traversal that could disagree.
-     */
-    function renderLanes(doc, layout) {
-      laneCol.textContent = '';
-      const rows = d.createElement('div');
-      rows.className = 'ed-wave-lane-rows';
-      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 spans) {
-        const tag = d.createElement('button');
-        tag.type = 'button';
-        tag.className = 'ed-wave-group';
-        tag.setAttribute('data-focus-key', 'group-' + span.from);
-        tag.textContent = span.title;
-        tag.title = '群組「' + span.title + '」——點一下改名';
-        tag.setAttribute('data-group-from', String(span.from));
-        tag.setAttribute('data-group-to', String(span.to));
-        tag.style.top = (span.from * layout.laneHeight) + 'px';
-        tag.style.height = ((span.to - span.from + 1) * layout.laneHeight) + 'px';
-        tag.style.left = ((span.depth - 1) * 16) + 'px';
-        tag.addEventListener('click', function () { renameGroup(span); });
-        rows.appendChild(tag);
-      }
-
-      for (let i = 0; i < layout.lanes.length; 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
-      // rather than surprising afterwards.
-      rows.appendChild(insertButton(doc, layout.lanes.length, layout, true));
-    }
-
-    /**
-     * `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));
-      row.style.top = (i * layout.laneHeight) + 'px';
-      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));
-
-      const name = d.createElement('input');
-      name.type = 'text';
-      name.className = 'ed-wave-lane-name';
-      name.setAttribute('data-focus-key', 'lane-name-' + i);
-      const lane = layout.lanes[i].lane;
-      name.value = typeof lane.name === 'string' ? lane.name : '';
-      name.addEventListener('change', function () {
-        commit('rename', function (doc2) { return codec.renameLane(doc2, i, name.value); });
-      });
-      row.appendChild(name);
-
-      const up = d.createElement('button');
-      up.type = 'button';
-      up.className = 'ed-wave-lane-up';
-      up.setAttribute('data-focus-key', 'lane-up-' + i);
-      up.textContent = '▲';
-      up.title = '往上移一格';
-      up.disabled = i === 0;
-      up.addEventListener('click', function () {
-        // The button this lane arrives at, EXCEPT at the top, where `lane-up-0`
-        // is disabled and `.focus()` on it is inert — measured, walking a lane
-        // to the top with three ▲ put the cursor on `lane-up-2`, `lane-up-1`
-        // and then BODY, which is the state F7 exists to prevent and the fourth
-        // press then did nothing at all. At the top the cursor goes to the one
-        // control on that row that is never disabled there: ▼.
-        focusOverride = i - 1 === 0 ? 'lane-down-0' : 'lane-up-' + (i - 1);
-        commit('move', function (doc2) { return codec.moveLane(doc2, i, i - 1); });
-      });
-      row.appendChild(up);
-
-      const down = d.createElement('button');
-      down.type = 'button';
-      down.className = 'ed-wave-lane-down';
-      down.setAttribute('data-focus-key', 'lane-down-' + i);
-      down.textContent = '▼';
-      down.title = '往下移一格';
-      down.disabled = i === layout.lanes.length - 1;
-      down.addEventListener('click', function () {
-        // Mirror of ▲ above: `lane-down-<last>` is disabled, so the bottom row
-        // hands the cursor to ▲ instead.
-        focusOverride = i + 1 === layout.lanes.length - 1
-          ? 'lane-up-' + (i + 1) : 'lane-down-' + (i + 1);
-        commit('move', function (doc2) { return codec.moveLane(doc2, i, i + 1); });
-      });
-      row.appendChild(down);
-
-      const del = d.createElement('button');
-      del.type = 'button';
-      del.className = 'ed-wave-lane-remove';
-      del.setAttribute('data-focus-key', 'lane-remove-' + i);
-      del.textContent = '✕';
-      del.title = '刪掉這條 lane（如果群組因此空掉，群組也會一起走）';
-      del.addEventListener('click', function () {
-        selection = null;
-        // The row this button belongs to is about to stop existing, so the
-        // keyboard goes to the ＋ that occupies that position instead — the
-        // one control at that spot that survives every removal, tail included.
-        focusOverride = 'lane-add-' + i;
-        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;
-    }
-
-    /**
-     * Where a lane inserted at display position `index` would actually land,
-     * asked of the bridge rather than guessed.
-     *
-     * This is constraint 4 made visible. `laneInsertPath` puts an insert at a
-     * group's FIRST lane inside that group, and an insert at the position just
-     * past its LAST lane outside it — a group can be joined at its head and
-     * never at its tail. That asymmetry is not something a label can argue
-     * away, so the label states it: the button says which container it will
-     * land in, before it is pressed, and the status line says it again after.
-     */
-    function landingOf(doc, index) {
-      const path = codec.laneInsertPath(doc, index);
-      if (path === null) return { path: null, title: null };
-      const container = path.slice(0, path.length - 1);
-      const held = valueAt(doc, container);
-      const title = Array.isArray(held) && typeof held[0] === 'string' ? held[0] : null;
-      return { path: path, title: title };
-    }
-
-    function insertButton(doc, index, layout, isTail) {
-      const b = d.createElement('button');
-      b.type = 'button';
-      b.className = isTail ? 'ed-wave-lane-add ed-wave-lane-add-tail' : 'ed-wave-lane-add';
-      b.textContent = '＋';
-      b.setAttribute('data-insert-at', String(index));
-      b.setAttribute('data-focus-key', 'lane-add-' + index);
-      const landing = landingOf(doc, index);
-      const where = landing.title === null ? '群組外' : '群組「' + landing.title + '」裡';
-      b.setAttribute('data-lands-in', landing.title === null ? '' : landing.title);
-      b.title = '在這裡加一條 lane —— 會落在' + where;
-      if (isTail) {
-        b.style.top = (layout.lanes.length * layout.laneHeight) + 'px';
-      }
-      b.addEventListener('click', function () {
-        // Straight into the new lane's name field: it is what the user is going
-        // to type next, and it is the only control the new row introduces.
-        focusOverride = 'lane-name-' + index;
-        const added = commit('add-lane', function (doc2) {
-          return codec.addLane(doc2, index, { name: '', wave: 'x' });
-        });
-        if (added) say('新增的 lane 落在' + where);
-      });
-      return b;
-    }
-
-    /**
-     * The rail's rename field: this dialog's one sub-panel.
-     *
-     * The field is INSERTED beside its tag and the tag is hidden, rather than
-     * the two being swapped, and taking it down again touches only those two
-     * nodes. That is not tidiness. Taking it down used to mean a full
-     * `render()` — a rebuild of the entire rail — and a rebuild that runs
-     * inside a `blur` handler destroys the element the user is in the middle
-     * of pressing. Measured before this: open the field, then press any rail
-     * button; the mousedown blurred the field, the rail was rebuilt, the
-     * mouseup landed on a fresh element so no `click` ever fired, the press
-     * did nothing at all, and the keyboard ended on `document.body` inside a
-     * modal with no visible cursor.
-     */
-    function renameGroup(span) {
-      const rows = laneCol.querySelector('.ed-wave-lane-rows');
-      const tag = rows === null ? null
-        : rows.querySelector('.ed-wave-group[data-group-from="' + span.from + '"]');
-      if (tag === null) return;
-
-      const input = d.createElement('input');
-      input.type = 'text';
-      input.className = 'ed-wave-group-input';
-      input.setAttribute('data-focus-key', 'group-input-' + span.from);
-      input.value = span.title;
-      input.style.top = tag.style.top;
-      input.style.left = tag.style.left;
-
-      /** The field off, the tag back — and nothing else in the rail touched.
-       *  A no-op for both once a repaint has taken them away. */
-      const takeDown = function () {
-        if (input.parentNode !== null) input.parentNode.removeChild(input);
-        if (d.contains(tag)) tag.hidden = false;
-      };
-      /** The tag this field was covering, or — when a repaint has replaced it
-       *  and moved it (a group's `from` is its first lane's row, so an insert
-       *  above it renumbers the key) — whatever now carries that key, and
-       *  failing that the dialog itself. Never nothing: nothing is
-       *  `document.body`. */
-      const focusTag = function () {
-        const live = d.contains(tag) ? tag
-          : overlay.querySelector('[data-focus-key="group-' + span.from + '"]');
-        if (live !== null) live.focus();
-        else panel.focus();
-      };
-      /** Whether the keyboard is IN the field right now. False on the `blur`
-       *  path — the browser has already moved it by then — which is how the
-       *  two are told apart without asking which device did anything. */
-      const holdsKeyboard = function () { return d.activeElement === input; };
-
-      const finish = function () {
-        // Once. `change` and `blur` both fire for a field committed with Enter,
-        // and every teardown below is a blur too. Whoever gets here first owns
-        // the gesture; the latch is also how the other two say "not you".
-        if (groupRename === null) return;
-        groupRename = null;
-        const hadKeyboard = holdsKeyboard();
-        const value = input.value;
-        takeDown();
-        if (value === span.title) {
-          // Nothing to write, so nothing to repaint — the tag is already back.
-          // The keyboard is only moved when it was in the field: on the mouse
-          // path the browser is already carrying it to the control that was
-          // pressed, and that control is still there to receive it now that
-          // this path no longer rebuilds the rail.
-          if (hadKeyboard) focusTag();
-          return;
-        }
-        // A real commit, so a real repaint — and the keyboard has to be named
-        // if it would otherwise be lost. `focusOverride` is left alone when a
-        // caller has already made a more specific promise.
-        if (focusOverride === null &&
-            (hadKeyboard || !overlay.contains(d.activeElement))) {
-          focusOverride = 'group-' + span.from;
-        }
-        commit('rename-group', function (doc2) {
-          return replaceAt(doc2, span.path.concat([0]), value);
-        });
-      };
-      // The rail is about to be rebuilt underneath this field by somebody
-      // else's repaint — an undo, a redo, any gesture that reaches `render()`
-      // while it is open. Both nodes go with that rebuild, so there is nothing
-      // to take down; what matters is dropping the latch and naming where the
-      // keyboard lands, because `group-input-<n>` will not exist afterwards and
-      // focus would be left on a node that is no longer in the document — which
-      // is the wedge that lost every subsequent keystroke.
-      const retire = function () {
-        if (groupRename === null) return;
-        groupRename = null;
-        if (focusOverride === null && holdsKeyboard()) {
-          focusOverride = 'group-' + span.from;
-        }
-      };
-      // Escape's half of the layering: the field goes, the name does not
-      // change, the session stands, and the keyboard goes back to the tag the
-      // field was covering — never to `document.body`, which is the state the
-      // whole of this task exists to make unreachable. No repaint at all: the
-      // tag was never destroyed.
-      const cancel = function () {
-        if (groupRename === null) return;
-        groupRename = null;
-        takeDown();
-        focusTag();
-      };
-
-      input.addEventListener('change', finish);
-      input.addEventListener('blur', finish);
-      tag.hidden = true;
-      rows.insertBefore(input, tag);
-      // Three facts, and only the three that are read: that a rename is
-      // standing (this being non-null), how to take it down on purpose, and how
-      // to let go of it when a repaint takes it down for us. A copy of the span
-      // or of the field itself would be a second record of something the
-      // closure above already holds.
-      groupRename = { cancel: cancel, retire: retire };
-      input.focus();
-      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
@@ -2411,7 +2761,7 @@
       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;
+      if (!drawer.isBus(drawer.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 };
@@ -2419,697 +2769,6 @@
       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).
-     *
-     * Structure-sharing everywhere it does not have to copy, so the store's
-     * lane-identity bookkeeping still sees every untouched lane as the same
-     * object — `remapOrigins` answers a content edit by position and a
-     * structural one by identity, and a wholesale clone here would make an
-     * ordinary rename look like a structural change.
-     */
-    function replaceAt(node, path, value) {
-      if (path.length === 0) return value;
-      const seg = path[0];
-      const child = replaceAt(node[seg], path.slice(1), value);
-      if (Array.isArray(node)) {
-        const out = node.slice();
-        out[seg] = child;
-        return out;
-      }
-      const out = Object.assign({}, node);
-      out[seg] = child;
-      return out;
-    }
-
-    /**
-     * The hand-drawn waveform.
-     *
-     * Every cycle's picture comes from `codec.levelsOf` through `brickOf`, and
-     * from nowhere else — constraint 3. The levels and the bricks are both
-     * published on the element (`data-levels-N`, `data-bricks-N`) so the
-     * agreement with the preview beside it is something a test can measure
-     * rather than something this comment can promise: the preview's own SVG
-     * 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
-      // on every arrow key. `render()`'s own `data-focus-key` restore covers
-      // the full-repaint path; this covers the three that call renderCanvas
-      // directly (a drag's two, and the keyboard's own), so the property holds
-      // for the canvas no matter which road the repaint came down.
-      const hadFocus = canvas !== null && d.activeElement === canvas;
-      // The cursor is an index pair, and the document under it can get shorter:
-      // deleting cycles or removing the bottom lane leaves it pointing past the
-      // end. Clamped HERE, where the layout that decides what "past the end"
-      // means is already in hand — so nothing downstream ever has to ask.
-      if (cursor !== null) {
-        if (layout.lanes.length === 0 || layout.cycles === 0) {
-          cursor = null;
-        } else {
-          cursor = {
-            laneIndex: Math.max(0, Math.min(cursor.laneIndex, layout.lanes.length - 1)),
-            cycle: Math.max(0, Math.min(cursor.cycle, layout.cycles - 1)),
-          };
-        }
-      }
-      // …and `selection` with it, which is the other half of the same fact and
-      // was left out of the first cut. Measured before this: Shift-select four
-      // cycles, press 刪除 cycle, and a one-cycle document was left with the
-      // cursor on cycle 1, no visible box, 複製 reporting「複製了 4 個 cycle」
-      // and 貼上（插入）growing the document back to five. The toolbar was
-      // acting on a range the drawing no longer had anywhere to put.
-      //
-      // The two axes are not treated alike, and that is the point: a CYCLE
-      // range that overshoots is the same range in a shorter document, so it
-      // clamps; a LANE that is gone is not a lane the user can have meant, so
-      // the selection goes rather than silently moving to whichever lane
-      // inherited the index. (`lane ✕` already nulls it on its own path; this
-      // catches the undo/redo of that.)
-      //
-      // It does NOT catch every route, and the earlier wording here said it
-      // did. MEASURED: `＋` at 0, drag-select cycles 1-3 on the new lane 0,
-      // then Ctrl+Z — the selection box and the rail highlight both stay on
-      // row 0, which is now `clk`. The trace-derived marks above fix the
-      // CURSOR for that case; the selection is still carried by row number,
-      // so it lands on whoever inherited the row. The cost is confined to the
-      // highlight and to where the next Shift+arrow anchors, because every
-      // cycle operation is document-wide — but it is a real gap, not a
-      // covered one.
-      if (selection !== null) {
-        if (layout.lanes.length === 0 || layout.cycles === 0 ||
-            selection.laneIndex < 0 || selection.laneIndex >= layout.lanes.length) {
-          selection = null;
-        } else {
-          selection = {
-            laneIndex: selection.laneIndex,
-            from: Math.max(0, Math.min(selection.from, layout.cycles - 1)),
-            to: Math.max(0, Math.min(selection.to, layout.cycles - 1)),
-          };
-        }
-      }
-      canvasWrap.textContent = '';
-      canvas = d.createElementNS(SVGNS, 'svg');
-      canvas.setAttribute('class', 'ed-wave-canvas');
-      // In the Tab cycle, and therefore in the focus trap, like every other
-      // control in here: the drawing is this dialog's main surface and was the
-      // one thing in it a keyboard could not reach.
-      canvas.setAttribute('tabindex', '0');
-      canvas.setAttribute('data-focus-key', 'canvas');
-      canvas.setAttribute('aria-label',
-        '波形繪圖區：方向鍵移動游標，Shift+左右鍵選一段 cycle，' +
-        '按電位字元（' + BRUSHES.join(' ') + '）塗上去');
-      const width = Math.max(layout.width, SIZES.cycleWidth);
-      canvas.setAttribute('width', String(width));
-      canvas.setAttribute('height', String(Math.max(layout.height, layout.laneHeight)));
-      canvas.setAttribute('viewBox', '0 0 ' + width + ' ' +
-        Math.max(layout.height, layout.laneHeight));
-      canvas.setAttribute('data-lane-count', String(layout.lanes.length));
-      canvas.setAttribute('data-cycle-count', String(layout.cycles));
-
-      // cycle grid
-      for (let c = 0; c <= layout.cycles; c++) {
-        const g = d.createElementNS(SVGNS, 'line');
-        g.setAttribute('class', 'ed-wave-grid');
-        g.setAttribute('x1', String(c * layout.cycleWidth));
-        g.setAttribute('x2', String(c * layout.cycleWidth));
-        g.setAttribute('y1', '0');
-        g.setAttribute('y2', String(layout.height));
-        canvas.appendChild(g);
-      }
-
-      for (let i = 0; i < layout.lanes.length; i++) {
-        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);
-        const box = d.createElementNS(SVGNS, 'rect');
-        box.setAttribute('class', 'ed-wave-selection');
-        box.setAttribute('x', String(from * layout.cycleWidth));
-        box.setAttribute('y', String(selection.laneIndex * layout.laneHeight));
-        box.setAttribute('width', String((to - from + 1) * layout.cycleWidth));
-        box.setAttribute('height', String(layout.laneHeight));
-        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
-      // DRAWN on and the cell an edit lands in cannot drift apart.
-      let cursorCell = '';
-      if (cursor !== null) {
-        const cell = geometry.cellRect(layout, cursor.laneIndex, cursor.cycle);
-        if (cell !== null) {
-          cursorCell = cursor.laneIndex + ',' + cursor.cycle;
-          const cur = d.createElementNS(SVGNS, 'rect');
-          cur.setAttribute('class', 'ed-wave-cursor');
-          cur.setAttribute('data-ed-wave-cursor', '');
-          cur.setAttribute('data-cell', cursorCell);
-          cur.setAttribute('x', String(cell.x));
-          cur.setAttribute('y', String(cell.y));
-          cur.setAttribute('width', String(cell.width));
-          cur.setAttribute('height', String(cell.height));
-          canvas.appendChild(cur);
-        }
-      }
-      // The same value on the overlay: what a scenario reads when the rect is
-      // not the thing under test. It is assigned INSIDE the branch that draws
-      // the rect and defaults to empty, so "there is no rect" and "the overlay
-      // says none" are one decision rather than two that happen to agree —
-      // they did not, in the first cut: this line read `cursor` directly, so a
-      // cursor the clamp had not caught published a cell that `cellRect`
-      // refused to give a rectangle to, and a build with the clamp removed
-      // reported `{cell: null, published: "5,4"}`.
-      overlay.setAttribute('data-wave-cursor', cursorCell);
-
-      canvas.addEventListener('mousedown', onCanvasDown);
-      // Tabbing onto the drawing is an entry like any other, so it puts the
-      // cursor on screen rather than leaving a focused surface with no visible
-      // cursor in it. Re-entrant only once: `enterDrawing()` repaints, the
-      // repaint re-focuses the new canvas and fires this again, and by then
-      // `cursor` is set.
-      canvas.addEventListener('focus', function () {
-        if (cursor === null) enterDrawing();
-      });
-      canvasWrap.appendChild(canvas);
-      if (hadFocus) canvas.focus();
-    }
-
-    function drawLane(svg, layout, i) {
-      const row = layout.lanes[i];
-      const lane = row.lane;
-      // An ABSENT `wave` and an EMPTY one are two different pictures, and
-      // collapsing them into one was the regression the previous round shipped
-      // on the very axis it was fixing. MEASURED against the pinned engine,
-      // second half-brick per cycle:
-      //
-      //     {name:'a', wave:''}   ["xxx","xxx"]   ONE x cycle
-      //     {name:'a'}            []              NOTHING
-      //     {}       (spacer)     []              NOTHING
-      //     {name:'a', wave:1234} []              NOTHING
-      //     {name:'a', wave:null} []              NOTHING
-      //
-      // and in a mixed diagram the engine simply emits no bricks for that row:
-      // `{signal:[{a,'0101'},{},{b,'1010'}]}` is 16 uses, i.e. 2 lanes × 4 × 2.
-      // So the rule is exactly "a lane draws cycles only when `wave` is a
-      // string"; `''` is a string, which is why it gets its one cycle, and
-      // `{}` — the canonical WaveDrom blank-row spacer — gets none.
-      //
-      // The empty-string case is not a corner either: `deleteCycles` covering
-      // every cycle sets every lane's wave to `''`, two clicks away.
-      const hasWave = typeof lane.wave === 'string';
-      const wave = hasWave ? lane.wave : '';
-      const cells = hasWave ? codec.expandWave(wave) : [];
-      const levels = !hasWave ? [] : (wave === '' ? ['x'] : codec.levelsOf(cells));
-      const bricks = levels.map(brickOf);
-      // Which cycles carry the engine's discontinuity marker. `levelsOf`
-      // deliberately erases `|` — it answers what a cycle SHOWS, and a gap
-      // shows whatever is in front of it — so the marker has to be read off the
-      // cells. Measured: `01|10` renders one `<use xlink:href="#gap">` at
-      // translate(100), which is the centre of cycle 2, the `|` cycle.
-      const gaps = [];
-      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.
-      svg.setAttribute('data-haswave-' + i, hasWave ? '1' : '0');
-      svg.setAttribute('data-wave-' + i, wave);
-      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;
-      const mid = (hi + lo) / 2;
-      const cw = layout.cycleWidth;
-      const labels = labelsOf(lane);
-      // Which cycles carry a `data` label: the explicit value cycles, in order.
-      // `levelsOf` repeats a bus's level through its continuation cycles, so the
-      // label belongs to the cycle that STARTS the run, which is what the run
-      // grouping below already knows.
-      let labelSlot = 0;
-
-      // Runs of one picture. Clock bricks never merge — each `p` cycle is a
-      // whole clock period, and a merged run would draw one long one.
-      const runs = [];
-      for (let c = 0; c < bricks.length; c++) {
-        const last = runs.length === 0 ? null : runs[runs.length - 1];
-        if (last !== null && last.brick === bricks[c] && !isClock(bricks[c])) last.to = c;
-        else runs.push({ brick: bricks[c], from: c, to: c });
-      }
-
-      function bandOf(brick) {
-        if (brick === '111' || brick === 'uuu') return [hi, hi];
-        if (brick === '000' || brick === 'ddd') return [lo, lo];
-        if (brick === 'zzz') return [mid, mid];
-        return [hi, lo];
-      }
-
-      for (let r = 0; r < runs.length; r++) {
-        const run = runs[r];
-        const x0 = run.from * cw;
-        const x1 = (run.to + 1) * cw;
-        const brick = run.brick;
-        if (isBus(brick)) {
-          const poly = d.createElementNS(SVGNS, 'polygon');
-          const s = Math.min(6, cw / 4);
-          poly.setAttribute('class', 'ed-wave-bus ed-wave-bus-' + brick.slice(4));
-          poly.setAttribute('points',
-            (x0 + s) + ',' + hi + ' ' + (x1 - s) + ',' + hi + ' ' +
-            x1 + ',' + mid + ' ' + (x1 - s) + ',' + lo + ' ' +
-            (x0 + s) + ',' + lo + ' ' + x0 + ',' + mid);
-          svg.appendChild(poly);
-          const text = labels[labelSlot];
-          if (typeof text === 'string' && text !== '') {
-            const t = d.createElementNS(SVGNS, 'text');
-            t.setAttribute('class', 'ed-wave-buslabel');
-            t.setAttribute('x', String((x0 + x1) / 2));
-            t.setAttribute('y', String(mid + 4));
-            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') {
-          const rect = d.createElementNS(SVGNS, 'rect');
-          rect.setAttribute('class', 'ed-wave-x');
-          rect.setAttribute('x', String(x0));
-          rect.setAttribute('y', String(hi));
-          rect.setAttribute('width', String(x1 - x0));
-          rect.setAttribute('height', String(lo - hi));
-          svg.appendChild(rect);
-        } else if (isClock(brick)) {
-          const xm = (x0 + x1) / 2;
-          const p = d.createElementNS(SVGNS, 'path');
-          p.setAttribute('class', 'ed-wave-line ed-wave-clock');
-          p.setAttribute('d', brick === 'nclk'
-            ? 'M' + x0 + ',' + lo + ' L' + x0 + ',' + hi + ' L' + xm + ',' + hi +
-              ' L' + xm + ',' + lo + ' L' + x1 + ',' + lo
-            : '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');
-          line.setAttribute('class', brick === 'uuu' || brick === 'ddd'
-            ? 'ed-wave-line ed-wave-weak' : 'ed-wave-line');
-          line.setAttribute('x1', String(x0));
-          line.setAttribute('x2', String(x1));
-          line.setAttribute('y1', String(y));
-          line.setAttribute('y2', String(y));
-          svg.appendChild(line);
-        }
-
-        // The edge into this run. Clock bricks draw their own.
-        if (r > 0 && !isClock(brick) && !isClock(runs[r - 1].brick)) {
-          const a = bandOf(runs[r - 1].brick);
-          const b = bandOf(brick);
-          const top = Math.min(a[0], a[1], b[0], b[1]);
-          const bot = Math.max(a[0], a[1], b[0], b[1]);
-          if (bot > top) {
-            const edge = d.createElementNS(SVGNS, 'line');
-            edge.setAttribute('class', 'ed-wave-edge');
-            edge.setAttribute('x1', String(x0));
-            edge.setAttribute('x2', String(x0));
-            edge.setAttribute('y1', String(top));
-            edge.setAttribute('y2', String(bot));
-            svg.appendChild(edge);
-          }
-        }
-      }
-
-      // The gap marker, last so it sits over the trace it interrupts. The
-      // engine draws one per `|`; drawing none made the two pictures disagree
-      // on a lane whose levels agreed exactly, which is the quietest form of
-      // the disagreement this overlay exists to surface.
-      for (const c of gaps) {
-        const xm = (c + 0.5) * cw;
-        const mark = d.createElementNS(SVGNS, 'path');
-        mark.setAttribute('class', 'ed-wave-gap');
-        mark.setAttribute('d',
-          'M' + (xm - 5) + ',' + (lo + 3) + ' L' + (xm + 1) + ',' + (mid) +
-          ' L' + (xm - 5) + ',' + (hi - 3) +
-          ' M' + (xm - 1) + ',' + (lo + 3) + ' L' + (xm + 5) + ',' + (mid) +
-          ' L' + (xm - 1) + ',' + (hi - 3));
-        svg.appendChild(mark);
-      }
-    }
-
-    /**
-     * 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.
@@ -3131,6 +2790,17 @@
      * brush is on. Everything else the dialog can do is a real `<button>` or
      * `<input>` that Tab already reaches.
      *
+     * That sentence has NO exceptions and no mode-dependence, which is a
+     * property v3.6.0 Task 16 briefly broke and fix round 3 restored. Round 0
+     * bound the transition jump over plain ←/→ while the 關聯線 gesture was
+     * armed, so the keymap above became false for two keys at a state this
+     * function itself decides — and, worse than the documentation problem,
+     * several cells stopped being reachable from the keyboard at all (T9b).
+     * Round 3 moved that jump to Alt+←/→, which cannot arrive here: the call
+     * site is gated on `!ev.altKey`. So every Alt chord this dialog has —
+     * Alt+↑/↓ for the lane, Alt+←/→ for the jump — is claimed one level up in
+     * `onKeyDown` and is deliberately NOT part of this keymap.
+     *
      * Two targets are accepted, and only two:
      *   the canvas  — the surface itself, `tabindex="0"`, so it is in the Tab
      *                 cycle and in the focus trap like every other control.
@@ -3156,6 +2826,28 @@
         enterDrawing();
         return true;
       }
+      // v3.6.0 Task 16 fix round 3: THE ARROWS ARE PER-CELL IN EVERY STATE,
+      // and the transition jump no longer lives here.
+      //
+      // Round 0 bound the jump over plain ← / → while armed. A jump can only
+      // ever land on a transition, so that removed the keyboard's only
+      // cell-precise positioning on the one surface that needs it: on
+      // `p....` (transitions `[0]`) cell 1 became unreachable, and on
+      // `0.1.0` (`[0,2,4]`) cells 1 and 3 did. Home/End do not rescue it —
+      // they reach the two ends and nothing in between. T9b in
+      // `test/editor-journey.test.js` is the invariant that caught it: the
+      // keyboard's Enter/Enter route must write a BYTE-IDENTICAL source to
+      // the mouse drag, and the mouse aims at exactly those cells. MEASURED
+      // with the jump bound here — mouse `node: '.a'` / `node: '...b'`
+      // against keyboard `node: 'a'` / `node: '....b'`: different cells,
+      // different file, invariant gone.
+      //
+      // The jump is a convenience; per-cell movement is the primitive
+      // underneath it, and a convenience may not be bound over a primitive
+      // when that leaves no way back to it. So the jump moved to Alt+←/→,
+      // claimed in `onKeyDown` beside Alt+↑/↓ — see that branch for why that
+      // is the only home available to it (this function cannot be reached
+      // with Alt held) and for what Alt means across the four arrows.
       if (nav) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -3175,7 +2867,7 @@
         ev.stopPropagation();
         if (pendingFrom === null) {
           pendingFrom = { at: cursor.laneIndex, cell: cursor.cycle };
-          say('起點已標記，移到終點再按一次 Enter');
+          panels.say('起點已標記，移到終點再按一次 Enter');
           render();
         } else {
           finishEdgeDrag(cursor.laneIndex, cursor.cycle);
@@ -3205,7 +2897,7 @@
           if (dlTarget === 'blocked') {
             ev.preventDefault();
             ev.stopPropagation();
-            say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
+            panels.say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
             return true;
           }
           if (dlTarget !== null) {
@@ -3269,9 +2961,16 @@
      * ONE lane, a run of cycles — is exactly what a cursor plus Shift can
      * describe. A pointer press already collapses it to the pressed cell; a
      * plain arrow does the same, and Shift+←/→ keeps the anchor it was made
-     * with. Shift+↑/↓ collapses: a selection that spanned two lanes is not a
-     * thing this document model has, so pretending with a highlight would be
-     * the drawing telling the user something the codec cannot honour.
+     * with. Shift+↑/↓ collapses the CYCLE range onto the lane it lands on.
+     *
+     * v3.6.0 Task 14 narrowed what that sentence claims. It used to say a
+     * two-lane selection was not a thing this document model had; that is
+     * no longer true — `selection.laneIndex`..`laneTo` is a lane range, and
+     * 建立群組 / 訊號's 刪除 act on it. What is still true is that the
+     * cycle range belongs to ONE lane (`laneIndex`), so an arrow key that
+     * changes lanes has no cycle anchor left to extend from. Widening the
+     * LANE range from the keyboard is a gesture this dialog does not have
+     * yet; the rail's Shift+click is the one that makes it.
      */
     function moveCursor(key, extend) {
       const layout = geometry.layoutOf(store.doc, SIZES);
@@ -3290,10 +2989,98 @@
       const sameLane = lane === cursor.laneIndex;
       cursor = { laneIndex: lane, cycle: cyc };
       if (extend && sameLane && selection !== null && selection.laneIndex === lane) {
-        selection = { laneIndex: lane, from: selection.from, to: cyc };
+        selection = { laneIndex: lane, laneTo: lane, from: selection.from, to: cyc };
       } else {
-        selection = { laneIndex: lane, from: cyc, to: cyc };
+        selection = { laneIndex: lane, laneTo: lane, from: cyc, to: cyc };
+      }
+      repaintDrawing(layout);
+      scrollCursorIntoView(layout);
+      sayCursor(layout);
+    }
+
+    /**
+     * v3.6.0 Task 16: while armed, walk the cursor between this lane's
+     * TRANSITIONS — `dir === 1` rightwards, `dir === -1` leftwards. Reached
+     * by **Alt+←/→**, claimed in `onKeyDown`; fix round 3 moved it off plain
+     * ←/→, which it had been bound over.
+     *
+     * What Alt+← / Alt+→ is for is picking the cell an edge will anchor to,
+     * and an edge anchors at a transition. Walking one cycle at a time makes
+     * a user press the key eight times to cross an eight-cycle flat run and
+     * land on seven cells they cannot usefully aim at.
+     *
+     * It is an ADDITION to per-cell movement, never a replacement for it —
+     * that distinction is the whole of fix round 3. Plain ←/→ still walks one
+     * cell in every state, armed included, because a jump can only land on a
+     * transition and any cell that is not one would otherwise have no
+     * keyboard route at all. The POINTER could always drop an endpoint
+     * anywhere along a flat run (hanging a label in the middle of a bus needs
+     * exactly that); after round 3 the keyboard can too, which is what T9b
+     * pins byte for byte.
+     *
+     * Which cells count is `geometry.transitionsOf`'s answer, the SAME one
+     * `wave-draw.js` paints the dots from, so a key can never stop somewhere
+     * the drawing did not put a dot. It is not re-derived here, and it is not
+     * "a cycle whose level differs from the one before" — see that function's
+     * own docstring for why that is a different (and wrong) rule.
+     *
+     * THE TWO ENDS CLAMP, and that has one consequence worth stating because
+     * it looks backwards for one press: the armed cursor only ever rests on a
+     * transition, so → with nothing further right goes to the RIGHTMOST
+     * transition and ← with nothing further left goes to the leftmost. When
+     * the cursor was parked to the right of every transition — arming does
+     * not move it, so that is reachable in one step — the first → therefore
+     * snaps LEFT, onto the rightmost anchor. Every press after that is a
+     * no-op at the same cell. Pinned both ways in `test/editor-journey.test.js`.
+     *
+     * `selection` is collapsed onto the landing cell exactly as `moveCursor`'s
+     * own non-extend branch does it: `paintAtCursor` paints `selection`'s run
+     * whenever it belongs to the cursor's lane, so a jump that left a stale
+     * run standing would make the next brush key paint a stretch of cycles
+     * the cursor is no longer anywhere near. Alt+Shift+←/→ does NOT extend
+     * the selection — an edge endpoint is one cell, so a jump has no range to
+     * grow. Plain Shift+←/→ still extends, exactly as it always did; round 3
+     * gave that back by taking the jump off the unmodified arrows.
+     *
+     * Ends in the same three calls `moveCursor` does, for the same reason: no
+     * document content changed, so this is a repaint of the drawing and the
+     * rail, not a `render()` that would also rebuild the preview to paint the
+     * identical picture.
+     */
+    function jumpTransition(dir) {
+      const layout = geometry.layoutOf(store.doc, SIZES);
+      if (layout.lanes.length === 0 || layout.cycles === 0) return;
+      // Arriving is not choosing — the same rule `moveCursor` and
+      // `enterDrawing` already state. A first keystroke that both entered
+      // the drawing and jumped somewhere would never show the user which
+      // cell it started counting from.
+      if (cursor === null) { enterDrawing(); return; }
+      const lane = cursor.laneIndex;
+      const cells = geometry.transitionsOf(store.doc, lane);
+      // A lane with nothing to anchor to: WaveDrom's `{}` spacer is the
+      // fixture case, and a lane whose wave is all continuations is the
+      // other. Neither is an error, and neither may move the cursor to a
+      // cell this rule says it is not allowed to rest on.
+      if (cells.length === 0) {
+        panels.say('這條 lane 上沒有轉態點可以停，關聯線接不上去');
+        return;
       }
+      const now = cursor.cycle;
+      let next;
+      if (dir > 0) {
+        next = cells.find(function (c) { return c > now; });
+        if (next === undefined) next = cells[cells.length - 1];
+      } else {
+        const before = cells.filter(function (c) { return c < now; });
+        next = before.length === 0 ? cells[0] : before[before.length - 1];
+      }
+      cursor = { laneIndex: lane, cycle: next };
+      selection = { laneIndex: lane, laneTo: lane, from: next, to: next };
+      // `cell`, not `cycle`: `hoverBoundary` carries `geometry.boundaryAt`'s
+      // own field names all the way to `drawTransitions`, which compares
+      // `.cell` — the two spellings are deliberately different and a mix-up
+      // fails silently there, as that function's own comment says.
+      hoverBoundary = { laneIndex: lane, cell: next };
       repaintDrawing(layout);
       scrollCursorIntoView(layout);
       sayCursor(layout);
@@ -3340,7 +3127,7 @@
       const to = selection === null ? cursor.cycle : Math.max(selection.from, selection.to);
       const span = (selection !== null && selection.laneIndex === cursor.laneIndex && to > from)
         ? '，選了 cycle ' + (from + 1) + '–' + (to + 1) : '';
-      say('游標：' + name + ' cycle ' + (cursor.cycle + 1) + span);
+      panels.say('游標：' + name + ' cycle ' + (cursor.cycle + 1) + span);
     }
 
     /** The lane list and the drawing, repainted together and without touching
@@ -3351,8 +3138,29 @@
     function repaintDrawing(layout) {
       const l = layout === undefined || layout === null
         ? geometry.layoutOf(store.doc, SIZES) : layout;
-      renderLanes(store.doc, l);
-      renderCanvas(store.doc, l);
+      panels.renderLanes(store.doc, l, { selection: selection });
+      const wds = {
+        cursor: cursor,
+        selection: selection,
+        pendingFrom: pendingFrom,
+        endpointDrag: endpointDrag,
+        selectedEdge: selectedEdge,
+        overlay: overlay,
+        canvasWrap: canvasWrap,
+        dataEdit: dataEdit,
+        enterDrawing: enterDrawing,
+        onCanvasDown: onCanvasDown,
+        onCanvasHover: onCanvasHover,
+        edgeMode: edgeMode,
+        hoverBoundary: hoverBoundary,
+      };
+      canvas = drawer.renderCanvas(canvas, store.doc, l, wds);
+      cursor = wds.cursor;
+      selection = wds.selection;
+      // AFTER the drawer, which is what clamps `selection` into the document
+      // it just drew — reading it before would arm a button against a range
+      // the drawing has already refused.
+      paintSelectionState(store.doc, l);
     }
 
     /**
@@ -3461,7 +3269,7 @@
           // 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（起點跟終點在同一格），兩端的把手疊在同一個位置：' +
+            panels.say('這是一條 self-loop（起點跟終點在同一格），兩端的把手疊在同一個位置：' +
               '只有拖得到的這一端可以搬，另一端目前搬不到。');
           }
           endpointDrag = { index: handle.index, end: handle.end, at: null, cell: null };
@@ -3480,7 +3288,26 @@
           // again would be the same needless cost the existing
           // `hadSelectedEdge`-gated branch further down in this function
           // already avoids.
-          renderCanvas(store.doc, layout);
+          const wds = {
+            cursor: cursor,
+            selection: selection,
+            pendingFrom: pendingFrom,
+            endpointDrag: endpointDrag,
+            selectedEdge: selectedEdge,
+            overlay: overlay,
+            canvasWrap: canvasWrap,
+            dataEdit: dataEdit,
+            enterDrawing: enterDrawing,
+            onCanvasDown: onCanvasDown,
+            onCanvasHover: onCanvasHover,
+            edgeMode: edgeMode,
+            hoverBoundary: hoverBoundary,
+          };
+          canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+          cursor = wds.cursor;
+          selection = wds.selection;
+          // The toolbar reads `selection`; this repaint can change it (fix round 1).
+          paintSelectionState(store.doc, layout);
           d.addEventListener('mousemove', onCanvasMove, true);
           d.addEventListener('mouseup', onCanvasUp, true);
           return;   // 不塗、不選格
@@ -3557,7 +3384,7 @@
           // reasoning as the `'blocked'` branch just below it.
           if (busTarget === 'blocked') {
             ev.preventDefault();
-            say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
+            panels.say('這一格接在某個 bus 值後面，但看不出屬於哪一個，沒有欄位可以編輯。');
             return;
           }
           if (busTarget !== null) {
@@ -3565,10 +3392,34 @@
             const busHadSelectedEdge = selectedEdge !== null;
             selectedEdge = null;
             cursor = { laneIndex: busAt.laneIndex, cycle: busTarget.cycle };
-            selection = { laneIndex: busAt.laneIndex, from: busTarget.cycle, to: busTarget.cycle };
+            selection = {
+              laneIndex: busAt.laneIndex, laneTo: busAt.laneIndex,
+              from: busTarget.cycle, to: busTarget.cycle,
+            };
             canvas.focus();
             if (busHadSelectedEdge) render();
-            else renderCanvas(store.doc, layout);
+            else {
+              const wds = {
+                cursor: cursor,
+                selection: selection,
+                pendingFrom: pendingFrom,
+                endpointDrag: endpointDrag,
+                selectedEdge: selectedEdge,
+                overlay: overlay,
+                canvasWrap: canvasWrap,
+                dataEdit: dataEdit,
+                enterDrawing: enterDrawing,
+                onCanvasDown: onCanvasDown,
+                onCanvasHover: onCanvasHover,
+                edgeMode: edgeMode,
+                hoverBoundary: hoverBoundary,
+              };
+              canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+              cursor = wds.cursor;
+              selection = wds.selection;
+              // The toolbar reads `selection`; this repaint can change it (fix round 1).
+              paintSelectionState(store.doc, layout);
+            }
             openDataEdit(busAt.laneIndex, busTarget.cycle);
             return;
           }
@@ -3609,7 +3460,10 @@
       }
       ev.preventDefault();
       drag = { laneIndex: at.laneIndex, from: at.cycle, to: at.cycle };
-      selection = { laneIndex: at.laneIndex, from: at.cycle, to: at.cycle };
+      selection = {
+        laneIndex: at.laneIndex, laneTo: at.laneIndex,
+        from: at.cycle, to: at.cycle,
+      };
       // The keyboard follows the pointer, for two reasons that are really one:
       // the two cursors may not disagree about which cell is current, and
       // `preventDefault()` above suppresses the focus a press would otherwise
@@ -3623,7 +3477,28 @@
       // inspector row, which lives in the toolbar `renderCanvas` never
       // touches.
       if (hadSelectedEdge) render();
-      else renderCanvas(store.doc, layout);
+      else {
+        const wds = {
+          cursor: cursor,
+          selection: selection,
+          pendingFrom: pendingFrom,
+          endpointDrag: endpointDrag,
+          selectedEdge: selectedEdge,
+          overlay: overlay,
+          canvasWrap: canvasWrap,
+          dataEdit: dataEdit,
+          enterDrawing: enterDrawing,
+          onCanvasDown: onCanvasDown,
+          onCanvasHover: onCanvasHover,
+          edgeMode: edgeMode,
+          hoverBoundary: hoverBoundary,
+        };
+        canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+        cursor = wds.cursor;
+        selection = wds.selection;
+        // The toolbar reads `selection`; this repaint can change it (fix round 1).
+        paintSelectionState(store.doc, layout);
+      }
       d.addEventListener('mousemove', onCanvasMove, true);
       d.addEventListener('mouseup', onCanvasUp, true);
     }
@@ -3644,9 +3519,37 @@
           endpointDrag = { index: endpointDrag.index, end: endpointDrag.end,
             at: at.laneIndex, cell: at.cycle };
         }
+        // `hoverBoundary` is left alone here: `drawTransitions` only ever
+        // draws while `edgeMode !== 'idle'` (see its own guard, unchanged
+        // by this task), and an endpoint drag never moves `edgeMode` away
+        // from 'idle' (it is a wholly separate gesture from edge-creation —
+        // see `endpointDrag`'s own declaration comment), so there is no dot
+        // on screen for a hot mark to name here. `cellFromEvent` still
+        // snaps this drag's OWN drop target to the nearest anchor via
+        // `boundaryAt` — that part of Task 11 applies regardless — this is
+        // only about the separate hover-dot chrome.
         // The document is untouched during the drag (rule 3): this repaints
         // the preview only, never a `commit`.
-        renderCanvas(store.doc, layout);
+        const wds = {
+          cursor: cursor,
+          selection: selection,
+          pendingFrom: pendingFrom,
+          endpointDrag: endpointDrag,
+          selectedEdge: selectedEdge,
+          overlay: overlay,
+          canvasWrap: canvasWrap,
+          dataEdit: dataEdit,
+          enterDrawing: enterDrawing,
+          onCanvasDown: onCanvasDown,
+          onCanvasHover: onCanvasHover,
+          edgeMode: edgeMode,
+          hoverBoundary: hoverBoundary,
+        };
+        canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+        cursor = wds.cursor;
+        selection = wds.selection;
+        // The toolbar reads `selection`; this repaint can change it (fix round 1).
+        paintSelectionState(store.doc, layout);
         return;
       }
       if (edgeMode === 'dragging') {
@@ -3659,10 +3562,38 @@
         // 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 };
+        if (at !== null) {
+          cursor = { laneIndex: at.laneIndex, cycle: at.cycle };
+          // v3.6.0 Task 11: the hot dot keeps following the drag once it
+          // starts, rather than freezing at whatever it last showed during
+          // the pre-press hover (or never lighting up at all, if the drag
+          // started from a keyboard Enter with no hover first) — same
+          // `cycle`-to-`cell` conversion as `onCanvasHover`, at this same
+          // boundary.
+          hoverBoundary = { laneIndex: at.laneIndex, cell: at.cycle };
+        }
         // The document is untouched during the drag (rule 2): this repaints
         // the preview line only, never a `commit`.
-        renderCanvas(store.doc, layout);
+        const wds = {
+          cursor: cursor,
+          selection: selection,
+          pendingFrom: pendingFrom,
+          endpointDrag: endpointDrag,
+          selectedEdge: selectedEdge,
+          overlay: overlay,
+          canvasWrap: canvasWrap,
+          dataEdit: dataEdit,
+          enterDrawing: enterDrawing,
+          onCanvasDown: onCanvasDown,
+          onCanvasHover: onCanvasHover,
+          edgeMode: edgeMode,
+          hoverBoundary: hoverBoundary,
+        };
+        canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+        cursor = wds.cursor;
+        selection = wds.selection;
+        // The toolbar reads `selection`; this repaint can change it (fix round 1).
+        paintSelectionState(store.doc, layout);
         return;
       }
       if (drag === null) return;
@@ -3679,11 +3610,33 @@
       // The lane is fixed by the press: a drag that strays onto a neighbour is
       // still painting the lane it started on.
       drag.to = at.cycle;
-      selection = { laneIndex: drag.laneIndex, from: drag.from, to: drag.to };
+      selection = {
+        laneIndex: drag.laneIndex, laneTo: drag.laneIndex,
+        from: drag.from, to: drag.to,
+      };
       // The drag's live end is where the cursor is, so a paint continued with
       // Shift+←/→ after the button comes up carries on from the same cell.
       cursor = { laneIndex: drag.laneIndex, cycle: drag.to };
-      renderCanvas(store.doc, layout);
+      const wds = {
+        cursor: cursor,
+        selection: selection,
+        pendingFrom: pendingFrom,
+        endpointDrag: endpointDrag,
+        selectedEdge: selectedEdge,
+        overlay: overlay,
+        canvasWrap: canvasWrap,
+        dataEdit: dataEdit,
+        enterDrawing: enterDrawing,
+        onCanvasDown: onCanvasDown,
+        onCanvasHover: onCanvasHover,
+        edgeMode: edgeMode,
+        hoverBoundary: hoverBoundary,
+      };
+      canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+      cursor = wds.cursor;
+      selection = wds.selection;
+      // The toolbar reads `selection`; this repaint can change it (fix round 1).
+      paintSelectionState(store.doc, layout);
     }
 
     function onCanvasUp() {
@@ -3837,11 +3790,85 @@
       render();
     }
 
-    /** Pointer coordinates in the drawing's own space, then the codec's cell. */
+    /**
+     * Pointer coordinates in the drawing's own space, then the codec's cell.
+     *
+     * v3.6.0 Task 11: while an edge gesture is live — `edgeMode !== 'idle'`
+     * (armed, marking a start; or dragging, aiming the other end) or an
+     * `endpointDrag` is in flight — the target is the ANCHOR the engine
+     * actually draws the line to, not the cell under the pointer.
+     * `geometry.boundaryAt` rounds to the nearest one; `geometry.cellAt`
+     * floors to the cell the pointer is over. Painting still wants the
+     * floor: the brush's target is the cell you are over, and unifying the
+     * two here is exactly the regression this task exists to prevent (see
+     * `boundaryAt`'s own comment in `wave-geometry.js`).
+     *
+     * `boundaryAt` returns `{laneIndex, cell}`; every caller of this
+     * function already destructures `{laneIndex, cycle}` from `cellAt`'s
+     * shape, so the field is renamed HERE, at the one place the two
+     * definitions meet, rather than letting a `cell` leak into a `cycle`
+     * slot downstream.
+     */
     function cellFromEvent(ev, layout) {
       if (canvas === null) return null;
       const box = canvas.getBoundingClientRect();
-      return geometry.cellAt(layout, ev.clientX - box.left, ev.clientY - box.top);
+      const x = ev.clientX - box.left;
+      const y = ev.clientY - box.top;
+      if (edgeMode !== 'idle' || endpointDrag !== null) {
+        const b = geometry.boundaryAt(layout, x, y);
+        return b === null ? null : { laneIndex: b.laneIndex, cycle: b.cell };
+      }
+      return geometry.cellAt(layout, x, y);
+    }
+
+    /**
+     * Pure hover, no button down, nothing committed — which anchor the
+     * pointer is nearest while armed and not yet dragging, purely so
+     * `drawTransitions`'s hot dot can light up before the user presses.
+     *
+     * A canvas-own listener rather than the document-level
+     * `onCanvasMove`/`onCanvasUp` pair: those two are only added once a
+     * drag actually starts (`onCanvasDown`'s 'armed' and endpoint-drag
+     * branches), so a plain hover before the first press has nothing else
+     * watching it. Once a drag IS live, `onCanvasMove`'s own branches
+     * already repaint on every move and set `hoverBoundary` themselves
+     * (below), so this steps out of the way rather than doing the same
+     * work under a second name — the `edgeMode !== 'armed'` guard covers
+     * both: `edgeMode === 'dragging'` fails it directly, and an
+     * `endpointDrag` never moves `edgeMode` away from 'idle' in the first
+     * place (it is a wholly separate gesture from edge-creation), so it
+     * fails the same guard too.
+     */
+    function onCanvasHover(ev) {
+      if (edgeMode !== 'armed') return;
+      const layout = geometry.layoutOf(store.doc, SIZES);
+      const at = cellFromEvent(ev, layout);
+      const next = at === null ? null : { laneIndex: at.laneIndex, cell: at.cycle };
+      const same = (hoverBoundary === null && next === null) ||
+        (hoverBoundary !== null && next !== null &&
+          hoverBoundary.laneIndex === next.laneIndex && hoverBoundary.cell === next.cell);
+      if (same) return;
+      hoverBoundary = next;
+      const wds = {
+        cursor: cursor,
+        selection: selection,
+        pendingFrom: pendingFrom,
+        endpointDrag: endpointDrag,
+        selectedEdge: selectedEdge,
+        overlay: overlay,
+        canvasWrap: canvasWrap,
+        dataEdit: dataEdit,
+        enterDrawing: enterDrawing,
+        onCanvasDown: onCanvasDown,
+        onCanvasHover: onCanvasHover,
+        edgeMode: edgeMode,
+        hoverBoundary: hoverBoundary,
+      };
+      canvas = drawer.renderCanvas(canvas, store.doc, layout, wds);
+      cursor = wds.cursor;
+      selection = wds.selection;
+      // The toolbar reads `selection`; this repaint can change it (fix round 1).
+      paintSelectionState(store.doc, layout);
     }
 
     /**
@@ -3854,9 +3881,15 @@
      *
      *   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
+     *      uses (the canvas's own `getBoundingClientRect()`). v3.6.0 Task 6:
+     *      `SIZES.nameColWidth` is 120, not 0 — but `ev.clientX - box.left`
+     *      still needs nothing added or subtracted for it, because the name
+     *      column's width is already baked into every cell's own `originX`
+     *      (`wave-geometry.layoutOf`), the same layout-local coordinate
+     *      `geometry.edgeHandleAt`/`cellAt` read. One coordinate space, not
+     *      two reconciled by an offset — a nonzero name column moves where
+     *      cycle 0 STARTS in that space, it does not add a second term on
+     *      top of it. 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
@@ -3975,48 +4008,6 @@
       return isLabel(ev.target) ? ev.target : null;
     }
 
-    // ── the preview ───────────────────────────────────────────────────────
-    /**
-     * The engine's own rendering of the very same document.
-     *
-     * This is the check on the drawing, which is the only reason it is on
-     * screen. It is rendered from a plain copy because wavedrom writes into the
-     * source object it is handed and the store's documents are frozen.
-     */
-    function renderPreview(doc) {
-      const engine = opts.wavedrom;
-      if (engine === null || engine === undefined ||
-          typeof engine.RenderWaveForm !== 'function') {
-        previewHost.textContent = '（這一頁沒有載入 WaveDrom，預覽從缺）';
-        previewWrap.setAttribute('data-wave-preview', 'absent');
-        return;
-      }
-      try {
-        // `notFirstSignal` means "the skin is already on this page, do not
-        // emit it again". True whenever a WaveDrom render has already run here,
-        // which is always in the flow that reaches this editor — the entry
-        // affordance only appears over a RENDERED diagram. The fallback to
-        // `false` is for the page where it somehow has not: emitting the skin
-        // is only wasteful, while omitting one that is not there leaves every
-        // `<use>` unresolvable and the preview blank, which is the one state
-        // this panel may never be in.
-        // `socket` is a bare, global, un-namespaced id that the engine's own
-        // skin `<defs>` defines — so ask for it INSIDE a WaveDrom-rendered SVG's
-        // defs rather than anywhere on the page. A document carrying inline
-        // HTML with `id="socket"` would otherwise convince this that the skin is
-        // present on a page where no diagram had rendered, and the preview would
-        // come up blank: the one state this panel may never be in.
-        const skinOnPage = d.querySelector('svg.WaveDrom defs #socket') !== null;
-        engine.RenderWaveForm(PREVIEW_INDEX, plainCopy(doc, 0),
-          PREVIEW_ID_PREFIX, skinOnPage);
-        previewWrap.setAttribute('data-wave-preview', 'ok');
-        previewWrap.setAttribute('data-wave-preview-skin', skinOnPage ? 'shared' : 'own');
-      } catch (e) {
-        previewHost.textContent = 'WaveDrom 畫不出這份文件：' + String(e && e.message);
-        previewWrap.setAttribute('data-wave-preview', 'failed');
-      }
-    }
-
     // Mounted BEFORE the first paint, not after: the preview is rendered by the
     // engine's own `RenderWaveForm`, which resolves its target with
     // `getElementById` — an element that is not in the document yet is not
@@ -4029,8 +4020,24 @@
     render();
     // The opening line described a pointer and only a pointer, which is how a
     // surface ends up with no keyboard: the instructions never mentioned one.
-    say('選一個電位，然後在波形上按住拖過去；或直接按方向鍵進波形，' +
-      'Shift+左右鍵選一段，再按電位字元塗上去。');
+    //
+    // v3.6.0 Task 16 fix round 1 applies that same reasoning to this task's
+    // own gesture. Reordering a lane became keyboard-reachable here, and the
+    // only place that said so was a HOVER tooltip on the rail's drag handle
+    // — a `<span>` with deliberately no focus key, i.e. the one surface a
+    // keyboard user can never read. This is a one-shot line, not the
+    // per-move announcement `sayCursor` owns, so a hint belongs in it (see
+    // `sayCursor`'s own docstring for why the same hint may NOT go there).
+    //
+    // fix round 3 re-points the last clause. Round 1 wrote it as an EXCEPTION
+    // ("武裝關聯線之後，左右鍵改成在轉態點之間跳") because round 0's binding
+    // really did change what two keys this same sentence had just promised.
+    // Round 3 moved the jump to Alt+←/→, so the promise above holds in every
+    // state and the clause is now an extra key rather than a retraction.
+    panels.say('選一個電位，然後在波形上按住拖過去；或直接按方向鍵進波形，' +
+      'Shift+左右鍵選一段，再按電位字元塗上去。' +
+      'Alt+↑／Alt+↓ 把選取的 lane 往上下搬；' +
+      '武裝關聯線之後，Alt+左右鍵可以在轉態點之間跳。');
 
     return {
       el: overlay,
@@ -4043,8 +4050,6 @@
 
   return {
     createWaveEditor: createWaveEditor,
-    brickOf: brickOf,
-    groupSpansOf: groupSpansOf,
     mountedInsideContent: mountedInsideContent,
     BRUSHES: BRUSHES,
     isBrushKey: isBrushKey,