@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/outline/list.mjs

@@ -0,0 +1,172 @@
+import { tooltip } from "../tooltip.mjs";
+import { element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { keyAction } from "./tree.mjs";
+
+// The outline's rows (outline/index.mjs puts them in its dock, or in the strip's card): a tree as
+// aria has it (role tree, a treeitem a row with its level, open or folded, the current one
+// aria-current), one tab stop (the current row, else the first), the keys of tree.mjs keyAction.
+// A row's title, cut short, shows whole in the shared tooltip, at the list's left (over the gutter,
+// not the rows above); a parent's triangle at its title's left, in a column of its own (a leaf keeps
+// the room, so titles of a level line up), folds or unfolds it (a folded one always shows it, an open
+// one while the pointer is over the list or the keyboard is in it: STYLE in index.mjs); a click
+// elsewhere on the row goes to its heading. The strip (strip.mjs) lights a row from outside (hot): the
+// one its line under the pointer stands for, filled as under the pointer, a blue segment on the guide.
+
+export const ROW = 28; // a row's height
+const MARK = 16; // the current row's segment on the guide (and the hot row's)
+
+// A small solid triangle on the 20-unit grid, pointing right (folded); turned down when open.
+export const TRIANGLE = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8 6.5v7l5-3.5z"/></svg>';
+
+const cut = (node) => node.scrollWidth > node.clientWidth + 1;
+
+/**
+ * jump(node, { keyboard }): a row chosen (a click, or Enter or Space: keyboard); fold(node): its
+ * chevron (a click, ← or →); escape(): Esc in the list; page(direction): PageDown (1) or PageUp (-1).
+ * Returns { node (the list), render(rows, folded, marked), mark(marked), focus(index), rowAt(index), holds(target) }.
+ */
+export function createList({ jump, fold, escape, page }) {
+  const node = element("div", { class: "ge-outline-list", role: "tree", "aria-label": t("目录") });
+  const segment = element("span", { class: "ge-outline-mark", "aria-hidden": "true" });
+  const hotSegment = element("span", { class: "ge-outline-mark", "data-hot": "", "aria-hidden": "true", hidden: "" });
+  const empty = element("div", { class: "ge-outline-empty", text: t("添加标题后，这里会列出它们") });
+  let rows = [];
+  let folded = new Set();
+  let marked = -1;
+  let hot = -1;
+  let rowNodes = [];
+
+  function rowFor({ node: item, depth, parent }, index) {
+    const label = element("span", { class: "ge-outline-text" });
+    const named = item.kind === "tab" ? element("span", { class: "ge-outline-tab", text: item.text }) : label;
+    if (item.kind === "tab") label.append(named);
+    else label.textContent = item.text;
+    const open = !folded.has(item.key);
+    const twist = item.children.length
+      ? element("span", { class: "ge-outline-twist", role: "button", "aria-label": open ? t("折叠") : t("展开"), html: TRIANGLE })
+      : element("span", { class: "ge-outline-slot", "aria-hidden": "true" });
+    const row = element("div", { class: "ge-outline-row", role: "treeitem", tabindex: "-1", "aria-level": String(depth + 1), "data-index": String(index), "data-kind": item.kind }, twist, label);
+    row.style.setProperty("--ge-depth", String(depth));
+    if (item.kind === "tab" && item.shown) row.dataset.shown = "";
+    // The top level's headings (bold): at the top, or right under a tab (a tab's own top level).
+    if (item.kind === "heading" && (parent < 0 || rows[parent]?.node.kind === "tab")) row.dataset.top = "";
+    if (item.children.length) row.setAttribute("aria-expanded", String(open));
+    tooltip(row, () => (cut(named) ? item.text : null), null, { placement: "left", align: "center", gap: 14 });
+    return row;
+  }
+
+  /** Draw `rows` (tree.mjs rowsOf) with what is `folded`, row `marked` the current one. */
+  function render(next, nextFolded, nextMarked) {
+    const focusedKey = node.contains(document.activeElement) ? rows[Number(document.activeElement.dataset?.index)]?.node.key : null;
+    rows = next;
+    folded = nextFolded;
+    rowNodes = rows.map(rowFor);
+    node.replaceChildren(...rowNodes, ...(rows.length ? [segment, hotSegment] : [empty]));
+    node.toggleAttribute("data-empty", rows.length === 0);
+    marked = -2;
+    mark(nextMarked);
+    const wasHot = hot;
+    hot = -2;
+    light(wasHot);
+    if (focusedKey !== null) {
+      const again = rows.findIndex((row) => row.node.key === focusedKey);
+      focus(again >= 0 ? again : Math.max(0, Math.min(rows.length - 1, marked)));
+    }
+  }
+
+  /** The rows' data, the same rows drawn (the tree read again, its elements new: an undo put them back). */
+  function update(next) {
+    rows = next;
+  }
+
+  /** Row `index` the current one (-1: none). */
+  function mark(index) {
+    if (index === marked) return;
+    marked = index;
+    rowNodes.forEach((row, at) => {
+      const current = at === index;
+      row.toggleAttribute("data-current", current);
+      if (current) row.setAttribute("aria-current", "location");
+      else row.removeAttribute("aria-current");
+    });
+    const stop = index >= 0 ? index : 0;
+    rowNodes.forEach((row, at) => { row.tabIndex = at === stop ? 0 : -1; });
+    place(segment, index);
+  }
+
+  // A segment on the guide by row `index` (rows stand ROW apart, measured or not: the card closed).
+  function place(mark, index) {
+    mark.hidden = !rowNodes[index];
+    if (!mark.hidden) mark.style.transform = `translateY(${index * ROW + (ROW - MARK) / 2}px)`;
+  }
+
+  /** Row `index` lit from outside (the strip's line under the pointer; -1: none). Returns its node. */
+  function light(index) {
+    if (index === hot) return rowNodes[index] ?? null;
+    rowNodes[hot]?.removeAttribute("data-hot");
+    hot = rowNodes[index] ? index : -1;
+    rowNodes[hot]?.setAttribute("data-hot", "");
+    place(hotSegment, hot);
+    return rowNodes[hot] ?? null;
+  }
+
+  function focus(index) {
+    const row = rowNodes[index];
+    if (!row) return;
+    rowNodes.forEach((other) => { other.tabIndex = other === row ? 0 : -1; });
+    row.focus({ preventScroll: true });
+    const box = row.closest(".ge-outline-scroll");
+    if (!box) return;
+    const top = row.getBoundingClientRect().top - box.getBoundingClientRect().top + box.scrollTop;
+    if (top < box.scrollTop) box.scrollTop = top - 4;
+    else if (top + ROW > box.scrollTop + box.clientHeight) box.scrollTop = top + ROW - box.clientHeight + 4;
+  }
+
+  const indexOf = (target) => Number(target?.closest?.(".ge-outline-row")?.dataset.index ?? -1);
+
+  node.addEventListener("click", (event) => {
+    const index = indexOf(event.target);
+    if (index < 0 || !rows[index]) return;
+    if (event.target.closest(".ge-outline-twist")) fold(rows[index].node);
+    else jump(rows[index].node, { keyboard: event.detail === 0 });
+  });
+  node.addEventListener("keydown", (event) => {
+    // Ctrl/⌘+A selects nothing here (the rows are no text; the page's select-all is the text's).
+    if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      return;
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      escape();
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      page?.(event.key === "PageDown" ? 1 : -1);
+      return;
+    }
+    const index = indexOf(event.target);
+    const action = index >= 0 ? keyAction(rows, index, event.key, folded) : null;
+    if (!action) return;
+    event.preventDefault();
+    if ("focus" in action) focus(action.focus);
+    else if (action.fold || action.unfold) fold(action.fold ?? action.unfold);
+    else if (action.jump) jump(action.jump, { keyboard: true });
+  });
+
+  return {
+    node,
+    render,
+    update,
+    mark,
+    light,
+    focus,
+    get marked() { return marked; },
+    get hot() { return hot; },
+    rowAt: (index) => rowNodes[index] ?? null,
+    holds: (target) => node.contains(target),
+  };
+}

