@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/clipboard/own/selection.mjs

@@ -14,12 +14,12 @@ import { groupItems } from "./rules.mjs";
 //                      starts, those between whole, the last up to where it ends; a list's items each an
 //                      item of its kind (`list`, as an item selected on its own) with its checked state
 //                      and what of the blocks it holds the selection reaches, a quote's paragraphs in a
-//                      quote, and a highlight block, a disclosure or a section the selection ends in
+//                      quote, and a highlight block, a callout, a disclosure or a section the selection ends in
 //                      with what of it comes before the end (its icon, its title), a tabs area with the
 //                      tab shown and what of its panel comes before the end; a flowchart's nodes a
 //                      flowchart with its direction (never loose paragraphs: its steps are no items),
 //                      the node it ends in a node with what of it comes before the end. Around where it
-//                      starts, a highlight block, a disclosure, a section, a flowchart's node, an item
+//                      starts, a highlight block, a callout, a disclosure, a section, a flowchart's node, an item
 //                      whose own text comes before it, a row of columns, a column or a tabs area are not
 //                      copied, only what of them it holds (notion-lite copies no block its start is in:
 //                      a callout, a toggle, a list item's parent; a row of columns it flattens wherever).
@@ -124,7 +124,7 @@ export function describeAcross(range, { texts, wholes }) {
     const html = selectedHtml(host, pieces.get(host));
     const part = askClipboard("piece", host, html, what);
     if (part) return part;
-    const type = host.parentElement?.hasAttribute("data-ge-box") ? copiedType(host) : null;
+    const type = host.parentElement?.hasAttribute("data-ge-box") && (host.getAttribute("data-ge-kind") ?? "flow") === "flow" ? copiedType(host) : null;
     const color = colorOf(host);
     return { type: type ?? "paragraph", html, ...(color ? { color } : {}) };
   };

package/browser/editor/page/clipboard/own/writers.mjs

@@ -180,8 +180,6 @@ const paragraph = {
   html: (block, how) => `<p>${how.portable(block.html ?? "")}</p>`,
 };
 
-const inAside = (text) => ["<aside>", ...text.split("\n"), "</aside>"];
-
 const todo = list("ul", (_, checked, gap) => `- [${checked ? "x" : " "}]${gap}`);
 
 export const WRITERS = {
@@ -218,15 +216,6 @@ export const WRITERS = {
     },
     html: (block, how) => `<div>${block.blocks.map(how.html).join("")}</div>`,
   },
