@heycys/gallery 0.0.0-stage → 0.1.1

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;
+    },
+  };
+}

package/browser/editor/page/selection/delete.mjs

@@ -0,0 +1,61 @@
+import { keptAnyway, partsOf, removalTarget, withLeads } from "../core.mjs";
+import { alive, ordered, otherTabs } from "../block-info.mjs";
+import { caretAt } from "../caret.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Deleting whole blocks (docs/editor.md, "Deleting blocks"): the selected ones with Delete or
+// Backspace, the block menu's 删除, or Ctrl+X. Selected blocks go together, or none does (one of
+// them is referred to, data-ge-keep, or they are a row's last tabs), with the reason. A container
+// they leave empty goes too (core.mjs removalTarget); when a Sheet tab's Sheet was shown, the next
+// tab is clicked (undo clicks it back). One undo step, which selects the blocks again. A box that
+// always holds a block gets an empty paragraph once they are gone (core.mjs tidyEmptied), the caret
+// in it. That one empty paragraph stays (keptAnyway: it would be put back as it is), so deleting
+// only it does nothing and says nothing. A folded heading goes with what it hides, or as the section
+// it covers whole (fold/ takenWith).
+
+/**
+ * info: block-info.mjs. selection: selection/index.mjs. struct(parents, touched, mutate): the
+ * editor's undoable structural change (history.mjs). say: the status line. closeMenu(): the block
+ * menu closes. forget(): the handle forgets the block it stood beside. folds: the headings' folds (fold/).
+ */
+export function createDelete({ info, selection, struct, say, closeMenu, forget, folds = null }) {
+  const { kindOf, nameOf, keepText, named } = info;
+
+  return function remove(targets = selection.picked) {
+    closeMenu();
+    const picked = ordered([targets].flat().filter(alive));
+    const list = (folds ? folds.takenWith(picked) : picked).filter((target) => !keptAnyway(target));
+    if (list.length === 0) return;
+    const refused = list.map((target) => [target, keepText(target, list)]).find(([, reason]) => reason);
+    if (refused) {
+      selection.select(list, { quiet: true });
+      say(list.length > 1 ? t("其中的{0}不能删除：{1}", nameOf(refused[0]), refused[1]) : refused[1], "note", 6000);
+      return;
+    }
+    selection.clear();
+    forget();
+    // What goes: each block, or its container once nothing else is left in it.
+    const gone = new Set(list.flatMap(withLeads));
+    const nodes = [...new Set(list.map((target) => removalTarget(target, gone)))];
+    const parts = nodes.flatMap(partsOf);
+    // The Sheet shown moves to a tab still there.
+    const tabs = nodes.filter((node) => kindOf(node) === "tab");
+    const shownTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true");
+    // The one right of it shows instead, or left of it when it was the last (Notion's).
+    const row = shownTab ? [...shownTab.parentElement.children] : [];
+    const at = row.indexOf(shownTab);
+    const neighbour = shownTab && [...row.slice(at + 1), ...row.slice(0, at).reverse()].find((tab) => otherTabs(shownTab).includes(tab) && !tabs.includes(tab));
+    // After the area started again with its tabs as they are now (components/sheets/pills.mjs, on the
+    // same change: its observer's turn comes first).
+    const settle = shownTab ? (backwards) => queueMicrotask(() => (backwards ? shownTab : neighbour)?.click()) : null;
+    const done = struct([...new Set(parts.map((part) => part.parentNode))], [], () => {
+      parts.forEach((part) => part.remove());
+      settle?.(false);
+      return { touched: [], focus: null, select: list, settle };
+    });
+    if (done?.caret) caretAt(done.caret, "start");
+    const emptied = nodes.some((node) => !list.includes(node));
+    const name = list.length === 1 ? nameOf(nodes[0]) : folds ? folds.namedWith(picked, list, named) : t("{0} 块", list.length);
+    say(t("已删除{0}{1}{2} · Ctrl+Z 撤销", name, emptied ? t("（外层已空，一并删除）") : "", tabs.length > 0 ? t("，连同其中的内容") : ""));
+  };
+}

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

