@heycys/gallery 0.1.1 → 0.2.0

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

@@ -13,17 +13,20 @@ import { t } from "../../../shared/i18n/index.mjs";
 // and blocks/grid.css), and between the nodes of a flowchart's row (步骤流程图: the same tool, the
 // user's of 2026-10-25). With the pointer in the gap between two of them, a thin line stands down
 // it, and the cursor says it resizes: dragging it moves only the two beside it (ratiosAfterResize:
-// snapping to their equal split and to tenths of the row, each keeping its least share), each one's
-// share shown at its top right while it lasts; letting go writes the shares as one undo step, Esc
-// cancels, and a double click makes the row's parts equal again. A kind of row (KINDS) says how its
-// parts are found, measured, shown while dragged and written:
-//   - a row of columns: the line blue in the row (grey above it, up to its pin); above each gap, and
-//     right of the last column, a dot turns into a pin that adds a column there (新增分栏). While the
+// snapping to their equal split and to tenths of the row within SNAP px, each keeping its least
+// share), the bottom notice saying the row's shares while it lasts (no badge on the parts: the user,
+// 2026-11-07, who also found the old snap of 1% of the row too strong); letting go writes the shares
+// as one undo step, Esc cancels, and a double click makes the row's parts equal again. The line is
+// a gray, never a bright blue (the guide tokens, look.mjs): faint where a drag may start, darker
+// while it is dragged, darkest where it snaps. A kind of row (KINDS) says how its parts are found,
+// measured, shown while dragged and written:
+//   - a row of columns: the line darker in the row (fainter above it, up to its pin); above each gap,
+//     and right of the last column, a dot turns into a round + that adds a column there (新增分栏). While the
 //     pointer is over a row, or the caret in it, its columns are tinted, so the reader sees where they
 //     are. A row stacked on a narrow screen has no gaps. Its shares (--doc-column-ratio) are shown
 //     as the columns' flex-grow while dragged, written as one structural step.
 //   - a flowchart's row, as the kit laid it out (its nodes whose cards stand at one height:
-//     components/flowchart/page.mjs rowsOfFlow): the line grey, blue once pressed (the mock's), the
+//     components/flowchart/page.mjs rowsOfFlow): the line faint, darker once pressed, the
 //     arrow under it dimmed while it shows; no pin (a node is added by the "+" at a node's right,
 //     add.mjs). A node keeps the least width the kit gives a card beside others (leastWidth: 116px and
 //     its longest word), so the row never wraps under the pointer. Its shares are each node's weight
@@ -42,26 +45,30 @@ const STYLE = `
   }
   ${gestureLock("data-ge-gap", { cursor: "col-resize" })}
   html[data-ge-gap-drag] { -webkit-user-select: none; user-select: none; }
-  .ge-gap-line { width: 2px; border-radius: 2px; background: light-dark(#dee0e3, #4b4e53); pointer-events: none; }
-  .ge-gap-line[data-hot] { background: #336df4; }
-  .ge-gap-pin { width: 16px; height: 16px; cursor: pointer; pointer-events: auto; }
-  .ge-gap-pin > svg { position: absolute; display: block; }
-  .ge-gap-pin > .ge-gap-dot { left: 6px; top: 6.5px; }
-  .ge-gap-pin > .ge-gap-add { left: -3px; top: -8px; opacity: 0; transform: scale(0); transform-origin: 50% 90%; transition: opacity .15s, transform .15s; }
+  .ge-gap-line { width: 2px; border-radius: 1px; background: var(--ge-guide); pointer-events: none; }
+  .ge-gap-line[data-hot] { background: var(--ge-guide-hot); }
+  .ge-gap-line[data-hot][data-snap] { background: var(--ge-guide-snap); }
+  .ge-gap-pin { width: 16px; height: 16px; color: var(--ge-ico3); cursor: pointer; pointer-events: auto; }
+  .ge-gap-pin > .ge-gap-dot { position: absolute; left: 6px; top: 6.5px; display: block; }
+  .ge-gap-pin > .ge-gap-add { position: absolute; left: -2px; top: -2px; display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
+    background: var(--ge-bg); color: var(--ge-ico); box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%)); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
+  .ge-gap-pin > .ge-gap-add > svg { display: block; }
   .ge-gap-pin:hover > .ge-gap-dot { opacity: 0; }
   .ge-gap-pin:hover > .ge-gap-add { opacity: 1; transform: scale(1); }
-  .ge-gap-badge { padding: 0 4px; border-radius: 4px; color: #fff; background: rgb(0 0 0 / 30%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 12px/18px var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); pointer-events: none; white-space: nowrap; }
   /* The arrow under a flowchart's gap line (the node's ::after, the kit's) dimmed while the line shows. */
   ol.doc-flow > li::after { transition: opacity .12s; }
   ol.doc-flow > li[data-ge-gap-dim]::after { opacity: .15; }
   @media (prefers-reduced-motion: reduce) { ol.doc-flow > li::after { transition: none; } }
 `;
