@helping-ai-workflow/md2doc 3.12.0 → 3.13.0

package/lib/editor/wave-panels.js

@@ -1,331 +1,811 @@
 'use strict';
 
 /**
- * wave-panels — the toolbar, the right-hand panels (meta fields, the edge
- * inspector) and the lane rail. Moved out of `wave-ui.js`, behaviour
- * unchanged line for line — this module is a pure move, not a rewrite.
+ * wave-panels — the pieces of the waveform editor's shell that are built from
+ * plain DOM: toolbar buttons, the small popovers the toolbar opens (menus and
+ * the grouped brush grid), and the notice card under the toolbar that says
+ * which parts of the document the editor cannot place.
  *
  * Plain CommonJS, like `wave-codec.js` / `wave-geometry.js` / `wave-store.js`
- * / `wave-draw.js` next to it, and for the identical reason `wave-draw.js`'s
- * own header already gives: `wave-ui.js` is injected into the edit page as a
- * bare `<script>` with no `require()` of its own, so a UMD header here would
- * be reaching for a `require` that is undefined in the browser. `wave-ui.js`
- * takes this module in as `opts.panels` (see `lib/editor/server.js`'s shim
- * and `lib/editor/client.js`'s `openWaveEditor`), the same way it already
- * takes `opts.draw`.
+ * / `wave-draw.js` next to it: `wave-ui.js` is injected into the edit page as
+ * a bare `<script>` with no `require()` of its own, so it takes this module in
+ * as `opts.panels` (see `lib/editor/server.js`'s shim and
+ * `lib/editor/client.js`'s `openWaveEditor`), the same way it takes
+ * `opts.draw`.
  *
- * This layer does not require `wave-draw.js` — the dependency direction
- * between the two extracted layers is one-way, and neither needs the other:
- * anything both would need travels through `wave-ui.js` or through
- * `wave-geometry.js`.
+ * Wave redesign Task 6b: the right-hand column (its five collapsible panels,
+ * the lane list beside the canvas and the preview) is gone. Spec section 4.9
+ * gives each of its parts a new home: a lane's period / phase and the group
+ * rename come back in Task 8's name column (`laneMenu`, `renameField`,
+ * `periodPhasePopover`), the edge inspector as the floating toolbar beside
+ * an edge's label in Task 9 (`edgeToolbar`, `noteToolbar`, `inlineInput`),
+ * and the settings fields as Task 10's ⚙ popover (`settingsPopover`).
+ * Task 11 adds the shortcut card (`shortcutCard`, spec section 4.8).
  *
- * `createPanels(deps)` is called from `wave-ui.js` right after `panel`
- * exists, which is BEFORE several of the DOM elements the returned paint
- * functions need (`metaBar`'s own input fields, the edge inspector's
- * `shapeSel`/`edgeLabelInput`, the lane rail's `laneCol`, the preview's
- * `previewHost`/`previewWrap`, the status line's `status`) exist. Rather
- * than reorder any of `wave-ui.js`'s original DOM-scaffolding statements to
- * satisfy this factory's own call site — the brief this module was built
- * from forbids reordering, and scaffolding order is what keeps the
- * toolbar's visual layout unchanged — `deps` is a single object
- * `wave-ui.js` keeps a reference to and PUBLISHES more fields onto as it
- * creates each element, in their original unchanged position. The functions
- * below that need one of those later fields read it off `deps` directly at
- * their own call time (`deps.laneCol`, `deps.edgeBar`, …) rather than
- * caching it into a local at the top of this factory — by the time any of
- * them actually runs (the first `render()`, or a click on an
- * already-mounted control), every field they read has long since been
- * published. Only what is genuinely ready the moment `createPanels()` runs
- * (`d`, `geometry`, `codec`, `SIZES`, `actions`, `overlay`, `panel`, the
- * preview's id constants, the wavedrom engine reference) is cached into a
- * local up front.
- *
- * v3.6.0 Task 12: `toolButton()` used to always append into a single
- * `cycleBar` div cached from `deps.cycleBar` — the toolbar's only button
- * row at the time. Now that the toolbar is eight captioned
- * `.ed-wave-tool-group` sections (`toolGroup()`, below), `toolButton()`
- * takes the target group as its last argument instead, and `deps` no
- * longer carries `cycleBar` at all — nothing in this file needs a single
- * shared bar to exist before `createPanels()` runs anymore.
- *
- * `actions` is the callback bag for the handful of `wave-ui.js`-owned pieces
- * of state a moved function still has to read or write, now that it is no
- * longer a closure over `wave-ui.js`'s own variables:
- *
- *   commit(name, fn)            run one gesture (constraint 5 in wave-ui.js's
- *                                own header)
- *   render()                    repaint the whole dialog
- *   selectionSet(v)             write-only: `laneRow`'s own click handler
- *                                writes the one selection this dialog has —
- *                                `{laneIndex, laneTo, from, to}`, a lane
- *                                range plus the cycle range on its first
- *                                lane. Reads go through `state.selection`
- *                                instead, since every one of them happens
- *                                synchronously inside a `renderLanes` call
- *                                and a getter would be one more indirection
- *                                over the value `state` already carries
- *   focusOverrideGet()/Set(key) the one-shot "where should the keyboard land
- *                                after this repaint" override — read AND
- *                                written from inside `renameGroup`'s deferred
- *                                `finish`/`retire`/`cancel` closures, so both
- *                                halves are needed, not only the setter a
- *                                write-only caller like `laneRow`'s drop
- *                                handler uses
- *   groupRenameGet()/Set(v)     the rail's one open rename session — a mutex
- *                                `renameGroup`'s own deferred closures test
- *                                and clear over time, and `wave-ui.js`'s
- *                                `render()` also reads directly (unchanged,
- *                                since `render()` itself did not move) to
- *                                decide whether to retire it before a repaint
- *
- * `close` is not in `actions`: no function that moved here calls it (checked
- * against every line in this file, not assumed).
- *
- * `commitBanner` is exported despite being internal to the eight meta-field
- * change listeners that are its only callers — a deviation from this task's
- * own brief, which called it an internal helper. Those eight listeners stay
- * in `wave-ui.js`, at their original position, because the input elements
- * they close over (`headInput`, `footInput`, …) are `wave-ui.js` locals a
- * caller needs to go on holding for `deps.headInput` etc. below to work; the
- * alternative — building those eight fields and their listeners inside this
- * factory instead, so `commitBanner` could stay private — would mean
- * reconstructing `wave-ui.js`'s own scaffolding order inside this file,
- * which is the reordering this whole factory is built to avoid. Exporting
- * one more trivial function was the smaller change.
+ * `deps`:
+ *   d, geometry, codec   the document and the two modules, handed in
+ *   overlay              the dialog root (the notice publishes its counts there)
+ *   actions.commit(name, fn)   run one gesture (constraint 5 in wave-ui.js)
  */
 
+/**
+ * The edge toolbar's two button groups (spec section 4.5): 線型 straight /
+ * curve / elbow by 箭頭 none / end / both, nine shapes. `SHAPE_ROWS` also
+ * carries the half-curve and elbow variants 更多 offers, each with the
+ * variant it becomes under each head (null: the variant has no such form),
+ * so changing the head of `-|-` gives `-|->`, not `-|>`.
+ */
+const NINE = {
+  straight: { none: '-', end: '->', both: '<->' },
+  curve: { none: '~', end: '~>', both: '<~>' },
+  elbow: { none: '-|', end: '-|>', both: '<-|>' },
+};
+const SHAPE_ROWS = [
+  ['straight', ['-', '->', '<->']],
+  ['curve', ['~', '~>', '<~>']],
+  ['elbow', ['-|', '-|>', '<-|>']],
+  ['curve', ['-~', '-~>', '<-~>']],
+  ['curve', ['~-', '~->', null]],
+  ['elbow', ['-|-', '-|->', '<-|->']],
+  ['elbow', ['|-', '|->', null]],
+];
+const HEADS = ['none', 'end', 'both'];
+
+/** `shape` -> `{line, head}`; both null for `+` (a tee at each end, no line
+ *  family and no arrow) and for anything unknown. */
+function shapeParts(shape) {
+  for (const row of SHAPE_ROWS) {
+    const at = row[1].indexOf(shape);
+    if (at !== -1) return { line: row[0], head: HEADS[at] };
+  }
+  return { line: null, head: null };
+}
+/** The shape `shape` becomes when one of its parts changes: `{line}` picks
+ *  from the nine and keeps the head; `{head}` keeps a 更多 variant when it
+ *  has that head, else falls back to the nine. A part that `shape` does not
+ *  have (`+`) reads as straight, no arrow. */
+function shapeWith(shape, change) {
+  const parts = shapeParts(shape);
+  const line = parts.line === null ? 'straight' : parts.line;
+  const head = parts.head === null ? 'none' : parts.head;
+  if (change.line !== undefined) return NINE[change.line][head];
+  for (const row of SHAPE_ROWS) {
+    if (row[1].indexOf(shape) === -1) continue;
+    const v = row[1][HEADS.indexOf(change.head)];
+    if (v !== null && v !== undefined) return v;
+  }
+  return NINE[line][change.head];
+}
+const NINE_SHAPES = [].concat.apply([], Object.keys(NINE).map(function (k) {
+  return HEADS.map(function (h) { return NINE[k][h]; });
+}));
+
 function createPanels(deps) {
   const d = deps.d;
   const geometry = deps.geometry;
   const codec = deps.codec;
-  const SIZES = deps.SIZES;
   const actions = deps.actions;
   const overlay = deps.overlay;
-  const panel = deps.panel;
-  const PREVIEW_INDEX = deps.PREVIEW_INDEX;
-  const PREVIEW_ID_PREFIX = deps.PREVIEW_ID_PREFIX;
-  const wavedrom = deps.wavedrom;
+  /** 更多's list: every shape the engine draws that is not one of the nine. */
+  const MORE_SHAPES = codec.EDGE_SHAPES.filter(function (s) { return NINE_SHAPES.indexOf(s) === -1; });
+
+  /** One toolbar button. `parent` (last arg, required) is where it goes. */
+  function toolButton(cls, label, hint, fn, parent) {
+    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);
+    parent.appendChild(b);
+    return b;
+  }
+
+  /**
+   * A small popover a toolbar button opens: `div.ed-wave-pop` plus the given
+   * class. `wave-ui.js` places it under its button and owns opening and
+   * closing (only one is open at a time).
+   */
+  function popover(cls) {
+    const el = d.createElement('div');
+    el.className = 'ed-wave-pop ' + cls;
+    return el;
+  }
 
   /**
-   * A plain, unfrozen copy of a document.
+   * A menu popover. `items` are `{ key, label, title, run, shortcut?, danger? }`;
+   * `key` becomes both the item's class and its `data-focus-key`, like
+   * `toolButton`. `shortcut` is the key the same action has elsewhere, shown
+   * on the item's right; `danger` marks an item that removes something (red).
+   */
+  function menu(cls, items) {
+    const el = popover('ed-wave-menu ' + cls);
+    el.setAttribute('role', 'menu');
+    for (const item of items) {
+      const b = d.createElement('button');
+      b.type = 'button';
+      b.className = 'ed-wave-menu-item ' + item.key + (item.danger ? ' is-danger' : '');
+      b.setAttribute('data-focus-key', item.key);
+      b.setAttribute('role', 'menuitem');
+      const label = d.createElement('span');
+      label.className = 'ed-wave-menu-label';
+      label.textContent = item.label;
+      b.appendChild(label);
+      if (item.shortcut) {
+        const k = d.createElement('span');
+        k.className = 'ed-wave-menu-key';
+        k.textContent = item.shortcut;
+        b.appendChild(k);
+      }
+      if (item.title) b.title = item.title;
+      b.addEventListener('click', item.run);
+      el.appendChild(b);
+    }
+    return el;
+  }
+
+  /**
+   * The ⠿ menu of one row in the name column (spec section 4.4). A signal's
+   * row: 改名 F2, 建立副本 Ctrl+D, 在下方新增訊號, 在下方新增空白列,
+   * 上移 Alt+↑, 下移 Alt+↓, 和下一條組成群組, 週期與相位…, 刪除 Del (red).
+   * A group's row (`isGroup`): 改名, 解散群組, 上移, 下移.
    *
-   * 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.
+   * `actions` holds what each item does, keyed by the item's suffix
+   * (`rename`, `copy`, `addBelow`, `blankBelow`, `up`, `down`, `group`,
+   * `period`, `remove`; for a group `rename`, `ungroup`, `up`, `down`). An
+   * action that is missing leaves its item out: a blank row (`{}`) has no
+   * name, so wave-ui hands it no `rename`. `anchor` is the grip that opens
+   * the menu; wave-ui places the menu under it, as it does every toolbar
+   * popover.
    */
