@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/quiet.mjs

@@ -0,0 +1,48 @@
+import { t } from "../../shared/i18n/index.mjs";
+
+// What 减少通知 leaves out (the workbench's 设置: shared/preferences.mjs quietNotices; notices.mjs
+// say() asks routine() of every notice but an error): the notices of the everyday operations, which
+// users of Notion and Feishu know and notion-lite says nothing of (its snackbar speaks only of a
+// copy to the clipboard, a failure, an upload, an import or an export):
+//   - what was just done, which the page shows: moved, deleted, pasted, turned into, inserted,
+//     formatted, resized, colored, indented, folded… (every notice that offers Ctrl+Z is one);
+//   - how to go on: a selection's keys, a drag's, the format the next letters take;
+//   - a copy made with Ctrl+C, a save asked for with Ctrl+S (the page saves by itself), a drag or
+//     a resize cancelled or ending where it began, and a key that had nothing to do (Tab on a list's
+//     first item, Shift+Tab on its outermost, a block moved past the end of its row).
+// What still shows is what the reader must act on or would not know otherwise: errors, a save that
+// failed or is held, conflicts, text that could not be put back, something refused with the reason
+// ("这里不能粘贴块。"), what an action did that the page does not show (a link copied from a menu, a
+// web page that refused a frame shown as a bookmark, lines pasted into one, a detail card no longer
+// kept, a page whose preview could not be read) and the result of a long one (an export done).
+// Each is matched in the UI's language, its {0}… standing for anything.
+
+// Notices that offer Ctrl+Z but say what the page does not show: they still show.
+const TOLD = () => [
+  t("入口已移除：页面上没有地方能打开这张详情卡片了 · Ctrl+Z 撤销"),
+  `${t("暂不支持获取该网站的预览信息")}{0}`, // links/views.mjs UNREAD: the title or icon of a link left as its address
+];
+
+const ROUTINE = () => [
+  t("{0} · Ctrl+Z 撤销"), // whatever was just done
+  t("已新建分区 · 标题、分割线都可以按需加"),
+  t("已复制 {0} · 在要放的块里按 Ctrl+V 粘贴到它后面"), t("已复制 {0} 格"),
+  t("已保存。"), t("{0}。", t("标题已更新")),
+  t("已取消调整。"), t("已取消移动。"), t("位置没有变化。"),
+  t("已选中 {0} 块 · Delete 删除 · 拖动手柄一起移动 · Esc 取消"), t("已选中{0} · Delete 删除{1} · Esc 取消"),
+  t("已选中{0} · Delete 删除 · Esc 取消{1}"), t("已选中这一块的文字 · 再按 {0} 选中{1}"), t("已选中这一块的文字"), // Ctrl+A (select-all/)
+  t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消"),
+  t("接着打的字：{0} · 再按一次取消"), t("接着打的字照旧"),
+  t("链接：{0}"), t("链接已移除。"),
+  t("这一项上面没有同级的项，不能再缩进。"), t("这一项已经在最外层。"), t("选中的项上面没有同级的项，不能再缩进。"), t("选中的项已经在最外层。"),
+  t("{0}已经在{1}。"), t("这里只有{0}；可以拖动手柄移到别处。"),
+];
+
+const patternOf = (said) => new RegExp(`^${said.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\\{\d+\\\}/g, "[\\s\\S]*?")}$`);
+let patterns = null;
+
+/** Whether `text` (in the UI's language) is a routine notice, one 减少通知 leaves out. */
+export function routine(text) {
+  patterns ??= { told: TOLD().map(patternOf), routine: ROUTINE().map(patternOf) };
+  return !patterns.told.some((pattern) => pattern.test(text)) && patterns.routine.some((pattern) => pattern.test(text));
+}

package/browser/editor/page/resize/index.mjs