-// Feishu's dot and pin.
-const DOT = '<svg class="ge-gap-dot" width="4" height="3" viewBox="0 0 4 3" aria-hidden="true"><path d="M3.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="#BBBFC4"/></svg>';
-const PIN = '<svg class="ge-gap-add" width="22" height="24" viewBox="0 0 22 24" aria-hidden="true"><path fill-rule="evenodd" d="M16.153 20.721A10.999 10.999 0 0022 11c0-6.075-4.925-11-11-11S0 4.925 0 11c0 4.213 2.369 7.873 5.847 9.721L11 24l5.153-3.279z" fill="#3370FF"/><path fill-rule="evenodd" d="M10.45 6a.2.2 0 00-.2.2v4.05H6.2a.2.2 0 00-.2.2v1.1c0 .11.09.2.2.2h4.05v4.05c0 .11.09.2.2.2h1.1a.2.2 0 00.2-.2v-4.05h4.05a.2.2 0 00.2-.2v-1.1a.2.2 0 00-.2-.2h-4.05V6.2a.2.2 0 00-.2-.2h-1.1z" fill="#fff"/></svg>';
+// Feishu's dot, in the handle's quietest gray; under the pointer it turns into a round + in the
+// look of the editor's small floating buttons (a white disc, a hairline, a gray +), not Feishu's blue pin.
+const DOT = '<svg class="ge-gap-dot" width="4" height="3" viewBox="0 0 4 3" aria-hidden="true"><path d="M3.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="currentColor"/></svg>';
+const PIN = '<span class="ge-gap-add"><svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 1.75v8.5M1.75 6h8.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span>';
 const TAIL = 20; // right of the last column, the pin's gap (Feishu's last gap)
 const ABOVE = 30; // the pin stands this far above the row: the gap reaches up to it
 const DOUBLE = { time: 500, distance: 4 }; // two presses on a gap this soon and this near: a double click (ms, px)
+const SNAP = 5; // px: how near the equal split or a tenth of the row a dragged gap snaps to it
+const LIVE = 60000; // ms: the notice saying the shares stays while the drag lasts (it is taken off when it ends)
 
 const percent = (ratios) => ratios.map((ratio) => `${Math.round(100 * ratio)}%`).join(" / ");
 const same = (a, b) => a.every((ratio, index) => Math.abs(ratio - b[index]) < 0.0005);