@@ -0,0 +1,164 @@
+import { unitElement, unitsOf, withLeads } from "../core.mjs";
+import { alive, ordered } from "../block-info.mjs";
+import { entersAfter } from "../beside.mjs";
+import { createFills } from "../fills.mjs";
+import { FOLDED } from "../folded.mjs";
+import { describe, note, report } from "../overlays.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Selected blocks (docs/editor.md, "Selecting blocks"): a set of blocks, none inside another, in
+// document order. A box selection drawn from empty space gives blocks of one container
+// (marquee.mjs), Shift can add others; Shift+↑/↓ widens or narrows a selection among the neighbours
+// of the block it started from. Each selected block is filled (fills.mjs: in the editor's own layer,
+// the page's, so a fill scrolls with its block natively, never inside the block, as the frame of what
+// is being edited is, frame.mjs); the fills hide while the blocks are dragged (drag/). Deleting
+// selected blocks is delete.mjs; what the keys do with a selection, blocks.mjs.
+//
+// A selection of text across blocks (text-select/) marks the blocks it takes whole (a code block, a
+// table, a file…): they are filled as selected ones are, without being selected (mark).
+//
+// The fills belong to their blocks (docs/editor.md, "Overlays"): one per selected block on the
+// page, made to match the selection the moment it changes (render), never on a later frame, so no
+// fill outlives its block's selection, and none is drawn while the block tools are off. The frames
+// only keep them where their blocks are (paint); a fill that cannot be drawn goes.
+//
+// What a folded heading hides (fold/) is never selected: select() leaves it out, Shift+↑/↓ and ↑/↓
+// pass over it; what takes a folded heading away whole takes it along when it acts (fold/ takenWith).
+
+// Whether a block is hidden by a folded heading (data-ge-folded on it or a block around it).
+const folded = (node) => node.closest(`[${FOLDED}]`) !== null;
+
+/**
+ * info: block-info.mjs. active(): whether block tools may show. say(text, kind, hold): the status
+ * line. closeMenu(): the block menu closes. schedule(): the block tools' next frame (blocks.mjs),
+ * which keeps the fills where their blocks are.
+ */
+export function createSelection({ info, active, say, closeMenu, schedule }) {
+  const { nameOf } = info;
+  let picked = []; // the selected blocks, in document order, none inside another
+  let marked = []; // the blocks a text selection takes whole (text-select/): filled, not selected
+  let anchor = null; // the block Shift+↑/↓ widens the selection from
+  let hidden = false; // the fills hide while the blocks are dragged
+  const halos = createFills({ kind: "halo", className: "ge-halo", stands: (node) => (picked.includes(node) || marked.includes(node)) && active() });
+
+  /** Select a block, or several (none is clearing); `quiet`: without saying so. */
+  function select(targets, { quiet = false } = {}) {
+    closeMenu();
+    const next = ordered([targets].flat().filter(alive)).filter((node) => !folded(node));
+    if (next.length === 0) return clear();
+    if (next.length !== picked.length || next.some((node, index) => node !== picked[index])) {
+      picked = next;
+      note("select", picked.map(describe).join(", "));
+    }
+    if (!picked.includes(anchor)) anchor = picked[0];
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && focused.closest("main")) focused.blur();
+    getSelection()?.removeAllRanges();
+    if (!quiet) {
+      const [first] = picked;
+      say(picked.length > 1
+        ? t("已选中 {0} 块 · Delete 删除 · 拖动手柄一起移动 · Esc 取消", picked.length)
+        : t("已选中{0} · Delete 删除{1} · Esc 取消", nameOf(first), entersAfter(first) ? t(" · Enter 在下方新建文本") : t(" · Enter 编辑")));
+    }
+    render();
+    schedule();
+  }
+
+  function clear() {
+    if (picked.length > 0) note("clear", picked.map(describe).join(", "));
+    picked = [];
+    anchor = null;
+    render();
+    schedule();
+  }
+
+  // Blocks taken off the page (undo, a commit, the page's own script) leave the selection, and
+  // their fills go with them.
+  function prune() {
+    const gone = picked.filter((node) => !alive(node));
+    if (gone.length === 0) return;
+    note("prune", gone.map(describe).join(", "));
+    picked = picked.filter(alive);
+    if (!picked.includes(anchor)) anchor = picked[0] ?? null;
+    render();
+  }
+
+  // Shift+↑/↓: the selection widens (or narrows) by one block among the anchor's neighbours.
+  function extend(delta) {
+    const container = anchor?.parentElement;
+    const list = container ? unitsOf(container).filter((unit) => !folded(unit)) : [];
+    const at = list.indexOf(anchor);
+    if (at < 0) return;
+    const inside = picked.map((node) => list.indexOf(node)).filter((index) => index >= 0);
+    const low = Math.min(...inside);
+    const high = Math.max(...inside);
+    const end = Math.max(0, Math.min(list.length - 1, (high > at ? high : low < at ? low : at) + delta));
+    select(list.slice(Math.min(at, end), Math.max(at, end) + 1), { quiet: true });
+    list[end].scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+
+  // The next or previous block in the same container.
+  function sibling(node, forward) {
+    for (let next = forward ? node.nextElementSibling : withLeads(node)[0].previousElementSibling; next; next = forward ? next.nextElementSibling : next.previousElementSibling) {
+      const unit = unitElement(next);
+      if (unit && unit.parentElement === node.parentElement && unit !== node && !folded(unit)) return unit;
+    }
+    return null;
+  }
+
+  // The fills made to match the selection now: those of blocks no longer selected (or no longer on
+  // the page) go at once; each selected block shown gets its fill where it is, reaching past it as
+  // reachOf says, never into a neighbour's (roomOf). One that cannot be drawn takes all the fills
+  // down (said once): better none than one in the wrong place.
+  function render() {
+    try {
+      halos.paint(hidden || !active() ? [] : [...picked, ...marked].filter(alive));
+    } catch (error) {
+      unpaint();
+      report("selection fills", error);
+    }
+  }
+
+  // Every fill taken down (the selection stays).
+  const unpaint = () => halos.clear();
+
+  // For the tests and DevTools: the selected blocks (the page carries no mark of the selection).
+  globalThis.__gallerySelected = () => [...picked];
+
+  return {
+    /** The selected blocks, in document order (the selection's own list: read it, never change it). */
+    get picked() { return picked; },
+    /**
+     * With several blocks selected, the one that is `target` or holds it (an item of a selected
+     * list: its handle's menu is the group's, as notion-lite's handle of a selected block), else null.
+     */
+    holderOf: (target) => (picked.length > 1 ? picked.find((node) => node === target || node.contains(target)) ?? null : null),
+    select,
+    clear,
+    /** Fill `targets` as selected ones without selecting them (a text selection's whole blocks; none: no more). */
+    mark(targets) {
+      const next = ordered([targets].flat().filter(alive));
+      if (next.length === marked.length && next.every((node, index) => node === marked[index])) return;
+      marked = next;
+      render();
+      schedule();
+    },
+    extend,
+    sibling,
+    prune,
+    /** A frame: the fills where their blocks are now; none while the blocks are dragged (`dragging`). */
+    paint(dragging) {
+      hidden = dragging;
+      render();
+    },
+    unpaint,
+    /** The editing stops: nothing selected, no fills. */
+    hide() {
+      marked = [];
+      clear();
+      unpaint();
+    },
+    /** The selection for the overlays' snapshot. */
+    state: () => ({ picked: picked.map(describe), offPage: picked.filter((node) => !node.isConnected).length, fills: halos.count, hidden }),
+  };
+}