-  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;
+  function laneMenu(anchor, opts) {
+    const a = opts.actions;
+    const spec = opts.isGroup ? [
+      ['rename', 'ed-wave-lane-rename', '改名', '', '改這個群組的名稱'],
+      ['ungroup', 'ed-wave-lane-ungroup', '解散群組', '', '拿掉這個群組，裡面的訊號留在原位'],
+      ['up', 'ed-wave-lane-up', '上移', '', '整個群組往上搬一格'],
+      ['down', 'ed-wave-lane-down', '下移', '', '整個群組往下搬一格'],
+    ] : [
+      ['rename', 'ed-wave-lane-rename', '改名', 'F2', '在名稱上直接改名'],
+      ['copy', 'ed-wave-lane-copy', '建立副本', 'Ctrl+D', '在下面放一條一樣的訊號'],
+      ['addBelow', 'ed-wave-lane-add-below', '在下方新增訊號', '', '在這一條下面加一條新訊號'],
+      ['blankBelow', 'ed-wave-lane-blank-below', '在下方新增空白列', '', '在這一條下面插入一個空白列（WaveJSON 的 {}）'],
+      ['up', 'ed-wave-lane-up', '上移', 'Alt+↑', '往上搬一格'],
+      ['down', 'ed-wave-lane-down', '下移', 'Alt+↓', '往下搬一格'],
+      ['group', 'ed-wave-lane-group', '和下一條組成群組', '', '把這一條和下一條包成一個群組，接著替它取名'],
+      ['period', 'ed-wave-lane-period', '週期與相位…', '', '這一條的 period（每個字元佔幾拍）與 phase（往左移幾拍）'],
+      ['remove', 'ed-wave-lane-delete', '刪除', 'Del', '刪掉這一條（Ctrl+Z 可以拿回來）'],
+    ];
+    const items = [];
+    for (const s of spec) {
+      if (typeof a[s[0]] !== 'function') continue;
+      items.push({ key: s[1], label: s[2], shortcut: s[3], title: s[4], run: a[s[0]], danger: s[0] === 'remove' });
     }
-    const out = {};
-    for (const key of Object.keys(value)) out[key] = plainCopy(value[key], depth + 1);
-    return out;
+    const el = menu('ed-wave-lane-menu', items);
+    if (anchor && typeof anchor.getAttribute === 'function') {
+      el.setAttribute('data-for', anchor.getAttribute('data-focus-key') || '');
+    }
+    return el;
   }
 
   /**
-   * v3.6.0 Task 12: one captioned toolbar section — a `.ed-wave-tool-group`
-   * with a `.ed-wave-tool-caption` at the front.
+   * The in-place name field (spec section 4.4): a signal's name or a group's
+   * title, typed where it is drawn. wave-ui places it and decides what a
+   * commit writes; this owns the keys.
    *
-   * The caption sits to the LEFT of the section's buttons, not above them:
-   * the toolbar is a horizontal bar, and a caption row above each group
-   * would make it two lines tall on top of a row that already wraps — the
-   * 電位 group's 22 brushes alone wrap to two rows at this dialog's fixed
-   * viewport (MEASURED, Task 10: 22 × 38px against a 728px container).
-   * Vertical space is what a tall diagram (60+ cycles) is already short of,
-   * so this reorganisation may not spend more of it.
+   * `opts`: `value`, `focusKey`, `onCommit(value)`, `onCancel()`.
+   * Enter commits and Esc cancels; `change` and `blur` commit too — but
+   * never while an input method is composing (spec section 7.2): the Enter
+   * that picks a candidate, the Esc that drops a composition and the Tab
+   * some IMEs page with belong to the IME. wave-ui's dialog-level key
+   * handler already stands aside for those keys; the field's own handlers
+   * have to as well, and a `change` fired as a composition is committed is
+   * not a commit either.
    */
-  function toolGroup(caption) {
-    const g = d.createElement('div');
-    g.className = 'ed-wave-tool-group';
-    const cap = d.createElement('span');
-    cap.className = 'ed-wave-tool-caption';
-    cap.textContent = caption;
-    g.appendChild(cap);
-    return g;
+  function renameField(opts) {
+    const input = d.createElement('input');
+    input.type = 'text';
+    input.className = 'ed-wave-rename';
+    input.setAttribute('data-focus-key', opts.focusKey);
+    input.setAttribute('aria-label', '名稱');
+    input.value = opts.value;
+    let composing = false;
+    input.addEventListener('compositionstart', function () { composing = true; });
+    input.addEventListener('compositionend', function () { composing = false; });
+    input.addEventListener('keydown', function (ev) {
+      if (composing || ev.isComposing === true || ev.keyCode === 229) return;
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        opts.onCommit(input.value);
+      } else if (ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        opts.onCancel();
+      }
+    });
+    input.addEventListener('change', function () { if (!composing) opts.onCommit(input.value); });
+    input.addEventListener('blur', function () { opts.onCommit(input.value); });
+    return input;
   }
 