package/browser/editor/page/outline/read.mjs

@@ -0,0 +1,201 @@
+import { SHEETS } from "../../components/kit.mjs";
+
+// What the outline lists, read from the page (outline/tree.mjs's entries): the heading blocks (h1-h4
+// the editor knows as headings, data-ge-unit-kind="heading", in the file or made on the page) in the
+// page's flows: sections, plain boxes, highlight panels, rows of columns, disclosures, tab panels. Not
+// the report's title (the header's: the page's name), a detail card's headings (a dialog, not on the
+// page), a component's own title (a figure's or a chart's, which is no heading block), nor a heading in a
+// table or a list (a flowchart's step). A row of columns, a disclosure and a tab's panel keep their
+// headings to themselves (tree.mjs "scope"); a tabs area lists its tabs in their row's order, the hidden
+// ones too, each with its panel's headings. A heading with no text (just made) has no row yet.
+
+export const HEADING = ':is(h1, h2, h3, h4)[data-ge-unit-kind="heading"]';
+const LEFT_OUT = "dialog, figure, table, li, .doc-header, template, [data-doc-dev]";
+const SCOPES = ".doc-columns, details";
+
+// ---------- a formula as a row reads it ----------
+
+const SYMBOLS = {
+  alpha: "α", beta: "β", gamma: "γ", delta: "δ", epsilon: "ε", varepsilon: "ε", zeta: "ζ", eta: "η", theta: "θ", vartheta: "ϑ", iota: "ι", kappa: "κ",
+  lambda: "λ", mu: "μ", nu: "ν", xi: "ξ", pi: "π", rho: "ρ", sigma: "σ", tau: "τ", upsilon: "υ", phi: "φ", varphi: "φ", chi: "χ", psi: "ψ", omega: "ω",
+  Gamma: "Γ", Delta: "Δ", Theta: "Θ", Lambda: "Λ", Xi: "Ξ", Pi: "Π", Sigma: "Σ", Upsilon: "Υ", Phi: "Φ", Psi: "Ψ", Omega: "Ω",
+  times: "×", cdot: "·", div: "÷", pm: "±", mp: "∓", le: "≤", leq: "≤", ge: "≥", geq: "≥", ne: "≠", neq: "≠", approx: "≈", sim: "∼", simeq: "≃",
+  equiv: "≡", propto: "∝", infty: "∞", to: "→", rightarrow: "→", leftarrow: "←", Rightarrow: "⇒", Leftarrow: "⇐", leftrightarrow: "↔",
+  Leftrightarrow: "⇔", mapsto: "↦", sum: "∑", prod: "∏", int: "∫", oint: "∮", partial: "∂", nabla: "∇", in: "∈", notin: "∉", ni: "∋",
+  subset: "⊂", subseteq: "⊆", supset: "⊃", supseteq: "⊇", cup: "∪", cap: "∩", emptyset: "∅", varnothing: "∅", forall: "∀", exists: "∃",
+  neg: "¬", land: "∧", wedge: "∧", lor: "∨", vee: "∨", ldots: "…", cdots: "⋯", dots: "…", circ: "∘", degree: "°", prime: "′", angle: "∠",
+  perp: "⊥", parallel: "∥", ll: "≪", gg: "≫", langle: "⟨", rangle: "⟩", lvert: "|", rvert: "|", vert: "|", mid: "|", percent: "%",
+};
+const SPACED = new Set(["×", "·", "÷", "±", "∓", "≤", "≥", "≠", "≈", "∼", "≃", "≡", "∝", "→", "←", "⇒", "⇐", "↔", "⇔", "↦", "∈", "∉", "∋", "⊂", "⊆", "⊃", "⊇", "∪", "∩", "∧", "∨", "∘", "≪", "≫", "∥", "⊥"]); // written with a space on each side
+const NAMED = new Set(["log", "ln", "lg", "sin", "cos", "tan", "cot", "sec", "csc", "exp", "lim", "max", "min", "sup", "inf", "det", "arg", "deg", "gcd", "mod", "Pr"]);
+const KEPT = new Set(["text", "textrm", "textbf", "textit", "mathrm", "mathbf", "mathit", "mathsf", "mathtt", "mathcal", "mathbb", "mathfrak", "boldsymbol", "bm", "operatorname", "mbox", "hbox", "overline", "underline", "widehat", "widetilde", "hat", "tilde", "bar", "vec", "dot", "ddot", "displaystyle", "textstyle"]);
+const DROPPED = new Set(["left", "right", "big", "Big", "bigg", "Bigg", "bigl", "bigr", "Bigl", "Bigr", "limits", "nolimits"]);
+const SPACES = { ",": " ", ";": " ", ":": " ", "!": "", " ": " ", quad: " ", qquad: " ", "\\": " " };
+const UP = { 0: "⁰", 1: "¹", 2: "²", 3: "³", 4: "⁴", 5: "⁵", 6: "⁶", 7: "⁷", 8: "⁸", 9: "⁹", "+": "⁺", "-": "⁻", "=": "⁼", "(": "⁽", ")": "⁾", n: "ⁿ", i: "ⁱ", "′": "′" };
+const DOWN = { 0: "₀", 1: "₁", 2: "₂", 3: "₃", 4: "₄", 5: "₅", 6: "₆", 7: "₇", 8: "₈", 9: "₉", "+": "₊", "-": "₋", "=": "₌", "(": "₍", ")": "₎" };
+
+/**
+ * A formula's TeX as a row reads it (a line of plain text, not drawn): Greek letters and the usual
+ * signs as their characters, \frac{a}{b} as a/b, \sqrt{x} as √x, a power or an index of digits raised
+ * or lowered (x^2 as x², a_1 as a₁; others written x^n, x_ij as they are), \text{…} and its kind as
+ * their words, \left and \right left out, a chemical formula's numbers lowered (\ce{H2O} as H₂O).
+ */
+export function texReading(tex) {
+  let at = 0;
+  const group = () => { // what a command or a script takes: {…}, a command, or one character
+    while (tex[at] === " ") at++;
+    if (tex[at] === "{") {
+      let depth = 0;
+      const from = at;
+      for (; at < tex.length; at++) {
+        if (tex[at] === "\\") at++;
+        else if (tex[at] === "{") depth++;
+        else if (tex[at] === "}" && --depth === 0) break;
+      }
+      at++;
+      return texReading(tex.slice(from + 1, at - 1));
+    }
+    if (tex[at] === "\\") return read(true);
+    return tex[at++] ?? "";
+  };
+  const wrapped = (text) => (text.length > 1 && /[\s+\-−×·/=]/.test(text) ? `(${text})` : text);
+  const script = (text, map, mark) => {
+    const bare = text.replace(/\s+/g, "");
+    if (!bare) return "";
+    return [...bare].every((char) => map[char]) ? [...bare].map((char) => map[char]).join("") : `${mark}${wrapped(bare)}`;
+  };
+  function read(one = false) {
+    let out = "";
+    while (at < tex.length) {
+      const char = tex[at];
+      if (char === "\\") {
+        at++;
+        const name = /[A-Za-z]/.test(tex[at] ?? "") ? tex.slice(at).match(/^[A-Za-z]+/)[0] : tex[at] ?? "";
+        at += name.length;
+        if (/^[A-Za-z]/.test(name)) while (tex[at] === " ") at++; // the space ending a command's name is no space
+        let piece;
+        if (name in SPACES) piece = SPACES[name];
+        else if (name === "frac" || name === "dfrac" || name === "tfrac") piece = `${wrapped(group())}/${wrapped(group())}`;
+        else if (name === "sqrt") {
+          if (tex[at] === "[") at = tex.indexOf("]", at) + 1 || tex.length;
+          piece = `√${wrapped(group())}`;
+        } else if (name === "ce") piece = group().replace(/(?<=[A-Za-z)\]])(\d+)/g, (digits) => script(digits, DOWN, "_"));
+        else if (KEPT.has(name)) piece = group();
+        else if (DROPPED.has(name)) piece = "";
+        else if (SYMBOLS[name]) piece = SPACED.has(SYMBOLS[name]) ? ` ${SYMBOLS[name]} ` : SYMBOLS[name];
+        else if (NAMED.has(name)) piece = /[A-Za-z\\]/.test(tex[at] ?? "") ? `${name} ` : name; // sin θ, log₂ n
+        else piece = name;
+        out += piece;
+      } else if (char === "^" || char === "_") {
+        at++;
+        out += script(group(), char === "^" ? UP : DOWN, char);
+      } else if (char === "{") out += group();
+      else if (char === "}") at++;
+      else if (char === "~") { out += " "; at++; }
+      else if (char === "=" || char === "+" || char === "<" || char === ">") { out += ` ${char} `; at++; }
+      else { out += char; at++; }
+      if (one) break;
+    }
+    return out;
+  }
+  return read().replace(/\s+/g, " ").trim();
+}
+
+/**
+ * A heading's text as its row shows it: spaces as one, an inline formula as it reads (texReading),
+ * a link shown with its icon as its title, inline code and marks as their text; what the editor adds
+ * (pads, its own nodes) left out.
+ */
+export function headingText(heading) {
+  const copy = heading.cloneNode(true);
+  for (const math of copy.querySelectorAll(".katex")) {
+    const tex = math.querySelector('annotation[encoding="application/x-tex"]')?.textContent;
+    math.replaceWith(tex === undefined ? math.textContent : texReading(tex));
+  }
+  for (const inline of copy.querySelectorAll(".doc-math-inline")) {
+    const text = inline.textContent;
+    const tex = text.match(/^\s*\\\(([\s\S]*)\\\)\s*$/);
+    inline.textContent = tex ? texReading(tex[1]) : text;
+  }
+  for (const node of copy.querySelectorAll('[data-doc-dev], [aria-hidden="true"], script, style')) node.remove();
+  return copy.textContent.replace(/[​⁠]/g, "").replace(/\s+/g, " ").trim();
+}
+
+const tabText = (tab) => tab.textContent.replace(/[​⁠]/g, "").replace(/\s+/g, " ").trim();
+
+/** The entries of `main` (tree.mjs), each heading's and tab's element as its `ref`. */
+export function entriesOf(main) {
+  const heads = new Set([...main.querySelectorAll(HEADING)].filter((heading) => !heading.closest(LEFT_OUT)));
+  const holding = new Set(); // the boxes on the way to a heading: the only ones walked into
+  for (const heading of heads) {
+    for (let node = heading.parentElement; node && node !== main && !holding.has(node); node = node.parentElement) holding.add(node);
+  }
+  const named = new Map(); // a heading with no block id is named by its level and text, the second of a name numbered
+  const keyOf = (heading, text) => {
+    const id = heading.getAttribute("data-block-id");
+    if (id) return `b:${id}`;
+    const base = `t:${heading.localName}:${text}`;
+    const seen = named.get(base) ?? 0;
+    named.set(base, seen + 1);
+    return seen ? `${base}#${seen}` : base;
+  };
+
+  // A tabs area by its name (data-doc-sheets: what the report calls it, kept as the editor gives it
+  // a block id, so a fold of its tab stays), else its block id; a second area of a name numbered.
+  const areas = new Map();
+  const areaKeyOf = (area) => {
+    const base = area.getAttribute("data-doc-sheets") || area.getAttribute("data-block-id") || "tabs";
+    const seen = areas.get(base) ?? 0;
+    areas.set(base, seen + 1);
+    return seen ? `${base}#${seen}` : base;
+  };
+
+  function tabsOf(area) {
+    const row = area.querySelector(SHEETS.row);
+    const areaKey = areaKeyOf(area);
+    const panels = [...area.children].filter((child) => child.hasAttribute(SHEETS.panelKey));
+    const tabs = row ? [...row.querySelectorAll(SHEETS.tabsOfRow)] : [];
+    return {
+      kind: "tabs",
+      key: `a:${areaKey}`,
+      tabs: tabs.map((tab) => {
+        const id = tab.getAttribute(SHEETS.tabKey);
+        const panel = panels.find((candidate) => candidate.getAttribute(SHEETS.panelKey) === id) ?? null;
+        return { key: `tab:${areaKey}:${id}`, text: tabText(tab), shown: Boolean(panel && !panel.hidden), ref: tab, entries: panel && holding.has(panel) ? walk(panel) : [] };
+      }),
+    };
+  }
+
+  function walk(container) {
+    const out = [];
+    for (const child of container.children) {
+      if (heads.has(child)) {
+        const text = headingText(child);
+        if (text) out.push({ kind: "heading", key: keyOf(child, text), level: Number(child.localName[1]), text, ref: child });
+      } else if (!holding.has(child)) continue;
+      else if (child.matches(SHEETS.match)) out.push(tabsOf(child));
+      else if (child.matches(SCOPES)) out.push({ kind: "scope", entries: walk(child) });
+      else out.push(...walk(child));
+    }
+    return out;
+  }
+  return walk(main);
+}
+
+const LISTED = `${HEADING}, ${SHEETS.tab}, ${SHEETS.match}`;
+const lists = (node) => node.nodeType === 1 && (node.matches(LISTED) || node.querySelector(LISTED) !== null);
+
+/**
+ * Whether a change of the page (a MutationObserver's records) may change what the outline lists: an
+ * attribute it reads, text in a heading or a tab, a heading, a tab or a tabs area put in or taken out
+ * (or a box holding one); not the words typed in other text, nor what holds no heading.
+ */
+export function touchesOutline(records) {
+  for (const record of records) {
+    if (record.type === "attributes") return true;
+    const at = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+    if (at?.closest?.(`${HEADING}, ${SHEETS.tab}`)) return true;
+    if (record.type === "childList" && [...record.addedNodes, ...record.removedNodes].some(lists)) return true;
+  }
+  return false;
+}