@@ -0,0 +1,327 @@
+import { Z } from "../../../shared/layers.mjs";
+import { SPAN } from "../../../shared/media.mjs";
+import { CENTERED } from "../../components/figure/index.mjs";
+import { RESIZABLE, RESIZABLE_AT, SIZES } from "../../components/registry.mjs";
+import { scrollHeight } from "../../components/table/index.mjs";
+import { cancelOnEscape, endsGesture, gestureLock } from "../gesture.mjs";
+import { kept } from "../kept.mjs";
+import { note, own } from "../overlays.mjs";
+import { addStyle, element, mount } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Resizing chart cards and tables in the preview ("Sizes" in the kit's styles/sizes.css). With the pointer on the
+// right edge of a card or table, or on its bottom edge (a chart's plot height, a table's scroll
+// height), the cursor changes; dragging shows a blue line where the edge goes and the size that
+// makes, and letting go applies it as one undo step (Esc cancels). Widths are shares of the width
+// the block stands in: the reading width, or its column's. A card's width snaps to the middle and
+// to the end; a centered card grows on both sides. A table's
+// width moves its own right end by as much as the pointer moves, also when the table is wider than
+// its frame and scrolls in it; it snaps to the width it stands in, and past it the table is wider than
+// the text and scrolls sideways in its frame, which stays at that width. (The columns of a row
+// are resized by the gaps between them: columns/.)
+// A table of a dozen rows or fewer has no bottom edge to drag. A code block's bottom edge sets the
+// height of its frame: shorter than its code, the code scrolls inside it, and the edge snaps to the
+// height that shows all of it (no height of its own). Letting go where the drag started changes
+// nothing. Anything that ends the press another way (the capture lost, the window losing the
+// focus, the page hidden) cancels it; the lines and the label belong to the drag (overlays.mjs). A
+// code block's bottom edge has no label: the line alone (where it snaps, the status line says after).
+
+const STYLE = `
+  ${gestureLock("data-ge-resize=\"x\"", { cursor: "ew-resize" })}
+  ${gestureLock("data-ge-resize=\"y\"", { cursor: "ns-resize" })}
+  .ge-resize-line { position: fixed; left: 0; top: 0; z-index: ${Z.guide}; border-radius: 2px; background: rgb(151 197 241); pointer-events: none; }
+  .ge-resize-label { position: fixed; left: 0; top: 0; z-index: ${Z.label}; padding: 2px 7px; border-radius: 5px; background: var(--doc-accent, #2678d8); color: #fff; font: 12px/18px var(--doc-font, system-ui, sans-serif); white-space: nowrap; pointer-events: none; }
+`;
+const GRAB = { inside: 3, outside: 8 }; // how near an edge the pointer takes it, inside and outside the block (px)
+const SNAP = 14; // px
+const MIN_WIDTH = 160; // px: the least a card's edge is dragged to (a table's is its columns' floors)
+// The sizes (name and range) are each component's description's (registry SIZES): the same ones the
+// server checks a size by.
+const range = (kind, name) => SIZES[kind][name];
+// The size a kind's bottom edge sets (`height` among its sizes), and that size's least: a code block's
+// frame is about a line and a half.
+const heightOf = (kind) => Object.keys(SIZES[kind]).find((name) => SIZES[kind][name].height);
+const heightRange = (kind) => range(kind, heightOf(kind));
+
+/**
+ * units: Map(id -> { kind }) from the edit map. active(): whether resizing may start.
+ * look(element, { sizes }, select): the editor's undoable change of sizes. say(text): the status line.
+ * owns(node): whether a table's right and bottom edges are the table tools' (table/widths.mjs: a
+ * click arms one, a drag then is this tool's, `startTable`).
+ */
+export function createResize({ units, active, look, say, owns = () => false }) {
+  addStyle(STYLE);
+  let hover = null; // { node, axis } under the pointer
+  let drag = null;
+
+  // Blocks made or converted on the page carry their kind (a code block made from a paragraph).
+  const kindOf = (node) => node.getAttribute("data-ge-unit-kind") ?? units.get(Number(node.getAttribute("data-ge-unit")))?.kind;
+  const codeOf = (node) => node.querySelector(":scope > pre");
+  // A card's chart: the svg its host holds, straight in it or beside controls of its own (a part).
+  const plot = (node) => node.querySelector(".doc-chart > svg") ?? node.querySelector(".doc-chart svg");
+  const sizeOf = (node, name) => node.style.getPropertyValue(name).trim() || null;
+  // The page's gutter in full width (--doc-wide-gutter) while editing: the room the handle takes
+  // beside the blocks (--ge-edge-room, handle/; the tool works only while editing).
+  const gutter = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ge-edge-room")) || 0;
+  const SHORT = 12; // a table with this many rows or fewer shows them all: no height to set
+
+  // The blocks that may resize (`resizable`) of the open modal dialog if there is one, else of the page: kept
+  // between moves (kept.mjs), as looking them up and measuring each on every move cost up to 1.8ms a
+  // move on a long report.
+  const blocks = kept(() => {
+    const scope = document.querySelector("dialog[open]") ?? document.querySelector("main");
+    return [...(scope?.querySelectorAll(RESIZABLE_AT) ?? [])];
+  });
+  // One of them the reader can reach now: visible, of a kind that resizes, not folded or inert.
+  const reachable = (node) => RESIZABLE.has(kindOf(node)) && node.getClientRects().length > 0 && !node.closest("[inert]") && !node.matches(".doc-code--folded");
+
+  // Which edge of which block the pointer is on: the right one of a card or table, or the bottom
+  // one of a table, a card with a chart or a code block that is (or may be) shorter than its code.
+  // Only a block whose edges the pointer is within the grab of is looked at any further.
+  function edgeAt(x, y) {
+    for (const node of blocks()) {
+      const rect = node.getBoundingClientRect();
+      const near = x >= Math.min(rect.left, rect.right - GRAB.inside) && x <= rect.right + GRAB.outside && y >= Math.min(rect.top, rect.bottom - GRAB.inside) && y <= rect.bottom + GRAB.outside;
+      if (!near || !reachable(node)) continue;
+      const kind = kindOf(node);
+      if (kind !== "code" && !(kind === "table" && owns(node)) && y >= rect.top && y <= rect.bottom && x >= rect.right - GRAB.inside && x <= rect.right + GRAB.outside) return { node, axis: "x" };
+      if (!(x >= rect.left && x <= rect.right && y >= rect.bottom - GRAB.inside && y <= rect.bottom + GRAB.outside)) continue;
+      const code = kind === "code" ? codeOf(node) : null;
+      const tall = kind === "table" ? !owns(node) && node.querySelectorAll(":scope > table > tbody > tr").length > SHORT
+        : kind === "code" ? Boolean(code) && (code.scrollHeight > heightRange(kind).min * 2 || sizeOf(node, heightOf(kind)) !== null) : plot(node);
+      if (tall) return { node, axis: "y" };
+    }
+    return null;
+  }
+
+  function setHover(next) {
+    hover = next;
+    const axis = next?.axis ?? null;
+    if (document.documentElement.getAttribute("data-ge-resize") === axis) return; // the same on every move along an edge
+    if (axis) document.documentElement.setAttribute("data-ge-resize", axis);
+    else document.documentElement.removeAttribute("data-ge-resize");
+  }
+
+  function contentBox(container) {
+    const rect = container.getBoundingClientRect();
+    const style = getComputedStyle(container);
+    const left = rect.left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+    const right = rect.right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+    return { left, right, width: right - left };
+  }
+
+  // ---------- widths ----------
+
+  // The share of the width it stands in a right edge at x gives; a centered card's is twice its half.
+  function shareAt(x) {
+    const { rect, box, centered } = drag;
+    if (centered) return (2 * (x - (box.left + box.right) / 2)) / box.width;
+    return (x - rect.left) / box.width;
+  }
+
+  // A table's width goes by how far the pointer moved: the table's own right
+  // end moves that much, also when the table is wider than its frame and scrolls in it (its end
+  // then lies past the frame's edge, or at it when scrolled to the end). It snaps back where it
+  // started and to the reading width; past that it is wider than the text, as far as the window goes.
+  // A table narrower than the text never scrolls: it goes no narrower than its columns' readable
+  // floors (tables.js leaves them on the wrapper).
+  function tableWidthAt(x) {
+    const { box, table } = drag;
+    const far = Math.max(box.right, document.documentElement.clientWidth - gutter());
+    const width = (at) => table.width + (at - table.press);
+    const narrowest = table.press - (table.width - Math.max(MIN_WIDTH, table.floor));
+    let edge = Math.min(Math.max(x, narrowest), far);
+    const snaps = [{ x: table.press, label: t("原宽度"), keep: true }, { x: table.press + (box.width - table.width), label: t("铺满正文") }];
+    const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
+    if (snap) edge = snap.x;
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    // Rounded up, so the frame is never narrower than where it was let go (at the floors, say).
+    const share = Math.ceil(Math.max(range("table", SPAN).min, width(edge) / box.width) * 1000) / 1000;
+    const label = snap?.label ?? (share > 1 ? t("超宽表 · 表宽 {0}px，横向滚动", Math.round(width(edge)))
+      : edge <= narrowest + 0.5 ? t("最窄 · {0}%", Math.round(share * 100)) : `${Math.round(share * 100)}%`);
+    return { edge, label, value: Math.abs(share - 1) < 0.005 ? "1" : String(Math.min(share, range("table", SPAN).max)) };
+  }
+
+  // Where the edge may go and where it snaps: back where it started (no change), the middle (a
+  // card), the end of the line or the reading width.
+  function widthAt(x) {
+    const { node, kind, rect, box, centered } = drag;
+    if (kind === "table") return tableWidthAt(x);
+    const center = (box.left + box.right) / 2;
+    const far = box.right;
+    const near = centered ? center + MIN_WIDTH / 2 : rect.left + MIN_WIDTH;
+    const fromStart = Math.abs(rect.left - box.left) < 2;
+    const snaps = [{ x: rect.right, label: t("原宽度"), keep: true }];
+    const middle = centered ? center + box.width / 4 : box.left + box.width / 2;
+    if (kind === "figure" && middle > near) snaps.push({ x: middle, label: centered ? t("半宽 · 居中") : fromStart ? t("半宽") : t("到中线") });
+    snaps.push({ x: box.right, label: fromStart || centered ? t("全宽") : t("占满本行") });
+    let edge = Math.min(Math.max(x, near), far);
+    const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
+    if (snap) edge = snap.x;
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    const share = Math.round(Math.max(range(kind, SPAN).min, shareAt(edge)) * 1000) / 1000;
+    const whole = Math.abs(share - 1) < 0.005;
+    const label = snap?.label ?? `${Math.round(share * 100)}%${centered ? t(" · 居中") : ""}`;
+    // A card at the whole width is the default.
+    const value = whole ? (kind === "figure" && !centered ? null : "1") : String(Math.min(share, range(kind, SPAN).max));
+    return { edge, label, value };
+  }
+
+  // ---------- heights ----------
+
+  // The plot's height as drawn: at least 280px wide, scaled down in a narrower card, so the
+  // height set is the viewBox's, not the one shown.
+  const drawnHeight = (svg) => svg.viewBox?.baseVal?.height || svg.getBoundingClientRect().height;
+
+  // A chart card: the plot's height, never below what the chart needs; back where it started
+  // changes nothing. A table: its scroll area,
+  // at most all its rows. A code block: its frame (a code card's header aside), at most its whole
+  // code, which it snaps to.
+  function heightAt(y) {
+    const { node, kind, rect, before } = drag;
+    if (kind === "code") {
+      const code = codeOf(node);
+      const header = rect.height - code.getBoundingClientRect().height;
+      const whole = rect.height + (code.scrollHeight - code.clientHeight); // all its lines, no scrolling
+      const height = Math.min(Math.max(y - rect.top, Math.min(whole, header + heightRange(kind).min)), whole);
+      if (before !== null && Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: before };
+      if (whole - height <= SNAP) return { edge: rect.top + whole, label: t("显示全部代码"), value: null };
+      const frame = Math.round(height - header);
+      return { edge: rect.top + header + frame, label: t("高 {0}px · 其余滚动查看", frame), value: `${frame}px` };
+    }
+    if (kind === "figure") {
+      const svg = plot(node);
+      const drawn = drawnHeight(svg);
+      const scale = svg.getBoundingClientRect().height / drawn || 1;
+      const floor = 160; // the least a chart is drawn at (a softer floor than the one a size is checked by)
+      if (Math.abs(rect.bottom - y) <= SNAP) return { edge: rect.bottom, label: t("原高度"), value: before };
+      // Level with a card beside it (in another column of its row): the bottoms meet.
+      const beside = drag.beside.find((bottom) => Math.abs(bottom - y) <= SNAP);
+      const height = Math.round(Math.min(Math.max(drawn + ((beside ?? y) - rect.bottom) / scale, floor), heightRange(kind).max));
+      const edge = rect.bottom + (height - drawn) * scale;
+      return { edge, label: beside !== undefined && Math.abs(edge - beside) < 1.5 ? t("与旁边对齐 · 图表高 {0}px", height) : t("图表高 {0}px", height), value: `${height}px` };
+    }
+    const all = node.scrollHeight + (node.offsetHeight - node.clientHeight);
+    let height = Math.min(Math.max(y - rect.top, heightRange(kind).min), all);
+    if (Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: drag.before };
+    if (height >= all - 2) {
+      const fits = all <= scrollHeight(node); // the default scroll area shows them all
+      return { edge: rect.top + all, label: t("显示全部行"), value: fits ? null : "none" };
+    }
+    height = Math.round(height);
+    return { edge: rect.top + height, label: t("高 {0}px", height), value: `${height}px` };
+  }
+
+  // The bottoms of the cards standing beside a card: alone in another column of its row of columns.
+  function besideBottoms(node) {
+    const column = node.parentElement;
+    const row = column?.classList.contains("doc-column") ? column.parentElement : null;
+    if (!row?.classList.contains("doc-columns")) return [];
+    return [...row.children].filter((other) => other !== column && other.classList.contains("doc-column"))
+      .flatMap((other) => [...other.children].filter((card) => card.matches("figure.doc-figure") && card.getClientRects().length > 0))
+      .map((card) => card.getBoundingClientRect().bottom);
+  }
+
+  // ---------- dragging ----------
+
+  function start(event, { node, axis }) {
+    const kind = kindOf(node);
+    const name = axis === "x" ? SPAN : heightOf(kind);
+    const before = sizeOf(node, name);
+    const rect = node.getBoundingClientRect();
+    drag = {
+      node, axis, kind, name, before, rect,
+      box: contentBox(node.parentElement),
+      // A card's height snaps level with the cards beside it: the bottoms of those in the other columns of its row.
+      beside: axis === "y" && kind === "figure" ? besideBottoms(node) : [],
+      centered: axis === "x" && kind === "figure" && node.classList.contains(CENTERED),
+      // A table's whole width (past its frame when it scrolls sideways), where the press was, and
+      // whether it is scrolled to its end.
+      table: axis === "x" && kind === "table" ? {
+        width: Math.max(rect.width, node.scrollWidth + (node.offsetWidth - node.clientWidth)),
+        floor: Number(node.dataset.docMinWidth) || 0,
+        press: event.clientX,
+        atEnd: node.scrollLeft + node.clientWidth >= node.scrollWidth - 2,
+      } : null,
+      label: kind === "code" ? null : element("div", { class: "ge-resize-label" }),
+      result: null,
+    };
+    const session = drag;
+    session.lines = (session.centered ? [0, 1] : [0]).map(() => element("div", { class: "ge-resize-line" }));
+    for (const part of [session.label, ...session.lines].filter(Boolean)) mount(own(part, "resize", { owner: node, alive: () => drag === session }));
+    note("resize", `start ${axis}`);
+    document.documentElement.setPointerCapture?.(event.pointerId);
+    update(event.clientX, event.clientY);
+  }
+
+  function update(x, y) {
+    const { axis, rect, box, lines, label } = drag;
+    drag.result = axis === "x" ? widthAt(x) : heightAt(y);
+    const { edge } = drag.result;
+    if (axis === "x") {
+      const mirror = 2 * ((box.left + box.right) / 2) - edge;
+      lines.forEach((line, index) => Object.assign(line.style, {
+        width: "2px", height: `${Math.round(rect.height)}px`,
+        transform: `translate(${Math.round((index ? mirror : edge) - 1)}px, ${Math.round(rect.top)}px)`,
+      }));
+      if (label) label.style.transform = `translate(${Math.round(Math.min(edge + 10, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.max(8, y - 30))}px)`;
+    } else {
+      Object.assign(lines[0].style, { width: `${Math.round(rect.width)}px`, height: "2px", transform: `translate(${Math.round(rect.left)}px, ${Math.round(edge - 1)}px)` });
+      if (label) label.style.transform = `translate(${Math.round(Math.min(x + 12, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.min(edge + 8, innerHeight - 28))}px)`;
+    }
+    if (label) label.textContent = drag.result.label;
+  }
+
+  function finish(commit) {
+    if (!drag) return;
+    const { node, axis, kind, name, before, lines, label, result, table } = drag;
+    note("resize", commit ? "released" : "cancelled");
+    drag = null;
+    lines.forEach((line) => line.remove());
+    label?.remove();
+    setHover(null);
+    if (commit && result && look(node, { sizes: { [name]: result.value } }, null)) {
+      say(t("已调整{0}{1}：{2} · Ctrl+Z 撤销", kind === "figure" ? t("卡片") : kind === "code" ? t("代码块") : t("表格"), axis === "x" ? t("宽度") : t("高度"), result.label));
+      // Scrolled to its end, a table stays so: its new end shows at the frame's edge, ready for the
+      // next drag (after tables.js has laid it out again, on the next frame).
+      if (table?.atEnd) requestAnimationFrame(() => requestAnimationFrame(() => { node.scrollLeft = node.scrollWidth; }));
+    }
+  }
+
+  // ---------- events ----------
+
+  document.addEventListener("pointermove", (event) => {
+    if (drag) return update(event.clientX, event.clientY);
+    const busy = !active() || event.buttons || document.documentElement.hasAttribute("data-ge-drag") || event.target?.closest?.("[data-doc-dev]");
+    setHover(busy ? null : edgeAt(event.clientX, event.clientY));
+  }, { passive: true, capture: true });
+  document.addEventListener("pointerdown", (event) => {
+    if (drag || event.button !== 0 || !active() || event.target?.closest?.("[data-doc-dev]")) return;
+    const at = edgeAt(event.clientX, event.clientY);
+    if (!at) return;
+    event.preventDefault(); // no caret, no text selection
+    event.stopImmediatePropagation(); // nor the editor's reaction to a press on the page
+    start(event, at);
+  }, true);
+  document.addEventListener("pointerup", () => { if (drag) finish(true); }, true);
+  // After pointerup the drag is over already; any other way it ends, it is cancelled (gesture.mjs).
+  endsGesture({ active: () => Boolean(drag), cancel: () => finish(false) });
+  cancelOnEscape({ active: () => Boolean(drag), cancel: () => { finish(false); say(t("已取消调整。")); } });
+
+  return {
+    /** A table's width ("x", from its right edge) or scroll height ("y", from its bottom edge) dragged, the press `event` on it (the table tools' armed edge). */
+    startTable(event, node, axis = "x") {
+      if (drag || !active()) return false;
+      setHover({ node, axis });
+      start(event, { node, axis });
+      return true;
+    },
+    /** Stop any resizing. */
+    hide() {
+      if (drag) finish(false);
+      setHover(null);
+    },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return drag ? [...drag.lines, drag.label].filter(Boolean) : []; },
+  };
+}

