@heycys/gallery 0.1.0 → 0.1.1

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

@@ -2,7 +2,7 @@ import { isHost, nestedBlocks, serializeInner, unitsOf } from "../../core.mjs";
 import { BLOCK_TYPES, COPIED_AS_ITSELF, COPY_KEEPS, TEXT_TYPES, askClipboard, clipboardOf, sizeValue, unitClipboard } from "../../../components/registry.mjs";
 import { BLOCK_COLORS } from "../../../components/colors.mjs";
 import { containerType, typeOf } from "../../convert.mjs";
-import { pageOfType } from "../../page-objects.mjs";
+import { pageOfType, pageOfUnit } from "../../page-objects.mjs";
 import { referencedIds } from "../../../../shared/copy-ids.mjs";
 
 // Selected blocks as the clipboard's own description (docs/editor.md, "Copying blocks"): each
@@ -64,6 +64,10 @@ export function copied(doc, block) {
   if (block.report !== reportOf(doc)) return null;
   const unit = doc.querySelector(`main [data-ge-unit="${block.unit}"]`);
   if (!unit || unit.getAttribute("data-ge-unit-kind") !== block.kind) return null;
+  // One whose unit's copy cannot stand for it (`copiesAsItself`: an instance with slots) is made of
+  // what it carries, here too: that copy would hold blocks the file writes whole, with ids no answer
+  // of a commit gives the page (source/apply.mjs restoredText names the block alone).
+  if (pageOfUnit(unit)?.copiesAsItself?.(unit) === false) return null;
   const copy = copyOf(unit);
   return (typeof block.data?.html === "string" ? copy.outerHTML === block.html : copy.textContent === block.text) ? unit : null;
 }
