@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,447 @@
+import { t } from "../../../shared/i18n/index.mjs";
+import { onPreferences, preference } from "../../../shared/preferences.mjs";
+import { readText, rangeOf } from "../annotate/anchors.mjs";
+import { GONE_WORDS, nestedBlocks } from "../core.mjs";
+import { createFills } from "../fills.mjs";
+import { FOLLOW, task } from "../frames.mjs";
+import { onSettle, own, provide } from "../overlays.mjs";
+import { failure, postAnswer } from "../post.mjs";
+import { addStyle } from "../ui.mjs";
+import { UNDO_SHOWN, createBar } from "./bar.mjs";
+import { GHOST_STYLE, createGhosts } from "./ghost.mjs";
+import { editsBy, goneMark, placeOf, putMark, takeMark } from "./gone-words.mjs";
+import { wordMarks } from "./words.mjs";
+
+// The Agent's changes on the page (docs/editor.md "Agent's changes"), as Cursor reviews an Agent's:
+// what an Agent wrote to the report since the reader last kept or reverted it (the server's review,
+// editor/changes.mjs, read at the editor's start and never holding it back, drawn once the page is
+// ready), marked without a change to the file: a block added (or changed with no words to tell, or
+// whose words cannot be compared) a green fill (fills.mjs), words added the 批注's look in green (a
+// CSS highlight under the 批注's own), the words taken out shown where they were, in red struck
+// through (gone-words.mjs: an empty inline mark of the editor's own, its words drawn by CSS, which
+// nothing that reads or writes the block's content takes), the blocks deleted shown where they were,
+// a ghost of them in red struck through in room made for it (ghost.mjs, drawn in the overlay layer:
+// nothing of it in the document). Nothing to rest the pointer on: all of it shows at once. The reader
+// editing a block takes its words taken out away first (the keys, input, an input method, a paste,
+// cut or drop in it, the format bar over it), and they are not drawn in it again until the caret has
+// left it (the review read again then). The bar at the window's bottom (bar.mjs) says how many blocks
+// and offers 撤回 (the server writes the baseline back: the reader's own saved edits stay; undone within
+// UNDO_SHOWN from the bar of the page shown again) and 确认 (no more marks). 显示变更 off (设置),
+// nothing is drawn and a review read is kept at once, quietly. The page reads the review again when
+// its server says it changed (another tab kept it, an Agent wrote more) and 1.5s after a commit of its
+// own while the bar shows. Not on a page opened on its own in a frame (?solo), printed, or presented
+// (the preview's ?present has no editor).
+
+const ROUTE = "/__gallery/edit/changes";
+const REREAD_AFTER = 1500; // after a commit of the page's own, the review read again this long after (the reader paused)
+const LEFT_AFTER = 150; // the caret left a block the reader edited: the review read again this long after (once saved)
+const KEEP_TRIES = 3; // a quiet keep refused (the review grew meanwhile) is tried again this often
+// What may edit the block it happens in: its words taken out go first (gone-words.mjs editsBy for a key).
+const EDITS = ["keydown", "beforeinput", "compositionstart", "paste", "cut", "drop", "dragstart"];
+
+const STYLE = `
+  ::highlight(ge-diff-add) { background-color: var(--ge-diff-add); text-decoration: underline 2px var(--ge-diff-add-line); }
+  .ge-diff-del { user-select: none; pointer-events: none; }
+  .ge-diff-del::before { content: attr(data-ge-gone-words); border-radius: 3px; background: var(--ge-diff-del); color: var(--ge-diff-del-text); text-decoration: line-through; text-decoration-color: var(--ge-diff-del-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+  .ge-diff-del[data-ge-gone-lead]::before { margin-left: .28em; }
+  .ge-diff-del[data-ge-gone-tail]::after { content: " "; }
+  ${GHOST_STYLE}
+  @media print { ::highlight(ge-diff-add) { background-color: transparent; text-decoration: none; } .ge-diff-del, .ge-diff-halo { display: none; } }
+`;
+
+const highlights = () => Boolean(globalThis.CSS?.highlights && globalThis.Highlight);
+const holdsSelection = (block) => {
+  const selection = getSelection();
+  return selection.rangeCount > 0 && (block.contains(selection.anchorNode) || block.contains(selection.focusNode));
+};
+
+/**
+ * slug, token: the map's; commits(), autosave(): the page's (made later than this); flush(): what
+ * waits saved now (as Ctrl+S); say(text, kind); session: sessionStorage (storage.mjs storageOf), where
+ * a revert's undo is kept over the page shown again; across: the selection across blocks (text-select/:
+ * texts(), redraw(texts)), kept on its words while marks go and come. Returns { start(),
+ * committed(receipt), leave() }.
+ */
+export function createChanges({ slug, token, commits, autosave, flush, say, session, across = null }) {
+  const undoKey = `gallery-edit:${slug}:changes-undo`;
+  const shows = () => preference("showChanges");
+  let review = null; // the review as last read and drawn: { stamp, counts, added, changed, removed }
+  let started = false;
+  let left = false;
+  let busy = false; // 撤回, 确认 or 撤销 under way
+  let reading = read(); // at once: the page's start does not wait for it
+  let rereadTimer = 0;
+  let keepTries = 0;
+  let offering = 0; // until when the bar offers 撤销 of this tab's revert
+  const filled = new Set(); // block elements filled green
+  const changedBlocks = new Map(); // a text block -> its words in the baseline
+  const added = new Map(); // a text block -> the ranges of its words added (the green highlight's)
+  let dels = []; // the words taken out shown: { node, block }
+  const edited = new Set(); // text blocks the reader edited since their words taken out were drawn
+  const ghosts = createGhosts();
+  let fills = null;
+  const bar = createBar({ revert: () => revert(), accept: () => keep() });
+
+  function read() {
+    return postAnswer(ROUTE, token, { slug, action: "read" });
+  }
+
+  // ---------- finding the blocks it names (in the file now) ----------
+  const unitOf = (id) => document.querySelector(`[data-ge-unit="${id}"]`);
+  const body = () => document.querySelector("main");
+  function find(ref) {
+    if (!ref) return null;
+    const main = body() ?? document;
+    if (ref.title) return main.querySelector('[data-ge-kind="title"]'); // the page's own title, as the editor made it a text block
+    if (ref.id) return main.querySelector(`[data-block-id="${CSS.escape(ref.id)}"]`);
+    if (typeof ref.hash !== "string") return null;
+    const list = commits();
+    if (!list) return null;
+    let nth = 0;
+    for (const node of main.querySelectorAll("[data-ge-unit]")) {
+      if (list.fileHash(Number(node.getAttribute("data-ge-unit"))) !== ref.hash) continue;
+      if (nth++ === ref.nth) return node;
+    }
+    return null;
+  }
+  // A unit's own text blocks in the page's order (the server's: its scope line's first, if a table's).
+  function ownBlocks(unit, ref) {
+    if (ref.title) return [unit];
+    const owner = (block) => {
+      const at = block.closest("[data-ge-unit], [data-ge-lead]");
+      return at?.hasAttribute("data-ge-lead") && !at.hasAttribute("data-ge-unit") ? unitOf(at.getAttribute("data-ge-lead")) : at;
+    };
+    const lead = document.querySelector(`[data-ge-lead="${unit.getAttribute("data-ge-unit")}"]`);
+    const within = (root) => [root, ...root.querySelectorAll("[data-ge-block]")].filter((block) => block.hasAttribute("data-ge-block") && owner(block) === unit);
+    return [...(lead && lead !== unit ? within(lead) : []), ...within(unit)];
+  }
+  // A text block's words as the server reads them: a list item's own, not the blocks it holds.
+  const readBlock = (block) => {
+    const held = nestedBlocks(block);
+    return readText([block], held.length ? { skip: (child) => held.includes(child) } : undefined);
+  };
+
+  // ---------- drawing ----------
+  const frames = task("changes", { run: place, fail: () => keepingAcross(takeDown) });
+  // A selection across blocks (text-select/) kept on its words while marks go and come: its ends are
+  // points of its own, which a text node joined again (takeMark) would leave off the page, and so its
+  // pieces' live ranges are taken first (a text node split, putMark, they follow; one joined, takeMark
+  // sets them) and it is drawn again from them.
+  function keepingAcross(change) {
+    const texts = across?.texts() ?? null;
+    change(texts ? texts.map(({ range }) => range) : []);
+    if (texts) across.redraw(texts);
+  }
+  function takeDown(ranges = []) {
+    fills?.clear();
+    for (const { node } of dels) if (node.isConnected) takeMark(node, ranges);
+    dels = [];
+    ghosts.clear();
+    filled.clear();
+    changedBlocks.clear();
+    added.clear();
+    if (highlights()) CSS.highlights.delete("ge-diff-add");
+  }
+
+  function draw() {
+    keepingAcross((ranges) => drawNow(ranges));
+  }
+  function drawNow(ranges) {
+    takeDown(ranges);
+    if (!review || !shows()) {
+      edited.clear();
+      return;
+    }
+    addStyle(STYLE);
+    fills ??= createFills({ kind: "changes", className: "ge-diff-halo", stands: (block) => filled.has(block) });
+    for (const { ref } of review.added) {
+      const unit = find(ref);
+      if (unit) filled.add(unit);
+    }
+    for (const change of review.changed) {
+      const unit = find(change.ref);
+      if (!unit) continue;
+      if (change.whole) {
+        filled.add(unit);
+        continue;
+      }
+      const blocks = ownBlocks(unit, change.ref);
+      for (const { nth, base } of change.texts ?? []) {
+        if (blocks[nth]) changedBlocks.set(blocks[nth], base);
+      }
+    }
+    // A block the reader edited keeps its words taken out away while the caret is in it.
+    for (const block of [...edited]) if (!changedBlocks.has(block) || !holdsSelection(block)) edited.delete(block);
+    for (const [block, base] of changedBlocks) markWords(block, base, !edited.has(block));
+    paintAdded();
+    for (const group of review.removed) {
+      const anchor = group.before ? find(group.before) : group.after ? find(group.after) : body();
+      if (anchor) ghosts.add(group, anchor, group.before ? "before" : group.after ? "after" : "into");
+    }
+    if (filled.size || added.size || dels.length || ghosts.count) frames.wake();
+  }
+
+  // A changed text block's marks: the ranges of its words added (live: they follow the reader's
+  // typing), and, `taken`, its words taken out put in where they were (from the last, so that each
+  // place read before is still where it was: a text node is split only after it).
+  function markWords(block, base, taken) {
+    const text = readBlock(block);
+    const { ins, cuts } = wordMarks(base, text.text);
+    added.set(block, ins.map(([from, to]) => rangeOf(text, from, to)).filter(Boolean));
+    if (!taken) return;
+    for (const { at, text: words } of [...cuts].reverse()) {
+      const where = placeOf(text, at);
+      if (!where) continue;
+      const node = goneMark(words, document, { before: text.text[at - 1], after: text.text[at] });
+      const entry = { node, block };
+      own(node, "changes", { owner: block, alive: () => block.contains(node) && dels.includes(entry) });
+      putMark(node, where);
+      dels.push(entry);
+    }
+  }
+
+  function paintAdded() {
+    if (!highlights()) return;
+    const ranges = [...added.values()].flat();
+    if (ranges.length === 0) return void CSS.highlights.delete("ge-diff-add");
+    const highlight = new Highlight(...ranges);
+    highlight.priority = -1; // a 批注's marks over these
+    CSS.highlights.set("ge-diff-add", highlight);
+  }
+
+  // Each frame something may have moved: the fills where their blocks are, the ghosts where their rooms are.
+  function place() {
+    if (!review) return false;
+    fills?.paint([...filled].filter((block) => block.isConnected));
+    ghosts.place();
+    return filled.size || ghosts.count ? FOLLOW : false;
+  }
+
+  // What the page's edits took off the page goes with it (a block deleted, its marks): the words taken
+  // out shown in a block deleted or turned into another are taken out of it too, so that undo, which
+  // puts the very same element back, puts back none of them.
+  // A copy of a mark that a change made (a cell turned into a header cell or back, cells merged or
+  // filled, a disclosure's title made a paragraph, a block duplicated: whatever clones a block's
+  // content) stands for nothing and goes at once, before the overlays' audit would find it a stray:
+  // the review read again after the change's commit draws the words taken out where they are then.
+  onSettle(() => {
+    const drawn = dels.length > 0;
+    for (const block of [...filled]) if (!block.isConnected) filled.delete(block);
+    dels = dels.filter((entry) => {
+      if (entry.block.isConnected && entry.node.isConnected) return true;
+      if (entry.node.parentNode) takeMark(entry.node);
+      return false;
+    });
+    if (drawn) {
+      const ours = new Set(dels.map((entry) => entry.node));
+      for (const node of document.querySelectorAll(`main ${GONE_WORDS}`)) if (!ours.has(node)) takeMark(node);
+    }
+    ghosts.settle();
+  });
+
+  // ---------- the reader edits a block holding words taken out ----------
+  // They go first, before the edit touches the block (window, capture: before the editor's own
+  // listeners): the text either side of each one text node again, the caret where it was, and the
+  // block's words added marked anew (a range that ended in the half that went would cover the wrong
+  // words). The block is `edited`: drawn without them until the caret leaves it.
+  // The blocks an edit may touch: the one it happens in, those the selection reaches, the browser's
+  // or the page's across blocks (text-select/, which the browser's then holds none of).
+  function blocksOf(event) {
+    const selection = getSelection();
+    const range = selection.rangeCount ? selection.getRangeAt(0) : null;
+    const target = event?.target instanceof Node ? event.target : null;
+    const reached = across?.texts()?.map(({ host }) => host) ?? [];
+    const hit = new Set();
+    for (const { block } of dels) {
+      if (hit.has(block)) continue;
+      if ((target && block.contains(target)) || (range && range.intersectsNode(block)) || reached.some((host) => host === block || host.contains(block) || block.contains(host))) hit.add(block);
+    }
+    return hit;
+  }
+  function takeOut(blocks) {
+    if (blocks.size === 0) return;
+    keepingAcross((ranges) => {
+      for (const entry of dels) if (blocks.has(entry.block) && entry.node.isConnected) takeMark(entry.node, ranges);
+    });
+    dels = dels.filter((entry) => !blocks.has(entry.block));
+    for (const block of blocks) {
+      edited.add(block);
+      const base = changedBlocks.get(block);
+      if (base !== undefined) markWords(block, base, false);
+    }
+    paintAdded();
+  }
+  function editing(event) {
+    if (dels.length === 0 || (event.type === "keydown" && !editsBy(event))) return;
+    takeOut(blocksOf(event));
+  }
+  // The format bar over words of such a block (its buttons keep the selection where it is).
+  function pressed(event) {
+    if (dels.length > 0 && event.target instanceof Element && event.target.closest(".ge-format")) takeOut(blocksOf(null));
+  }
+  // The caret left a block the reader edited: the review read again once what waits is saved, and drawn.
+  function moved() {
+    if (edited.size === 0) return;
+    let leaving = false;
+    for (const block of [...edited]) {
+      if (block.isConnected && holdsSelection(block)) continue;
+      edited.delete(block);
+      leaving = true;
+    }
+    if (leaving) rereadSaved(LEFT_AFTER);
+  }
+  for (const type of EDITS) addEventListener(type, editing, true);
+  addEventListener("pointerdown", pressed, true);
+  document.addEventListener("selectionchange", moved);
+
+  // ---------- what the server says ----------
+  function take(answer) {
+    if (left) return;
+    review = answer?.ok && answer.pending ? answer : null;
+    if (review && !shows()) return void keep({ quiet: true });
+    if (busy) return;
+    if (review) bar.counts(review.counts);
+    else if (Date.now() >= offering) bar.hide();
+    draw();
+  }
+  async function reread() {
+    clearTimeout(rereadTimer);
+    if (left || !started) return;
+    reading = read();
+    take(await reading);
+  }
+  // Read again `after` ms from now, once nothing waits to be saved (the reader paused).
+  function rereadSaved(after) {
+    clearTimeout(rereadTimer);
+    const again = () => {
+      if (autosave()?.state.waiting > 0) rereadTimer = setTimeout(again, REREAD_AFTER);
+      else reread();
+    };
+    rereadTimer = setTimeout(again, after);
+  }
+
+  // 确认: the review ended; `quiet`, as the setting being off does it (nothing said).
+  async function keep({ quiet = false } = {}) {
+    if (!review || busy) return;
+    const stamp = review.stamp;
+    busy = true;
+    review = null;
+    draw();
+    bar.hide();
+    const answer = await postAnswer(ROUTE, token, { slug, action: "accept", stamp });
+    busy = false;
+    if (answer.ok) {
+      keepTries = 0;
+      return;
+    }
+    // Refused (the review grew meanwhile, the file was held): read again, and kept again when quiet, a few times at most.
+    if (quiet) {
+      if (++keepTries > KEEP_TRIES) return;
+    } else if (answer.reason === "changed") say(failure(answer, t("Agent 刚刚又改了文档，再看一眼")), "note");
+    else say(t("没能确认：{0}", failure(answer, t("预览服务器出错"))), "error");
+    reread();
+  }
+
+  // 撤回: what waits is saved first, and nothing may wait for the reader (a conflict); then the server
+  // writes the baseline, and the page is shown again as after a write of its own (autosave showOwn: no
+  // question of what that write put back of the reader's, which the reader asked for).
+  async function revert() {
+    if (!review || busy) return;
+    const stamp = review.stamp;
+    busy = true;
+    await flush();
+    const state = autosave()?.state;
+    if (!state || state.waiting > 0 || state.syncing || state.held > 0 || state.offline) {
+      busy = false;
+      say(t("还有修改没保存或有冲突待处理，处理完再撤回"), "error");
+      return;
+    }
+    let answer = null;
+    const shown = await autosave().showOwn(async () => {
+      answer = await postAnswer(ROUTE, token, { slug, action: "revert", stamp });
+      if (!answer.ok || answer.none) return false;
+      session?.set(undoKey, JSON.stringify({ undo: answer.undo, at: Date.now() }));
+      return true;
+    });
+    if (shown) return; // the page goes: the one shown again offers 撤销
+    busy = false;
+    if (answer?.ok) return void reread(); // nothing was under review any more
+    say(answer?.reason === "changed" ? failure(answer, t("Agent 刚刚又改了文档，再看一眼")) : t("没能撤回：{0}", failure(answer ?? {}, t("预览服务器出错"))), answer?.reason === "changed" ? "note" : "error");
+    reread();
+  }
+
+  // 撤销 of a revert: the server writes back what the revert wrote over, while the file is still the revert's.
+  async function undo(id) {
+    if (busy) return;
+    busy = true;
+    offering = 0;
+    session?.remove(undoKey);
+    bar.hide();
+    await flush();
+    let answer = null;
+    const shown = await autosave().showOwn(async () => {
+      answer = await postAnswer(ROUTE, token, { slug, action: "undo", undo: id });
+      return Boolean(answer.ok);
+    });
+    if (shown) return;
+    busy = false;
+    say(t("没能撤销：{0}", failure(answer ?? {}, t("预览服务器出错"))), "error");
+  }
+
+  // A revert of this tab's, the page shown again since: 撤销 on the bar for what is left of UNDO_SHOWN.
+  function undoShown() {
+    let kept = null;
+    try { kept = JSON.parse(session?.get(undoKey) ?? "null"); } catch {}
+    const remaining = kept && typeof kept.undo === "string" ? UNDO_SHOWN - (Date.now() - kept.at) : 0;
+    if (remaining <= 0) {
+      session?.remove(undoKey);
+      return false;
+    }
+    offering = Date.now() + remaining;
+    bar.reverted(remaining, () => undo(kept.undo));
+    setTimeout(() => session?.remove(undoKey), remaining);
+    return true;
+  }
+
+  // The server's word that the review changed (another tab kept or reverted it, the Agent wrote more).
+  const heard = () => {
+    clearTimeout(rereadTimer);
+    rereadTimer = setTimeout(reread, 100);
+  };
+  addEventListener("doc-changes-changed", heard);
+  // 显示变更 switched (设置, another page of the origin): off, what is under review is kept and nothing drawn; on, read again.
+  onPreferences(() => {
+    if (!started || left) return;
+    if (!shows()) {
+      if (review) keep({ quiet: true });
+      return;
+    }
+    reread();
+  });
+
+  provide("changes", () => ({ pending: Boolean(review), counts: review?.counts ?? null, filled: filled.size, words: dels.length, ghosts: ghosts.count, edited: edited.size }));
+
+  return {
+    /** The page is ready: what was read is drawn (the bar, or 撤销 after a revert of this tab's). */
+    async start() {
+      if (started) return;
+      started = true;
+      undoShown();
+      take(await reading);
+    },
+    /** A commit of the page's was taken in: while the bar shows, the review is read again once the reader pauses. */
+    committed(receipt) {
+      if (!receipt?.wrote || !review || !started) return;
+      rereadSaved(REREAD_AFTER);
+    },
+    /** The page goes. */
+    leave() {
+      left = true;
+      clearTimeout(rereadTimer);
+      removeEventListener("doc-changes-changed", heard);
+      for (const type of EDITS) removeEventListener(type, editing, true);
+      removeEventListener("pointerdown", pressed, true);
+      document.removeEventListener("selectionchange", moved);
+    },
+  };
+}