package/browser/editor/page/select-all/index.mjs

@@ -0,0 +1,262 @@
+import { BOXED, BOX_NAMES, KIND_NAMES, isLead, selectAllOf } from "../../components/registry.mjs";
+import { UNIT, boxKind, textEnd, unitElement, unitsOf } from "../core.mjs";
+import { editable, select } from "../caret.mjs";
+import { ZWSP } from "../../../shared/inline-spacing.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { shortcut } from "../tooltip.mjs";
+
+// Ctrl+A (⌘A) widening step by step (docs/editor.md, "Selecting all"). notion-lite's rule (its
+// editor/input/keys/text-keys.js and block-keys.js): the first press in a text block selects that
+// block's text, a press when it is all selected (or empty) selects the page's blocks, and with
+// blocks selected a press selects the page's. The user's (2026-10-23) puts the containers between,
+// one level a press:
+//
+//   1. the text block's own text (a list item's words, not the blocks it holds; a code block's code;
+//      a cell's text; the title's), the browser's selection, so the format bar shows for it;
+//   2. everything in the container block it stands in, as blocks are selected (a box selection's
+//      fills): a highlight block's blocks (not its icon, the box's lead, which notion-lite's callout
+//      has no block for), a disclosure's content (not its title, the disclosure's own text, as
+//      notion-lite selects a toggle's children without it), a quote's paragraphs, a column's blocks,
+//      the blocks of the tab shown, a detail card's content, the blocks a list item holds under its
+//      text (notion-lite's children of a list item, its own words not among them);
+//   3. the next container up, the one just selected whole among its blocks, and so on; a row of
+//      columns, a Sheet area and a table are a step of their own, the block whole (all of its
+//      columns, all of its tabs, all of its cells), above a column, a tab's panel and a cell;
+//   4. the page: every block of it (the header's lines and the page's blocks; not its title or its
+//      icon, the page's own and no blocks, as in Notion). In an open detail card its content is the
+//      top: the page behind it is not the card's (of two open, the one the press is in: openCard).
+//
+// Not containers: sections (the user's: 分区的不用管; a section's blocks are the page's), lists (an
+// item is a block of the flow it stands in, as Notion has no list block), the plain divs that group
+// blocks, the header and a Sheet's tab row. A press that would select what is selected already goes
+// on to the next step, so each press selects more (the top never, after a text block's text: the
+// block selected is more than its text, a page of one paragraph too); at the top it does nothing. A selection of blocks
+// (a box selection, a handle's) goes on from its blocks, a selection across blocks (text-select/)
+// from the blocks it touches (to the first container holding them all, its text being only a part),
+// selected cells (table/) from their table. A field of the page's own UI (the link card, the formula
+// editor, a menu's search, a tab being renamed) keeps the browser's Ctrl+A.
+
+const TEXT = "[data-ge-block], [data-ge-new][contenteditable='true']";
+
+const kindOf = (node) => node.getAttribute("data-ge-unit-kind");
+// A block of blocks with a box of its own around them (a highlight block; not a group, a plain div).
+const drawsBox = (node) => node.hasAttribute("data-ge-box") && BOXED.has(kindOf(node)) && boxKind(node) !== "plain";
+
+// On a Mac ⌘A (Ctrl+A is the line's start there, as in every text field), elsewhere Ctrl+A: notion-lite's isSelectAllKey.
+const MAC = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? "");
+
+/** Ctrl+A (⌘A on a Mac), no Shift or Alt. */
+export const isSelectAllKey = (event) => (MAC ? event.metaKey : event.ctrlKey) && !event.shiftKey && !event.altKey && event.key?.toLowerCase() === "a";
+
+/** The blocks a box holds as its own: its units without its lead (a highlight block's icon). */
+export const heldUnits = (box) => unitsOf(box).filter((unit) => !isLead(boxKind(box), kindOf(unit)));
+
+// What each step selects, in the reader's words: those of the box (`selectAll`), else its name's.
+function contentLabel(kind) {
+  const own = selectAllOf(kind).content;
+  return own === true ? t("{0}里的全部内容", BOX_NAMES[kind]) : own;
+}
+const wholeLabel = (unit) => t("整个{0}", KIND_NAMES[kindOf(unit)] ?? t("整体块"));
+
+/**
+ * What a selection of `units` reaches, to tell whether a step selects more: its text blocks, the
+ * blocks in it that hold none (a picture, a divider, a highlight block's icon), and a block of
+ * blocks drawing a box of its own (a highlight block: selected whole it is more than its blocks). A
+ * list and its items, a quote and its paragraphs reach the same; a list item whole reaches its own
+ * text besides the blocks it holds.
+ */
+export function coverage(units) {
+  const reached = new Set();
+  for (const unit of units) {
+    for (const node of [unit, ...unit.querySelectorAll(`${TEXT}, ${UNIT}`)]) {
+      if (node.matches(TEXT) || !node.querySelector(TEXT) || drawsBox(node)) reached.add(node);
+    }
+  }
+  return reached;
+}
+
+/** The innermost element around all of `nodes` (none being another's): the parent of one. */
+export function around(nodes) {
+  let at = nodes[0]?.parentElement ?? null;
+  while (at && !nodes.every((node) => node !== at && at.contains(node))) at = at.parentElement;
+  return at;
+}
+
+/**
+ * The open detail card a press is in: the one `from` stands in (the block or text block it goes on
+ * from; outside them all, none: the page), else the one holding the focus, else the one drawn over
+ * the others at its middle (a card opened from another's covers it; with no layout, the last). null: none.
+ */
+export function openCard(doc, from = null) {
+  if (from) return from.closest?.("dialog[open]") ?? null;
+  const focused = doc.activeElement?.closest?.("dialog[open]");
+  if (focused) return focused;
+  const open = [...doc.querySelectorAll("dialog[open]")];
+  const drawn = open.filter((dialog) => {
+    const box = dialog.getBoundingClientRect();
+    const hit = box.width > 0 ? doc.elementFromPoint?.(box.left + box.width / 2, box.top + box.height / 2) : null;
+    return Boolean(hit && dialog.contains(hit));
+  });
+  return drawn.at(-1) ?? open.at(-1) ?? null;
+}
+
+/**
+ * The top: the content of the detail card open where the press is (openCard: `from`, the node it
+ * goes on from, else the focus), else the page (the header's lines and the page's blocks). { units, label, top }.
+ */
+export function topStep(doc, from = null) {
+  const card = openCard(doc, from)?.querySelector('[data-ge-box-kind="dialog"]');
+  if (card) return { units: heldUnits(card), label: contentLabel("dialog"), top: true };
+  const main = doc.querySelector('main[data-ge-box-kind="main"]') ?? doc.querySelector("main");
+  if (!main) return { units: [], label: t("整个页面"), top: true };
+  const header = [...main.children].find((child) => boxKind(child) === "header");
+  const lines = header ? unitsOf(header).filter((unit) => kindOf(unit) !== "icon") : [];
+  return { units: [...lines, ...heldUnits(main)], label: t("整个页面"), top: true };
+}
+
+/**
+ * The steps above `start` (an element: the box or block the selection stands in), innermost
+ * first, the top last: [{ units, label, top? }]. A detail card's content is the last.
+ */
+export function stepsAbove(start) {
+  const steps = [];
+  for (let at = start; at; at = at.parentElement) {
+    const kind = at.hasAttribute?.("data-ge-box") ? boxKind(at) : null;
+    if (!kind) continue;
+    if (kind === "main") break;
+    const { content, whole, top = false } = selectAllOf(kind) ?? {};
+    if (content) {
+      const units = heldUnits(at);
+      if (units.length > 0) steps.push({ units, label: contentLabel(kind), top });
+      if (top) return steps;
+    }
+    if (whole) {
+      const owner = at.matches(UNIT) ? at : at.parentElement?.closest(UNIT);
+      if (owner && !steps.some((step) => step.units.length === 1 && step.units[0] === owner)) steps.push({ units: [owner], label: wholeLabel(owner) });
+    }
+  }
+  steps.push(topStep(start?.ownerDocument ?? document, start));
+  return steps;
+}
+
+/** The steps from text block `host` once its text is all selected: a table's cell the table whole first. */
+export function stepsFromText(host) {
+  const unit = unitElement(host);
+  if (!unit) return [topStep(host.ownerDocument, host)]; // the title, one beside a detail card's content: no block of their own
+  const whole = unit !== host && kindOf(unit) === "table" ? [{ units: [unit], label: wholeLabel(unit) }] : [];
+  return [...whole, ...stepsAbove(unit.parentElement)];
+}
+
+/**
+ * The first of `steps` that selects more than `reached` (coverage: what is selected now), holding
+ * it all; `strict` false: one holding it is enough (a selection across blocks, whose text may be a
+ * part of theirs). The top takes what it can (the title is no block of the page), and after a text
+ * block's text (`text`) even when it holds that block alone: the block selected is more than its
+ * text (notion-lite's press with the text all selected; a page or a detail card of one paragraph).
+ * null: none (the top is selected already).
+ */
+export function nextStep(steps, reached, { strict = true, text = false } = {}) {
+  for (const step of steps) {
+    const area = coverage(step.units);
+    const holds = [...reached].every((node) => area.has(node));
+    if (holds && (!strict || area.size > reached.size)) return step;
+    if (step.top && area.size > 0 && (!holds || text)) return step;
+  }
+  return null;
+}
+
+// The selection's part in a text block's own text, against all of it: whether it holds all of it
+// (an empty block's is all selected: notion-lite's). Counted in characters and formulas, the
+// zero-width pads (pads.mjs) none.
+function wholeText(host) {
+  const own = document.createRange();
+  own.setStart(host, 0);
+  own.setEnd(host, textEnd(host));
+  const letters = (range) => range.toString().replaceAll(ZWSP, "");
+  const atoms = (range) => range.cloneContents().querySelectorAll("[data-ge-atom]").length;
+  const all = letters(own);
+  if (all === "" && atoms(own) === 0) return { own, all: true };
+  const selection = getSelection();
+  if (!selection.rangeCount) return { own, all: false };
+  const range = selection.getRangeAt(0);
+  if (range.compareBoundaryPoints(Range.END_TO_START, own) > 0 || range.compareBoundaryPoints(Range.START_TO_END, own) < 0) return { own, all: false };
+  const part = own.cloneRange();
+  if (range.compareBoundaryPoints(Range.START_TO_START, own) > 0) part.setStart(range.startContainer, range.startOffset);
+  if (range.compareBoundaryPoints(Range.END_TO_END, own) < 0) part.setEnd(range.endContainer, range.endOffset);
+  return { own, all: letters(part) === all && atoms(part) === atoms(own) };
+}
+
+/**
+ * blocks: the block tools (blocks.mjs: picked, select(units, { quiet })). say: the status line.
+ * cells: the table tools' selection (table/): table() the table whose cells are selected (no
+ * caret in one), or null; clear() lets it go.
+ */
+export function createSelectAll({ blocks, say, cells = { table: () => null, clear() {} } }) {
+  const KEY = shortcut("mod+a"); // the key as the tooltips name it: Ctrl+A, ⌘A on a Mac
+  const more = (steps, step) => {
+    const next = nextStep(steps.slice(steps.indexOf(step) + 1), coverage(step.units));
+    return next ? t(" · 再按 {0} 选中{1}", KEY, next.label) : "";
+  };
+
+  // A step taken: its blocks selected (the cells' selection let go), said with the step after it.
+  function take(steps, step) {
+    if (!step) return; // the top is selected already: nothing more
+    cells.clear();
+    blocks.select(step.units, { quiet: true });
+    say(t("已选中{0} · Delete 删除 · Esc 取消{1}", step.label, more(steps, step)));
+  }
+
+  function fromText(host) {
+    const { own, all } = wholeText(host);
+    const steps = stepsFromText(host);
+    const next = nextStep(steps, new Set([host]), { text: true });
+    if (!all) {
+      select(own);
+      say(next ? t("已选中这一块的文字 · 再按 {0} 选中{1}", KEY, next.label) : t("已选中这一块的文字"));
+      return;
+    }
+    take(steps, next);
+  }
+
+  return {
+    /**
+     * The editor's key chain (editor.mjs): Ctrl+A with the caret in text block `host` (null: none,
+     * blocks or cells selected, or nothing). True when it was the key and handled.
+     */
+    key(event, host) {
+      if (!isSelectAllKey(event) || event.isComposing || event.keyCode === 229) return false;
+      const target = event.target;
+      // A field of the page's own UI, or the report's own editable element, keeps the browser's.
+      if (target?.closest?.("input, textarea, select") || (target?.isContentEditable && !editable(target))) return false;
+      event.preventDefault();
+      if (host) return fromText(host), true;
+      const table = cells.table();
+      if (table?.isConnected) {
+        const steps = [{ units: [table], label: wholeLabel(table) }, ...stepsAbove(table.parentElement)];
+        take(steps, steps[0]);
+        return true;
+      }
+      const picked = blocks.picked;
+      if (picked.length > 0) {
+        const steps = stepsAbove(around(picked));
+        take(steps, nextStep(steps, coverage(picked)));
+      } else {
+        const steps = [topStep(document)];
+        take(steps, nextStep(steps, new Set()));
+      }
+      return true;
+    },
+    /**
+     * A key over a selection across blocks (text-select/): Ctrl+A selects the first container
+     * holding all it touches, `touched()` letting it go and giving its blocks. True when it was the key.
+     */
+    across(event, touched) {
+      if (!isSelectAllKey(event)) return false;
+      event.preventDefault();
+      const units = touched();
+      const steps = units.length > 0 ? stepsAbove(around(units)) : [topStep(document)];
+      take(steps, nextStep(steps, coverage(units), { strict: false }));
+      return true;
+    },
+  };
+}