@@ -84,12 +88,6 @@ const plain = (node) => (node?.textContent ?? "").replace(/\s+/g, " ").trim();
 /** What copies of a block the page could make: { type, html, text, blocks, lists }, or null. */
 export function describe(node) {
   const kind = node.getAttribute("data-ge-unit-kind");
-  if (COPIES.has(kind)) {
-    if (!node.hasAttribute("data-ge-unit") || node.hasAttribute("data-ge-new")) return null; // not in the file yet
-    const copy = copyOf(node);
-    const data = unitClipboard(node).data?.(node, { serializeInner, copyOf, clipboardOf, copiedType, page: pageOfType });
-    return { type: "copy", kind, unit: Number(node.getAttribute("data-ge-unit")), report: reportOf(node.ownerDocument), text: copy.textContent, html: copy.outerHTML, ...(data ? { data } : {}) };
-  }
   // What an element holds: its units. One that is no box has none (a list of a class of its own:
   // source/units.mjs boxKind), and what stands in it is read as it stands.
   const holding = (box) => {
@@ -98,6 +96,17 @@ export function describe(node) {
     const blocks = (units.length > 0 || box.hasAttribute("data-ge-box") ? units : [...box.children]).map(describe);
     return blocks.every(Boolean) ? blocks : null;
   };
+  // Copied as itself. One whose unit's copy cannot stand for it (`copiesAsItself` of its page object:
+  // an instance with slots, whose blocks that copy would write whole) is copied by what it carries
+  // alone (`data`, those blocks described apart), and is no copy where it carries nothing (a block in a
+  // slot the page cannot make).
+  if (COPIES.has(kind)) {
+    if (!node.hasAttribute("data-ge-unit") || node.hasAttribute("data-ge-new")) return null; // not in the file yet
+    const copy = copyOf(node);
+    const data = unitClipboard(node).data?.(node, { serializeInner, copyOf, clipboardOf, copiedType, page: pageOfType, holding });
+    if (!data && pageOfUnit(node)?.copiesAsItself?.(node) === false) return null;
+    return { type: "copy", kind, unit: Number(node.getAttribute("data-ge-unit")), report: reportOf(node.ownerDocument), text: copy.textContent, html: copy.outerHTML, ...(data ? { data } : {}) };
+  }
   const what = { page: pageOfType, holding, describe, copiedType, isHost, nestedBlocks, serializeInner, plain, colorOf, sizeValue };
   const block = askClipboard("describe", node, what);
   if (block !== undefined) return block;

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

@@ -10,16 +10,16 @@ import { WRITERS, heldToWords } from "./writers.mjs";
 // Copied blocks for other programs (notion-lite serialize.js, after Notion 210528 / 389867: the
 // Markdown its export writes, and HTML that reads as the same), each block by the writer of its kind
 // (writers.mjs). Pasted back here without the clipboard's own data, both read as the same blocks
-// (import/), but for a callout: its Markdown a highlight block, its HTML a paragraph.
+// (import/), but for a callout: its Markdown a highlight block, its HTML a group of its blocks.
 //   text/plain  Markdown: # … #### headings, "- " / "1. " / "- [ ] " items (an item's lists 4 spaces
-//               in), "> " quotes, <aside> callouts (a highlight block: its emoji and text, its blocks;
-//               a callout: its text),
+//               in), "> " quotes, <aside> callouts (a highlight block and a callout: its emoji, a highlight
+//               block's, and the text of its first block, its other blocks),
 //               ``` code (its language), $$ formula blocks (an empty one: none), | tables |, ---, a disclosure as an item
 //               holding its blocks, a tabs area as each tab's name and blocks (a row of columns, copied
 //               as itself, as its text); **bold** *italic* ~~strike~~ `code` $formula$, links as their text
 //               (Notion's plain text); a list's items one line apart, other blocks an empty line; a
 //               line that would read as a tag or a fence escaped (writers.mjs heldToWords).
-//   text/html   plain markup: p (a callout's too), h1–h4, ul / ol / li ("[x] " / "[ ] " before a to-do's text), blockquote,
+//   text/html   plain markup: p, a div of a highlight block's or a callout's blocks, h1–h4, ul / ol / li ("[x] " / "[ ] " before a to-do's text), blockquote,
 //               details, pre > code.language-x, hr, table, a formula block as $$ … $$ (an empty one:
 //               nothing, as in Markdown) and an inline one
 //               as $ … $ (Notion's export), colors as the kit's classes with their color in a style.
@@ -27,8 +27,8 @@ import { WRITERS, heldToWords } from "./writers.mjs";
 // both. Text selected in one block (textFormats) is its inline HTML for other programs, and as plain
 // text its words alone (notion-lite's inlinePlain: no list's marker, no Markdown).
 
-// The kit's light colors, for programs without its styles (src/shared/colors.mjs).
-const INK = Object.fromEntries(COLORS.flatMap(({ name, text, fill }) => [[`doc-text-${name}`, `color:${text[0]}`], [`doc-highlight-${name}`, `background-color:${fill[0]}`]]));
+// The kit's light colors (a background on words its words' fill), for programs without its styles (src/shared/colors.mjs).
+const INK = Object.fromEntries(COLORS.flatMap(({ name, text, mark }) => [[`doc-text-${name}`, `color:${text[0]}`], [`doc-highlight-${name}`, `background-color:${mark[0]}`]]));
 const FORMULA = /^\s*\\\(([\s\S]*)\\\)\s*$/;
 
 // Inline HTML (the format bar's marks: serializeInner's) as nodes to walk, a link shown with its icon

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).

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

@@ -50,7 +50,7 @@ const STYLE = `
   .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-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; }
+  .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; }

package/browser/editor/page/commit.mjs

@@ -1598,21 +1598,34 @@ 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 text of the blocks in a unit the page shows (the reader's words), or "". */
   const unitText = (unit) => {
     const element = unitElement(unit);
@@ -1728,9 +1741,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, 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). */

package/browser/editor/page/conflicts.mjs

@@ -1,5 +1,6 @@
 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 { t } from "../../shared/i18n/index.mjs";
@@ -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; }
@@ -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));
 
 /**
@@ -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);
   }

package/browser/editor/page/convert.mjs

@@ -12,9 +12,9 @@ import { asTitle, flowchartFromList, flowchartFromPanel, itemFromStep, listFromF
 
 // Turning blocks into other types on the page (DOM only; tested with jsdom): text, small text
 // (小字, the kit's .doc-note), four heading levels, bulleted, numbered and to-do lists and flow charts (流程图), disclosures
-// (折叠列表), callouts (提示块), highlight panels (高亮块: a container with the opening summary's
-// look, whose blocks keep their own types, lists and headings among them; a block turned into one, or
-// into a disclosure, goes into it as it is), code blocks, quotes and
+// (折叠列表), highlight panels (高亮块: a container with the opening summary's look, whose blocks keep
+// their own types, lists and headings among them) and callouts (提示块: the same kind of container, its
+// look its own; a block turned into either, or into a disclosure, goes into it as it is), code blocks, quotes and
 // dividers; the types are the components' (src/editor/components/, registry.mjs), and so is how a
 // type that is no text block is made (its `create`). The "/" menu,
 // Markdown shortcuts, the block menu and its "在下方新建一块" all come here (editor.mjs:
@@ -48,7 +48,8 @@ const ownAttribute = (host, name) => Boolean(ATTRIBUTES[host.getAttribute("data-
 
 // The types a block, or a group of blocks, goes into as it is (each keeping its type: `takesAsIs`): a
 // highlight block (notion-lite's callout, whose body is its children: transformBlocks moves the blocks
-// into a new one) and, as the reader asked, a disclosure (into its content; its title left empty to type).
+// into a new one), a callout (the same kind of block) and, as the reader asked, a disclosure (into its
+// content; its title left empty to type).
 const TAKES_AS_IS = new Set(Object.keys(typesWith("takesAsIs")));
 
 // Whether a box takes the block of a type: what its role accepts, and none of a type that does not
@@ -181,7 +182,7 @@ export function containerType(unit) {
 const contentOf = (unit) => BLOCK_TYPES[containerType(unit)]?.content?.(unit) ?? unit;
 
 // The containers that turn into one another, what they hold carried along (Notion's: HOLDERS): a
-// disclosure, a quote, a highlight block. Each is the kind of box it is, as well as of block.
+// disclosure, a quote, a highlight block, a callout. Each is the kind of box it is, as well as of block.
 
 // The blocks a disclosure, quote or highlight block holds (a highlight block's icon not among them).
 const heldBy = (unit) => heldIn(contentOf(unit));
@@ -272,8 +273,8 @@ function standIn(host, type) {
   return standsFor(next, host);
 }
 
-// Whether a block already is the text block of a type: its tag, and the class that tells a
-// callout from a div; of the paragraph types, the one its class makes it.
+// Whether a block already is the text block of a type: its tag, and its class where its type has
+// one; of the paragraph types, the one its class makes it.
 function isOfType(host, type) {
   const spec = BLOCK_TYPES[type];
   if (host.localName !== spec.tag) return false;

package/browser/editor/page/core.mjs

@@ -344,13 +344,13 @@ export function serializeInner(element) {
   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 ownNodes(element).map((node) => serializeNode(node, lists)).join("").replace(/<br>\s*$/, "");
+  return serializeNodes(ownNodes(element), lists).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) {
   const tag = list.tagName.toLowerCase();
-  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${[...item.childNodes].map((child) => serializeNode(child)).join("").replace(/<br>\s*$/, "")}</li>`);
+  const items = [...list.children].filter((item) => item.tagName === "LI").map((item) => `<li>${serializeNodes([...item.childNodes]).replace(/<br>\s*$/, "")}</li>`);
   return items.length > 0 ? `<${tag}>${items.join("")}</${tag}>` : "";
 }
 