-  // A text block in one <aside>: its text alone, no blocks to set apart from it by an empty line. Its
-  // HTML is a paragraph of its text, as notion-lite's is no block of HTML: an <aside> would be rich
-  // formatting, for which the import reads the HTML of all that is copied with it, and has no block
-  // of its own. An empty one has none: an empty element would be read for it.
-  callout: {
-    copied: (block, how) => inAside(how.inline(block.html ?? "")),
-    exported: (unit, how) => inAside(how.own(unit)),
-    html: (block, how) => (block.html?.trim() ? `<p>${how.portable(block.html)}</p>` : ""),
-  },
   // A disclosure: "- " and its title, its blocks 4 spaces in (Notion writes a toggle as an item), but
   // no list: an empty line stands between it and a list beside it.
   toggle: {

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-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's
+    // 视图 ›: 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
@@ -1598,21 +1626,40 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
    * Someone else's write put back a unit this load made (`gone`) or moved (`moved`), and the reader
    * keeps theirs (`mine`): one it made is a block made on the page again, written anew (around its
    * blocks from the source it was put back with, if it was); one it moved goes where the page has it
-   * again. Otherwise it is no longer checked.
+   * again. Otherwise it is no longer checked. `within`: the units inside one made that the write took out
+   * with it (the revert check's, heldWithin), decided with it.
    */
-  function putBack(unit, { gone, mine }) {
+  function putBack(unit, { gone, mine, within = [] }) {
     const { around } = placed.get(unit) ?? {};
-    placed.delete(unit);
+    // What the write took out with it: kept or given up with it, made on the page again inside it (the
+    // blocks of an instance's slots, of a disclosure made this load). What it holds that the file still
+    // has (a block moved in, kept where the Agent unwrapped it) stays the file's, a unit the commit
+    // making it again takes along, as one it was put back around, and is decided by its own card if any.
+    const inner = gone ? within : [];
+    for (const id of [unit, ...inner]) placed.delete(id);
     if (!mine) return;
     touched(); // the layout changes in place
     if (gone) {
       const key = map.units[unit].cid;
       drop(unit);
+      inner.forEach(drop);
       if (around && dropped.has(key)) dropped.get(key).around = around;
     } else for (const [box, order] of getLayout()?.orders ?? []) getLayout().orders.set(box, order.filter((id) => id !== unit));
     marks();
   }
 
+  // The units the page shows inside unit `unit`'s element, at any depth.
+  const unitsWithin = (unit) => [...(unitElement(unit)?.querySelectorAll("[data-ge-unit]") ?? [])].map(idOf).filter((id) => id !== null);
+
+  /** 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);
@@ -1728,9 +1775,11 @@ export function createCommits({ root, map, baselines, units, boxes, getLayout, s
   }
 
   return {
-    build, apply, collect, current, marks, counts, buffer, texts, resolve, committed, unjournal, placedUnits, putBack, 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). */
+    fileHash: (unit) => map.units[unit]?.hash ?? null,
     /** save(pending) as JSON, with the page's body (sync-state.mjs pack). */
     keep: (pending) => pack(root, save(pending)),
     /** Identities more than one element on the page carries (none, ever). */
@@ -1788,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

@@ -1,7 +1,8 @@
 import { blocksText, partOwner, plainText } from "./core.mjs";
-import { commonRun } from "./merge.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
@@ -26,7 +27,7 @@ import { t } from "../../shared/i18n/index.mjs";
 // a popover like the workbench's, no colored frame, the flagged block is what stands out; the
 // reader's words and the file's are told apart by one pair of colors.
 const STYLE = `
-  .ge-conflicts { --ge-mine: light-dark(rgba(223,22,0,.094), rgba(255,104,92,.24)); --ge-mine-text: light-dark(#cf5148, #ff8f85); --ge-theirs: light-dark(rgba(0,100,45,.09), rgba(108,255,172,.157)); --ge-theirs-text: light-dark(#448361, #6fc596); }
+  .ge-conflicts { --ge-mine: var(--ge-diff-del); --ge-mine-text: var(--ge-diff-del-text); --ge-theirs: var(--ge-diff-add); --ge-theirs-text: var(--ge-diff-add-text); }
   .ge-conflict[data-ge-current] { background: var(--ge-hover); }
   .ge-conflict-label { display: flex; gap: 6px; margin: 10px 0 3px; color: var(--ge-tx2); font-size: 12px; }
   .ge-conflict :is(ins, del, .ge-chip) { border-radius: 3px; text-decoration: none; }
@@ -65,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") {
@@ -84,29 +85,8 @@ function describe(entry, restorable) {
   return { text: t("你新建（或放回）的这一块没法放进文件（周围的块已被 AI 改动或删除）。"), actions: [[t("放到附近"), "nearby", true], [t("撤销这一块"), "undo"], copy] };
 }
 
-// A word diff of two texts, the reader's version against the file's: runs of { tag, text }, tag null
-// for words both have, "del" for the reader's alone and "ins" for the file's alone (an ins before
-// the del it stands beside). Words are runs of letters and digits, spaces, single other characters
-// (each Chinese character on its own); at most 1500 words of each (merge.mjs commonRun finds what is shared).
-export function wordDiff(mine, theirs) {
-  const tokens = (text) => (text.match(/[A-Za-z0-9]+|\s+|[^A-Za-z0-9\s]/gu) ?? []).slice(0, 1500);
-  const a = tokens(mine);
-  const b = tokens(theirs);
-  const runs = [];
-  const add = (tag, text) => {
-    if (runs.at(-1)?.tag === tag) runs.at(-1).text += text;
-    else runs.push({ tag, text });
-  };
-  let [i, j] = [0, 0];
-  for (const [x, y] of [...commonRun(a, b), [a.length, b.length]]) {
-    while (j < y) add("ins", b[j++]);
-    while (i < x) add("del", a[i++]);
-    if (x < a.length) add(null, a[i++]);
-    j++;
-  }
-  return runs;
-}
-
+// The word diff (merge.mjs wordDiff): its runs as the card's nodes.
+export { wordDiff };
 const diffNodes = (mine, theirs) => wordDiff(mine, theirs).map(({ tag, text }) => tag ? element(tag, { text }) : document.createTextNode(text));
 
 /**
@@ -143,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));
   }
 
@@ -159,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");
@@ -186,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;
@@ -240,7 +220,7 @@ export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
   function locate(key) {
     const found = cards.get(key);
     const node = found && nodeOf(found.entry);
-    if (node) globalThis.DocKit?.reveal(node);
+    if (node) reveal(node); // a folded heading's section too (fold/)
     node?.scrollIntoView({ block: "center", behavior: "smooth" });
     for (const other of cards.values()) other.node.toggleAttribute("data-ge-current", other === found);
   }