package/browser/editor/page/outline/strip.mjs

@@ -0,0 +1,281 @@
+import { element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { ROW } from "./list.mjs";
+import { ticksOf } from "./tree.mjs";
+
+// The outline's narrow form (outline/index.mjs shows it where the page has no room for the list:
+// margin.mjs): a strip at the window's right edge of short lines, a line a row
+// shown (folds kept), as wide as the row is shallow, the current heading's dark; 240px of lines at the
+// most (tree.mjs ticksOf: a long report's deepest levels left out).
+//
+// The pointer reaching it shows the list as a card beside it at once (faded in, sliding a little from
+// the strip), its top level with the strip's, and each line is a target of its own: the one nearest the
+// pointer turns blue and stands out (longer, thicker), and the card lights its row (index.mjs: filled
+// as under the pointer, a blue segment on the guide), kept in view; moving up and down moves both. The
+// pointer over the card's rows lights their lines the same way. A click on a line goes to its heading
+// (`choose`), as a click on a row does; the card stays while the pointer is on the strip or the card,
+// and goes a moment after it leaves both (faded out), or at a press elsewhere.
+//
+// The keyboard: the strip is one button (Enter or Space opens the card with the focus in its list;
+// again, or Esc in the list, closes it with the focus back on the strip; the focus leaving both (Tab)
+// or a heading chosen by a key closes it too). Esc on the strip itself leaves it as Esc in the list
+// does (escape). Folding in the card keeps it open; it follows the page's scroll (its current row)
+// while open, unless the pointer is on it. With no headings the strip shows the outline's icon.
+
+// Three lines, the lower two set in: the 目录 icon (the workbench's 更多 row draws the same, icons.ts outline).
+export const OUTLINE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.75 5.25h12.5M7.25 10h9M7.25 14.75h9"/></svg>';
+export const STRIP_TOP = 54; // the lines' top in the window, and their card's
+const ROOM = 16 + 16; // their padding and a margin below them
+const HIDE = 280; // ms the card stays after the pointer left the strip and the card
+const SHOW = { ms: 140, slide: 8 }; // the card coming: a fade, sliding this far from the strip
+const FADE = { top: 24, bottom: 32 }; // the card's faded ends (index.mjs STYLE): a lit row kept clear of them
+
+const still = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+
+/**
+ * list: list.mjs (shown in the card). opened(), closed(): the card opened, closed. escape(): Esc on
+ * the strip. choose(row): a line clicked, row its index in the rows drawn.
+ */
+export function createStrip({ list, opened, closed, escape, choose }) {
+  const button = element("div", { class: "ge-outline-ticks", role: "button", tabindex: "0", "aria-label": t("目录"), "aria-expanded": "false" });
+  const strip = element("div", { class: "ge-outline-strip", "data-doc-dev": "", hidden: "" }, button);
+  const scroll = element("div", { class: "ge-outline-scroll" });
+  const card = element("nav", { class: "ge-outline-card", "aria-label": t("目录"), "data-doc-dev": "", hidden: "" }, scroll);
+  let open = false;
+  let keyed = false; // opened by a key (the focus in it), not by the pointer
+  let over = false; // the pointer on the strip or the card
+  let drawn = "";
+  let ticks = []; // the lines drawn: { row, width }
+  let lines = []; // and their nodes
+  let hot = -1; // the row lit (a line under the pointer, or a row of the card)
+  let hideTimer = 0;
+
+  /** The lines for `rows` (tree.mjs rowsOf), row `marked` the current one. */
+  function draw(rows, marked) {
+    const height = Math.max(40, innerHeight - STRIP_TOP - ROOM);
+    const drawing = ticksOf(rows, height, marked);
+    const key = `${height}:${drawing.gap}:${drawing.current}:${drawing.ticks.map((tick) => `${tick.row}.${tick.width}`).join(",")}`;
+    if (key === drawn) return;
+    drawn = key;
+    ticks = drawing.ticks;
+    if (!rows.length) {
+      lines = [];
+      button.style.removeProperty("--ge-tick-gap");
+      button.replaceChildren(element("span", { class: "ge-outline-none", html: OUTLINE_ICON }));
+      return;
+    }
+    button.style.setProperty("--ge-tick-gap", `${drawing.gap}px`);
+    lines = ticks.map((tick, index) => {
+      const line = element("i");
+      line.style.setProperty("--ge-tick", `${tick.width}px`);
+      if (index === drawing.current) line.dataset.current = "";
+      return line;
+    });
+    button.replaceChildren(...lines);
+    paint();
+  }
+
+  // The line that stands for row `row`: its own, or (left out) the last line before it.
+  function lineOf(row) {
+    let at = -1;
+    if (row >= 0) ticks.forEach((tick, index) => { if (tick.row <= row) at = index; });
+    return at;
+  }
+
+  function paint() {
+    const at = lineOf(hot);
+    lines.forEach((line, index) => line.toggleAttribute("data-hot", index === at));
+  }
+
+  // The line nearest the pointer's height (the gaps and the strip's ends belong to the nearest).
+  function lineAt(y) {
+    let best = -1;
+    let distance = Infinity;
+    lines.forEach((line, index) => {
+      const rect = line.getBoundingClientRect();
+      const off = Math.abs(y - (rect.top + rect.bottom) / 2);
+      if (off < distance) {
+        distance = off;
+        best = index;
+      }
+    });
+    return best;
+  }
+
+  // Row `row` lit, its line and its row in the card; `keep`: the card scrolled to show it (the
+  // pointer on the strip, not on the card's rows themselves).
+  function light(row, { keep = false } = {}) {
+    if (row === hot) return;
+    hot = row;
+    paint();
+    const node = list.light(open ? row : -1);
+    if (keep && node) inView(node);
+  }
+
+  // As little scrolled as shows `node` whole, clear of the card's faded ends.
+  function inView(node) {
+    const top = node.getBoundingClientRect().top - scroll.getBoundingClientRect().top + scroll.scrollTop;
+    const view = scroll.clientHeight;
+    if (top - FADE.top < scroll.scrollTop) scroll.scrollTop = Math.max(0, top - FADE.top);
+    else if (top + ROW + FADE.bottom > scroll.scrollTop + view) scroll.scrollTop = Math.min(scroll.scrollHeight - view, top + ROW + FADE.bottom - view);
+  }
+
+  function showCard() {
+    for (const animation of card.getAnimations?.() ?? []) animation.cancel();
+    card.hidden = false;
+    if (!still()) card.animate?.([{ opacity: 0, transform: `translateX(${SHOW.slide}px)` }, { opacity: 1, transform: "none" }], { duration: SHOW.ms, easing: "ease-out" });
+  }
+
+  function hideCard() {
+    if (card.hidden) return;
+    const animation = still() ? null : card.animate?.([{ opacity: 1, transform: "none" }, { opacity: 0, transform: `translateX(${SHOW.slide / 2}px)` }], { duration: 100, easing: "ease-in", fill: "forwards" });
+    const finish = () => {
+      animation?.cancel();
+      if (!open) card.hidden = true;
+    };
+    if (animation) animation.onfinish = finish;
+    else finish();
+  }
+
+  /** Open the card; `focus`: by a key, the focus in its list (on its current row). */
+  function openCard({ focus = false } = {}) {
+    clearTimeout(hideTimer);
+    if (open) {
+      if (focus) {
+        keyed = true;
+        list.focus(list.marked >= 0 ? list.marked : 0);
+      }
+      return;
+    }
+    open = true;
+    keyed = focus;
+    button.setAttribute("aria-expanded", "true");
+    if (list.node.parentNode !== scroll) scroll.append(list.node);
+    showCard();
+    // The row lit (else the current one) in the card's middle (as far as the list goes), not at its edge.
+    const shown = list.light(hot);
+    const row = shown ?? list.rowAt(list.marked);
+    if (row) {
+      const top = row.getBoundingClientRect().top - scroll.getBoundingClientRect().top + scroll.scrollTop;
+      scroll.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, Math.round(top - (scroll.clientHeight - ROW) / 2)));
+    }
+    if (focus) list.focus(list.marked >= 0 ? list.marked : 0);
+    opened?.();
+  }
+
+  /** Close the card; `focus`: the focus back on the strip (Esc in it). */
+  function closeCard({ focus = false } = {}) {
+    clearTimeout(hideTimer);
+    if (!open) return;
+    open = false;
+    keyed = false;
+    over = button.matches(":hover"); // (the card going from under a still pointer tells no leaving)
+    button.setAttribute("aria-expanded", "false");
+    list.light(-1);
+    hideCard();
+    if (focus) button.focus({ preventScroll: true });
+    closed?.();
+  }
+
+  const inside = (node) => Boolean(node && (card.contains(node) || button.contains(node)));
+  const focusIn = () => inside(document.hasFocus() ? document.activeElement : null);
+
+  // The pointer: on the strip, the card at once and the line nearest it lit; leaving both, the card
+  // goes a moment later (crossing the gap to the card keeps it), unless the keys opened it and hold
+  // the focus in it. A touch has no leaving: its card stays until a press elsewhere.
+  function enter() {
+    over = true;
+    clearTimeout(hideTimer);
+  }
+  function leave(event) {
+    if (event.pointerType === "touch" || inside(event.relatedTarget)) return;
+    over = false;
+    light(-1);
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      if (!over && !(keyed && focusIn())) closeCard();
+    }, HIDE);
+  }
+  button.addEventListener("pointerenter", (event) => {
+    enter();
+    openCard();
+    light(ticks[lineAt(event.clientY)]?.row ?? -1, { keep: true });
+  });
+  button.addEventListener("pointermove", (event) => light(ticks[lineAt(event.clientY)]?.row ?? -1, { keep: true }));
+  button.addEventListener("pointerleave", leave);
+  card.addEventListener("pointerenter", enter);
+  card.addEventListener("pointerleave", leave);
+  // A row of the card under the pointer: its line lit on the strip.
+  card.addEventListener("pointerover", (event) => {
+    const row = event.target?.closest?.(".ge-outline-row");
+    light(row ? Number(row.dataset.index) : -1);
+  });
+
+  // A click on the strip goes to the heading of the line nearest it (a key's click is the keys' below).
+  button.addEventListener("click", (event) => {
+    if (event.detail === 0) return;
+    const row = ticks[lineAt(event.clientY)]?.row;
+    if (row !== undefined) choose?.(row);
+    else openCard();
+  });
+  button.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !open && !event.isComposing) {
+      event.preventDefault();
+      escape?.();
+      return;
+    }
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    if (open && keyed) closeCard({ focus: true });
+    else openCard({ focus: true });
+  });
+  // A press anywhere but on the strip and its card closes the card.
+  document.addEventListener("pointerdown", (event) => {
+    if (open && !inside(event.target)) closeCard();
+  }, true);
+  // So does the focus leaving both (Tab out of it, to the workbench or another window, as the block
+  // menu closes), unless the pointer holds it there: looked at once the focus has settled, since rows
+  // drawn again (a fold) take the focus with them and give it back.
+  const left = () => setTimeout(() => {
+    if (open && !over && !focusIn()) closeCard();
+  }, 0);
+  card.addEventListener("focusout", left);
+  button.addEventListener("focusout", left);
+
+  return {
+    strip,
+    card,
+    scroll,
+    draw,
+    openCard,
+    closeCard,
+    get open() { return open; },
+    /** Whether the keys opened the card (a heading chosen by a key closes it; by the pointer, it stays while the pointer is on it). */
+    get keyed() { return keyed; },
+    focusButton: () => button.focus({ preventScroll: true }),
+    /** Show the strip (or take it away, its card with it). `fade`: it comes faded in. */
+    show(on, { fade = false } = {}) {
+      clearTimeout(hideTimer);
+      if (!on) {
+        if (open) {
+          open = false;
+          keyed = false;
+          button.setAttribute("aria-expanded", "false");
+          for (const animation of card.getAnimations?.() ?? []) animation.cancel();
+          card.hidden = true;
+        }
+        over = false;
+        hot = -1;
+        list.light(-1);
+        strip.hidden = true;
+        return;
+      }
+      if (list.node.parentNode !== scroll) scroll.append(list.node);
+      drawn = "";
+      for (const animation of strip.getAnimations?.() ?? []) animation.cancel();
+      strip.hidden = false;
+      if (fade && !still()) strip.animate?.([{ opacity: 0 }, { opacity: 1 }], { duration: SHOW.ms, easing: "ease-out" });
+    },
+    holds: (target) => strip.contains(target) || card.contains(target),
+  };
+}