@@ -383,11 +383,16 @@ export function textEnd(element) {
 
 const ownNodes = (element) => [...element.childNodes].slice(0, textEnd(element));
 
-/** A block's own content as HTML (innerHTML, without the blocks a list item holds). */
+/**
+ * A block's own content as HTML (innerHTML, without the blocks a list item holds, nor the words an
+ * Agent took out that the page shows in it: GONE_WORDS), what undo and redo record of it.
+ */
 export function ownHTML(element) {
-  if (nestedBlocks(element).length === 0) return element.innerHTML;
+  const shown = element.querySelector(GONE_WORDS);
+  if (nestedBlocks(element).length === 0 && !shown) return element.innerHTML;
   const copy = element.ownerDocument.createElement("div");
   copy.append(...ownNodes(element).map((node) => node.cloneNode(true)));
+  if (shown) copy.querySelectorAll(GONE_WORDS).forEach((node) => node.remove());
   return copy.innerHTML;
 }
 
@@ -429,6 +434,33 @@ export const parentItem = (item) => item?.tagName === "LI" && item.parentElement
 // edits becomes a space too.
 const spaced = (text) => escapeTyped(text).replace(/ *\u00a0[ \u00a0]*/g, " ");
 
+// The editor's own nodes in a text block (data-doc-dev: the words an Agent took out, which the page
+// 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) {
+  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
+  for (const node of nodes) {
+    if (node.nodeType === 1 && node.hasAttribute("data-doc-dev")) {
+      across = text !== null;
+      continue;
+    }
+    if (node.nodeType === 3 && node.data !== ZWSP) {
+      if (text !== null && !across) html += spaced(text);
+      text = text !== null && across ? text + node.data : node.data;
+      across = false;
+      continue;
+    }
+    if (text !== null) html += spaced(text);
+    text = null;
+    across = false;
+    html += serializeNode(node, lists);
+  }
+  return text === null ? html : html + spaced(text);
+}
+
 function serializeNode(node, lists = false) {
   // 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.
@@ -443,7 +475,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 = [...node.childNodes].map((child) => serializeNode(child)).join("");
+  const inner = serializeNodes([...node.childNodes]);
   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.
@@ -498,8 +530,9 @@ export function isEmpty(element) {
 const siblingTag = (element) => element.tagName === "LI" ? "li" : "p";
 
 /**
- * A text block made on the page: data-ge-new, with its type and unit kind. Inside a component it
- * leaves the frame to the component, as `from` (the block it was split off) does.
+ * A text block made on the page: data-ge-new, with its type and unit kind, a text block of the flow
+ * (every type's that is one: a callout's words, its own kind until 2026-11-07, are a paragraph of it
+ * now). Inside a component it leaves the frame to the component, as `from` (the block it was split off) does.
  */
 export function newHost(doc, type, from = null) {
   const spec = BLOCK_TYPES[type];
@@ -509,9 +542,8 @@ export function newHost(doc, type, from = null) {
   block.setAttribute("data-ge-new", "");
   block.setAttribute("data-ge-type", type);
   block.setAttribute("data-ge-unit-kind", spec.kind);
-  const kind = spec.host ?? "flow";
-  block.setAttribute("data-ge-kind", kind);
-  block.setAttribute("data-ge-caps", capsFor(kind));
+  block.setAttribute("data-ge-kind", "flow");
+  block.setAttribute("data-ge-caps", capsFor("flow"));
   if (from?.hasAttribute("data-ge-framed")) block.setAttribute("data-ge-framed", "");
   return block;
 }
@@ -872,6 +904,9 @@ export function mergeInto(into, from, { anyKind = false } = {}) {
 // with its own.
 
 export const ELEMENT_ID = "data-ge-id";
+
+/** The words an Agent took out of a text block, shown where they were (changes/): never its content. */
+export const GONE_WORDS = "[data-ge-gone-words]";
 const ELEMENT_ID_PREFIX = Math.random().toString(36).slice(2, 6); // a page's own, as formulas' keys
 let elementIds = 0;
 
@@ -927,10 +962,10 @@ export const inTable = (node) => /^(TR|TD|TH)$/.test(node?.tagName ?? "") && nod
 export function unitElement(node) {
   let found = node?.closest?.(UNIT_OR_LEAD) ?? null;
   while (inTable(found)) found = found.parentElement?.closest(UNIT_OR_LEAD) ?? null;
-  // Text that is part of a block made on the page (a new disclosure's title, a new code block's
-  // code) stands for that block.
+  // Text made on the page that is part of a block (a new code block's code, a media block's new
+  // caption) stands for that block: the part's own block, not the one around it.
   const part = found && !found.hasAttribute("data-ge-unit") ? partOf(found) : null;
-  if (part) found = (part.matches("pre, .doc-code") ? part : part.parentElement).closest(UNIT);
+  if (part) found = part.closest(UNIT);
   if (!found?.hasAttribute("data-ge-lead")) return found;
   const id = found.getAttribute("data-ge-lead");
   let next = found.nextElementSibling;
@@ -1180,12 +1215,12 @@ export function snapshotLayout(root) {
 }
 
 // Whether a text block may be written with no text: it is of a type whose component says so (its
-// `empty`: a paragraph, a heading, a list item, a callout; the server's emptyLeaf reads the same)
+// `empty`: a paragraph, a heading, a list item; the server's emptyLeaf reads the same)
 // and can be emptied (can "empty"), an item holding blocks too, its line kept over them (keepLine). A
 // field that may be emptied (a cell, a caption) is no block written empty; a new code block is
 // written empty by its type (describeNode).
 const clearable = (element) => can(element, "empty");
-/** Whether an empty text block stays, written with no text (a paragraph, a heading, a list item, a callout, a code block). */
+/** Whether an empty text block stays, written with no text (a paragraph, a heading, a list item, a code block). */
 const keepsWhenEmpty = (element) => BLOCK_TYPES[textTypeOf(element)]?.empty === true && clearable(element);
 
 /** Whether a text block may go: it can be removed, is not kept (data-ge-keep) and holds no blocks (it would show no line of its own). */
@@ -1208,8 +1243,11 @@ const leaves = (node, emptied) => gone(node) || emptied.has(node);
 // The text block of a block: the block itself, or where its component says (a code block's code).
 const textOf = (node) => BLOCK_TYPES[blockTypeOf(node)]?.textHost?.(node) ?? node;
 
-// What a component's description is given to say what goes with a block (`extras`).
+// What a component's description is given to say what goes with a block (`extras`). `nodes(box)`: the
+// blocks of a box of its own as the commit writes them (nodeOf), a block written whole holding those of
+// boxes of its own apart from its markup (an instance's slots: installed/index.mjs).
 const HELPERS = { sizeValue, serializeInner, unitsOf };
+const helpersFor = (emptied) => ({ ...HELPERS, nodes: (box) => unitsOf(box).map((child) => nodeOf(child, emptied)).filter(Boolean) });
 
 /**
  * The first element in `root` (in document order, `root` itself left out) carrying each value of
@@ -1351,7 +1389,7 @@ function describeNode(element, emptied) {
   // (`content`: a disclosure's content region), its title (`title`), its id (`keyed`: a detail
   // card's), when it is written at all (`written`: a row once each of its columns has something, a
   // detail card while a link opens it; else once it holds something).
-  const extras = spec.extras?.(element, HELPERS) ?? {};
+  const extras = spec.extras?.(element, helpersFor(emptied)) ?? {};
   if (spec.bare) return spec.written?.(element, []) === false ? null : { type, ...extras };
   if (!spec.box) {
     const text = textOf(element);

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

@@ -28,6 +28,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // cancels, and so does anything that ends the press another way (the handle losing the pointer
 // capture, the window losing the focus, the page hidden): never a drop. Ending is idempotent, and
 // the line, tint and copy belong to their drag (overlays.mjs). Ctrl+Shift+arrows move selected blocks standing next to each other by one place (moveBy).
+// A folded heading goes with what it hides, or as the section it covers whole (fold/ takenWith); its
+// copy shows what is in sight, and Ctrl+Shift+↑/↓ take it a section of its level at a time.
 
 const STYLE = `
   ${gestureLock("data-ge-drag", { cursor: "grabbing", select: true })}
@@ -43,9 +45,9 @@ const STYLE = `
  * info: block-info.mjs. selection: selection/index.mjs. struct(parents, touched, mutate): the
  * editor's undoable structural change (history.mjs). say: the status line. closeMenu(): the block
  * menu closes. schedule(): the block tools' next frame (blocks.mjs), which calls step() while a
- * drag lasts.
+ * drag lasts. folds: the headings' folds (fold/).
  */
-export function createDrag({ info, selection, struct, say, closeMenu, schedule }) {
+export function createDrag({ info, selection, struct, say, closeMenu, schedule, folds }) {
   addStyle(STYLE);
   const { addColumn, columnsOf, rowAround } = columnOps() ?? {};
   const { kindOf, nameOf, named, fixedText, boxKindOf } = info;
@@ -105,7 +107,8 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   }
 
   // Put blocks beside a block (drop.mjs `aside`): { target, side }, the two side by side in a new
-  // row of columns; { row, index, whole }, a new column of that row at `index` holding them, or,
+  // row of columns (a folded heading's column taking what it hides: fold/ withHidden); { row, index,
+  // whole }, a new column of that row at `index` holding them, or,
   // when they are all of one column of it (`whole`), that column moved there. One undo step that
   // keeps them selected; a container they leave empty goes, as when they move (and a row left
   // with one column gives its blocks back: history.mjs).
@@ -122,7 +125,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     const leftovers = leftoversOf(targets, aside.row ?? aside.target);
     const parents = [...new Set([...targets.map((target) => target.parentNode), aside.row ?? aside.target.parentElement, ...leftovers.map((node) => node.parentNode)].filter(Boolean))];
     struct(parents, [], () => {
-      const { created } = aside.row ? addColumn(aside.row, aside.index, parts) : rowAround(aside.target, [parts], aside.side);
+      const { created } = aside.row ? addColumn(aside.row, aside.index, parts) : rowAround(folds.withHidden(aside.target), [parts], aside.side);
       leftovers.forEach((node) => node.remove());
       return { touched: [], focus: null, select: targets, reselect: true, created };
     });
@@ -134,30 +137,40 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
    */
   function moveBy(targets, delta, { keepFocus = false } = {}) {
     closeMenu();
-    targets = ordered([targets].flat().filter(alive));
+    const picked = ordered([targets].flat().filter(alive));
+    targets = folds.takenWith(picked);
     if (targets.length === 0) return false;
     const reason = targets.map(fixedText).find(Boolean);
     if (reason) {
       say(reason);
       return false;
     }
-    // The blocks to move among: not a box's lead (a highlight block's icon stays first in it).
+    const name = folds.namedWith(picked, targets, named);
+    // The blocks to move among: not a box's lead (a highlight block's icon stays first in it), as the
+    // reader sees them: a folded heading and what it hides one (fold/ groupsOf).
     const boxKind = boxKindOf(targets[0].parentElement);
     const list = unitsOf(targets[0].parentElement).filter((unit) => !isLead(boxKind, kindOf(unit)));
-    const first = list.indexOf(targets[0]);
-    if (!targets.every((target, index) => list[first + index] === target)) {
+    const groups = folds.groupsOf(list);
+    const first = groups.findIndex((group) => group[0] === targets[0]);
+    let last = first;
+    let count = first < 0 ? 0 : groups[first].length;
+    while (first >= 0 && count < targets.length && last + 1 < groups.length) count += groups[++last].length;
+    if (first < 0 || !groups.slice(first, last + 1).flat().every((unit, index) => targets[index] === unit) || count !== targets.length) {
       say(t("选中的块不相邻，不能一起上下移动；可以拖动其中一块的手柄，把它们一起移到别处。"));
       return false;
     }
-    const neighbour = list[delta < 0 ? first - 1 : first + targets.length];
-    if (!neighbour) {
-      say(list.length === targets.length ? t("这里只有{0}；可以拖动手柄移到别处。", targets.length === 1 ? t("这一个{0}", nameOf(targets[0])) : t("这几块")) : t("{0}已经在{1}。", named(targets), delta < 0 ? t("最前面") : t("最后面")));
+    // A folded heading alone goes a section of its level at a time (fold/ stepOver); others a block in sight at a time.
+    const alone = first === last && folds.isFolded(targets[0]);
+    const step = alone ? folds.stepOver(targets[0], delta, list) : null;
+    const over = alone ? step && [step.first, step.last] : groups[delta < 0 ? first - 1 : last + 1];
+    if (!over) {
+      say(groups.length === last - first + 1 ? t("这里只有{0}；可以拖动手柄移到别处。", targets.length === 1 ? t("这一个{0}", nameOf(targets[0])) : t("这几块")) : t("{0}已经在{1}。", name, delta < 0 ? t("最前面") : t("最后面")));
       return false;
     }
-    moveTo(targets, targets[0].parentElement, delta < 0 ? withLeads(neighbour)[0] : neighbour.nextSibling);
+    moveTo(targets, targets[0].parentElement, delta < 0 ? withLeads(over[0])[0] : over.at(-1).nextSibling);
     if (!keepFocus) selection.select(targets, { quiet: true });
     targets[delta < 0 ? 0 : targets.length - 1].scrollIntoView({ block: "nearest", inline: "nearest" });
-    say(t("已移动{0} · Ctrl+Z 撤销", named(targets)));
+    say(t("已移动{0} · Ctrl+Z 撤销", name));
     return true;
   }
 
@@ -165,7 +178,8 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   // the drag started (a block that cannot move says why).
   function start(target, x, y) {
     const picked = selection.picked;
-    const targets = picked.length > 1 && picked.includes(target) ? [...picked] : [target];
+    const chosen = picked.length > 1 && picked.includes(target) ? [...picked] : [target];
+    const targets = folds.takenWith(chosen); // a folded heading with what it hides (fold/)
     const reason = targets.map(fixedText).find(Boolean);
     if (reason) {
       say(reason);
@@ -174,7 +188,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     closeMenu();
     selection.select(targets, { quiet: true });
     const session = {
-      targets, target, from: target.parentElement, x, y, drop: null, rest: null, opened: new Set(),
+      targets, target, from: target.parentElement, x, y, drop: null, rest: null, opened: new Set(), name: folds.namedWith(chosen, targets, named),
       line: element("div", { class: "ge-drop-line", hidden: "" }),
       tint: element("div", { class: "ge-drop-tint", hidden: "" }),
       preview: null,
@@ -184,12 +198,12 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
     // The line and the tint go in the layer of where the blocks would go
     // (overlay-layer.mjs), when there is one; the copy follows the pointer in the window.
     for (const kind of ["line", "tint"]) own(session[kind], `drag ${kind}`, { owner: target, alive });
-    session.preview = createPreview(targets, x, y, { owner: target, alive });
+    session.preview = createPreview(targets.filter((node) => !folds.hidden(node)), x, y, { owner: target, alive }); // what is in sight
     drag = session;
     note("drag", `start ${targets.map(describe).join(", ")}`);
     targets.flatMap(withLeads).forEach((part) => part.setAttribute("data-ge-dragging", ""));
     document.documentElement.setAttribute("data-ge-drag", "");
-    say(t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消", named(targets)), "prompt");
+    say(t("正在移动{0} · 拖到要放的位置后松开 · 停在选项卡上切换，停在折叠块标题上展开 · Esc 取消", session.name), "prompt");
     update();
     schedule();
     return true;
@@ -219,8 +233,9 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
       : items ? accepts(box.kind, "item") || accepts(box.kind, "list")
       : steps ? accepts(box.kind, "step") || (accepts(box.kind, "flowchart") && box.kind !== "nest" && !box.el.closest("ol.doc-flow"))
       : [...kinds].every((kind) => accepts(box.kind, kind)));
-    // Blocks a column takes may go beside a block, into a column (分栏).
-    const aside = !tabs && [...kinds].every((kind) => accepts("column", kind)) && ((unit) => accepts("column", unit.kind));
+    // Blocks a column takes may go beside a block, into a column (分栏); beside a folded heading when a
+    // column takes what it hides too, which goes into its column with it (besideTo).
+    const aside = !tabs && [...kinds].every((kind) => accepts("column", kind)) && ((unit) => folds.withHidden(unit.el).every((node) => accepts("column", kindOf(node))));
     return resolveDrop(drag.tree, x + scrollX, y + scrollY, { takes, dragged: (unit) => targets.includes(unit.el), count: targets.length, items, aside, edge: scrollX });
   }
 
@@ -272,7 +287,7 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
   // Releasing (commit) or cancelling: the blocks go where the line showed, or stay.
   function end(commit) {
     if (!drag) return;
-    const { targets, target, drop, line, tint, preview, opened } = drag;
+    const { targets, target, drop, line, tint, preview, opened, name } = drag;
     clearTimeout(drag.rest?.timer);
     drag = null;
     line.remove();
@@ -293,16 +308,17 @@ export function createDrag({ info, selection, struct, say, closeMenu, schedule }
       besideTo(targets, drop.aside);
       selection.select(targets, { quiet: true });
       target.scrollIntoView({ block: "nearest", inline: "nearest" });
-      say(t("{0} · 拖动栏间的竖线调宽度 · Ctrl+Z 撤销", drop.aside.whole ? t("已移动这一栏") : drop.aside.row ? t("已把{0}放进新的一栏", named(targets)) : t("已把{0}并排分栏", named(targets))));
+      say(t("{0} · 拖动栏间的竖线调宽度 · Ctrl+Z 撤销", drop.aside.whole ? t("已移动这一栏") : drop.aside.row ? t("已把{0}放进新的一栏", name) : t("已把{0}并排分栏", name)));
       return;
     }
     const others = unitsOf(drop.container).filter((unit) => !targets.includes(unit) && extentOf(unit));
-    // The place is never before a box's lead (a highlight block's icon): drop.mjs.
-    const reference = drop.slot < others.length ? withLeads(others[drop.slot])[0] : others.length > 0 ? others.at(-1).nextSibling : null;
+    // The place is never before a box's lead (a highlight block's icon): drop.mjs. At the end, after
+    // what the last block in sight hides too (a folded heading's section: fold/), never between them.
+    const reference = drop.slot < others.length ? withLeads(others[drop.slot])[0] : others.length > 0 ? folds.lastOf(others.at(-1)).nextSibling : null;
     const emptied = moveTo(targets, drop.nest ?? drop.container, drop.nest ? null : reference);
     selection.select(targets, { quiet: true });
     target.scrollIntoView({ block: "nearest", inline: "nearest" });
-    say(t("已移动{0}{1}{2} · Ctrl+Z 撤销", named(targets), drop.nest ? t("到上一项下面") : "", emptied ? t("（原来的外层已空，一并去掉）") : ""));
+    say(t("已移动{0}{1}{2} · Ctrl+Z 撤销", name, drop.nest ? t("到上一项下面") : "", emptied ? t("（原来的外层已空，一并去掉）") : ""));
   }
 
   // The window losing the focus, or the page going out of sight, ends a drag: cancelled.