package/browser/editor/page/selection/marquee.mjs

@@ -0,0 +1,174 @@
+import { Z } from "../../../shared/layers.mjs";
+import { blankTarget, measure, pick } from "../geometry.mjs";
+import { DIALOG } from "../../components/kit.mjs";
+import { edgeFollower } from "../edge-scroll.mjs";
+import { cancelOnEscape, endsGesture, gestureLock } from "../gesture.mjs";
+import { note, own } from "../overlays.mjs";
+import { addStyle, element, mount } from "../ui.mjs";
+
+// A press on empty space (geometry.mjs blankTarget: the page around the report, a box between its
+// blocks): moved more than a few pixels, it draws a box selection (docs/editor.md, "Selecting
+// blocks"); released where it was, it is a click on empty space. The rectangle's start stays on
+// the content while the page scrolls (the wheel, or the pointer near the window's top or bottom
+// edge); the blocks it takes are geometry.mjs pick()'s. With Shift held (at any moment), what it
+// takes is added to or taken out of what was selected when it started. While a detail card is open,
+// one is drawn in the card's content alone, its own top as for Ctrl+A (select-all/): the press on
+// its empty space, the blocks it takes of that content, the rectangle's start staying on the content
+// as the content scrolls. Only a mouse draws one, and not where the pointer is on an edge that resizes (resize/) or in a
+// gap that does (between two columns, or two nodes of a flowchart's row: columns/, which takes that
+// press; its listener comes after this one, so it cannot keep the press from here).
+// Anything that ends the press another way (the capture lost, the window losing the focus, the
+// page hidden, Esc) cancels it: what it took is let go. The rectangle belongs to the press
+// (overlays.mjs); scrolling near the edges is a task of the editor's frames (edge-scroll.mjs), and the
+// ways a press gives up are gesture.mjs's.
+
+const STYLE = `
+  .ge-marquee { position: fixed; left: 0; top: 0; z-index: ${Z.marquee}; box-sizing: border-box; border: 1px solid transparent; background: var(--ge-halo); pointer-events: none; }
+  ${gestureLock("data-ge-marquee", { cursor: "default", select: true })}
+`;
+
+const START = 4; // how far the pointer moves before the press draws a box selection
+
+/**
+ * active(): whether block tools may show. selection: { get() -> blocks, set(blocks, { quiet }),
+ * clear() }. click(x, y, target): a click on empty space.
+ */
+export function createMarquee({ active, selection, click }) {
+  addStyle(STYLE);
+  let held = null; // { x, y, pageX, pageY, start, shift, target, tree, drawn, pointer }
+  const shape = own(element("div", { class: "ge-marquee" }), "box selection", { alive: () => Boolean(held?.drawn) });
+  // Near the top or bottom edge of what it is drawn in (the window, or the card's content) that
+  // scrolls, and the rectangle follows (a frame; again on the next one while the rectangle is drawn).
+  const scrolling = edgeFollower("box selection", { pointer: () => (held?.drawn ? held : null), scroller: () => held.scroller, scrolled: () => update(), fail: () => cancel() });
+
+  // Where a press may draw one: the page, or, while a detail card is open, the content of the card
+  // the press is in (its own top, as Ctrl+A's: select-all/), never the page behind it. null: nowhere.
+  function topOf(target) {
+    if (!document.querySelector(DIALOG.open)) return document.querySelector("main");
+    const content = target.closest(DIALOG.open)?.querySelector(DIALOG.openContent);
+    return content?.contains(target) ? content : null;
+  }
+
+  // What scrolls under the rectangle: a card's content scrolls by itself, the page with the window.
+  const scrolled = () => (held.scroller ? { x: held.scroller.scrollLeft, y: held.scroller.scrollTop } : { x: scrollX, y: scrollY });
+
+  /** A press on the page: takes it (true) when it is on empty space. */
+  function begin(event) {
+    if (held || event.button !== 0 || event.pointerType !== "mouse" || !active() || !blankTarget(event.target)) return false;
+    if (document.documentElement.hasAttribute("data-ge-resize") || document.documentElement.hasAttribute("data-ge-gap")) return false;
+    const root = topOf(event.target);
+    if (!root) return false;
+    // Not cancelled: the page still takes the focus, as a click on empty space always gave it (in a
+    // workbench, its keys then reach the page); text selection is off while the press lasts.
+    document.documentElement.setAttribute("data-ge-marquee", "");
+    const focused = document.activeElement;
+    if (focused?.isContentEditable && focused.closest("main")) focused.blur();
+    getSelection()?.removeAllRanges();
+    held = {
+      x: event.clientX, y: event.clientY, root, scroller: root.localName === "main" ? null : root, card: root.closest("dialog"),
+      start: selection.get(), shift: event.shiftKey, target: event.target, tree: null, drawn: false, pointer: event.pointerId,
+    };
+    // Its start, on the content: where it is as what scrolls under it moves (the tree's frame: from()).
+    const at = scrolled();
+    held.startX = event.clientX + at.x;
+    held.startY = event.clientY + at.y;
+    note("box selection", "press");
+    try {
+      document.documentElement.setPointerCapture(event.pointerId);
+    } catch {}
+    return true;
+  }
+
+  function draw() {
+    held.drawn = true;
+    held.tree = measure(held.root); // page coordinates, as what scrolls under it was then (held.at)
+    held.at = scrolled();
+    held.page = { x: scrollX, y: scrollY };
+    if (!held.shift) selection.clear();
+    // In the card's own top layer, over its content (the card on top when one was opened from another).
+    if (held.card) {
+      shape.dataset.docDev = "";
+      held.card.append(shape);
+    } else mount(shape);
+    scrolling.wake();
+  }
+
+  // The rectangle from where the press started (on the content) to the pointer, and what it takes:
+  // the window's rectangle in the tree's frame, moved by what has scrolled since it was measured.
+  function update() {
+    const now = scrolled();
+    const startX = held.startX - now.x;
+    const startY = held.startY - now.y;
+    const left = Math.min(startX, held.x);
+    const top = Math.min(startY, held.y);
+    const width = Math.abs(held.x - startX);
+    const height = Math.abs(held.y - startY);
+    Object.assign(shape.style, { transform: `translate(${Math.round(left)}px, ${Math.round(top)}px)`, width: `${Math.round(width)}px`, height: `${Math.round(height)}px` });
+    const dx = now.x - held.at.x + held.page.x;
+    const dy = now.y - held.at.y + held.page.y;
+    let taken = pick(held.tree, { left: left + dx, top: top + dy, right: left + width + dx, bottom: top + height + dy });
+    if (held.shift) taken = [...held.start.filter((node) => !taken.includes(node)), ...taken.filter((node) => !held.start.includes(node))];
+    selection.set(taken, { quiet: true });
+  }
+
+  function stop() {
+    if (!held) return;
+    const { pointer } = held;
+    held = null;
+    shape.remove();
+    document.documentElement.removeAttribute("data-ge-marquee");
+    try {
+      document.documentElement.releasePointerCapture(pointer);
+    } catch {}
+  }
+
+  /** Give up the press (Esc, the window losing focus): a box selection being drawn takes nothing. */
+  function cancel() {
+    if (!held) return;
+    note("box selection", "cancelled");
+    if (held.drawn) selection.clear();
+    stop();
+  }
+
+  addEventListener("pointermove", (event) => {
+    if (!held || event.pointerId !== held.pointer) return;
+    held.x = event.clientX;
+    held.y = event.clientY;
+    held.shift = event.shiftKey;
+    const at = scrolled();
+    if (!held.drawn && Math.hypot(event.clientX + at.x - held.startX, event.clientY + at.y - held.startY) > START) draw();
+    if (held.drawn) update();
+  }, true);
+  addEventListener("pointerup", (event) => {
+    if (!held || event.pointerId !== held.pointer) return;
+    const { drawn, target } = held;
+    stop();
+    if (!drawn) {
+      selection.clear();
+      click(event.clientX, event.clientY, target);
+      return;
+    }
+    const taken = selection.get();
+    if (taken.length > 0) selection.set(taken); // says what was taken
+  }, true);
+  // After pointerup the press is over already (stop() let the capture go); it ends any other way too.
+  endsGesture({ active: () => Boolean(held), cancel, owns: (event) => event.pointerId === held.pointer });
+  cancelOnEscape({ active: () => Boolean(held), cancel });
+  addEventListener("scroll", () => { if (held?.drawn) update(); }, { passive: true, capture: true });
+  const shiftKey = (event) => {
+    if (!held?.drawn || event.key !== "Shift") return;
+    held.shift = event.type === "keydown";
+    update();
+  };
+  addEventListener("keyup", shiftKey, true);
+  addEventListener("keydown", shiftKey, true);
+
+  return {
+    begin,
+    cancel,
+    /** A box selection is being drawn (the handle steps aside). */
+    get drawing() { return Boolean(held?.drawn); },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return shape.isConnected ? [shape] : []; },
+  };
+}