-  // `group` (last arg, required) is the `.ed-wave-tool-group` this button
-  // belongs to — see `toolGroup()` above and this module's own header for
-  // why there is no longer a single shared bar this could default to.
-  function toolButton(cls, label, hint, fn, group) {
-    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);
-    group.appendChild(b);
-    return b;
+  /**
+   * 週期與相位… (spec section 4.4): one lane's `period` and `phase`, the two
+   * fields the side rail's Lane section used to hold. Each is written when
+   * it is committed (Enter, or leaving it) through `commitLaneField`, so a
+   * numeral goes in as a number and a blank field removes the key; the
+   * panel stays open for the other field. Composition is respected the same
+   * way as in the name field.
+   *
+   * `el.flush()` writes every field whose text is not written yet — wave-ui
+   * calls it when Esc or a press outside closes the panel (Ruling R22, which
+   * the final review extended from ⚙ to every popover with text fields). A
+   * focused field taken out of the page fires `change` in Chromium and not
+   * in WebKit, so without it the typed text survived the close in one engine
+   * only. A field mid-composition is skipped, exactly as its Enter is.
+   *
+   * `lane` is the lane object (read for the current values), `at` its
+   * display position.
+   */
+  function periodPhasePopover(lane, at) {
+    const el = popover('ed-wave-period-pop');
+    el.setAttribute('role', 'group');
+    el.setAttribute('aria-label', '週期與相位');
+    const laneObj = lane !== null && typeof lane === 'object' ? lane : {};
+    const commits = [];
+    for (const key of ['period', 'phase']) {
+      const row = d.createElement('label');
+      row.className = 'ed-wave-period-row';
+      const cap = d.createElement('span');
+      cap.className = 'ed-wave-period-cap';
+      cap.textContent = key === 'period' ? '週期 period' : '相位 phase';
+      row.appendChild(cap);
+      const input = d.createElement('input');
+      input.type = 'text';
+      input.className = 'ed-wave-period-input';
+      input.setAttribute('data-focus-key', 'ed-wave-lane-' + key + '-input');
+      input.setAttribute('inputmode', 'decimal');
+      const now = laneObj[key];
+      input.value = now === undefined || now === null ? '' : String(now);
+      input.title = key === 'period'
+        ? '每個波形字元佔幾拍（空白＝1）' : '整條往左移幾拍，可以是小數（空白＝0）';
+      let composing = false;
+      let written = input.value;
+      const commitNow = function () {
+        if (composing || input.value === written) return;
+        written = input.value;
+        commitLaneField(at, key, input.value);
+      };
+      input.addEventListener('compositionstart', function () { composing = true; });
+      input.addEventListener('compositionend', function () { composing = false; });
+      input.addEventListener('keydown', function (ev) {
+        if (composing || ev.isComposing === true || ev.keyCode === 229) return;
+        if (ev.key !== 'Enter') return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        commitNow();
+      });
+      input.addEventListener('change', commitNow);
+      commits.push(commitNow);
+      row.appendChild(input);
+      el.appendChild(row);
+    }
+    el.flush = function () { for (const c of commits) c(); };
+    return el;
   }
 
   /**
-   * v3.6.0 Task 13: one collapsible right-hand panel — a `.ed-wave-section`
-   * with its own `.ed-wave-section-title` header button and a
-   * `.ed-wave-section-body` the header toggles.
+   * ⚙ 整張圖 (spec section 4.6): the document-wide settings the side rail's
+   * 文件 section used to hold. Top level: 標題 (`head.text`, a multi-line
+   * box), 每拍寬度 (`config.hscale` as 1× 2× 3× 4× — the engine rounds it to
+   * an integer, so only integers are offered), and, when a data label is
+   * wider than its segment, a card saying how many with 「改成每拍 K×」. Under
+   * 進階 (folded when the popover opens): `head.tick` / `tock` / `every`,
+   * `foot.text`, `foot.tick` / `tock` / `every`.
+   *
+   * `opts`:
+   *   doc        the document now (read for the current values)
+   *   overflow   `[{needScale}, ...]` — the labels wider than their segment
+   *   scale      the smallest scale that fits them all (K), when there are any
+   *   actions    `setHeadText(text)`, `setScale(k, fromCard)`, `setBanner(which, key, value)`
    *
-   * `open` seeds `data-open` — the section's expanded state — but that state
-   * lives ONLY on the attribute for the life of this one editor session; it
-   * is never read back out of, or written into, the document. A session that
-   * opens with 關聯線/文件/Lane expanded and 預覽/原始碼 collapsed always
-   * starts that way again next time, by design: the three that default open
-   * are the ones a gesture on the canvas immediately needs (an edge just
-   * got selected, a lane just got selected, the ruler fields), and the two
-   * that default closed are read-only references a user opens on demand
-   * rather than panels they edit through.
+   * A text field is written when it is committed: Enter (Shift+Enter is a new
+   * line in 標題), leaving it, or `flush()` — which wave-ui calls when the
+   * popover closes, because a field taken out of the page never fires
+   * `change` and 「改了立即生效」 must not lose what was typed. A field whose
+   * text has not changed since it was last written writes nothing. While an
+   * input method is composing, Enter belongs to it (spec section 7.2).
    *
-   * Returns `{el, body}` — the section element to place in the DOM, and the
-   * body div a caller fills in. Kept separate rather than handing back only
-   * `el` and making every caller `querySelector('.ed-wave-section-body')`
-   * back out of it: every call site already knows which body it wants the
-   * instant it asks for the section.
+   * Clearing a field writes `''`, which `codec.setBannerField` turns into a
+   * DELETED key. A numeral in tick / tock / every is written as a number:
+   * the pinned engine adds the hbounds offset to them with `+`
+   * (parse-config.js `source.head.tick + lane.xmin_cfg/2`), so a STRING
+   * `"5"` becomes `"50"` and the ruler starts at 50.
+   *
+   * Returns the popover element. `el.refresh({doc, overflow, scale})`
+   * brings it in line with a repaint in place — a field holding unwritten
+   * text keeps it — and `el.flush()` writes every field with unwritten text.
    */