@@ -69,16 +76,17 @@ const same = (a, b) => a.every((ratio, index) => Math.abs(ratio - b[index]) < 0.
 /**
  * active(): whether the tools may show. struct(parents, touched, mutate): the editor's undoable
  * structural change (it records the columns' widths). look(elements, changes): the editor's undoable
- * change of blocks' looks (a flowchart's nodes' weights, history.mjs lookStep). say: the status line.
+ * change of blocks' looks (a flowchart's nodes' weights, history.mjs lookStep). say(text, kind, hold):
+ * the bottom notice; settle(): the notice taken off.
  * What is resized is known by the page objects that say so: `columnOps` (a row's ratios, add(row,
  * index): a new column there) and `rowOps` (a row of nodes, its shares and weights).
  */
-export function createColumnGaps({ active, struct, look, say }) {
+export function createColumnGaps({ active, struct, look, say, settle = () => {} }) {
   addStyle(STYLE);
   const { add, columnsOf, ratiosAfterResize, ratiosOf, setRatios, sized } = columnOps() ?? {};
   const { leastWidth, rowShares, rowsOfFlow, weightValue } = rowOps() ?? {};
   let hover = null; // { row, index, last, line, pin }: the gap after part `index` of `row` (last: right of the last column)
-  let drag = null; // { row, index, start, before, least, ratios, span, x, line, badges }
+  let drag = null; // { row, index, start, before, least, ratios, snapped, span, x, line, told }
 
   // ---------- the kinds of row ----------
   // A row: { kind, el: the element holding it (a row of columns, a flowchart), parts: its parts in
@@ -86,6 +94,7 @@ export function createColumnGaps({ active, struct, look, say }) {
   const KINDS = {
     columns: {
       label: "column", // what its overlays are listed as (overlays.mjs)
+      live: (ratios) => t("栏宽：{0}", percent(ratios)), // the notice while a gap is dragged
       containers: kept(() => [...document.querySelectorAll(".doc-columns[data-ge-box]")]),
       // Its one row, side by side (a stacked one has no gaps).
       rows: (el) => (getComputedStyle(el).flexDirection.startsWith("column") ? [] : [columnsOf(el)]),
@@ -118,6 +127,7 @@ export function createColumnGaps({ active, struct, look, say }) {
     },
     flowchart: {
       label: "flowchart",
+      live: (ratios) => t("节点宽度：{0}", percent(ratios)),
       containers: kept(() => [...document.querySelectorAll("ol.doc-flow[data-ge-box]:not([data-ge-keep])")]),
       // Its rows of two nodes or more, laid out in rows by the kit (one node a row has no gaps).
       rows: (el) => (getComputedStyle(el).flexDirection.startsWith("column") ? [] : rowsOfFlow(el).filter((steps) => steps.length > 1 && steps.every((step) => step.hasAttribute("data-ge-box")))),
@@ -256,7 +266,8 @@ export function createColumnGaps({ active, struct, look, say }) {
       before: kind.before(row),
       least: kind.least(row, span),
       line: hover?.line ?? null,
-      badges: row.parts.map((part) => own(element("div", { class: "ge-gap-badge", "data-doc-dev": "" }), `${kind.label} share`, { owner: part, alive: () => drag?.row === row && row.el.isConnected })),
+      snapped: false,
+      told: null, // what the notice says now
     };
     hover?.pin?.remove();
     hover?.line.setAttribute("data-hot", "");
@@ -268,43 +279,34 @@ export function createColumnGaps({ active, struct, look, say }) {
   }
 
   // The two parts beside the gap as the pointer has moved (none until it has: a press alone changes
-  // nothing), shown, each share on its part.
+  // nothing), shown; the row's shares in the bottom notice (said again only when they change), the
+  // line darkest where they snapped.
   function update(x) {
     const { row, index, start, span, least } = drag;
     const kind = kindOf(row);
-    drag.ratios = Math.abs(x - drag.x) < 1 ? start : ratiosAfterResize(start, index, (x - drag.x) / span, least);
+    const moved = (x - drag.x) / span;
+    drag.ratios = Math.abs(x - drag.x) < 1 ? start : ratiosAfterResize(start, index, moved, least, SNAP / span);
+    drag.snapped = Math.abs(x - drag.x) >= 1 && !same(drag.ratios, ratiosAfterResize(start, index, moved, least, 0));
     if (same(drag.ratios, start)) kind.reset(row, drag.before);
     else kind.show(row, drag.ratios);
+    drag.line?.toggleAttribute("data-snap", drag.snapped);
+    const told = drag.told || Math.abs(x - drag.x) >= 1 ? kind.live(drag.ratios) : null; // a press alone says nothing
+    if (told && told !== drag.told) say(told, "note", LIVE);
+    drag.told = told ?? drag.told;
     // A row of columns is laid out again at once; a flowchart's by the kit, in a frame of its own
-    // asked for as the weights are written (after this one's): measured the frame after that.
-    if (kind.pins) placeBadges();
-    else requestAnimationFrame(() => requestAnimationFrame(() => { if (drag?.row === row) placeBadges(); }));
-  }
-
-  // Each share at its part's top right (a node's 10px in from its right edge, across its border: the mock's).
-  function placeBadges() {
-    const { row, ratios, badges } = drag;
-    const layer = layerOf(row.el);
-    const flowchart = !kindOf(row).pins;
-    row.parts.forEach((part, at) => {
-      const rect = part.getBoundingClientRect();
-      badges[at].textContent = `${Math.round(100 * ratios[at])}%`;
-      if (badges[at].parentNode !== layer) layer.append(badges[at]);
-      const size = badges[at].getBoundingClientRect();
-      const right = flowchart ? rect.right - 10 : rect.right + 2;
-      const top = flowchart ? rect.top - size.height / 2 : rect.top - 2;
-      drawBox(badges[at], layer, { left: right - size.width, top, right, bottom: top + size.height });
-    });
-    if (hover) place(hover);
+    // asked for as the weights are written (after this one's): the line placed again the frame after that.
+    if (kind.pins) { if (hover) place(hover); }
+    else requestAnimationFrame(() => requestAnimationFrame(() => { if (drag?.row === row && hover) place(hover); }));
   }
 
   function finish(commit) {
     if (!drag) return;
-    const { row, start, ratios, badges, before } = drag;
+    const { row, start, ratios, before, line, told } = drag;
     const kind = kindOf(row);
     drag = null;
     note(row.kind, commit ? "gap released" : "gap cancelled");
-    badges.forEach((badge) => badge.remove());
+    line?.removeAttribute("data-snap");
+    if (told) settle(); // the shares dragged to: what is said next (or nothing) replaces them
     kind.reset(row, before);
     row.el.removeAttribute("data-ge-gap-drag");
     document.documentElement.removeAttribute("data-ge-gap-drag");
@@ -355,6 +357,6 @@ export function createColumnGaps({ active, struct, look, say }) {
     /** Whether a gap is being dragged (a flowchart's row shows the weights dragged, not yet a step: commits wait). */
     get dragging() { return Boolean(drag); },
     /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
-    get nodes() { return [...(hover ? [hover.line, ...(hover.pin ? [hover.pin] : [])] : []), ...(drag?.badges ?? [])]; },
+    get nodes() { return hover ? [hover.line, ...(hover.pin ? [hover.pin] : [])] : []; },
   };
 }

package/browser/editor/page/commit.mjs

@@ -7,7 +7,7 @@ import { rangeAt, rangeOffsets } from "./marks.mjs";
 import { pageOfKind, pageOfUnit } from "./page-objects.mjs";
 import { containerTypeOf, pack, project } from "./sync-state.mjs";
 import { outsideKey, randomBlockId } from "../../shared/ids.mjs";
-import { CHART_DATA, CHART_SOURCE } from "../../shared/table-chart.mjs";
+import { CHART_SOURCE, TABLE_READERS } from "../../shared/table-chart.mjs";
 
 // The page's commits (autosave; docs/editor.md, "Commits"). A commit is what changed on the page
 // since the last one, as collectEdits finds it against the layout and baselines the last commit
@@ -803,12 +803,18 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     baselines.set(id, html);
     return id;
   };
+  // How many blocks holding text blocks of their own (a list item's paragraphs) asLoaded made anew, those
+  // in them made anew with them: pathIndex finds a unit's blocks again then.
+  let rewrites = 0;
+  const holdsBlocks = (host) => host.querySelector("[contenteditable='true']") !== null;
   // A text block as a load of the page shows the file's (its inline elements of the report's own
   // atoms, written back as they are: core.mjs prepareBlock), the caret where it stood.
   const asLoaded = (host, { inner, atoms = [], kind, caps }) => {
     const selection = host.ownerDocument.getSelection();
     const place = selection?.rangeCount && host.contains(selection.anchorNode) ? rangeOffsets(host, selection.getRangeAt(0)) : null;
+    const held = holdsBlocks(host);
     prepareBlock(host, { inner, atoms, kind, caps });
+    if (held || holdsBlocks(host)) rewrites++;
     if (place) select(rangeAt(host, place));
   };
   // The selection in a text block someone else's words are about to be merged into, as it stands among the
@@ -883,14 +889,26 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     const hosts = [...element.querySelectorAll("[contenteditable='true']")].filter((host) => host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]") === element);
     return hosts.length === blocks.length ? hosts : null;
   };
-  // The text block of `element` (a unit of the page) that is the file's { self } or { path } one.
-  const blockElement = (element, block) => {
+  // The text block of `element` (a unit of the page) that is the file's { self } or { path } one: the first
+  // of its own whose path (pathFrom) is that one. `find`: the unit's text blocks by path (pathIndex), which a
+  // caller asking of each of a unit's blocks makes once: found anew for each block, a table of 500 rows had
+  // its thousand cells walked, each past its row's 500 siblings, for each of the thousand the answer named,
+  // the page standing still for a minute after each commit there.
+  const blockElement = (element, block, find = pathIndex(element)) => {
     // Its own text: the element itself, or the span of its own its description's `title` names (a Sheet tab's name).
     if (block.self) return element.matches("[contenteditable='true']") ? element : BLOCK_TYPES[blockTypeOf(element)]?.title?.(element) ?? null;
     if (!Array.isArray(block.path) || block.path[0] !== "unit") return null;
-    const want = JSON.stringify(block.path);
-    const owner = (host) => host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]");
-    return [...element.querySelectorAll("[contenteditable='true']")].find((host) => owner(host) === element && JSON.stringify(pathFrom(element, host)) === want) ?? null;
+    return find(JSON.stringify(block.path));
+  };
+  // The text blocks of `element` by path, for asking of many in turn: found once (hostsByPath), and again only
+  // once a block holding blocks of its own was made anew as the file gives it (asLoaded's `rewrites`).
+  const pathIndex = (element) => {
+    let index = null;
+    let made = -1;
+    return (want) => {
+      if (made !== rewrites) [index, made] = [hostsByPath(element), rewrites];
+      return index.get(want) ?? null;
+    };
   };
 
   /**
@@ -1003,8 +1021,9 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       // of the page's (its words would go over theirs): it keeps the one the page had, but where nobody else wrote.
       const matched = new Set();
       const inOrder = inFileOrder(element, fact.blocks);
+      const find = pathIndex(element);
       for (const [index, block] of fact.blocks.entries()) {
-        const host = blockElement(element, block) ?? inOrder?.[index];
+        const host = blockElement(element, block, find) ?? inOrder?.[index];
         if (!host) continue;
         const fresh = blockOf(host) === null;
         const own = registerBlock(host, pending, block, unit);
@@ -1196,7 +1215,8 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
    * Take in the answer to a commit (build's `pending`, the endpoint's receipt; `alone`: nobody but
    * this page wrote the file since it showed it, see adopt). Returns { conflicts, merged: hosts now
    * showing a merge, stale: a merge the page could not show, outdated: it runs a manifest that is no
-   * more, forced: the page units a change the reader said to make anyway went in for, all it held }.
+   * more, forced: the page units a change the reader said to make anyway went in for, all it held,
+   * rekeyed: the keys of tables it set otherwise on the page, [element, name, old, new | null] }.
    * A conflict of a change sent as the reader said to make it anyway says so (`again`).
    */
   function apply(pending, receipt, { alone = true } = {}) {
@@ -1221,24 +1241,31 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
       else if (element) proposals.set(identityOf(element), id);
     }
     for (const [key, hash] of Object.entries(receipt.hashes ?? {})) if (map.units[Number(key)]) map.units[Number(key)].hash = hash;
-    // The keys of charts drawn from tables the file gave the blocks the commit made, other than the
-    // page chose (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so
-    // that each card draws the table the file links it to ({ old: new | null }, null: off a table).
+    // The keys of tables the file gave the blocks the commit made and the tables it keyed (a view
+    // made from a menu: the key its frame took, an attribute of the unit), other than the page chose
+    // (source/chart-keys.mjs: one the file had meanwhile): theirs on the page too, so that each card and
+    // view reads the table the file links it to ({ old: new | null }, null: off a table); `rekeyed` says
+    // which it changed ([element, name, old, new | null]), for the undo steps that recorded them (history.mjs).
+    const rekeyed = [];
     if (receipt.chartKeys) {
-      for (const element of pending.made.values()) {
+      const keyed = [...pending.units.values()].filter(({ change }) => change?.attribute === CHART_SOURCE).map(({ id }) => unitElement(id)).filter(Boolean);
+      for (const element of [...pending.made.values(), ...keyed]) {
         // A copy not written yet sends its keys again: the file's now.
         const sent = element?.getAttribute(COPY_KEYS);
         if (sent) {
           const keys = Object.fromEntries(Object.entries(JSON.parse(sent)).map(([from, to]) => [from, to !== null && Object.hasOwn(receipt.chartKeys, to) ? receipt.chartKeys[to] : to]));
           element.setAttribute(COPY_KEYS, JSON.stringify(keys));
         }
-        for (const node of element ? [element, ...element.querySelectorAll(`[${CHART_DATA}], [${CHART_SOURCE}]`)] : []) {
-          for (const name of [CHART_DATA, CHART_SOURCE]) {
+        const names = [CHART_SOURCE, ...TABLE_READERS];
+        for (const node of element ? [element, ...element.querySelectorAll(names.map((name) => `[${name}]`).join(", "))] : []) {
+          for (const name of names) {
             const key = node.getAttribute(name);
             if (key === null || !Object.hasOwn(receipt.chartKeys, key)) continue;
             const next = receipt.chartKeys[key];
             if (typeof next === "string") node.setAttribute(name, next);
             else if (next === null && name === CHART_SOURCE) node.removeAttribute(name);
+            else continue;
+            rekeyed.push([node, name, key, next]);
           }
         }
       }
@@ -1498,13 +1525,14 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     }
     setLayout(next);
     marks();
-    return { conflicts, merged, stale, outdated: shownAgain, forced: [...landed] };
+    return { conflicts, merged, stale, outdated: shownAgain, forced: [...landed], rekeyed };
   }
 
   // A text committed: what it replaced (the first time this page committed it), what it is now, and what
   // the commits of it between left it as (`earlier`, the newest TEXTS_KEPT): someone writing back what
   // they read then puts back what the page committed after. Back as it was first, it is asked of what it
   // was between, as a part of what a component writes is (noteWrite): an undo is a commit like any other.
+  // `at`: when it was last committed, which puts the journals of two tabs' pages in order (autosave.mjs).
   function committedText(key, sent) {
     const mine = sources.get(sent.id);
     const was = journal.get(key);
@@ -1512,7 +1540,7 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
     if (mine === undefined) return void journal.delete(key);
     const earlier = [...new Set([...(was?.earlier ?? []), ...(was ? [was.mine] : [])])].filter((text) => text !== mine && text !== original).slice(-TEXTS_KEPT);
     if (mine === original && earlier.length === 0) return void journal.delete(key);
-    journal.set(key, { key, block: blockRef(sent.id), original, mine, ...(earlier.length > 0 ? { earlier } : {}) });
+    journal.set(key, { key, block: blockRef(sent.id), original, mine, ...(earlier.length > 0 ? { earlier } : {}), at: Date.now() });
   }
 
   // A part of what a unit's component writes, written by a commit (`before`, `after`: the hashes the file
@@ -1626,6 +1654,12 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
   /** Whether unit `unit` stands inside one of `units` on the page: what someone else's write took out with it is decided with it. */
   const heldWithin = (unit, units) => units.some((other) => other !== unit && unitsWithin(other).includes(unit));
 
+  /** The unit the page shows with file id `id` (not deleted on the page), or null: a block an earlier load made, still there. */
+  const unitOf = (id) => {
+    const unit = typeof id === "string" ? map.units.findIndex((each, index) => each?.blockId === id && !removed.has(index) && unitElement(index)) : -1;
+    return unit < 0 ? null : unit;
+  };
+
   /** The text of the blocks in a unit the page shows (the reader's words), or "". */
   const unitText = (unit) => {
     const element = unitElement(unit);
@@ -1741,7 +1775,7 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
   }
 
   return {
-    build, apply, collect, current, marks, counts, buffer, texts, resolve, committed, unjournal, placedUnits, putBack, heldWithin, unitText, written, carry, dataOfUnit, heldOtherwise, rewrite, issues, removed, pageIds, idFor,
+    build, apply, collect, current, marks, counts, buffer, texts, resolve, committed, unjournal, placedUnits, putBack, heldWithin, unitOf, unitText, written, carry, dataOfUnit, heldOtherwise, rewrite, issues, removed, pageIds, idFor,
     /** The id a unit of the page has in the file, or the one it proposes for it; null for none. */
     fileId: (unit) => map.units[unit]?.blockId ?? map.units[unit]?.proposed ?? null,
     /** The hash a unit of the page has in the file now (its map's, kept by every answer); null for none (changes/ finds the Agent's blocks by it). */
@@ -1803,11 +1837,35 @@ export const nodeHTML = (node) => [node?.title, node?.html, node?.restore?.sourc
 // Where a text block of the page sits in its unit, as the server's scan writes it (pathIn): the
 // element steps from the unit down, each [tag, index among the parent's children of that tag, how
 // many there are]. Only to find the element a path of the file names (blockElement), never to say where a block is.
-function pathFrom(unit, host) {
-  const steps = [];
+// `steps`: each element's step, kept for the next path asked of the same unit (hostsByPath): its parent's
+// children are counted once, for all of them.
+function pathFrom(unit, host, steps = new Map()) {
+  const path = [];
   for (let node = host; node && node !== unit; node = node.parentElement) {
-    const same = [...(node.parentElement?.children ?? [])].filter((child) => child.localName === node.localName);
-    steps.unshift([node.localName, same.indexOf(node), same.length]);
+    if (!steps.has(node)) {
+      const children = node.parentElement?.children ?? [node];
+      const counts = new Map();
+      for (const child of children) {
+        const at = counts.get(child.localName) ?? 0;
+        counts.set(child.localName, at + 1);
+        steps.set(child, [child.localName, node.parentElement ? at : -1]);
+      }
+      for (const child of children) steps.get(child).push(node.parentElement ? counts.get(child.localName) : 0);
+    }
+    path.unshift(steps.get(node));
+  }
+  return ["unit", ...path];
+}
+
+// The text blocks of `unit` (a unit of the page) that are its own, no unit's inside it, by their path (pathFrom,
+// as JSON): the first of each, in the page's order.
+function hostsByPath(unit) {
+  const steps = new Map();
+  const found = new Map();
+  for (const host of unit.querySelectorAll("[contenteditable='true']")) {
+    if (host.parentElement?.closest("[data-ge-unit], [data-ge-unit-kind]") !== unit) continue;
+    const path = JSON.stringify(pathFrom(unit, host, steps));
+    if (!found.has(path)) found.set(path, host);
   }
-  return ["unit", ...steps];
+  return found;
 }

package/browser/editor/page/conflicts.mjs

@@ -2,7 +2,7 @@ import { blocksText, partOwner, plainText } from "./core.mjs";
 import { reveal } from "./folded.mjs";
 import { wordDiff } from "./merge.mjs";
 import { PANEL_STYLE, panelGone, panelShown } from "./panel.mjs";
-import { addStyle, button, element, mount } from "./ui.mjs";
+import { addStyle, element, mount, textButton } from "./ui.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 
 // The conflicts the page holds back (docs/editor.md, "Conflicts"), each a card in one panel: what
@@ -66,7 +66,7 @@ function describe(entry, restorable) {
     if (entry.reason === "changed") return { text: t("这一段你和 AI 同时改了同一处。"), both: true, diff: true, actions: [[t("保留我的"), "mine", true], [t("使用最新版本"), "theirs"]] };
     if (entry.reason === "missing") return { text: t("你修改的这一块已被 AI 删除。"), actions: [...(restorable ? [[t("恢复我的"), "restore", true]] : []), [t("接受删除"), "accept"], copy] };
     if (entry.reason === "structure") return { text: t("你修改的这一处所在的组件已被 AI 改过结构，没法确定对应的位置。"), actions: [[t("使用最新版本"), "theirs"], copy] };
-    if (packageChanged(entry)) return { text: t("这个组件的组件包刚刚变了，这处文字不再能修改，你的修改没有写进文件。"), actions: [[t("使用最新版本"), "theirs"], copy] };
+    if (packageChanged(entry)) return { text: t("这个自定义块刚刚变了，这处文字不再能修改，你的修改没有写进文件。"), actions: [[t("使用最新版本"), "theirs"], copy] };
     return { text: t("这一处在文件里找不到唯一对应的位置，没有保存。"), actions: [[t("使用最新版本"), "theirs"], copy] };
   }
   if (entry.kind === "unit") {
@@ -123,7 +123,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
       panelShown(panel);
     }
     const conflicts = [...cards.values()].every(({ entry }) => !unfit(entry));
-    const head = element("div", { class: "ge-conflicts-head" }, element("span", { text: conflicts ? t("{0} 处冲突待处理", cards.size) : t("{0} 处内容待处理", cards.size) }), button(t("收起"), () => { panel.hidden = true; }, { "data-quiet": "" }));
+    const head = element("div", { class: "ge-conflicts-head" }, element("span", { text: conflicts ? t("{0} 处冲突待处理", cards.size) : t("{0} 处内容待处理", cards.size) }), textButton(t("收起"), () => { panel.hidden = true; }, { quiet: true }));
     panel.replaceChildren(head, ...[...cards.values()].map(({ node }) => node));
   }
 
@@ -139,7 +139,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
     const buttons = element("div", { class: "ge-actions" });
     const quiet = element("span", { class: "ge-conflict-quiet" }); // looking, not deciding: on the right
     for (const [label, action, primary] of actions) {
-      buttons.append(button(label, async () => {
+      buttons.append(textButton(label, async () => {
         if (action === "copy-block") {
           const node = nodeOf(entry);
           if (!node?.isConnected || !copyBlock(node)) say(t("没能完成，请再试一次。"), "error");
@@ -166,16 +166,16 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
     if (diff && mine && theirs) {
       const legend = element("div", { class: "ge-conflict-label" }, element("span", { class: "ge-chip", "data-mine": "", text: t("你的") }), element("span", { class: "ge-chip", "data-theirs": "", text: t("AI 的") }));
       const view = element("div", { hidden: "" }, legend, element("div", { class: "ge-version" }));
-      const toggle = button(t("查看局部差异"), () => {
+      const toggle = textButton(t("查看局部差异"), () => {
         view.hidden = !view.hidden;
         versions.hidden = !view.hidden;
         toggle.textContent = view.hidden ? t("查看局部差异") : t("查看两个版本");
         if (!view.hidden) view.lastElementChild.replaceChildren(...diffNodes(mine, theirs));
-      }, { "data-quiet": "" });
+      }, { quiet: true });
       quiet.append(toggle);
       node.append(view);
     }
-    if (nodeOf(entry)) quiet.append(button(t("定位"), () => locate(entry.key), { "data-quiet": "" }));
+    if (nodeOf(entry)) quiet.append(textButton(t("定位"), () => locate(entry.key), { quiet: true }));
     if (quiet.childElementCount > 0) buttons.append(quiet);
     node.append(buttons);
     return node;

package/browser/editor/page/core.mjs

@@ -10,6 +10,7 @@ import { gridOf, tableChange } from "../components/table/grid.mjs";
 import { HELD_TAGS, heldListType, listType } from "../components/list/index.mjs";
 import { isFlowchart, isStep } from "../components/flowchart/index.mjs";
 import { markEmpty } from "../components/placeholder.mjs";
+import { carry } from "../components/align.mjs";
 import { unread } from "./tex.mjs";
 import { MENTION, MENTION_ICON, MENTION_PAGE } from "../../shared/components/mention.mjs";
 import { FLOW_BLOCKS } from "../../shared/components/index.mjs";
@@ -40,7 +41,7 @@ const WRAPPERS = new Set(["UL", "OL", "BLOCKQUOTE"]);
 
 // An inline element of the report's own, as the scanner judges it (source/blocks.mjs): its
 // attributes as the file writes them (not the page's data-ge-* markers).
-const isOwnAtom = (node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
+const isOwnAtom =(node) => ownInline(node.localName, [...node.attributes].filter(({ name }) => !MARKER.test(name)), node.textContent.trim() !== "");
 
 // A block's atoms in `root` (its source parsed), in the order of the file, as the scanner lists
 // them (source/blocks.mjs inlineMode): the outermost formulas, links shown with their icon and inline
@@ -88,6 +89,7 @@ export function prepareBlock(element, { inner, atoms, kind = "flow", caps = [] }
   const template = element.ownerDocument.createElement("template");
   template.innerHTML = inner;
   template.content.querySelectorAll("*").forEach((node) => node.setAttribute("data-ge-src", ""));
+  HOSTS[kind]?.pictures?.show(template.content); // a cell's pictures shown where the server serves them
   const sourceAtoms = atomsIn(template.content, kind === "text" && caps.includes("plain"));
   const drawnAtoms = sourceAtoms.filter((atom) => atom.matches(ATOM_SELECTOR)); // a formula as the kit drew it
   // The blocks a list item holds are blocks of their own: only its text before them is rebuilt.
@@ -342,15 +344,16 @@ export function matchesSource(element, inner) {
 export function serializeInner(element) {
   const inner = HOSTS[element.getAttribute?.("data-ge-kind")]?.inner;
   if (inner) return inner(element);
-  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own.
-  const lists = element.getAttribute?.("data-ge-kind") === "cell";
-  return serializeNodes(ownNodes(element), lists).replace(/<br>\s*$/, "");
+  // A table cell's lists are its text (单元格里的列表); any other block's are blocks of their own. A
+  // kind of text block that holds pictures (a cell's: HOSTS `pictures`) writes them; any other none.
+  const kind = element.getAttribute?.("data-ge-kind");
+  return serializeNodes(ownNodes(element), kind === "cell", HOSTS[kind]?.pictures ?? null).replace(/<br>\s*$/, "");
 }
 
 // A list in a table cell, its items' inline content (a line break holding an empty item's caret left out).
-function serializeList(list) {
+function serializeList(list, pictures = null) {
   const tag = list.tagName.toLowerCase();
-  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes]).replace(/<br>\s*$/, "")}</li>`);
+  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes], false, pictures).replace(/<br>\s*$/, "")}</li>`);
   return items.length > 0 ? `<${tag}>${items.join("")}</${tag}>` : "";
 }
 
@@ -438,7 +441,7 @@ const spaced = (text) => escapeTyped(text).replace(/ *\u00a0[ \u00a0]*/g, " ");
 // shows where they were, changes/) are no content: left out, the text on either side of one is
 // written as one text, as it was before the node split it (a space either side of it the one space
 // it was, never two).
-function serializeNodes(nodes, lists = false) {
+function serializeNodes(nodes, lists = false, pictures = null) {
   let html = "";
   let text = null; // a text node's, not written yet: the text after an editor's node joins it
   let across = false; // an editor's node stands between it and what comes next
@@ -456,17 +459,20 @@ function serializeNodes(nodes, lists = false) {
     if (text !== null) html += spaced(text);
     text = null;
     across = false;
-    html += serializeNode(node, lists);
+    html += serializeNode(node, lists, pictures);
   }
   return text === null ? html : html + spaced(text);
 }
 
-function serializeNode(node, lists = false) {
+// `pictures`: the host's (HOSTS `pictures`: write(element) its markup, "" for one of no file, null for no picture).
+function serializeNode(node, lists = false, pictures = null) {
   // A text node holding nothing but a zero-width space keeps the caret after a mark the editor
   // made (markdown/, typing shortcuts); it is never content.
   if (node.nodeType === 3) return node.data === ZWSP ? "" : spaced(node.data);
   if (node.nodeType !== 1) return "";
-  if (isList(node)) return lists ? serializeList(node) : "";
+  if (isList(node)) return lists ? serializeList(node, pictures) : "";
+  const picture = pictures?.write(node) ?? null;
+  if (picture !== null) return picture;
   const atom = node.getAttribute("data-ge-atom");
   if (atom !== null && ATOM_SOURCE.has(atom)) return ATOM_SOURCE.get(atom);
   // Elements from the source keep the author's tag and attributes; only elements the browser
@@ -475,7 +481,7 @@ function serializeNode(node, lists = false) {
   // and their text kept.
   const fromSource = node.hasAttribute("data-ge-src") && node.tagName in TAGS;
   const tag = fromSource ? node.tagName.toLowerCase() : TAGS[node.tagName];
-  const inner = serializeNodes([...node.childNodes]);
+  const inner = serializeNodes([...node.childNodes], false, pictures);
   const ink = node.tagName === "SPAN" ? [...node.classList].filter(isInkClass) : [];
   if (ink.length > 0) return inner ? `<span class="${ink.join(" ")}">${inner}</span>` : "";
   // Small text's end part (its Tab: components/paragraph/page.mjs), at the line's right end.
@@ -572,7 +578,11 @@ export function newTail(container, type) {
 }
 
 // New blocks split off `from` are paragraphs, or list items in a list.
-const newBlock = (doc, tag, from) => newHost(doc, tag === "li" ? "item" : "paragraph", from);
+// A paragraph split off a paragraph or a heading keeps its alignment and indent (components/align.mjs carry).
+const newBlock = (doc, tag, from) => (tag === "li" ? newHost(doc, "item", from) : carry(from, newHost(doc, "paragraph", from)));
+
+/** A new, empty paragraph, as a split makes one outside a list (the page's title's Enter: typing/ enterBody). */
+export const newParagraphHost = (doc) => newBlock(doc, "p", null);
 
 // The element a text block made on the page is part of when it is not a block of its own: the
 // summary of a new disclosure, a new code block (its code's pre, its title's block), the header of a
@@ -720,10 +730,12 @@ const isFormula = (node) => node.matches(".doc-math-inline");
  * text with the format bar's marks (marks: false drops them, links: false drops links), a formula
  * of this page as its chip (another one, KaTeX's or the kit's \(…\), as the chip formula(tex) makes,
  * or else as its TeX source; `formulas` false, each as its source), a link shown with its icon as the
- * chip mention(mentionOf(it)) makes (else a link of its title); blocks and line breaks start new
- * lines, and everything else gives only its text.
+ * chip mention(mentionOf(it)) makes (else a link of its title), an element what picture(element)
+ * makes of it (a cell's picture: page/table/pictures.mjs; null nothing, undefined no picture: none
+ * given, no picture is one); blocks and line breaks start new lines, and everything else gives only
+ * its text.
  */
-export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null } = {}) {
+export function pastedLines(doc, html, { marks = true, links = true, formula = null, formulas = true, mention = null, picture = null } = {}) {
   const template = doc.createElement("template");
   template.innerHTML = html;
   const lines = [[]];
@@ -777,6 +789,12 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         }
       }
       if (/^(STYLE|SCRIPT|TEMPLATE|META|TITLE|LINK|NOSCRIPT|BUTTON|SVG)$/i.test(child.tagName) || child.matches('[aria-hidden="true"], .ge-code-gutter, [data-doc-dev]')) continue;
+      // A picture, where `picture` takes it (undefined: no picture): what it makes of it, else nothing.
+      const made = picture?.(child);
+      if (made !== undefined) {
+        if (made) push(target, made);
+        continue;
+      }
       if (child.tagName === "BR") {
         if (target) push(target, doc.createTextNode(" "));
         else newLine();
@@ -794,7 +812,7 @@ export function pastedLines(doc, html, { marks = true, links = true, formula = n
         continue;
       }
       walk(child, mark);
-      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]")) push(target, mark);
+      if (mark.textContent.trim() || mark.querySelector("[data-ge-atom]") || (picture && mark.firstElementChild)) push(target, mark);
       else if (mark.textContent) push(target, doc.createTextNode(mark.textContent));
     }
   };