@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/board/settings.mjs

@@ -0,0 +1,209 @@
+import { Z } from "../../../shared/layers.mjs";
+import { language, t } from "../../../shared/i18n/index.mjs";
+import { createMenu } from "../menu.mjs";
+import { placeBox } from "../placement.mjs";
+import { addStyle, button, element, mount } from "../ui.mjs";
+
+// A card's 设置… (docs/render.md "A custom page"): a small form of the fields its block's manifest
+// lists (`settings`: text, number, select, date, switch, document), Notion's popup look (the editor's
+// palette, look.mjs), standing under the card's grip (its right edge at the grip's). What it shows is what the card's settings part holds,
+// each field its manifest's default where it holds none; 保存 (or Enter in a field) hands the values
+// that changed to `save`, 取消, Escape or a press outside it nothing. Its buttons are the editor's flat
+// ones (CLAUDE.md 界面): no line round either, 取消 with no fill until the pointer is on it (grey), 保存 on
+// a pale blue fill of its own. A document is chosen from the
+// workspace's documents by title (the workbench's outline: GET /__gallery/workspace/outline, its web
+// links no documents), the slug what is kept. A choice from a list (select, document) is a field that
+// opens the editor's own menu card under it (menu.mjs: rows, the chosen one checked, ↑/↓ Enter Escape from
+// the field), not a native <select>: the page cannot style that one's popup, which a browser draws in
+// the system's colours (a white list with pale words in a dark page, the user's picture of 2026-11-09).
+// While the form stands, the page is not shown again under it (the board's idle).
+
+const STYLE = `
+  .ge-board-form { position: fixed; left: 0; top: 0; z-index: ${Z.menu}; box-sizing: border-box; width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px 12px 10px;
+    border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow-pop);
+    font: 14px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
+  .ge-board-form-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
+  .ge-board-form-title small { min-width: 0; overflow: hidden; color: var(--ge-tx3); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-field { display: block; margin: 0 0 10px; }
+  .ge-board-field > span { display: block; margin: 0 0 4px; color: var(--ge-tx2); font-size: 12px; }
+  .ge-board-field :is(input, .ge-board-pick) { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none;
+    background: var(--ge-field); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-edge); }
+  .ge-board-field :is(input, .ge-board-pick):focus, .ge-board-pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ge-focus), 0 0 0 2px var(--ge-halo); }
+  .ge-board-pick { display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
+  .ge-board-pick-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ge-board-pick svg { flex: none; display: block; width: 16px; height: 16px; fill: none; stroke: var(--ge-tx3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-board-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
+  .ge-board-switch > span { color: var(--ge-tx); font-size: 14px; }
+  .ge-board-switch button { position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: var(--ge-line-strong); cursor: pointer; transition: background .12s; }
+  .ge-board-switch button::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(15 15 15 / 20%); transition: transform .12s; }
+  .ge-board-switch button[aria-checked="true"] { background: var(--ge-accent); }
+  .ge-board-switch button[aria-checked="true"]::after { transform: translateX(12px); }
+  .ge-board-switch button:focus-visible { outline: 2px solid var(--ge-halo); }
+  .ge-board-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+  .ge-board-form-foot button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx); font: inherit; cursor: pointer; }
+  .ge-board-form-foot button:hover { background: var(--ge-hover); }
+  .ge-board-form-foot button[data-primary] { background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
+  .ge-board-form-foot button[data-primary]:hover { background: var(--ge-btn-primary-hover); }
+  .ge-board-form-foot button:focus-visible { outline: 2px solid var(--ge-halo); }
+  @media (prefers-reduced-motion: reduce) { .ge-board-switch :is(button, button::after) { transition: none; } }
+`;
+
+const CHEVRON = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>';
+const said = (words) => (typeof words === "string" ? words : words?.[language] ?? words?.zh ?? words?.en ?? "");
+let shown = null; // the form standing now: { node, close }
+
+/** Whether the form stands now. */
+export const formOpen = () => shown !== null;
+
+/** The workspace's documents, by title: [{ slug, title }] (none where the outline cannot be read). */
+async function documents() {
+  try {
+    const answer = await (await fetch("/__gallery/workspace/outline")).json();
+    return Object.values(answer.reports ?? {}).filter((report) => !report.instructions && report.kind !== "link").map(({ slug, title }) => ({ slug, title: title || slug }))
+      .sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The form for a card: `fields`, its manifest's settings; `values`, what its settings part holds;
+ * `name`, its block's name; `anchor`, the rect it stands by; `save(changed)`, the values that changed
+ * by key. Closes another that stands.
+ */
+export async function openSettings({ fields, values, name, anchor, save }) {
+  addStyle(STYLE);
+  shown?.close();
+  const kinds = new Map();
+  const pick = createMenu(); // the list of the field being chosen from (one at a time)
+  let picking = null; // the field it stands under
+  const node = element("form", { class: "ge-board-form", role: "dialog", "aria-label": t("卡片设置"), novalidate: "" });
+  node.append(element("div", { class: "ge-board-form-title" }, element("span", { text: t("设置") }), element("small", { text: said(name) })));
+  const listed = fields.some((field) => field.type === "document") ? await documents() : [];
+  const now = (field) => (Object.hasOwn(values ?? {}, field.key) ? values[field.key] : field.default);
+  for (const field of fields) {
+    const label = said(field.label) || field.key;
+    const value = now(field);
+    if (field.type === "switch") {
+      const toggle = element("button", { type: "button", role: "switch", "aria-checked": String(value === true), "aria-label": label, "data-key": field.key });
+      toggle.addEventListener("click", () => toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true")));
+      node.append(element("div", { class: "ge-board-switch" }, element("span", { text: label }), toggle));
+      kinds.set(field.key, { field, read: () => toggle.getAttribute("aria-checked") === "true" });
+      continue;
+    }
+    let control;
+    const choice = field.type === "select" || field.type === "document"; // chosen from a list
+    if (choice) {
+      const options = field.type === "select" ? field.options.map((option) => [String(option), String(option)]) : [["", t("（未选择）")], ...listed.map(({ slug, title }) => [slug, title])];
+      if (field.type === "document" && value && !listed.some(({ slug }) => slug === value)) options.push([String(value), String(value)]);
+      const text = element("span", { class: "ge-board-pick-text" });
+      control = element("button", { type: "button", class: "ge-board-pick", "data-key": field.key, "aria-haspopup": "menu", "aria-expanded": "false" }, text, element("span", { html: CHEVRON }));
+      // What the field holds is its `value` (the key of an option), shown as the option's words.
+      const show = (key) => {
+        control.value = key;
+        text.textContent = options.find(([option]) => option === key)?.[1] ?? key;
+      };
+      show(value === undefined || value === null ? (field.type === "select" ? String(field.options[0]) : "") : String(value));
+      const open = () => {
+        const wide = control.getBoundingClientRect();
+        picking = control;
+        control.setAttribute("aria-expanded", "true");
+        pick.open(options.map(([key, words]) => ({ label: words, selected: key === control.value, run: () => show(key) })), wide, {
+          label, width: Math.round(wide.width), icons: false, height: 280,
+          onClose: () => { if (picking === control) picking = null; control.setAttribute("aria-expanded", "false"); },
+        });
+        // The chosen row highlighted where there is one (the first otherwise: the menu's own).
+        const chosen = options.findIndex(([key]) => key === control.value);
+        for (let step = 0; step < Math.max(0, chosen); step++) pick.move(1);
+      };
+      control.addEventListener("click", () => { if (picking === control) pick.close(); else open(); });
+      control.addEventListener("keydown", (event) => {
+        if (event.isComposing || event.keyCode === 229) return;
+        if (picking !== control) {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            open();
+          }
+          return;
+        }
+        if (pick.arrow(event)) event.preventDefault();
+        else if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          pick.choose();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation(); // the list closes; the form stays
+          pick.close();
+        } else if (event.key === "Tab") pick.close();
+      });
+    } else {
+      control = element("input", { type: field.type === "number" ? "number" : field.type === "date" ? "date" : "text", "data-key": field.key, autocomplete: "off" });
+      control.value = value === undefined || value === null ? "" : String(value);
+    }
+    // A field to choose from is no <label> (a click on its words would open its list): its words name it by aria-labelledby.
+    const words = element("span", { text: label });
+    if (choice) {
+      words.id = `ge-board-label-${field.key}`;
+      control.setAttribute("aria-labelledby", words.id);
+    }
+    node.append(element(choice ? "div" : "label", { class: "ge-board-field" }, words, control));
+    kinds.set(field.key, {
+      field,
+      read: () => {
+        if (field.type === "number") return control.value.trim() === "" ? null : Number(control.value);
+        if (field.type === "select") return field.options.find((option) => String(option) === control.value) ?? field.options[0];
+        return control.value;
+      },
+    });
+  }
+  const close = () => {
+    if (shown?.node !== node) return;
+    shown = null;
+    pick.close();
+    node.remove();
+    removeEventListener("pointerdown", outside, true);
+  };
+  // What a field showed as it opened, as it reads it back (a field the part holds nothing of shows its default, or nothing).
+  const shownAt = (field) => now(field) ?? (field.type === "switch" ? false : field.type === "select" ? field.options[0] : field.type === "number" ? null : "");
+  // Only what the reader changed goes: a field left as it showed stays as the part holds it (its default unwritten).
+  const done = () => {
+    const changed = {};
+    for (const [key, { field, read }] of kinds) {
+      const value = read();
+      if (field.type === "number" && value !== null && !Number.isFinite(value)) continue;
+      if (JSON.stringify(value) !== JSON.stringify(shownAt(field))) changed[key] = value;
+    }
+    close();
+    if (Object.keys(changed).length) save(changed);
+  };
+  const outside = (event) => {
+    if (!node.contains(event.target) && !pick.contains(event.target)) close();
+  };
+  node.addEventListener("submit", (event) => {
+    event.preventDefault();
+    done();
+  });
+  node.addEventListener("keydown", (event) => {
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    } else if (event.key === "Enter" && event.target.localName === "input") {
+      event.preventDefault();
+      done();
+    }
+  });
+  node.append(element("div", { class: "ge-board-form-foot" }, button(t("取消"), close), element("button", { type: "submit", "data-primary": "", text: t("保存") })));
+  mount(node);
+  const { left, top } = placeBox(anchor, { width: node.offsetWidth, height: node.offsetHeight }, { placement: "bottom", align: "end", gap: 6 });
+  node.style.left = `${Math.round(left)}px`;
+  node.style.top = `${Math.round(top)}px`;
+  shown = { node, close };
+  addEventListener("pointerdown", outside, true);
+  node.querySelector("input, .ge-board-pick, button[role=switch]")?.focus({ preventScroll: true });
+  return node;
+}
+
+/** The form taken away, whatever it holds. */
+export const closeSettings = () => shown?.close();