-  function section(key, title, open) {
-    const s = d.createElement('section');
-    s.className = 'ed-wave-section';
-    s.setAttribute('data-section', key);
-    if (open) s.setAttribute('data-open', '');
-    const h = d.createElement('button');
-    h.type = 'button';
-    h.className = 'ed-wave-section-title';
-    h.setAttribute('data-focus-key', 'section-' + key);
-    h.textContent = title;
-    h.addEventListener('click', function () {
-      // v3.6.0 Task 13: under the <1100px collapse (md2doc.js's own media
-      // query), the rail's section titles are the only thing still
-      // visible/clickable — without this, a narrow-viewport user could
-      // toggle `data-open` all day and never see a body, because
-      // `.ed-wave-side:not([data-expanded]) .ed-wave-section-body` stays
-      // `display:none` regardless. Harmless at a wide viewport: nothing
-      // there matches `[data-expanded]` outside that media query, so this
-      // is a no-op attribute there.
-      //
-      // The FIRST click while still collapsed only reveals the rail and
-      // does not also toggle the section it landed on: 關聯線/文件/Lane
-      // all default `data-open`, so a plain toggle here would make that
-      // very first click look like "the user just closed the panel they
-      // pressed" the instant the rail became wide enough to show it.
-      const wasExpanded = side.hasAttribute('data-expanded');
-      side.setAttribute('data-expanded', '');
-      if (!wasExpanded) return;
-      if (s.hasAttribute('data-open')) s.removeAttribute('data-open');
-      else s.setAttribute('data-open', '');
-    });
-    s.appendChild(h);
-    const body = d.createElement('div');
-    body.className = 'ed-wave-section-body';
-    s.appendChild(body);
-    return { el: s, body: body };
+  function settingsPopover(anchor, opts) {
+    const actions = opts.actions;
+    const el = popover('ed-wave-settings-pop');
+    el.setAttribute('role', 'group');
+    el.setAttribute('aria-label', '整張圖');
+    if (anchor && typeof anchor.getAttribute === 'function') {
+      el.setAttribute('data-for', anchor.getAttribute('data-focus-key') || '');
+    }
+    const fields = [];
+
+    function caption(parent, text) {
+      const c = d.createElement('div');
+      c.className = 'ed-wave-set-cap';
+      c.textContent = text;
+      parent.appendChild(c);
+      return c;
+    }
+    /** One text field bound to `read(doc)` and written by `write(text)`. */
+    function textField(parent, key, label, read, write, multi, spoken) {
+      const row = d.createElement('label');
+      row.className = 'ed-wave-set-row';
+      const cap = d.createElement('span');
+      cap.className = 'ed-wave-set-label';
+      cap.textContent = label;
+      row.appendChild(cap);
+      const input = d.createElement(multi ? 'textarea' : 'input');
+      if (multi) input.rows = 2;
+      else input.type = 'text';
+      input.className = 'ed-wave-set-input';
+      input.setAttribute('data-focus-key', key);
+      input.setAttribute('aria-label', spoken || label);
+      row.appendChild(input);
+      parent.appendChild(row);
+      const f = { input: input, read: read, written: '' };
+      f.commit = function () {
+        if (input.value === f.written) return;
+        f.written = input.value;
+        write(input.value);
+      };
+      let composing = false;
+      input.addEventListener('compositionstart', function () { composing = true; });
+      input.addEventListener('compositionend', function () { composing = false; });
+      input.addEventListener('keydown', function (ev) {
+        if (composing || ev.isComposing === true || ev.keyCode === 229) return;
+        if (ev.key !== 'Enter' || ev.shiftKey) return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        f.commit();
+      });
+      input.addEventListener('change', function () { if (!composing) f.commit(); });
+      fields.push(f);
+      return f;
+    }
+    function bannerValue(key, text) {
+      return key !== 'text' && /^-?\d+(\.\d+)?$/.test(text.trim()) ? Number(text) : text;
+    }
+    function bannerField(parent, which, key, label) {
+      // Spoken with its band: two fields on screen are both captioned 標題,
+      // and three pairs tick / tock / every.
+      const spoken = (which === 'head' ? '上方' : '下方') + (key === 'text' ? '標題' : '刻度 ' + key);
+      textField(parent, 'ed-wave-set-' + which + '-' + key, label,
+        function (doc) {
+          const b = doc[which];
+          return b !== null && typeof b === 'object' ? tickTockText(b[key]) : '';
+        },
+        function (text) { actions.setBanner(which, key, bannerValue(key, text)); }, false, spoken);
+    }
+
+    textField(el, 'ed-wave-set-head', '標題',
+      function (doc) { return doc.head && typeof doc.head === 'object' ? tickTockText(doc.head.text) : ''; },
+      function (text) { actions.setHeadText(text); }, true);
+
+    caption(el, '每拍寬度');
+    const scales = d.createElement('div');
+    scales.className = 'ed-wave-set-scales';
+    scales.setAttribute('role', 'group');
+    scales.setAttribute('aria-label', '每拍寬度');
+    const scaleBtns = [];
+    for (let k = 1; k <= 4; k++) {
+      const b = toolButton('ed-wave-set-scale', k + '×', '每拍寬度 ' + k + ' 倍（config.hscale）', function () {
+        actions.setScale(k);
+      }, scales);
+      b.setAttribute('data-focus-key', 'ed-wave-set-scale-' + k);
+      b.setAttribute('aria-pressed', 'false');
+      scaleBtns.push(b);
+    }
+    el.appendChild(scales);
+
+    // The overflow card (spec section 4.6, and section 6 for K > 4).
+    const card = d.createElement('div');
+    card.className = 'ed-wave-set-overflow';
+    card.hidden = true;
+    const cardText = d.createElement('span');
+    cardText.className = 'ed-wave-set-overflow-text';
+    card.appendChild(cardText);
+    const fix = toolButton('ed-wave-set-fix', '', '', function () {
+      const k = Number(fix.getAttribute('data-scale'));
+      // `true`: from the card, whose button goes away with what it fixes.
+      if (k > 0) actions.setScale(k, true);
+    }, card);
+    el.appendChild(card);
+
+    const advBtn = toolButton('ed-wave-set-advanced', '進階', '上方刻度、下方標題與下方刻度', function () {
+      const open = advBtn.getAttribute('aria-expanded') !== 'true';
+      advBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
+      adv.hidden = !open;
+    }, el);
+    advBtn.setAttribute('aria-expanded', 'false');
+    const adv = d.createElement('div');
+    adv.className = 'ed-wave-set-adv';
+    adv.hidden = true;
+    caption(adv, '上方刻度');
+    bannerField(adv, 'head', 'tick', 'tick');
+    bannerField(adv, 'head', 'tock', 'tock');
+    bannerField(adv, 'head', 'every', 'every');
+    caption(adv, '下方');
+    bannerField(adv, 'foot', 'text', '標題');
+    bannerField(adv, 'foot', 'tick', 'tick');
+    bannerField(adv, 'foot', 'tock', 'tock');
+    bannerField(adv, 'foot', 'every', 'every');
+    el.appendChild(adv);
+
+    function refresh(state) {
+      const doc = state.doc;
+      for (const f of fields) {
+        const now = f.read(doc);
+        // Text typed and not yet written stays; everything else follows the
+        // document (an undo, the other fields' writes).
+        if (f.input.value !== f.written) { f.written = now; continue; }
+        f.written = now;
+        if (f.input.value !== now) f.input.value = now;
+      }
+      const cfg = doc.config !== null && typeof doc.config === 'object' ? doc.config : {};
+      const hscale = typeof cfg.hscale === 'number' ? cfg.hscale : (cfg.hscale === undefined ? 1 : null);
+      scaleBtns.forEach(function (b, i) { b.setAttribute('aria-pressed', hscale === i + 1 ? 'true' : 'false'); });
+      const list = state.overflow || [];
+      const k = state.scale;
+      card.hidden = list.length === 0;
+      if (list.length === 0) {
+        fix.removeAttribute('data-scale');
+        return;
+      }
+      cardText.textContent = list.length + ' 個資料標籤比它那一段寬' +
+        (k > 4 ? '；需要每拍 ' + k + '×，圖會比內文寬並被縮小' : '');
+      fix.textContent = '改成每拍 ' + k + '×';
+      fix.title = '把每拍寬度改成 ' + k + ' 倍，讓每個標籤都放得下';
+      fix.setAttribute('data-scale', String(k));
+    }
+    for (const f of fields) {
+      f.written = f.read(opts.doc);
+      f.input.value = f.written;
+    }
+    refresh({ doc: opts.doc, overflow: opts.overflow, scale: opts.scale });
+    el.refresh = refresh;
+    el.flush = function () { for (const f of fields) f.commit(); };
+    return el;
   }
 
-  // v3.6.0 Task 13: the whole right-hand column, built eagerly here rather
-  // than incrementally published onto `deps` the way `metaBar`/`edgeBar`/
-  // `laneCol`/`previewWrap`/`status` are (see this module's own header for
-  // why THOSE are lazy): every section body a caller could want already
-  // exists the instant `createPanels()` returns, because `section()` above
-  // needs nothing but `d`. `wave-ui.js` appends `panels.side` into `.ed-wave-
-  // body` once, in the position the old `.ed-wave-preview` column used to
-  // occupy, and targets `panels.sections.<key>` for everything that used to
-  // go into `metaBar`/`edgeBar`/`previewWrap` directly.
-  //
-  // Order is the fixed, tested order: edge, document, lane, preview, source.
-  // Open by default: edge/document/lane (a gesture on the canvas — selecting
-  // an edge, selecting a lane, typing a ruler field — has to see its own
-  // panel without an extra click). Closed by default: preview/source (the
-  // engine's own picture and the exact bytes a save would write are both
-  // references a user consults on demand, not panels edited through).
-  const side = d.createElement('div');
-  side.className = 'ed-wave-side';
+  /**
+   * 匯出 ⌄ (spec section 4.6): 複製為圖片, 下載 PNG, 下載 SVG, 複製 WaveJSON,
+   * and the line that says every export is light on white. `acts` holds
+   * what each does (`copyImage`, `downloadPng`, `downloadSvg`, `copyJson`);
+   * wave-ui closes the menu and runs it in the same click, which 複製為圖片
+   * needs (the clipboard item has to be made inside the press).
+   */
+  function exportMenu(anchor, acts) {
+    const el = menu('ed-wave-export-pop', [
+      { key: 'ed-wave-export-copyimg', label: '複製為圖片', title: '把這張波形的 PNG（2 倍大小）放進剪貼簿', run: acts.copyImage },
+      { key: 'ed-wave-export-png', label: '下載 PNG', title: '存成 PNG 檔（白底，2 倍大小）', run: acts.downloadPng },
+      { key: 'ed-wave-export-svg', label: '下載 SVG', title: '存成 SVG 檔（自帶 WaveDrom 的 skin，離開這一頁也畫得出來）', run: acts.downloadSvg },
+      { key: 'ed-wave-export-json', label: '複製 WaveJSON', title: '把這張波形的 WaveJSON 複製到剪貼簿', run: acts.copyJson },
+    ]);
+    const note = d.createElement('div');
+    note.className = 'ed-wave-export-note';
+    note.textContent = '匯出一律是淺色、白底';
+    el.appendChild(note);
+    if (anchor && typeof anchor.getAttribute === 'function') {
+      el.setAttribute('data-for', anchor.getAttribute('data-focus-key') || '');
+    }
+    return el;
+  }
 
-  // v3.6.0 Task 13 fix round 1: a way back. Expanding the rail (a click on
-  // any section title, below) used to be a one-way door under the <1100px
-  // collapse — nothing ever removed `data-expanded` again, so the first
-  // click at a narrow viewport permanently forfeited canvas space for the
-  // rest of the session, which works directly against this whole version's
-  // own goal. `display: none` outside `[data-expanded]` (md2doc.js's CSS)
-  // keeps this invisible and out of the tab order everywhere else — it only
-  // ever matters in the one state it exists for.
-  const collapseBtn = d.createElement('button');
-  collapseBtn.type = 'button';
-  collapseBtn.className = 'ed-wave-side-collapse';
-  collapseBtn.setAttribute('data-focus-key', 'side-collapse');
-  collapseBtn.title = '收合右欄';
-  collapseBtn.textContent = '»  收合';
-  collapseBtn.addEventListener('click', function () {
-    side.removeAttribute('data-expanded');
-  });
-  side.appendChild(collapseBtn);
+  /**
+   * The grid 更多 opens (spec section 4.2): one titled row per group.
+   * `groups` is `[[title, [ch, ...]], ...]`; `makeBrush(ch)` builds the same
+   * button the toolbar's resident brushes use, so a brush looks and acts the
+   * same wherever it is picked from.
+   */
+  function brushGrid(groups, makeBrush) {
+    const el = popover('ed-wave-brush-grid');
+    for (const g of groups) {
+      const row = d.createElement('div');
+      row.className = 'ed-wave-brush-group';
+      const title = d.createElement('span');
+      title.className = 'ed-wave-brush-group-title';
+      title.textContent = g[0];
+      row.appendChild(title);
+      const list = d.createElement('div');
+      list.className = 'ed-wave-brushes';
+      for (const ch of g[1]) list.appendChild(makeBrush(ch));
+      row.appendChild(list);
+      el.appendChild(row);
+    }
+    return el;
+  }
+
+  /**
+   * The shortcut card (spec section 4.8, Task 11): a titled card with one
+   * section per group. `groups` is `[[title, [[[key, ...], what], ...]], ...]`
+   * (wave-ui.js `shortcutGroups`); each key is a `kbd`. `onClose` runs
+   * from its ✕. wave-ui.js places it in the middle of the editor and owns
+   * opening and closing it, like every other popover.
+   */
+  function shortcutCard(groups, onClose) {
+    const el = popover('ed-wave-shortcuts');
+    el.setAttribute('role', 'dialog');
+    el.setAttribute('aria-label', '全部快捷鍵');
+    el.setAttribute('tabindex', '-1');
+    const head = d.createElement('div');
+    head.className = 'ed-wave-shortcuts-head';
+    const title = d.createElement('span');
+    title.className = 'ed-wave-shortcuts-title';
+    title.textContent = '全部快捷鍵';
+    head.appendChild(title);
+    const x = toolButton('ed-wave-shortcuts-close', '✕', '關閉（Esc）', onClose, head);
+    x.setAttribute('aria-label', '關閉快捷鍵');
+    el.appendChild(head);
+    const body = d.createElement('div');
+    body.className = 'ed-wave-shortcuts-body';
+    for (const g of groups) {
+      const sec = d.createElement('section');
+      sec.className = 'ed-wave-shortcut-group';
+      const h = d.createElement('div');
+      h.className = 'ed-wave-shortcut-title';
+      h.textContent = g[0];
+      sec.appendChild(h);
+      for (const row of g[1]) {
+        const r = d.createElement('div');
+        r.className = 'ed-wave-shortcut-row';
+        const keys = d.createElement('span');
+        keys.className = 'ed-wave-shortcut-keys';
+        for (const k of row[0]) {
+          const kbd = d.createElement('kbd');
+          kbd.textContent = k;
+          keys.appendChild(kbd);
+        }
+        r.appendChild(keys);
+        const what = d.createElement('span');
+        what.className = 'ed-wave-shortcut-what';
+        what.textContent = row[1];
+        r.appendChild(what);
+        sec.appendChild(r);
+      }
+      body.appendChild(sec);
+    }
+    el.appendChild(body);
+    return el;
+  }
 
-  const sections = {};
-  for (const def of [
-    ['edge', '關聯線', true],
-    ['document', '文件', true],
-    ['lane', 'Lane', true],
-    ['preview', 'WaveDrom 預覽', false],
-    ['source', '原始碼', false],
-  ]) {
-    const built = section(def[0], def[1], def[2]);
-    side.appendChild(built.el);
-    sections[def[0]] = built.body;
+  /**
+   * The floating toolbar over a selected run of cycles (spec section 4.3):
+   * 電位 ⌄, 複製, 刪除 N 拍, 前插, 後插, 關聯線 (A), 標註 (T), in that order.
+   * The last two are W5's, folded in here; like the rest, what they do
+   * arrives from wave-ui.js in `actions`.
+   *
+   * `anchor` is `{left, top, width}`: where the toolbar goes, in its
+   * container's coordinates. wave-ui.js measures the toolbar once it is on
+   * screen and moves it (above the run, or below it when there is no room),
+   * so this only sets the first position.
+   *
+   * A press with the pointer does not take the keyboard off the canvas
+   * (`mousedown` is cancelled), so the arrows, Del and Ctrl+V keep working
+   * on the drawing after a button is clicked. Tab still reaches every
+   * button, and a button pressed from the keyboard keeps it.
+   */
+  function rangeToolbar(anchor, opts) {
+    const count = opts.count;
+    const actions = opts.actions;
+    const el = d.createElement('div');
+    el.className = 'ed-wave-range';
+    el.setAttribute('role', 'toolbar');
+    el.setAttribute('aria-label', '選取的 ' + count + ' 拍');
+    el.style.left = anchor.left + 'px';
+    el.style.top = anchor.top + 'px';
+    const items = [
+      ['ed-wave-range-level', '電位 ⌄', '把這 ' + count + ' 拍改成同一個電位', actions.level],
+      ['ed-wave-range-copy', '複製', '複製這 ' + count + ' 拍（在畫布上按 Ctrl+V 貼到選取的位置前面）', actions.copy],
+      ['ed-wave-range-delete', '刪除 ' + count + ' 拍', '刪掉這 ' + count + ' 拍（每一條訊號同時變窄；Del 也可以）', actions.remove],
+      ['ed-wave-range-before', '前插', '在這一段前面插入一拍', actions.insertBefore],
+      ['ed-wave-range-after', '後插', '在這一段後面插入一拍', actions.insertAfter],
+      ['ed-wave-range-edge', '關聯線 A', '從這一拍拉一條關聯線（A）', actions.edge],
+      ['ed-wave-range-note', '標註 T', '在這一拍加一個標註（T）', actions.note],
+    ];
+    for (const it of items) {
+      const run = it[3];
+      const b = toolButton(it[0], it[1], it[2], function () { run(b); }, el);
+      b.addEventListener('mousedown', function (ev) { ev.preventDefault(); });
+      if (it[0] === 'ed-wave-range-level') {
+        b.setAttribute('aria-haspopup', 'true');
+        b.setAttribute('aria-expanded', 'false');
+      }
+    }
+    return el;
   }
 
   /**
-   * v3.6.0 Task 13 fix round 3: expand the rail programmatically — the SAME
-   * `data-expanded` attribute a section title's first click (`section()`
-   * above) and the collapse button's own opposite (`collapseBtn` above)
-   * already use, called instead from `wave-ui.js`'s `render()` on the one
-   * transition that needs it without a click at all: selecting an edge at
-   * a narrow viewport, whose only feedback surface is a section this attribute
-   * governs. A no-op outside the `<1100px` media query, same as those two
-   * call sites — nothing there matches `[data-expanded]` at a wider one.
+   * The floating toolbar beside a selected edge's label (spec section 4.5):
+   * 線型 (直 曲 折) and 箭頭 (無 單向 雙向) as two button groups, 更多 (the
+   * other eleven shapes, listed inside the toolbar when it is opened),
+   * 改標籤 and 刪除. `opts.shape` is the edge's shape now, which decides the
+   * pressed line and head (`shapeParts`); every press goes to wave-ui.js
+   * through `opts.actions`: `setLine(line)`, `setHead(head)`, `more(shape)`,
+   * `editLabel()`, `remove()`, and `resized()` (optional) after 更多 opens
+   * or folds, so wave-ui.js can move the taller or shorter toolbar.
+   *
+   * Like the range toolbar, a press with the pointer does not take the
+   * keyboard off the canvas, so Del and Enter keep meaning the selected
+   * edge; Tab still reaches every button.
    */
-  function expandSide() {
-    side.setAttribute('data-expanded', '');
+  function edgeToolbar(anchor, opts) {
+    const actions = opts.actions;
+    const parts = shapeParts(opts.shape);
+    const el = barShell(anchor, '關聯線');
+    const group = function (label) {
+      const g = d.createElement('div');
+      g.className = 'ed-wave-edge-group';
+      g.setAttribute('role', 'group');
+      g.setAttribute('aria-label', label);
+      el.appendChild(g);
+      return g;
+    };
+    const lines = group('線型');
+    for (const [line, text, title] of [['straight', '直', '直線'], ['curve', '曲', '曲線'], ['elbow', '折', '折線']]) {
+      const b = barButton('ed-wave-edge-line-' + line, text, title, function () { actions.setLine(line); }, lines);
+      b.setAttribute('aria-pressed', parts.line === line ? 'true' : 'false');
+    }
+    const heads = group('箭頭');
+    for (const [head, text, title] of [['none', '無', '沒有箭頭'], ['end', '單向', '終點一個箭頭'], ['both', '雙向', '兩端都有箭頭']]) {
+      const b = barButton('ed-wave-edge-head-' + head, text, title, function () { actions.setHead(head); }, heads);
+      b.setAttribute('aria-pressed', parts.head === head ? 'true' : 'false');
+    }
+    const list = d.createElement('div');
+    list.className = 'ed-wave-edge-more-list';
+    list.setAttribute('role', 'group');
+    list.setAttribute('aria-label', '其他形狀');
+    list.hidden = true;
+    const moreBtn = barButton('ed-wave-edge-more', '更多 ⌄', '其他 11 種形狀（半曲、中折、先直後橫、+）', function () {
+      list.hidden = !list.hidden;
+      moreBtn.setAttribute('aria-expanded', list.hidden ? 'false' : 'true');
+      if (typeof actions.resized === 'function') actions.resized();
+    }, el);
+    moreBtn.setAttribute('aria-expanded', 'false');
+    barButton('ed-wave-edge-label', '改標籤', '在線上改標籤（Enter 或雙擊標籤也可以）', function () { actions.editLabel(); }, el);
+    barButton('ed-wave-edge-delete', '刪除', '刪掉這條關聯線（Del 也可以）', function () { actions.remove(); }, el)
+      .classList.add('is-danger');
+    MORE_SHAPES.forEach(function (shape, i) {
+      const b = barButton('ed-wave-edge-shape-' + i, shape, '形狀 ' + shape, function () { actions.more(shape); }, list);
+      b.setAttribute('data-shape', shape);
+      b.setAttribute('aria-pressed', opts.shape === shape ? 'true' : 'false');
+    });
+    el.appendChild(list);
+    return el;
   }
 
-  // v3.6.0 Task 13: `container` is the section body a field belongs in —
-  // explicit at the call site, the same reasoning `toolButton`'s own
-  // trailing `group` argument (Task 12) already gives for why there is no
-  // default to fall back on now that this dialog has more than one place a
-  // field could land.
-  function metaField(cls, label, placeholder, field, container) {
-    const wrap = d.createElement('label');
-    wrap.className = 'ed-wave-metafield';
-    const text = d.createElement('span');
-    text.textContent = label;
-    wrap.appendChild(text);
+  /**
+   * The same floating toolbar for a selected point note (spec section 4.5):
+   * 改文字, 拉成關聯線, 刪除 — `opts.actions.editText()`, `toEdge()`,
+   * `remove()`.
+   */
+  function noteToolbar(anchor, opts) {
+    const actions = opts.actions;
+    const el = barShell(anchor, '標註');
+    barButton('ed-wave-note-text', '改文字', '在標註上改文字（Enter 或雙擊也可以）', function () { actions.editText(); }, el);
+    barButton('ed-wave-note-to-edge', '拉成關聯線', '從這個標註的位置拉一條關聯線，文字變成線的標籤', function () { actions.toEdge(); }, el);
+    barButton('ed-wave-note-delete', '刪除', '刪掉這個標註（Del 也可以）', function () { actions.remove(); }, el)
+      .classList.add('is-danger');
+    return el;
+  }
+
+  function barShell(anchor, label) {
+    const el = d.createElement('div');
+    el.className = 'ed-wave-edge-bar';
+    el.setAttribute('role', 'toolbar');
+    el.setAttribute('aria-label', label);
+    el.style.left = anchor.left + 'px';
+    el.style.top = anchor.top + 'px';
+    return el;
+  }
+  function barButton(key, text, title, run, parent) {
+    const b = toolButton(key, text, title, run, parent);
+    b.addEventListener('mousedown', function (ev) { ev.preventDefault(); });
+    return b;
+  }
+
+  /**
+   * One line of text typed where it is drawn (spec section 4.5): an edge's
+   * label or a point note's text, `input.ed-wave-edge-input[data-kind]`.
+   * wave-ui.js places it and decides what a commit writes — and what
+   * Escape means, because for a label field opened on a brand-new edge
+   * Escape takes the edge back off (the dialog's own Escape layering). This
+   * owns Enter and the composition: Enter commits, but never while an input
+   * method is composing (spec section 7.2), and neither does the `change` or
+   * `blur` a committed composition can fire.
+   *
+   * `opts`: `kind` ('label' | 'note'), `value`, `focusKey`, `label` (the
+   * field's accessible name), `onCommit(value)`.
+   */
+  function inlineInput(opts) {
     const input = d.createElement('input');
     input.type = 'text';
-    input.className = cls;
-    input.setAttribute('data-focus-key', cls);
-    input.setAttribute('data-field', field);
-    input.placeholder = placeholder;
-    wrap.appendChild(input);
-    container.appendChild(wrap);
+    input.className = 'ed-wave-edge-input';
+    input.setAttribute('data-kind', opts.kind);
+    input.setAttribute('data-focus-key', opts.focusKey);
+    input.setAttribute('aria-label', opts.label);
+    input.value = opts.value;
+    let composing = false;
+    input.addEventListener('compositionstart', function () { composing = true; });
+    input.addEventListener('compositionend', function () { composing = false; });
+    input.addEventListener('keydown', function (ev) {
+      if (composing || ev.isComposing === true || ev.keyCode === 229) return;
+      if (ev.key !== 'Enter') return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      opts.onCommit(input.value);
+    });
+    input.addEventListener('change', function () { if (!composing) opts.onCommit(input.value); });
+    input.addEventListener('blur', function () { if (!composing) opts.onCommit(input.value); });
     return input;
   }
 
+  /**
+   * The notice card under the toolbar (spec section 4.9): neutral, and it can
+   * be folded away. `show(sentences)` fills it; no sentences hides it. The
+   * folded state lives on the card for the rest of the session, so a repaint
+   * does not unfold what the user folded.
+   */
+  function noticeCard() {
+    const el = d.createElement('div');
+    el.className = 'ed-wave-notice';
+    el.hidden = true;
+    const text = d.createElement('div');
+    text.className = 'ed-wave-notice-text';
+    el.appendChild(text);
+    const fold = d.createElement('button');
+    fold.type = 'button';
+    fold.className = 'ed-wave-notice-fold';
+    fold.setAttribute('data-focus-key', 'ed-wave-notice-fold');
+    fold.textContent = '收起';
+    fold.addEventListener('click', function () {
+      const folded = el.hasAttribute('data-folded');
+      if (folded) el.removeAttribute('data-folded');
+      else el.setAttribute('data-folded', '');
+      fold.textContent = folded ? '收起' : '展開';
+      fold.setAttribute('aria-expanded', folded ? 'true' : 'false');
+    });
+    fold.setAttribute('aria-expanded', 'true');
+    el.appendChild(fold);
+    function show(sentences) {
+      el.hidden = sentences.length === 0;
+      text.textContent = sentences.join(' ');
+    }
+    return { el: el, show: show };
+  }
+
   /**
    * A numeral typed into `hscale`/`period`/`phase` is committed as a real
-   * JS `number`, not as the string the `<input>` holds — unlike the eight
-   * banner fields' `commitBanner`, which always writes a string and is
-   * correct to (see its own header comment: the engine's `captext` and
-   * `ticktock` both accept a plain string). These three are different:
+   * JS `number`, not as the string the `<input>` holds. (The banner fields
+   * do the same for tick / tock / every since Task 10 — see `bannerValue`
+   * in `settingsPopover` for the engine's `+` that turns a string `"5"`
+   * into `"50"`; their `.text` stays a string.) For these three:
    * `wave-geometry.hscaleOf`/`layoutOf` gate on `typeof … === 'number'`, so
-   * a STRING `"2"` would silently read as "unset" on THIS canvas — this
-   * batch's own default of 1/0 — while the pinned engine's own preview still
+   * a STRING `"2"` would silently read as "unset" to the editor's geometry —
+   * its default of 1/0 — while the engine that draws the canvas still
    * honours it (its `tonumber()` coerces a string with `>`). That is the
    * exact same-idea-two-definitions divergence this batch has already paid
    * for three times elsewhere (see `md2doc`'s CLAUDE.md). Blank clears the
    * field (the `undefined` sentinel `setConfigField`/`setLaneField` both
    * read); anything that is not a plain, trimmed number is left as the raw
-   * string — both this canvas's `typeof` gate and the engine's own
+   * string — both the geometry's `typeof` gate and the engine's own
    * `tonumber()` already fall back to the SAME default (1 for hscale/period,
    * 0 for phase) for a non-numeric value, so there is nothing to reconcile
    * for that case, only for a well-formed one.
@@ -336,7 +816,7 @@ function createPanels(deps) {
   }
 
   function commitConfigField(key, value) {
-    actions.commit('config.' + key, function (doc) {
+    return actions.commit('config.' + key, function (doc) {
       return codec.setConfigField(doc, key, parseNumericField(value));
     });
   }
@@ -347,6 +827,65 @@ function createPanels(deps) {
     });
   }
 
+  /**
+   * A copy of `node` with the value at `path` replaced, sharing every subtree
+   * it does not have to copy — so the store's lane-identity bookkeeping
+   * (`remapOrigins` matches lanes by identity across a structural edit) still
+   * sees each untouched lane as the same object. The codec's lane operations
+   * cover lanes; a group's own title and its place among its siblings are
+   * the two writes they do not, and both go through this.
+   */
+  function replaceAt(node, path, value) {
+    if (path.length === 0) return value;
+    const seg = path[0];
+    const child = replaceAt(node[seg], path.slice(1), value);
+    const out = Array.isArray(node) ? node.slice() : Object.assign({}, node);
+    out[seg] = child;
+    return out;
+  }
+
+  /** The group at `path` gets the title `value` (spec section 4.4, 改名). */
+  function commitGroupTitle(path, value) {
+    return actions.commit('rename-group', function (doc) {
+      const group = geometry.valueAt(doc, path);
+      if (!Array.isArray(group) || typeof group[0] !== 'string' || group[0] === value) return doc;
+      return replaceAt(doc, path.concat([0]), value);
+    });
+  }
+
+  /**
+   * Where the group at `path` lands when it trades places with its neighbour
+   * one step `dir` (-1 up, 1 down) in the array that holds it — a lane, a
+   * blank row or another group — or null when there is none that way. The
+   * title at index 0 of a titled parent group is not a neighbour.
+   */
+  function groupStepPath(doc, path, dir) {
+    const parentPath = path.slice(0, -1);
+    const parent = geometry.valueAt(doc, parentPath);
+    if (!Array.isArray(parent)) return null;
+    const first = parentPath.length > 1 && typeof parent[0] === 'string' ? 1 : 0;
+    const at = path[path.length - 1];
+    const to = at + dir;
+    if (to < first || to >= parent.length) return null;
+    return parentPath.concat([to]);
+  }
+
+  /** 上移 / 下移 for a whole group: swap it with that neighbour. */
+  function commitGroupMove(path, dir) {
+    return actions.commit('move-group', function (doc) {
+      const dest = groupStepPath(doc, path, dir);
+      if (dest === null) return doc;
+      const parentPath = path.slice(0, -1);
+      const next = geometry.valueAt(doc, parentPath).slice();
+      const a = path[path.length - 1];
+      const b = dest[dest.length - 1];
+      const held = next[a];
+      next[a] = next[b];
+      next[b] = held;
+      return replaceAt(doc, parentPath, next);
+    });
+  }
+
   // v3.5.0 Task 13: widened from `(which, value)` — always writing `.text`
   // — to `(which, key, value)` so the same function also carries the other
   // five ruler fields.
@@ -374,35 +913,7 @@ function createPanels(deps) {
   // `setBannerField` is a plain, exported, pure function — pinned in
   // `test/wave-codec.test.js`.
   function commitBanner(which, key, value) {
-    actions.commit(which + '.' + key, function (doc) { return codec.setBannerField(doc, which, key, value); });
-  }
-
-  function say(text) {
-    deps.status.textContent = text;
-    overlay.setAttribute('data-wave-status', text);
-  }
-
-  /**
-   * 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, state) {
-    const selectedEdge = state.selectedEdge;
-    overlay.setAttribute('data-wave-selected-edge',
-      selectedEdge === null ? '' : String(selectedEdge));
-    deps.edgeBar.hidden = selectedEdge === null;
-    if (selectedEdge === null) return;
-    const cur = codec.parseEdge((doc.edge || [])[selectedEdge]);
-    if (cur === null) { deps.edgeBar.hidden = true; return; }
-    deps.shapeSel.value = cur.shape;
-    deps.edgeLabelInput.value = cur.label;
+    return actions.commit(which + '.' + key, function (doc) { return codec.setBannerField(doc, which, key, value); });
   }
 
   /**
@@ -415,9 +926,10 @@ function createPanels(deps) {
    * 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.
+   * exists to avoid elsewhere in this file. Editing the field commits a
+   * number for a plain numeral and the typed string otherwise (Task 10's
+   * `settingsPopover`): the engine adds the hbounds offset to tick / tock
+   * with `+`, so the STRING `"5"` would start the ruler at 50.
    */
   function tickTockText(v) {
     if (typeof v === 'string') return v;
@@ -426,142 +938,56 @@ function createPanels(deps) {
     return '';
   }
 
-  function renderMeta(doc) {
-    const h = doc.head;
-    const f = doc.foot;
-    deps.headInput.value = (h !== null && typeof h === 'object' && typeof h.text === 'string')
-      ? h.text : '';
-    deps.footInput.value = (f !== null && typeof f === 'object' && typeof f.text === 'string')
-      ? f.text : '';
-    deps.headTickInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.tick) : '';
-    deps.headEveryInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.every) : '';
-    deps.footTockInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.tock) : '';
-    deps.headTockInput.value = (h !== null && typeof h === 'object') ? tickTockText(h.tock) : '';
-    deps.footTickInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.tick) : '';
-    deps.footEveryInput.value = (f !== null && typeof f === 'object') ? tickTockText(f.every) : '';
-    // v3.6.0 Task 13: the document panel's ninth field. `config.hscale` is
-    // meant to hold a number (see `commitConfigField`'s own comment), but a
-    // hand-authored document can carry anything — `tickTockText` already
-    // does the identical "show it as a string either way" job for the six
-    // ruler fields, so it is reused here rather than a near-duplicate.
-    const cfg = doc.config;
-    deps.hscaleInput.value = (cfg !== null && typeof cfg === 'object')
-      ? tickTockText(cfg.hscale) : '';
-  }
-
   /**
-   * The Lane panel's two fields — `period`/`phase` for whichever lane the
-   * CYCLE selection currently names (`state.selection.laneIndex`, the same
-   * mark the brush/cycle toolbar already acts on — there is no separate
-   * "selected lane" concept in this dialog). Disabled, and blank, whenever
-   * nothing is selected: a control a gesture cannot currently reach is
-   * disabled rather than left to silently do nothing, the same rule
-   * `groupBtn`'s own disabled state already follows in `wave-ui.js`.
-   */
-  function renderLaneField(doc, layout, state) {
-    const sel = state.selection;
-    const row = (sel !== null) ? layout.lanes[sel.laneIndex] : undefined;
-    if (row === undefined) {
-      deps.lanePeriodInput.disabled = true;
-      deps.lanePhaseInput.disabled = true;
-      deps.lanePeriodInput.value = '';
-      deps.lanePhaseInput.value = '';
-      return;
-    }
-    deps.lanePeriodInput.disabled = false;
-    deps.lanePhaseInput.disabled = false;
-    const lane = (row.lane !== null && typeof row.lane === 'object') ? row.lane : {};
-    deps.lanePeriodInput.value = tickTockText(lane.period);
-    deps.lanePhaseInput.value = tickTockText(lane.phase);
-  }
-
-  /**
-   * The 原始碼 panel: `writeBack(originalText, doc).text` — the actual bytes
-   * a save would write — not a re-serialisation made for display. Reads
-   * `actions.sourceText()`, which walks the SAME `store.toPatch()` path
-   * `afterStoreMoved` already runs after every gesture (`wave-ui.js`), so
-   * this panel can never show a different answer than what 保留並關閉 would
-   * actually write.
+   * 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 訊號 menu's items say which container
+   * they will land in before they are pressed (`data-lands-in` and the
+   * title, computed when `wave-ui.js` opens the menu), and the notice says
+   * it again after.
    */
-  function renderSource() {
-    const pre = d.createElement('pre');
-    pre.className = 'ed-wave-source';
-    pre.textContent = actions.sourceText();
-    sections.source.replaceChildren(pre);
+  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 = geometry.valueAt(doc, container);
+    const title = Array.isArray(held) && typeof held[0] === 'string' ? held[0] : null;
+    return { path: path, title: title };
   }
 
   /**
-   * Say out loud which properties of this document the drawing is not
-   * showing.
-   *
-   * v3.6.0 Task 18: `config.hscale` and a lane's `period` / `phase` used to
-   * head this list — three properties that change what the engine paints and
-   * that the drawing ignored. Task 4 made all three part of `layoutOf`'s
-   * per-lane geometry (`cycleWidth` carries `period * hscale`, `originX`
-   * carries `phase`), and `test/wave-draw.test.js`'s `period: 4` and
-   * `hscale: 2` fixtures pin the ruler and grid pitch against the engine's
-   * own, so naming them as "not shown" is now the false statement. They are
-   * gone from the list; `found` stays as the place the NEXT such property
-   * lands, and is empty today.
+   * Say which parts of this document the editor cannot place, in the notice
+   * card (spec section 4.9), and what to do about each: the next step is the
+   * block's own MD source, reached by closing the editor.
    *
-   * The brief for this task asked instead for a notice when the skin ratios
-   * could not be derived (`SKIN_METRICS.derived !== true`). That field does
-   * not exist: controller ruling R12 (Task 3) cancelled the module-load
-   * derivation, because the shipped `wavedrom.min.js` attaches no `waveSkin`
-   * to the page global, so a page-time derivation would read `undefined`
-   * every time and the notice would be permanent wallpaper rather than a
-   * signal. The ratios are pinned from a measurement, and
-   * `test/wave-geometry.test.js` re-derives them from the real package on
-   * every run — a wavedrom bump that moves the skin turns that test red and
-   * names the number to re-pin. That is where the failure is reported,
-   * because it is a build-time fact and there is no runtime state for a
-   * notice to read.
+   * Edges are asked of `geometry.edgeLayoutDetail` — the walk that places
+   * them — rather than re-derived here. Skips are bucketed by whatever
+   * `reason` comes back, not by a list of the reasons known today, so a new
+   * reason shows up as its own (generically worded) bucket instead of
+   * escaping the notice. A point note (`<letter> <text>`) is not a skip:
+   * the engine draws it (spec section 5-3).
    *
-   * 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.
+   * `found` is where a document property the canvas does not show would be
+   * listed. It is empty today (period, phase and hscale are modelled) and is
+   * still published as `data-wave-unmodelled`, so a test can tell "nothing to
+   * report" from "never rendered".
    */
-  function renderUnmodelled(doc, layout) {
-    // Empty today — see the block comment above for what used to be pushed
-    // here and why it no longer is. Still assembled (and still published as
-    // `data-wave-unmodelled`) so the next genuinely-unmodelled property has
-    // somewhere to land, and so a test can tell "nothing to report" from
-    // "this notice was never rendered at all".
+  function renderUnmodelled(doc, layout, card) {
     const found = [];
-
     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 which(list) {
+      return '第 ' + list.map(function (s) { return s.index + 1; }).join('、') + ' 條關聯線';
+    }
     function letters(list) {
       const out = [];
       for (const skip of list) {
@@ -571,532 +997,95 @@ function createPanels(deps) {
       }
       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.
+    // Only the letters no lane carries: a dangling edge's other end is real.
+    const nodes = codec.nodesOf(doc);
+    function missing(list) {
+      return letters(list).filter(function (l) { return nodes[l] === undefined; });
+    }
+    const NEXT = '關閉後用區塊 ⠿ →「MD 原始碼」修改。';
+    // `dangling` and `unparseable` are not drawn by the engine either;
+    // `out-of-range` is drawn by the engine but the editor cannot place its
+    // ends, so it cannot be selected or dragged here.
     const REASON_TEXT = {
       dangling: function (list) {
-        return '這個區塊有 ' + list.length + ' 條關聯線引用了不存在的 anchor（' +
-          letters(list).join('、') + '），左邊畫不出它們。';
+        return which(list) + '用到不存在的錨點字母（' + missing(list).join('、') + '），畫不出來；' + NEXT;
       },
       unparseable: function (list) {
-        return '這個區塊有 ' + list.length +
-          ' 條關聯線的寫法連引擎也認不得，左邊畫不出它們（跟右邊的 WaveDrom 預覽一致）。';
+        return which(list) + '的寫法認不得，畫不出來；' + NEXT;
       },
       'out-of-range': function (list) {
-        return '這個區塊有 ' + list.length + ' 條關聯線的 anchor（' +
-          letters(list).join('、') + '）落在那條 lane 目前的長度之外，左邊畫不出它們' +
-          '——但右邊的 WaveDrom 預覽仍然會畫，兩邊會不一致，以預覽為準。';
+        return which(list) + '的錨點（' + letters(list).join('、') +
+          '）落在那條訊號目前的長度之外，在這裡選不到也拖不動；' + NEXT;
       },
     };
-
     const sentences = [];
     if (found.length > 0) {
-      sentences.push('這份文件用了 ' + found.join('、') +
-        '，左邊的手繪波形不表現它們（寬度與相位會不一樣）——以右邊的 WaveDrom 預覽為準。');
+      sentences.push('這份文件用了 ' + found.join('、') + '，編輯器沒有把它們畫出來；' + NEXT);
     }
     for (const [reason, list] of buckets) {
       const text = REASON_TEXT[reason];
-      sentences.push(text ? text(list) :
-        '這個區塊有 ' + list.length + ' 條關聯線因為「' + reason + '」畫不出來，' +
-        '以右邊的 WaveDrom 預覽為準。');
+      sentences.push(text ? text(list) : which(list) + '因為「' + reason + '」畫不出來；' + NEXT);
     }
 
     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));
-    deps.unmodelled.hidden = sentences.length === 0;
-    deps.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.
+    // This editor edits `signal:` and nothing else, so a `reg:` or `assign:`
+    // block opens with no lanes. Say so rather than look broken.
     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');
-    deps.noSignal.hidden = !noLanes;
-    deps.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, state) {
-    deps.laneCol.textContent = '';
-    const rows = d.createElement('div');
-    rows.className = 'ed-wave-lane-rows';
-    rows.style.height = layout.height + 'px';
-    deps.laneCol.appendChild(rows);
-
-    const spans = geometry.groupSpansOf(doc, layout);
-
-    // 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));
-      // v3.6.0 Task 6: `layout.lanes[i].y`, not `i * layout.laneHeight` — lane
-      // 0 no longer starts at y=0 (the ruler/head-title band sits above it),
-      // and this rail is a separate scroll-synced column from the canvas that
-      // must line up row-for-row with it. `span.from` is always a real lane
-      // index (a group always has at least one lane under it), so
-      // `layout.lanes[span.from]` is never absent here.
-      tag.style.top = layout.lanes[span.from].y + '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, state));
-    }
-  }
-
-  /**
-   * Which row a lane-handle drag started on, for the life of that one drag.
-   *
-   * NOT read out of the drag's own `DataTransfer`: that payload is writable
-   * by any page, so a drop handler trusting it would accept a drag begun in
-   * another window as a lane reorder. This is a closure variable, set by the
-   * one `dragstart` in this file and cleared by the matching `dragend` and
-   * by every `drop` that acts on it, so a drag that never started here is
-   * `null` here and every drop is a no-op.
-   */
-  let laneDragFrom = null;
-
-  /**
-   * The rail's one row: a drag handle, a name field, and — on a lane that is
-   * WaveDrom's own blank spacer — a badge saying so.
-   *
-   * v3.6.0 Task 14. Every row used to carry six controls (＋ ▲ ▼ ✕ 複製
-   * 空白列), and the one row that hosted its group's 解散群組 carried seven.
-   * They did not fit: the rail is 200px, the name field was flexed down to
-   * 45px on the most crowded row (MEASURED in Task 12's own Shift+click
-   * comment, since deleted with the gesture it described), and a three-
-   * character Chinese caption in a 24px button is laid out vertically by the
-   * browser — the editor shipped a column of stacked glyphs where a label was
-   * meant. All six moved to the toolbar's 訊號/群組 sections, where they act
-   * on `selection`.
-   *
-   * That move is what retires the rail's SECOND selection — the set of row
-   * numbers Task 12 added to serve one button (建立群組), which then had to
-   * be carried across undo/redo beside the other four marks, clamped again
-   * in `render()`, and drawn with a tint of its own so a user could tell it
-   * from the cycle selection standing at the same time. There is one
-   * selection now: `selection`, whose `laneIndex`..`laneTo` is the lane range
-   * and whose `from`..`to` is the cycle range on `laneIndex`. Shift+click
-   * here and Shift+arrow on the canvas write the same mark.
-   *
-   * Clicking the row selects its lane; clicking the NAME FIELD does not.
-   * That exclusion is inherited from the gesture this replaces and is the
-   * same fact: `render()` rebuilds the whole rail, so a repaint fired from
-   * inside a field the user is still typing in rebuilds that field from the
-   * document — discarding uncommitted text with nothing on screen to explain
-   * it. The handle is always present and never flexes away, so there is
-   * always a click target for "select this lane" even on a row whose name
-   * fills the field.
-   */
-  function laneRow(doc, layout, i, state) {
-    const row = d.createElement('div');
-    row.className = 'ed-wave-lane-row';
-    row.setAttribute('data-lane', String(i));
-    // v3.6.0 Task 6: `layout.lanes[i].y` carries the ruler/head-title band's
-    // offset, `i * layout.laneHeight` does not. Left as the latter this row
-    // would sit `layout.originY` px too high, out of step with its own
-    // canvas row.
-    row.style.top = layout.lanes[i].y + 'px';
-    row.style.height = layout.laneHeight + 'px';
-    row.style.paddingLeft = (layout.lanes[i].depth * 16) + 'px';
-    if (state.selection !== null &&
-        i >= state.selection.laneIndex && i <= state.selection.laneTo) {
-      row.classList.add('is-selected');
-    }
-
-    row.addEventListener('click', function (ev) {
-      if (ev.target !== null && typeof ev.target.classList === 'object' &&
-          ev.target.classList.contains('ed-wave-lane-name')) {
-        return;
-      }
-      ev.preventDefault();
-      ev.stopPropagation();
-      const sel = state.selection;
-      if (ev.shiftKey === true && sel !== null) {
-        // Extend, normalised so `laneIndex <= laneTo` always holds and no
-        // reader has to re-derive which end is which. Extending UPWARDS
-        // therefore moves `laneIndex` — and with it the row the cycle box
-        // sits on — to the new top of the range; the cycle numbers
-        // themselves are untouched.
-        const anchor = sel.laneIndex;
-        actions.selectionSet({
-          laneIndex: Math.min(anchor, i), laneTo: Math.max(anchor, i),
-          from: sel.from, to: sel.to,
-        });
-      } else {
-        // A plain click selects this lane at its first cycle. It IS a cycle
-        // selection, deliberately: there is one selection, and picking a
-        // lane from the rail has to leave the toolbar's cycle section
-        // pointing somewhere real rather than at a lane range with no
-        // cycles named.
-        actions.selectionSet({ laneIndex: i, laneTo: i, from: 0, to: 0 });
-      }
-      actions.render();
-    }, true);
-
-    // Reordering. `codec.moveLane` is the one place that knows what a
-    // destination position means once the lane has been lifted out (and that
-    // it may cross a group boundary on the way) — this gesture hands it two
-    // display positions and nothing else, rather than growing a second
-    // opinion about lane order in the rail.
-    const handle = d.createElement('span');
-    handle.className = 'ed-wave-lane-handle';
-    handle.setAttribute('draggable', 'true');
-    // Deliberately NO `data-focus-key`. `restoreFocus` nominates a key and
-    // calls `.focus()` on whatever carries it; a <span> with no tabindex
-    // cannot take focus, so a key here would be a silent route to
-    // `document.body` the moment anything nominated it — the exact state
-    // that turns the next Backspace into「delete the selected blocks」.
-    handle.textContent = '⠿';
-    // v3.6.0 Task 16: this tooltip is the reorder affordance's own description
-    // of how reordering is done, so it names BOTH doors — the drag below and
-    // `wave-ui.js`'s Alt+↑/↓, which reach the same `codec.moveLane`.
-    //
-    // fix round 1 WITHDRAWS the reason the first cut gave for this line
-    // ("leaving it drag-only would leave the keyboard route discoverable
-    // nowhere"). That was false six lines above its own head: this is a
-    // HOVER tooltip on a `<span>` that deliberately carries no
-    // `data-focus-key` and cannot take focus, so a keyboard-only user never
-    // reads a character of it. What the line is actually worth runs the
-    // other way — the person already reaching for the handle with a mouse
-    // learns there is a cheaper route. The three surfaces a KEYBOARD user
-    // does read are the canvas's `aria-label` (`wave-draw.js`'s
-    // `renderCanvas`), the opening status line, and `handleDrawingKey`'s own
-    // docstring (both in `wave-ui.js`); fix round 1 is where those three
-    // were made true.
-    handle.title = '拖曳這裡可以調整這條 lane 的順序（或選起來按 Alt+↑／Alt+↓ 搬）';
-    handle.addEventListener('dragstart', function (ev) {
-      laneDragFrom = i;
-      // The row index also goes into the DataTransfer, but it is NOT what
-      // the drop reads: a drop handler that trusted it would accept a drag
-      // that started anywhere on the page, including another window. The
-      // payload is set because a drag with no data attached does not start
-      // at all in some browsers, and for nothing else.
-      if (ev.dataTransfer !== null && ev.dataTransfer !== undefined) {
-        ev.dataTransfer.effectAllowed = 'move';
-        try { ev.dataTransfer.setData('text/plain', String(i)); } catch (e) { /* nothing to do */ }
-      }
-    });
-    handle.addEventListener('dragend', function () { laneDragFrom = null; });
-    row.appendChild(handle);
-
-    row.addEventListener('dragover', function (ev) {
-      if (laneDragFrom === null) return;
-      // preventDefault is what MAKES this a drop target; without it the
-      // browser never fires `drop` at all and the gesture dies silently.
-      ev.preventDefault();
-      if (ev.dataTransfer !== null && ev.dataTransfer !== undefined) {
-        ev.dataTransfer.dropEffect = 'move';
-      }
-    });
-    row.addEventListener('drop', function (ev) {
-      if (laneDragFrom === null) return;
-      ev.preventDefault();
-      const from = laneDragFrom;
-      laneDragFrom = null;
-      if (from === i) return;
-      // The lane arrives at this row, so the keyboard goes to the field it
-      // arrives in — the same rule every gesture in this dialog follows, and
-      // the reason F7/T6h exist.
-      actions.focusOverrideSet('lane-name-' + i);
-      actions.commit('move-lane', function (doc2) { return codec.moveLane(doc2, from, i); });
-    });
-
-    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 () {
-      actions.commit('rename', function (doc2) { return codec.renameLane(doc2, i, name.value); });
-    });
-    row.appendChild(name);
-
-    // WaveDrom's own blank row, `{}` — no `wave`, no `name`. It draws as
-    // nothing, so without this the rail shows an empty name field on a row
-    // the canvas leaves blank and there is no way to tell it from a lane
-    // someone simply has not named yet.
-    if (lane.wave === undefined && lane.name === undefined) {
-      const badge = d.createElement('span');
-      badge.className = 'ed-wave-lane-badge';
-      badge.textContent = '空白列';
-      badge.title = 'WaveJSON 的 {}，用來空出間距';
-      row.appendChild(badge);
-    }
-    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 訊號 section's 新增 says which
-   * container it will land in before it is pressed (`data-lands-in`, kept
-   * current by `wave-ui.js`'s `render()`), and the status line says it again
-   * after.
-   *
-   * v3.6.0 Task 14: exported, because the caller that needs it is now the
-   * toolbar in `wave-ui.js` rather than a button this file builds.
-   */
-  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 = geometry.valueAt(doc, container);
-    const title = Array.isArray(held) && typeof held[0] === 'string' ? held[0] : null;
-    return { path: path, title: title };
-  }
-
-  /**
-   * 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 = deps.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 (actions.groupRenameGet() === null) return;
-      actions.groupRenameSet(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 (actions.focusOverrideGet() === null &&
-          (hadKeyboard || !overlay.contains(d.activeElement))) {
-        actions.focusOverrideSet('group-' + span.from);
-      }
-      actions.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 (actions.groupRenameGet() === null) return;
-      actions.groupRenameSet(null);
-      if (actions.focusOverrideGet() === null && holdsKeyboard()) {
-        actions.focusOverrideSet('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 (actions.groupRenameGet() === null) return;
-      actions.groupRenameSet(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.
-    actions.groupRenameSet({ cancel: cancel, retire: retire });
-    input.focus();
-    input.select();
-  }
-
-  /**
-   * 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;
-  }
-
-  function renderPreview(doc) {
-    const engine = wavedrom;
-    if (engine === null || engine === undefined ||
-        typeof engine.RenderWaveForm !== 'function') {
-      deps.previewHost.textContent = '（這一頁沒有載入 WaveDrom，預覽從缺）';
-      deps.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);
-      deps.previewWrap.setAttribute('data-wave-preview', 'ok');
-      deps.previewWrap.setAttribute('data-wave-preview-skin', skinOnPage ? 'shared' : 'own');
-    } catch (e) {
-      deps.previewHost.textContent = 'WaveDrom 畫不出這份文件：' + String(e && e.message);
-      deps.previewWrap.setAttribute('data-wave-preview', 'failed');
+    if (noLanes) {
+      sentences.unshift((kinds.length === 0
+        ? '這個區塊裡沒有 signal:，所以沒有可以編輯的訊號；'
+        : '這個區塊用的是 ' + kinds.join(' / ') + '，這個編輯器只編輯 signal: 的訊號；') +
+        '要改這個區塊，' + NEXT);
     }
+    card.show(sentences);
   }
 
   return {
-    toolGroup: toolGroup,
     toolButton: toolButton,
-    metaField: metaField,
+    popover: popover,
+    menu: menu,
+    // Task 8 (spec section 4.4): the name column's ⠿ menu, its in-place
+    // name field and 週期與相位…, and the two group writes.
+    laneMenu: laneMenu,
+    renameField: renameField,
+    periodPhasePopover: periodPhasePopover,
+    commitGroupTitle: commitGroupTitle,
+    groupStepPath: groupStepPath,
+    commitGroupMove: commitGroupMove,
+    brushGrid: brushGrid,
+    shortcutCard: shortcutCard,
+    // Task 10 (spec section 4.6): ⚙ 整張圖 and 匯出 ⌄.
+    settingsPopover: settingsPopover,
+    exportMenu: exportMenu,
+    rangeToolbar: rangeToolbar,
+    // Task 9 (spec section 4.5): the edge and note toolbars, their shape
+    // arithmetic, and the inline label / note field.
+    edgeToolbar: edgeToolbar,
+    noteToolbar: noteToolbar,
+    inlineInput: inlineInput,
+    shapeParts: shapeParts,
+    shapeWith: shapeWith,
+    noticeCard: noticeCard,
+    renderUnmodelled: renderUnmodelled,
+    // Where an insert lands, asked of the bridge (constraint 4 in
+    // wave-ui.js); the 訊號 menu says it before and after.
+    landingOf: landingOf,
+    // The settings and lane fields' write side (spec section 4.9): the
+    // lane fields are Task 8's 週期與相位…, the settings Task 10's.
     commitBanner: commitBanner,
     commitConfigField: commitConfigField,
     commitLaneField: commitLaneField,
-    renderMeta: renderMeta,
-    renderLaneField: renderLaneField,
-    renderSource: renderSource,
-    renderLanes: renderLanes,
-    // v3.6.0 Task 14: the 訊號 section's 新增/空白列/複製 live in
-    // `wave-ui.js` now, and each of them has to say which container its
-    // insert lands in — before the press (the button's own `data-lands-in`)
-    // and after it (the status line). One answer, from the bridge.
-    landingOf: landingOf,
-    renderEdgeBar: renderEdgeBar,
-    renderPreview: renderPreview,
-    renderUnmodelled: renderUnmodelled,
-    renameGroup: renameGroup,
-    say: say,
-    // v3.6.0 Task 13: the right-hand column and its five section bodies —
-    // see the block above `metaField` for why these are built eagerly
-    // rather than published lazily onto `deps` the way `metaBar`/`edgeBar`/
-    // etc. used to be. `wave-ui.js` appends `side` once into `.ed-wave-body`
-    // and targets `sections.<key>` for every field/notice/preview that used
-    // to go straight into the toolbar or the body row.
-    side: side,
-    sections: sections,
-    expandSide: expandSide,
+    tickTockText: tickTockText,
   };
 }
 
-module.exports = { createPanels: createPanels };
+module.exports = { createPanels: createPanels, shapeParts: shapeParts, shapeWith: shapeWith, NINE: NINE };