package/browser/editor/page/changes/words.mjs

@@ -0,0 +1,27 @@
+import { wordDiff } from "../merge.mjs";
+
+// The words an Agent changed in a text block, as the page marks them (docs/editor.md "Agent's
+// changes"): the word diff of the block's text in the baseline against its text on the page
+// (merge.mjs wordDiff), as places in the page's text.
+
+/**
+ * What `now` (the block's text on the page) has that `base` did not and where `base`'s words were
+ * taken out of it: { ins: [[from, to]] (ranges of `now`), cuts: [{ at, text }] (a place in `now`,
+ * what was taken out there; one where several runs meet) }.
+ */
+export function wordMarks(base, now) {
+  const ins = [];
+  const cuts = [];
+  let at = 0;
+  for (const { tag, text } of wordDiff(base, now)) {
+    if (tag === "del") {
+      const last = cuts.at(-1);
+      if (last?.at === at) last.text += text;
+      else cuts.push({ at, text });
+      continue;
+    }
+    if (tag === "ins") ins.push([at, at + text.length]);
+    at += text.length;
+  }
+  return { ins, cuts };
+}

package/browser/editor/page/chip-fills.mjs

@@ -0,0 +1,126 @@
+import { atomOf, editable } from "./caret.mjs";
+import { addStyle } from "./ui.mjs";
+
+// What fills a chip of the text (core.mjs: a formula, a link shown with its icon, a page block): one
+// rectangle around all of it, a chip being one whole. A formula's under the pointer and while its box
+// is open; any chip's when a selection holds it, whose color the browser would paint on the pieces of
+// the chip that hold text, in strips as broken as they are (so nothing is painted inside a chip).
+//   KaTeX's boxes stand out of a formula's inline box, whose background is a narrow strip through the
+// middle of a fraction, so its fill is its .katex with as much padding above and below as the drawing
+// reaches past that box, which moves nothing: a padding above an inline box counts for no line. A
+// chip selected is as high as its line, as the words selected beside it are, the hair of room at its
+// sides filled too (they reach it): a box of its own, ::after behind it, which takes a chip of any
+// display and moves nothing. (A chip the line wraps fills its pieces, its background on each line.) How
+// much of each is known only by measuring, so it is measured for the chips that show a fill and written
+// in a style sheet of the page's own, as is which chips those are, no attribute of theirs: nothing here
+// enters a block's snapshots or the file, or reaches what the editor's observers watch, and a selection
+// that holds no chip, and a caret moving, cost nothing but the look at it.
+
+const STYLE = `
+  [data-ge-editing] [data-ge-atom]::selection, [data-ge-editing] [data-ge-atom] ::selection { background-color: transparent; }
+`;
+
+let sheet = null; // made as the page starts editing: the import reads the editor's modules with no page
+let hovered = null; // the formula under the pointer, or the last one
+let edited = null; // the formula whose box is open
+let selected = []; // the chips the browser's selection holds whole
+
+// How far up and down a formula's drawing goes (window px), or null for a chip with no drawing.
+function drawingOf(chip) {
+  const boxes = [...chip.querySelectorAll(".katex-base")].map((base) => base.getBoundingClientRect());
+  return boxes.length > 0 ? { top: Math.min(...boxes.map((box) => box.top)), bottom: Math.max(...boxes.map((box) => box.bottom)) } : null;
+}
+
+/** Where a chip of the text shows, all of its drawing (window px): what stands by a formula stands clear of this. */
+export function chipBox(chip) {
+  const { left, right, top, bottom, width } = chip.getBoundingClientRect();
+  const drawing = drawingOf(chip) ?? { top, bottom };
+  const box = { top: Math.min(top, drawing.top), bottom: Math.max(bottom, drawing.bottom) };
+  return { left, right, width, ...box, height: box.bottom - box.top };
+}
+
+// Where a chip stands on its line (window px): all of its drawing, and a line high around the line's
+// middle, which is an inline chip's; one of the page's own boxes (placeholder.mjs) stands at the line's top.
+function bandOf(chip) {
+  const { top, bottom } = chip.getBoundingClientRect();
+  const half = parseFloat(getComputedStyle(chip.parentElement).lineHeight) / 2 || 0;
+  const middle = getComputedStyle(chip).display === "inline" ? (top + bottom) / 2 : top + half;
+  const drawing = drawingOf(chip);
+  return { top: Math.min(middle - half, drawing?.top ?? top), bottom: Math.max(middle + half, drawing?.bottom ?? bottom) };
+}
+
+// The lines the chips `chosen` stand on, by chip: as the browser fills a line for the words selected on it, as high as all the chips of its block on it.
+function linesOf(chosen) {
+  const lines = new Map();
+  for (const host of new Set(chosen.map((chip) => editable(chip.parentElement) ?? chip.parentElement))) {
+    const found = [];
+    for (const chip of host.querySelectorAll("[data-ge-atom]")) {
+      const band = bandOf(chip);
+      const line = found.find((each) => band.top < each.bottom - 1 && band.bottom > each.top + 1) ?? found[found.push(band) - 1];
+      line.top = Math.min(line.top, band.top);
+      line.bottom = Math.max(line.bottom, band.bottom);
+      lines.set(chip, line);
+    }
+  }
+  return lines;
+}
+
+// The rules of one chip: a formula's padding, and a chip selected (on `line`) its fill. Its name stands
+// three times, for a chip selected to outweigh the looks it has under the pointer and of its own.
+function rulesOf(chip, line) {
+  const name = `[data-ge-editing] ${`[data-ge-atom="${chip.getAttribute("data-ge-atom")}"]`.repeat(3)}`;
+  const drawing = drawingOf(chip);
+  const rules = [];
+  let box = chip.getBoundingClientRect();
+  if (drawing) {
+    // By what the padding does not move: KaTeX's own line inside .katex.
+    const inner = chip.querySelector(".katex-html").getBoundingClientRect();
+    box = { top: Math.min(inner.top, drawing.top), bottom: Math.max(inner.bottom, drawing.bottom) };
+    if (box.top < inner.top || box.bottom > inner.bottom) rules.push(`${name} .katex { padding-block: ${inner.top - box.top}px ${box.bottom - inner.bottom}px; }`);
+  }
+  if (selected.includes(chip)) {
+    const fill = drawing ? " .katex" : "";
+    if (chip.getClientRects().length > 1) rules.push(`${name}${fill} { background: var(--ge-select); border-radius: 0; }`);
+    else {
+      const room = parseFloat(getComputedStyle(chip).marginLeft);
+      rules.push(`${name}${fill} { position: relative; isolation: isolate; background: transparent; border-radius: 0; }`);
+      rules.push(`${name}${fill}::after { content: ""; position: absolute; inset: ${line.top - box.top}px ${-room}px ${box.bottom - line.bottom}px; z-index: -1; background: var(--ge-select); pointer-events: none; }`);
+    }
+  }
+  return rules;
+}
+
+// A sheet written anew is looked at against the whole page (10ms on a page of a thousand blocks): only when it changes.
+let written = "";
+function write() {
+  const lines = linesOf(selected.filter((chip) => chip.isConnected));
+  const rules = [...new Set([hovered, edited, ...selected])].filter((chip) => chip?.isConnected).flatMap((chip) => rulesOf(chip, lines.get(chip))).join("\n");
+  if (rules !== written) sheet?.replaceSync((written = rules));
+}
+
+/** The formula whose box is open, drawn anew by what is typed (null: none). */
+export function fillEdited(chip) {
+  edited = chip;
+  write();
+}
+
+/** Start following the pointer and the selection on the page (`isEditing`: the page edits). */
+export function connectChipFills(isEditing) {
+  addStyle(STYLE);
+  sheet = new CSSStyleSheet();
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  document.addEventListener("mouseover", (event) => {
+    const chip = isEditing() ? atomOf(event.target) : null;
+    if (!chip || chip === hovered) return;
+    hovered = chip;
+    write();
+  }, true);
+  document.addEventListener("selectionchange", () => {
+    const selection = getSelection();
+    const around = isEditing() && selection.rangeCount && !selection.isCollapsed ? selection.getRangeAt(0).commonAncestorContainer : null;
+    const chips = around ? [...(around.nodeType === 1 ? around : around.parentElement).querySelectorAll("[data-ge-atom]")].filter((chip) => selection.containsNode(chip)) : [];
+    if (chips.length === selected.length && chips.every((chip, index) => chip === selected[index])) return;
+    selected = chips;
+    write();
+  });
+}