package/browser/editor/page/caret.mjs

@@ -105,7 +105,7 @@ export function caretAtOffset(host, offset) {
     rest -= node.length;
     last = node;
   }
-  if (last) caretAt(host, "end");
+  caretAt(host, last ? "end" : "start"); // past its text, or in a block with none (emptied)
 }
 
 /** The selection when it is non-empty and inside a single block: { host, range }, or null. */
@@ -507,7 +507,10 @@ export function reveal(host, line, margin = 24) {
   const style = getComputedStyle(scroller ?? document.documentElement);
   const above = kept(style.scrollPaddingTop, margin);
   const below = kept(style.scrollPaddingBottom, margin);
-  const delta = line.bottom > view.bottom - below ? line.bottom - view.bottom + below : line.top < view.top + above ? line.top - view.top - above : 0;
+  const exact = line.bottom > view.bottom - below ? line.bottom - view.bottom + below : line.top < view.top + above ? line.top - view.top - above : 0;
+  // Whole pixels, away from the line: a scroll by a fraction is rounded by the browser, and rounded
+  // down it left a line at the window's bottom a fraction of a pixel past it.
+  const delta = exact > 0 ? Math.ceil(exact) : Math.floor(exact);
   if (!delta) return;
   if (scroller) scroller.scrollTop += delta;
   else scrollBy(0, delta);

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

@@ -0,0 +1,94 @@
+import { t } from "../../../shared/i18n/index.mjs";
+import { Z } from "../../../shared/layers.mjs";
+import { PANEL_STYLE, onPanels, panelGone, panelShown } from "../panel.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount, textButton } from "../ui.mjs";
+
+// The bar of the Agent's changes (docs/editor.md "Agent's changes"), Cursor's review bar: the third of
+// the editor's bottom panels (panel.mjs), in the middle of the window's bottom, so that a notice
+// stands above it as above the others. It says how many blocks the Agent added and changed (+) and
+// changed and deleted (−), the numbers in the conflict card's green and red, and offers 撤回 and 确认
+// (the primary one: the pale blue), in the editor's one button look (look.mjs BUTTONS: no line, no fill
+// until the pointer is on it). Reverted, it says so and offers
+// 撤销 for UNDO_SHOWN. A conflict card at the left or the lost texts at the right reaching under it
+// lift it 8px above them.
+
+const STYLE = `
+  .ge-changes { position: fixed; left: 50%; bottom: var(--ge-changes-bottom, 16px); transform: translateX(-50%); z-index: ${Z.panel};
+    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; box-sizing: border-box; max-width: calc(100vw - 32px);
+    border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow);
+    font: 13px/1 var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); white-space: nowrap; }
+  .ge-changes[hidden] { display: none; }
+  .ge-changes-what { color: var(--ge-tx2); }
+  .ge-changes-count { display: inline-flex; gap: 6px; margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 500; }
+  .ge-changes-plus { color: var(--ge-diff-add-text); }
+  .ge-changes-minus { color: var(--ge-diff-del-text); }
+  @media print { .ge-changes { display: none; } }
+`;
+
+export const UNDO_SHOWN = 6000; // how long a revert can be undone from the bar
+const ABOVE = 8; // px between a bottom panel and the bar lifted over it
+const BOTTOM = 16;
+
+/** The bar: { counts(counts), reverted(left, undo), hide(), node }. revert(), accept(): what its buttons do. */
+export function createBar({ revert, accept }) {
+  addStyle(PANEL_STYLE);
+  addStyle(STYLE);
+  let bar = null;
+  let timer = 0;
+  // Lifted over a bottom panel it would stand on.
+  const place = () => {
+    if (!bar || bar.hidden) return;
+    const own = bar.getBoundingClientRect();
+    let lift = BOTTOM;
+    for (const panel of document.querySelectorAll(".ge-conflicts:not([hidden]), .ge-panel")) {
+      const rect = panel.getBoundingClientRect();
+      if (rect.height > 0 && rect.left < own.right && rect.right > own.left) lift = Math.max(lift, Math.round(innerHeight - rect.top) + ABOVE);
+    }
+    bar.style.setProperty("--ge-changes-bottom", `${lift}px`);
+  };
+  onPanels(place);
+  addEventListener("resize", place, { passive: true });
+  const made = () => {
+    if (!bar) bar = mount(element("div", { class: "ge-changes", role: "region", "aria-label": t("Agent 的修改"), hidden: "" }));
+    return bar;
+  };
+  const show = (...children) => {
+    clearTimeout(timer);
+    const node = made();
+    node.replaceChildren(...children);
+    if (node.hidden) {
+      fadeIn(node);
+      panelShown(node);
+    }
+    place();
+  };
+  return {
+    get node() { return bar; },
+    counts({ added = 0, changed = 0, removed = 0 }) {
+      const plus = added + changed;
+      const minus = removed + changed;
+      show(
+        element("span", { class: "ge-changes-what", text: t("Agent 已修改") }),
+        element("span", { class: "ge-changes-count", title: t("Agent 新增 {0} 块、改动 {1} 块、删除 {2} 块", added, changed, removed) },
+          ...(plus ? [element("span", { class: "ge-changes-plus", text: `+${plus}` })] : []),
+          ...(minus ? [element("span", { class: "ge-changes-minus", text: `−${minus}` })] : [])),
+        textButton(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
+        textButton(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
+      );
+    },
+    // Reverted `left` ms ago at most: 撤销 offered until UNDO_SHOWN is over.
+    reverted(left, undo) {
+      show(
+        element("span", { class: "ge-changes-what", text: t("已撤回 Agent 的修改") }),
+        textButton(t("撤销"), undo, { "data-action": "undo" }),
+      );
+      timer = setTimeout(() => this.hide(), Math.max(0, left));
+    },
+    hide() {
+      clearTimeout(timer);
+      if (!bar || bar.hidden) return;
+      const node = bar;
+      fadeOut(node, 100, () => panelGone(node));
+    },
+  };
+}

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

@@ -0,0 +1,206 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
+import { KIND_NAMES } from "../../components/registry.mjs";
+import { identityOf, withLeads } from "../core.mjs";
+import { own } from "../overlays.mjs";
+import { drawAt, layerOf } from "../overlay-layer.mjs";
+import { element } from "../ui.mjs";
+
+// The blocks an Agent deleted, shown where they were (docs/editor.md "Agent's changes"): a ghost of
+// them, their words in red struck through on a faint red fill, a line each (a heading larger and
+// bold, an item with its marker, nested items further in, a table a line each row, a block with no
+// words its kind's name), never a block of the page: nothing of it is in the document's flows, so no
+// commit, undo step, copy, selection, drop or search ever meets it. Room is made for it where the
+// blocks were by a margin of the block after the place (`before`; at the document's end the last
+// block's below it, `after`; with no block left at all, the body's top, `into`), written in a
+// stylesheet of the editor's own keyed by that block's identity (data-ge-id: never a style
+// attribute, which the file would get), and the ghost is drawn in that room in the block's overlay
+// layer (overlay-layer.mjs), measured first: the room is its height and the gap the page had
+// there, the gap kept above it and below it (a collapsed margin made good on a second measure). A
+// block that stands beside others (a Sheet's tab in its bar, a flowchart's node in its row, a column
+// of 分栏) has the room made before the row it stands in, which a margin of its own would push out of
+// line; what stands at one place is one ghost in one room (two groups before one row; one before a
+// block and one before the first of its blocks that stays, a paragraph before a list and the list's
+// first item: a margin of the inner one would fold into the outer one's, the two drawn over each
+// other). Placed again whenever the page may have moved (the overlays' frame loop), the room made
+// again when its height changes (the window narrowed, its lines wrapped anew).
+
+const REACH = 2; // px past the block at its sides, as a text block's fill
+const GAP_LEAST = 6;
+const GAP_MOST = 20;
+
+export const GHOST_STYLE = `
+  .ge-diff-ghost { left: 0; top: 0; z-index: ${IN_LAYER.halo}; box-sizing: border-box; padding: 2px ${REACH}px; border-radius: 4px; background: var(--ge-diff-del-fill); color: var(--ge-diff-del-text); pointer-events: none; user-select: none; overflow-wrap: anywhere; }
+  .ge-diff-ghost-line { position: relative; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
+  .ge-diff-ghost-line + .ge-diff-ghost-line { margin-top: 2px; }
+  .ge-diff-ghost-words { text-decoration: line-through; text-decoration-color: var(--ge-diff-del-text); }
+  .ge-diff-ghost-line[data-tag="h1"], .ge-diff-ghost-line[data-tag="h2"] { font-size: 1.25em; font-weight: 600; }
+  .ge-diff-ghost-line:is([data-tag="h3"], [data-tag="h4"]) { font-size: 1.1em; font-weight: 600; }
+  .ge-diff-ghost-line[data-tag="pre"] { font-family: var(--doc-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .875em; }
+  .ge-diff-ghost-marker { position: absolute; transform: translateX(-100%); padding-right: .45em; font-variant-numeric: tabular-nums; }
+  .ge-diff-ghost-line[data-empty] .ge-diff-ghost-words { text-decoration: none; opacity: .8; }
+  @media print { .ge-diff-ghost { display: none; } }
+`;
+
+const shows = (node) => node.isConnected && node.getClientRects().length > 0 && node.getBoundingClientRect().width > 0;
+
+// Whether `node` stands beside the blocks next to it rather than under them: in a row of a flex box,
+// a grid of more than one column, or a line of text.
+function beside(node) {
+  const parent = node.parentElement;
+  if (!parent || parent.localName === "main") return false;
+  const style = getComputedStyle(parent);
+  if (style.display.includes("flex")) return style.flexDirection.startsWith("row");
+  if (style.display.includes("grid")) return style.gridTemplateColumns.trim().split(/\s+/).length > 1;
+  return getComputedStyle(node).display.startsWith("inline");
+}
+// The block a room is made before or after for `node`: itself, or the row it stands in.
+function rowOf(node) {
+  while (beside(node)) node = node.parentElement;
+  return node;
+}
+const level = (a, b) => Math.abs(a.getBoundingClientRect().top - b.getBoundingClientRect().top) < 1;
+
+/** A line of the ghost: one deleted block (source/changes.mjs ghostRow). */
+function lineOf(row) {
+  const words = (row.text ?? "").trim();
+  const line = element("div", { class: "ge-diff-ghost-line", "data-tag": row.tag ?? "" });
+  line.style.paddingLeft = `${(row.depth ?? 0) * 1.5 + (row.marker ? 1.5 : 0)}em`;
+  if (row.marker) line.append(element("span", { class: "ge-diff-ghost-marker", text: row.marker === "ol" ? `${row.number ?? 1}.` : "•" }));
+  if (!words) line.setAttribute("data-empty", "");
+  line.append(element("span", { class: "ge-diff-ghost-words", text: words || KIND_NAMES[row.kind] || "…" }));
+  return line;
+}
+
+/**
+ * The ghosts of a review's deleted blocks. Returns { add(group, anchor, edge), place(), clear(),
+ * drop(gone?), count, entries }: add makes one (drawn at the next place), place puts each where its
+ * room is (made or made again as needed), clear takes them and their rooms away.
+ */
+export function createGhosts() {
+  const sheet = element("style", { "data-doc-dev": "", "data-ge-changes-room": "" });
+  let entries = []; // { drawn, group, anchor, edge, target, height, width, gap, room }
+
+  // The rooms, one rule each, for the screen alone (printed, the page is as the file has it). A
+  // room's margin is !important: the kit's spacing (a flow's first block's none, the gap between two
+  // kinds of block) is said by rules more specific than one attribute, and the room is added to it.
+  function writeRules() {
+    const text = entries.map((entry) => entry.room).filter(Boolean).join("\n");
+    const css = text ? `@media screen {\n${text}\n}` : "";
+    if (sheet.textContent !== css) sheet.textContent = css;
+    if (css && !sheet.isConnected) document.head.append(sheet);
+    if (!css && sheet.isConnected) sheet.remove();
+  }
+  const selectorOf = (target) => (target.localName === "main" ? "main" : `[data-ge-id="${CSS.escape(identityOf(target))}"]`);
+  const setRule = (entry, declaration) => {
+    entry.room = declaration ? `${selectorOf(entry.target)} { ${declaration} }` : null;
+    writeRules();
+  };
+
+  // Room for `height` px where `entry`'s blocks were, the gap the page had there kept on either side.
+  function makeRoom(entry, height) {
+    const { target, edge } = entry;
+    setRule(entry, null);
+    const style = getComputedStyle(target);
+    if (edge === "after") {
+      entry.gap = Math.min(GAP_MOST, Math.max(GAP_LEAST, parseFloat(style.marginBottom) || 0));
+      setRule(entry, `margin-bottom: ${Math.round((parseFloat(style.marginBottom) || 0) + entry.gap + height + entry.gap)}px !important;`);
+      return;
+    }
+    if (edge === "into") {
+      entry.gap = GAP_LEAST;
+      setRule(entry, `padding-top: ${Math.round((parseFloat(style.paddingTop) || 0) + height + 2 * entry.gap)}px !important;`);
+      return;
+    }
+    const top = target.getBoundingClientRect().top;
+    let before = target.previousElementSibling;
+    while (before && (before.hasAttribute("data-doc-dev") || !shows(before))) before = before.previousElementSibling;
+    const above = before ? top - before.getBoundingClientRect().bottom : null;
+    entry.gap = Math.min(GAP_MOST, Math.max(GAP_LEAST, above ?? GAP_LEAST));
+    const want = height + entry.gap; // how far the block goes down
+    let margin = (parseFloat(style.marginTop) || 0) + want;
+    setRule(entry, `margin-top: ${Math.round(margin)}px !important;`);
+    const moved = target.getBoundingClientRect().top - top;
+    if (Math.abs(moved - want) > 0.5) { // its margin collapsed with the one above it
+      margin += want - moved;
+      setRule(entry, `margin-top: ${Math.round(margin)}px !important;`);
+    }
+  }
+
+  return {
+    get count() { return entries.length; },
+    get entries() { return entries; },
+    /** A ghost of `group` (a review's `removed` entry) at `anchor`'s `edge` ("before", "after", "into"). */
+    add(group, anchor, edge) {
+      const lines = group.rows.map(lineOf);
+      if (group.more || group.rows.length === 0) lines.push(lineOf({ text: "…", tag: "", depth: 0 }));
+      const target = edge === "into" ? anchor : rowOf(edge === "before" ? withLeads(anchor)[0] : anchor);
+      // At the place of one made already (the groups come in the page's order): its lines go on in that one.
+      const one = entries.find((entry) => entry.edge === edge && (entry.target === target || (edge === "before" && entry.target.contains(target) && level(entry.target, target))));
+      if (one) {
+        one.drawn.append(...lines);
+        one.height = -1;
+        return one;
+      }
+      const drawn = element("div", { class: "ge-diff-ghost", "data-doc-dev": "", "aria-hidden": "true" }, ...lines);
+      const entry = { drawn, group, anchor, edge, target, height: -1, width: -1, gap: GAP_LEAST, room: null };
+      own(drawn, "changes", { owner: anchor, alive: () => anchor.isConnected && entries.includes(entry) });
+      entries.push(entry);
+      return entry;
+    },
+    /** Each ghost where its room is; a block not shown (a closed disclosure, another tab) neither ghost nor room. */
+    place() {
+      let changed = false;
+      for (const entry of entries) {
+        const { drawn: node, target } = entry;
+        if (!entry.anchor.isConnected || !shows(target)) {
+          node.remove();
+          if (entry.room) {
+            entry.room = null;
+            entry.height = -1;
+            changed = true;
+          }
+          continue;
+        }
+        const layer = layerOf(target);
+        if (node.parentNode !== layer) {
+          const font = getComputedStyle(target.closest("main") ?? document.body);
+          Object.assign(node.style, { fontFamily: font.fontFamily, fontSize: font.fontSize, lineHeight: font.lineHeight });
+          layer.append(node);
+        }
+        let rect = target.getBoundingClientRect();
+        const width = Math.round(rect.width + 2 * REACH);
+        if (width !== entry.width) {
+          node.style.width = `${width}px`;
+          entry.width = width;
+        }
+        const height = node.offsetHeight;
+        if (height !== entry.height) {
+          makeRoom(entry, height);
+          entry.height = height;
+          rect = target.getBoundingClientRect();
+        }
+        const top = entry.edge === "before" ? rect.top - entry.gap - height
+          : entry.edge === "after" ? rect.bottom + entry.gap
+          : rect.top + (parseFloat(getComputedStyle(target).paddingTop) || 0) - height - entry.gap;
+        const origin = layer.getBoundingClientRect();
+        drawAt(node, layer, rect.left - REACH - origin.left, top - origin.top);
+      }
+      if (changed) writeRules();
+      return entries.length > 0;
+    },
+    /** Ghosts whose block left the page go, and their rooms. */
+    settle() {
+      const gone = entries.filter((entry) => !entry.anchor.isConnected);
+      if (gone.length === 0) return;
+      for (const entry of gone) entry.drawn.remove();
+      entries = entries.filter((entry) => !gone.includes(entry));
+      writeRules();
+    },
+    /** Every ghost and room taken away. */
+    clear() {
+      for (const entry of entries) entry.drawn.remove();
+      entries = [];
+      writeRules();
+    },
+  };
+}

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

@@ -0,0 +1,94 @@
+import { isPad } from "../pads.mjs";
+
+// The words an Agent took out of a text block, shown where they were (docs/editor.md "Agent's
+// changes"): an empty inline span of the editor's own in the block's text (`span.ge-diff-del`,
+// `data-ge-gone-words` holding the words, drawn by its ::before, contenteditable="false",
+// aria-hidden, data-doc-dev). It holds no text node, so whatever reads the block's words (its
+// textContent, a selection's text, readText, the search, the outline, a copy's plain text) reads none
+// of them; what reads its markup leaves it out (core.mjs serializeNodes, writing the text on either side
+// of it as one; ownHTML, which undo records; a copy's clipboard.own, which drops data-doc-dev). Put in, it
+// splits the text node it stands in (the live ranges, the selection and the added words' highlight
+// among them, follow); taken out, the two halves are one text node again, the caret where it was (and
+// the live ranges it is given: a selection across blocks', which keeps its ends as points of its own).
+
+const ATTRIBUTE = "data-ge-gone-words";
+
+/**
+ * A mark of `words` taken out (not on the page yet). `before`, `after`: the characters of the text on
+ * either side of where it goes. A space at either end of the words is drawn apart from them, neither
+ * struck nor filled (data-ge-gone-lead, -tail), and only where the text beside has none: "words
+ * [that were removed] stay", never a struck space.
+ */
+export function goneMark(words, doc = document, { before, after } = {}) {
+  const span = doc.createElement("span");
+  span.className = "ge-diff-del";
+  const bare = words.trim();
+  span.setAttribute(ATTRIBUTE, bare || words);
+  if (bare && /^\s/.test(words) && before !== undefined && !/\s/.test(before)) span.setAttribute("data-ge-gone-lead", "");
+  if (bare && /\s$/.test(words) && after !== undefined && !/\s/.test(after)) span.setAttribute("data-ge-gone-tail", "");
+  span.setAttribute("contenteditable", "false");
+  span.setAttribute("aria-hidden", "true");
+  span.setAttribute("data-doc-dev", "");
+  return span;
+}
+
+/**
+ * Where words taken out at character `at` of `read` (annotate/anchors.mjs readText of the block)
+ * stand: before that character, or after the one before it when it is a line's end or there is
+ * none (the words taken out at the block's end). { place, side }, or null for a block with no text.
+ */
+export function placeOf(read, at) {
+  if (read.at[at]) return { place: read.at[at], side: "before" };
+  if (at > 0 && read.at[at - 1]) return { place: read.at[at - 1], side: "after" };
+  for (let index = at + 1; index < read.at.length; index++) if (read.at[index]) return { place: read.at[index], side: "before" };
+  for (let index = Math.min(at, read.at.length) - 1; index >= 0; index--) if (read.at[index]) return { place: read.at[index], side: "after" };
+  return null;
+}
+
+/** Put `mark` at `where` (placeOf): in a text node split there, or beside a formula or a chip, never inside one. */
+export function putMark(mark, { place, side }) {
+  if (place.node) {
+    const { node } = place;
+    const at = side === "before" ? place.offset : place.offset + 1;
+    if (at <= 0) node.before(mark);
+    else if (at >= node.length) node.after(mark);
+    else node.splitText(at).before(mark);
+    return;
+  }
+  const beside = place.element.closest("[data-ge-atom]") ?? place.element;
+  if (side === "before") beside.before(mark);
+  else beside.after(mark);
+}
+
+/**
+ * Take `mark` off the page, the text on either side of it one text node again, the selection where it
+ * was, and so each of `ranges` (live ranges a tool keeps: a selection across blocks' pieces,
+ * text-select/), whose ends in the second half would otherwise fall out of the text with it.
+ */
+export function takeMark(mark, ranges = []) {
+  const first = mark.previousSibling;
+  const second = mark.nextSibling;
+  mark.remove();
+  if (first?.nodeType !== 3 || second?.nodeType !== 3 || isPad(first) || isPad(second)) return;
+  const selection = first.ownerDocument.getSelection();
+  const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+  const length = first.length;
+  const held = ranges.map((range) => [range, range.startContainer === second ? range.startOffset : -1, range.endContainer === second ? range.endOffset : -1]);
+  first.appendData(second.data);
+  second.remove();
+  for (const [range, start, end] of held) {
+    if (start >= 0) range.setStart(first, length + start);
+    if (end >= 0) range.setEnd(first, length + end);
+  }
+  if (anchorNode !== second && focusNode !== second) return; // where it is still says the same (a point in `first`, or in their parent)
+  const point = (node, offset) => (node === second ? [first, length + offset] : [node, offset]);
+  selection.setBaseAndExtent(...point(anchorNode, anchorOffset), ...point(focusNode, focusOffset));
+}
+
+// The reader edits a block holding marks: they go first, before the edit touches it (changes/index.mjs).
+// A key edits unless it only moves the caret or the view, or copies, selects all, finds, saves or prints.
+const MOVES = /^(Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageDown|Escape|Shift|Control|Alt|Meta|AltGraph|CapsLock|NumLock|ScrollLock|ContextMenu|F\d{1,2})$/;
+const KEEPS = /^[acfsp]$/;
+
+/** Whether a keydown may edit the block the caret is in (an input method's Process key does). */
+export const editsBy = (event) => !MOVES.test(event.key) && !((event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey && KEEPS.test(event.key));