@heycys/gallery 0.1.0 → 0.1.1

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

@@ -5,6 +5,7 @@ import { caretAt, editable, select } from "../caret.mjs";
 import { ordered } from "../block-info.mjs";
 import { firstHost, isHost, unitElement } from "../core.mjs";
 import { createFills } from "../fills.mjs";
+import { reveal } from "../folded.mjs";
 import { FOLLOW, task } from "../frames.mjs";
 import { BAR } from "../handle-sizes.mjs";
 import { MARGIN, margin, onMargin, rightRoom, setMargin } from "../margin.mjs";
@@ -44,17 +45,17 @@ import { HOT, MARK, STYLE, barNode, cardNode, fitField, layerNode, markerNode }
 // mark (blocks, the fill selected blocks have, in a warm colour: fills.mjs): words have it where the
 // format bar stood (below their last line, by their last character), blocks at the last one's bottom
 // right (at the window's bottom where that is below it), always inside the column. It exists once
-// it is left or something is typed in it, words or none: one with no words is a plain mark of its place
-// (Esc on a new one that never held words takes it back); typing saves it (500ms after the last key, at
-// once when it closes); a press elsewhere, Esc, Enter, Tab or Ctrl+Alt+M close it into a marker
+// something is typed in it (white space is nothing): a card left with none leaves nothing, and a saved
+// one emptied goes as its card closes, offered back as its delete button's is (an annotation has words:
+// the user's, 2026-11-06); typing saves it (500ms after the last key, at once when it closes; a text
+// with no words never: the file keeps its last words while the card is open); a press elsewhere, Esc, Enter, Tab or Ctrl+Alt+M close it into a marker
 // in the column's right gutter, at its first line or the middle of its several blocks (right of a
 // section's strip for what is in that section; the place the button beside a block stands on:
 // markerSpot(), which says no where a marker stands already). Closed
 // by a key the caret goes back to its words, or to its blocks where the keys opened it; a card of
 // blocks the pointer opened places none. Resting on a marker (or clicking it) shows its card again
 // where it was written, by its words, which light up, and it stays while the pointer goes over to it.
-// The button at a card's right deletes it, and that alone does, or its words or blocks going: a card
-// emptied stays, with no words. One card shows at a time, and starting on the words of an annotation already there shows its
+// The button at a card's right deletes it, and so does emptying it, or its words or blocks going. One card shows at a time, and starting on the words of an annotation already there shows its
 // card rather than a second one. The workbench's list asks for the page's annotations (rows()) and
 // goes to one (goTo()): what hides it opened, the page scrolled to it, its card shown as resting on its
 // marker shows it, until a press elsewhere or the words leave the window. Markers stack without
@@ -109,6 +110,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   let reading = null; // the first read from the server, under way or done (taken back when it failed)
   let counted = false; // that read is in and what it brought found: the page can say how many it has
   let items = new Map(); // id -> { id, created, updated, text, anchor } in page order, as the server last said, with the page's own changes
+  let filed = new Map(); // id -> its text as the file last held it (the server's last answer): what 撤销 brings back of one emptied in its card
   let version = null; // the file's, as last read or written
   const lost = new Map(); // id -> an annotation a check deleted this visit (its words gone): back when an undo brings them back
   const timers = new Map(); // id -> the timer of its save (typed, not saved yet)
@@ -132,9 +134,9 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   let remeasure = true; // all of them to measure again (what may move them: the page's size, its structure), else those in `stale`
   const stale = new Set(); // ids found again since they were measured
   // The annotation whose card shows, or stands in front: { id, focus, hover, keys, located, side, begun,
-  // held, opening, within }: `keys`, opened by the keys, which give the caret back; `located`, shown by
+  // opening, within }: `keys`, opened by the keys, which give the caret back; `located`, shown by
   // the workbench's list; `side`, by its words, "below" or "above" them, kept while it is written;
-  // `begun`, new, and `held`, having held words; `opening`, opened for writing and not laid out yet in
+  // `begun`, new; `opening`, opened for writing and not laid out yet in
   // the margin; `within`, what it is laid out by there instead of its anchor, which is out of the window.
   let shown = null;
   let hot = null; // the id whose words are under the pointer
@@ -198,6 +200,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     heard = true;
     version = answer.version;
     const dropped = new Set(answer.dropped ?? []);
+    filed = new Map((answer.items ?? []).map((item) => [item.id, item.text]));
     const next = new Map();
     for (const item of answer.items ?? []) {
       const mine = items.get(item.id);
@@ -298,12 +301,13 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     return answer;
   }
 
-  // Save it now: made (its first save) or changed, with words or with none (a plain mark of its place).
+  // Save it now: made (its first save) or changed; never with no words (left so, it goes: close).
   async function save(id) {
     clearTimeout(timers.get(id));
     timers.delete(id);
     const item = items.get(id);
     if (!item) return;
+    if (!item.text.trim()) return; // no words: nothing to save, the file keeps its last words
     if (!item.anchor) {
       if (!made.has(id)) return;
       item.anchor = anchorOf(id);
@@ -366,14 +370,16 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
 
   /** Save what is typed and not saved yet, now (Ctrl+S, the workbench's save, the page closing: `keepalive`). */
   function flush({ keepalive = false } = {}) {
-    const ids = [...new Set([...timers.keys(), ...[...made.keys()].filter((id) => !sending.has(id))])]; // one begun and not saved yet counts, typed in or not
+    // What was typed, and one begun and not saved yet; one with no words saves nothing (save), and one
+    // the file has keeps its last words (the page going, no 撤销 could be offered for its going).
+    const ids = [...new Set([...timers.keys(), ...[...made.keys()].filter((id) => !sending.has(id))])];
     if (keepalive) {
       sync({ keepalive: true });
       for (const id of ids) {
         clearTimeout(timers.get(id));
         timers.delete(id);
         const item = items.get(id);
-        if (!item) continue;
+        if (!item?.text.trim()) continue;
         if (!item.anchor && made.has(id)) item.anchor = anchorOf(id);
         postJson(ROUTE, token, { slug, put: wire(item) }, { keepalive: true }).catch(() => {});
       }
@@ -460,9 +466,9 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   // A card's field has the focus (a card being written); `shown.focus` follows it.
   const focused = () => Boolean(document.activeElement?.closest?.(".ge-note-card"));
   const writing = () => Boolean(shown) && focused();
-  // A new one that has held no words yet (`begun`, not `held`): no annotation until it is left, Esc
-  // taking it back.
-  const drafted = (id) => shown?.id === id && shown.begun && !shown.held;
+  // A new one with no words (made on the page, not saved yet, nothing typed but white space): no
+  // annotation yet: no marker, no count, no row; left so, it leaves nothing (close).
+  const drafted = (id) => made.has(id) && !(items.get(id)?.text ?? "").trim();
 
   // The annotation already on `selection` (the same words or blocks), or undefined.
   function sameAs(selection) {
@@ -533,7 +539,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
       if (closing) {
         event.preventDefault();
         event.stopPropagation();
-        backToText({ drop: event.key === "Escape" && drafted(id) });
+        backToText();
       }
     });
     // A press in a card edits it, the caret where pressed (at the end of its text for a press beside the
@@ -604,7 +610,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     if (!focus) return true;
     card.field.focus({ preventScroll: true });
     if (document.activeElement !== card.field) {
-      if (made.has(id) && !item.text) {
+      if (drafted(id)) {
         items.delete(id);
         made.delete(id);
         dropView(id);
@@ -627,6 +633,15 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     wake();
   }
 
+  // What 撤销 puts back of one going at the reader's word (its delete button, emptied and closed): as
+  // it is, or, emptied in its card, with the words the file last held; null when the file never had it.
+  function backOf(id) {
+    const item = items.get(id);
+    if (!item?.anchor) return null;
+    const text = item.text.trim() ? item.text : filed.get(id);
+    return text ? { ...wire(item), text } : null;
+  }
+
   // An annotation gone at the reader's word, from the page and the file (one never saved leaves nothing).
   function forget(id) {
     const item = items.get(id);
@@ -640,26 +655,30 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     dropView(id);
   }
 
-  // The card closes into its marker: what was typed saved at once, one with no words saved as it is
-  // (a plain mark of its place). `drop`: it goes instead (its delete button, Esc on a new one). With
-  // room it goes back among the others.
+  // The card closes into its marker: what was typed saved at once. One left with no words is none: it
+  // goes, from the page and the file, and one the file had is offered back as its delete button's is
+  // (`removed`, with its last words). `drop`: it goes whatever it says (its delete button, which offers
+  // it back itself). With room it goes back among the others.
   function close({ drop = false } = {}) {
     if (!shown) return;
     const { id } = shown;
     shown = null;
     const item = items.get(id);
-    if (drop) forget(id);
-    else if (item && (timers.has(id) || !item.anchor)) save(id);
+    if (item && (drop || !item.text.trim())) {
+      const back = drop ? null : backOf(id);
+      forget(id);
+      if (back) removed([back]);
+    } else if (item && (timers.has(id) || !item.anchor)) save(id);
     changed();
     wake();
   }
 
-  // A card's delete button: its annotation goes at once, and the workbench offers it back. One never
-  // saved leaves nothing to bring back.
+  // A card's delete button: its annotation goes at once, and the workbench offers it back (emptied in
+  // its card, with the words the file last held). One never saved leaves nothing to bring back.
   function erase(id) {
     const item = items.get(id);
     if (!item) return;
-    const was = item.anchor ? wire(item) : null;
+    const was = backOf(id);
     if (shown?.id !== id) {
       forget(id);
       changed();
@@ -699,7 +718,6 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     const was = drafted(id);
     item.text = field.value;
     item.updated = new Date().toISOString();
-    if (item.text.trim() && shown?.id === id) shown.held = true;
     schedule(id);
     changed();
     if (!standing || was !== drafted(id)) wake();
@@ -824,7 +842,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     const view = views.get(id);
     if (!view || drafted(id)) return false;
     const start = view.range?.startContainer ?? view.units[0];
-    globalThis.DocKit.reveal(start.nodeType === 1 ? start : start.parentElement);
+    reveal(start.nodeType === 1 ? start : start.parentElement); // a folded heading's section too (fold/)
     remeasure = true; // what was hidden stands now, before the observer says so
     const line = lineOf(view);
     if (!line) return false;
@@ -896,7 +914,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
       const view = known ?? {};
       if (!found || (found.units?.length ?? 0) === 0) {
         // A new one with no words, not saved yet, is about nothing now: it goes with them, for no save to keep.
-        if (made.has(id) && !item.anchor && !item.text) {
+        if (drafted(id) && !item.anchor) {
           forget(id);
           if (shown?.id === id) shown = null;
           continue;
@@ -946,16 +964,25 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   }
 
   // The outermost closed disclosure `node` is hidden in (in its content, not its title, nor `node`
-  // itself: it shows, as its title), or null.
+  // itself: it shows, as its title), or the folded heading whose section hides it (fold/: the
+  // outermost, the heading its own title), whichever holds the other; null where neither hides it.
   function closedAround(node) {
     const element = node?.nodeType === 1 ? node : node?.parentElement;
     let found = null;
     for (let details = element?.closest("details:not([open])"); details; details = details.parentElement?.closest("details:not([open])")) {
       if (details !== node && !details.querySelector(":scope > summary")?.contains(element)) found = details;
     }
-    return found;
+    let marked = null;
+    for (let at = element?.closest("[data-ge-folded]"); at; at = at.parentElement?.closest("[data-ge-folded]")) marked = at;
+    const heading = marked && document.querySelector(`[data-ge-id="${CSS.escape(marked.getAttribute("data-ge-folded"))}"]`);
+    if (!heading) return found;
+    return found && found.contains(heading) ? found : heading;
   }
 
+  // What stands for a closed disclosure or a folded section (closedAround): the disclosure's title, or
+  // the heading itself, which has none.
+  const titleOf = (closed) => closed.querySelector(":scope > summary") ?? closed;
+
   // The first line of `node` (window coordinates): { top, height, left }: of its first words; where a
   // picture standing as a block comes before them, the picture's top (as the handle's first line,
   // handle/: not its caption, far from there); its box's top where it holds neither.
@@ -987,13 +1014,13 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   // holds), box (what it stands for as shown) }, or null when it does not show: its first line, or all
   // of them for several blocks, from the first's top to the last's bottom, the marker at their middle.
   // In a closed disclosure (laid out though hidden), its title's line: checked first, as the hidden
-  // text still has boxes.
+  // text still has boxes; in a folded heading's section (fold/), the heading's.
   function lineOf(view) {
     const start = view.range?.startContainer ?? view.units?.find((unit) => unit.isConnected);
     if (!start?.isConnected) return null;
     const closed = closedAround(start);
     if (closed) {
-      const summary = closed.querySelector(":scope > summary");
+      const summary = titleOf(closed);
       if (!summary?.getClientRects().length) return null;
       const box = summary.getBoundingClientRect();
       return { ...firstLine(summary), folded: true, box, bottom: box.bottom };
@@ -1074,13 +1101,13 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
   // What a card stands by (window coordinates), or null when it does not show: words, their box and
   // where their last line ends ({ words, top, left, right: the last character's, bottom: the last
   // line's }); blocks, theirs ({ top, bottom and right: the last one's }); in a closed disclosure (laid
-  // out though hidden), its title as a block.
+  // out though hidden), its title as a block; in a folded heading's section, the heading.
   function anchorBox(target) {
     const start = target.range?.startContainer ?? target.units?.find((unit) => unit.isConnected);
     if (!start?.isConnected) return null;
     const closed = closedAround(start);
     if (closed) {
-      const summary = closed.querySelector(":scope > summary");
+      const summary = titleOf(closed);
       if (!summary?.getClientRects().length) return null;
       const box = summary.getBoundingClientRect();
       return { top: box.top, bottom: box.bottom, right: box.right };
@@ -1379,7 +1406,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     quiet = false;
 
     // A block anchor's blocks filled while it is shown, or its card in the margin is under the pointer;
-    // those in a closed disclosure, the disclosure.
+    // those in a closed disclosure, the disclosure; in a folded section, its heading.
     const filled = views.get(shown?.id ?? (standing ? hot : null));
     fills.paint(filled && !filled.range && !filled.hidden ? ordered(filled.units.filter((unit) => unit.isConnected).map((unit) => closedAround(unit) ?? unit)) : []);
     paintMarks();
@@ -1562,7 +1589,7 @@ export function createAnnotate({ slug, token, isEditing, picked, unpick = () =>
     },
   };
 
-  /** How many annotations the page has (their words or blocks still there; a new one once left, or once it has words). */
+  /** How many annotations the page has (their words or blocks still there; a new one once it has words). */
   const count = () => [...items.keys()].filter((id) => views.has(id) && !drafted(id)).length;
 
   provide("annotations", () => ({

package/browser/editor/page/autosave.mjs

@@ -42,6 +42,10 @@ const QUIET = 1500; // how long the reader has changed nothing before the page r
 const STORE_EVERY = 1000; // the crash buffer while typing, at most this often
 const JOURNAL_FOR = 60 * 60 * 1000; // how long a committed text is checked for being put back
 const OWN_FOR = 5000; // how long the live-reload channel may still announce a version this page wrote
+// A page of the Agent's own (its address's ?agent: the Agent 自用 one gallery open prints, gallery
+// component try's): its commits say so (`agent`), and are no reader's edit to the review of the
+// Agent's changes, so none ends a document's first writing (docs/editor.md "Agent's changes").
+const AGENT_PAGE = typeof location !== "undefined" && new URLSearchParams(location.search).has("agent");
 
 // A committed text as the revert check names it, whichever load named it: the report's title, a block of
 // a unit by the unit's id (or what named the unit, with none) and its place in it, any other by what
@@ -347,6 +351,8 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
    */
   function heard(version, anyway = false, at = Date.now()) {
     if (closed) return;
+    // A write the reader asked for is on its way (showOwn): what is heard meanwhile is its own, or heard again once it failed.
+    if (owning) return void (missed = true);
     // It may be the commit on its way, or one whose answer was lost: known once that one is answered
     // (as of when it was announced).
     if ((flight || parked) && !anyway) return void events.push([version, at]);
@@ -396,10 +402,13 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
     } catch {}
     checking = false;
     if (closed) return false;
+    // Of the blocks it made that the write took out, those inside another such go with it, one card.
+    const goneUnits = (answer?.units ?? []).filter(({ gone }) => gone).map(({ key }) => key);
     const back = answer?.ok ? [
       ...answer.reverted.map(({ key, theirs }) => ({ ...texts.find((entry) => entry.key === key), theirs })).filter((entry) => entry.key),
-      // A block put back: by its unit, with what it holds (the reader's words, to copy).
-      ...(answer.units ?? []).filter(({ key }) => units.some((unit) => unit.key === key)).map(({ key, gone }) => ({ key: `p${key}`, unit: key, gone: Boolean(gone), mine: commits.unitText(key) })),
+      // A block put back: by its unit, with what it holds (the reader's words, to copy) and, taken out, the
+      // blocks taken out inside it (`within`, decided with it; what it holds that the file still has is not).
+      ...(answer.units ?? []).filter(({ key, gone }) => units.some((unit) => unit.key === key) && !(gone && commits.heldWithin?.(key, goneUnits))).map(({ key, gone }) => ({ key: `p${key}`, unit: key, gone: Boolean(gone), mine: commits.unitText(key), ...(gone ? { within: goneUnits.filter((inner) => commits.heldWithin?.(inner, [key])) } : {}) })),
       // Parts a component wrote put back: by its unit, with the hashes the file holds of them (`written`)
       // and what the page holds of them (`data`, the reader's, kept with the crash buffer); none the page
       // holds as the file does, however the file spells it (heldOtherwise).
@@ -499,7 +508,7 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
       // A block put back: kept (made again, or moved again where the page has it), or the file's. Parts a
       // component wrote: written again over the file's (its hashes of them), or the file's.
       if (entry.written) commits.rewrite(entry.unit, entry.written, mine);
-      else commits.putBack(entry.unit, { gone: entry.gone, mine });
+      else commits.putBack(entry.unit, { gone: entry.gone, mine, within: entry.within });
       reverts.delete(key);
       storedFrom = null;
       if (mine) changed(true);
@@ -523,6 +532,42 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
     return true;
   }
 
+  /**
+   * A write the reader asked for that changes the file (撤回 of the Agent's changes and its 撤销:
+   * changes/): `run()` makes it, resolving with whether it did; then the page shows the file as after a
+   * write of its own, at once, asking nothing of what it put back (the revert check: the reader asked
+   * for it), and what is heard meanwhile shows nothing first. The caller saved what waited first
+   * (flush) and made sure nothing waits for the reader. Resolves with whether the page goes.
+   */
+  let owning = false; // showOwn's write is on its way
+  let missed = false; // and the live-reload channel spoke meanwhile
+  async function showOwn(run) {
+    if (closed || reloading) return false;
+    reloading = owning = true;
+    missed = false;
+    clearTimeout(reloadTimer);
+    let done = false;
+    try {
+      done = Boolean(await run());
+    } catch {}
+    owning = false;
+    if (closed) return done;
+    if (!done) {
+      reloading = false;
+      refresh();
+      if (missed) heard(null, true);
+      else if (foreign) maybeReload();
+      return false;
+    }
+    storage.remove(bufferKey());
+    storage.remove(keptKey());
+    storedFrom = null;
+    keepJournal();
+    refresh();
+    reloadView(map.slug, null, null);
+    return true;
+  }
+
   /** Show the file as it is once nothing waits (the reader gave a change up for the file's, or what the page is made of changed). */
   function reloadSoon() {
     foreign = true;
@@ -556,6 +601,7 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
     store,
     decide,
     reloadSoon,
+    showOwn,
     close,
     get state() {
       return { waiting: waiting(), syncing: Boolean(flight), offline, stopped, foreign, reloading, held: commits.issues.size + reverts.size, drafts, unstored };
@@ -566,7 +612,7 @@ export function createAutosave({ map, commits, blocked, changedAt, holding = ()
 // A commit sent: the server's answer, or { ok: false, reason: "server" } when it failed or answered
 // no JSON (a lost connection rejects: the caller reads that as offline).
 async function postCommit(map, request, { keepalive = false } = {}) {
-  const response = await postJson("/__gallery/edit/commit", map.token, { slug: map.slug, ...request }, { keepalive });
+  const response = await postJson("/__gallery/edit/commit", map.token, { slug: map.slug, ...request, ...(AGENT_PAGE ? { agent: true } : {}) }, { keepalive });
   if (response.status >= 500) return { ok: false, reason: "server" };
   return response.json().catch(() => ({ ok: false, reason: "server" }));
 }

package/browser/editor/page/beside.mjs

@@ -6,16 +6,16 @@ import { isHost } from "./core.mjs";
 // (selection/).
 
 /**
- * Whether a click to the right of a block (outside it) selects it: a boxed block (a code block, a
- * highlight block, a disclosure, a card, a table, a divider…) or a row of columns, as opposed to text
- * and the boxes text flows in (a list, a quote, a section).
+ * Whether a click to the right of a block, past the text area it stands in (insert/ boxedBeside),
+ * selects it: a boxed block (a code block, a highlight block, a disclosure, a card, a table, a
+ * divider…) or a row of columns, as opposed to text and the boxes text flows in (a list, a quote, a
+ * section).
  */
 export const selectsBeside = (unit) => BESIDE.has(unit?.getAttribute?.("data-ge-unit-kind"));
 
 /**
  * Whether Enter on a block selected (the first of those selected) puts a new paragraph after them
  * (blocks.mjs, insert.paragraphAfter): a block of no text of its own, those a click to their right
- * selects and a 选项卡区块; not a text block among them (a callout, whose text Enter edits, a formula
- * block, whose editor it opens).
+ * selects and a 选项卡区块; not a text block among them (a formula block, whose editor it opens).
  */
 export const entersAfter = (unit) => Boolean(unit) && !isHost(unit) && ENTERS_AFTER.has(unit.getAttribute("data-ge-unit-kind"));

package/browser/editor/page/block-menu/colors.mjs

@@ -12,7 +12,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // show one of the nine with none of a family (a callout's background is blue: `defaults`), that
 // family has no 默认: that color is ringed for none, and picking it takes the class away. Each
 // swatch names its color in a tooltip. The swatches are drawn with the kit's own classes, so they
-// match the text in either theme. A pick gives every target that color of its family, the other family's staying (one
+// match the text in either theme, a background's as the block's fill (`--doc-fill`). A pick gives every target that color of its family, the other family's staying (one
 // undo step: look, history.mjs; a table cell's one color: table/). Only the families the targets take show.
 
 const STYLE = `
@@ -21,6 +21,8 @@ const STYLE = `
   .ge-pop .ge-color-cell > span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 6px;
     font-size: 16px; font-weight: 500; line-height: 1; box-shadow: inset 0 0 0 1px var(--ge-ring); }
   .ge-pop .ge-color-cell > span:not([class*="doc-text-"]) { color: var(--ge-tx); }
+  /* A block's background swatch shows the block's fill, not the words' deeper one the kit gives a span. */
+  .ge-pop .ge-color-cell > span[class*="doc-highlight-"] { background: var(--doc-fill); }
   .ge-pop .ge-color-cell:hover > span, .ge-pop .ge-color-cell[data-active] > span { box-shadow: inset 0 0 0 2px var(--ge-ring); }
   .ge-pop .ge-color-cell[aria-current="true"] > span { box-shadow: inset 0 0 0 2px var(--ge-ring-strong); }
   ${Object.entries(RINGS).map(([name, [light, dark, strong, strongDark]]) => `.ge-pop .ge-color-cell[data-ring="${name}"] { --ge-ring: light-dark(${light}, ${dark}); --ge-ring-strong: light-dark(${strong}, ${strongDark}); }`).join("\n  ")}

package/browser/editor/page/block-menu/index.mjs

@@ -54,7 +54,7 @@ const WIDTH = MENU_WIDTH; // the menu, as wide as its grid (no room left beside
  * color rows). copyLink(target): the block's address on the clipboard, in the click on its row; null
  * on a page no address leads to; linkAhead(): the menu opens with that row, what the click will want is read now.
  */
-export function createBlockMenu({ info, menu, selection, remove, turnInto, convert, turnIntoAll = () => null, convertAll = () => {}, below, belowTypes = () => [], add, look, copyLink = () => {}, linkAhead = () => {} }) {
+export function createBlockMenu({ info, menu, selection, remove, takenWith = (units) => units, turnInto, convert, turnIntoAll = () => null, convertAll = () => {}, below, belowTypes = () => [], add, look, copyLink = () => {}, linkAhead = () => {} }) {
   const chapters = sectionOps();
   const columns = columnOps();
   const { kindOf, nameOf, keepText, boxKindOf } = info;
@@ -95,12 +95,13 @@ export function createBlockMenu({ info, menu, selection, remove, turnInto, conve
   // where it is. What it holds comes out as it stands, so a block in a column keeps its column, the row
   // of columns coming out whole, and one in a section in a Sheet panel ends in the panel. None for a
   // block that has no 分区与分栏 › of its own (no columns row, in a section: a list item, a flowchart's
-  // node, a quote's later paragraph, a block an item holds).
+  // node, a quote's later paragraph, a block an item holds): asked of the block alone (a folded heading
+  // whose section a column cannot take keeps it).
   const dissolveRow = (units) => {
     const section = chapters?.dissolvesFrom(units[0]);
     if (!section || units.some((unit) => chapters.dissolvesFrom(unit) !== section)) return [];
     const own = units[0] === section;
-    if (!own && units.some((unit) => (columns?.columnsCheck([unit]) ?? null) === null)) return [];
+    if (!own && units.some((unit) => (columns?.columnsCheck([unit], (alone) => [alone]) ?? null) === null)) return [];
     const reason = chapters.unwrapCheck(section);
     return [{ label: own ? t("解散分区") : t("解散所在分区"), icon: ICONS.dissolve, disabled: Boolean(reason), note: reason || undefined, run: () => chapters.unwrap(section, own ? null : units) }];
   };
@@ -149,8 +150,9 @@ export function createBlockMenu({ info, menu, selection, remove, turnInto, conve
       const colors = colorRow(group);
       items.push(...colors, ...(colors.length > 0 ? [{ separator: true }] : []));
       // Blocks next to each other in the page or a Sheet panel become a section; a selection with gaps does not.
-      const wrap = chapters?.wrapCheck(group) ?? null;
-      const sections = [...(wrap !== null ? [{ label: t("组成新分区"), icon: ICONS.group, disabled: Boolean(wrap), note: wrap || undefined, run: () => chapters.wrap(group) }] : []), ...dissolveRow(group)];
+      // A folded heading among them goes in with what it hides (fold/).
+      const wrap = chapters?.wrapCheck(takenWith(group)) ?? null;
+      const sections = [...(wrap !== null ? [{ label: t("组成新分区"), icon: ICONS.group, disabled: Boolean(wrap), note: wrap || undefined, run: () => chapters.wrap(takenWith(group)) }] : []), ...dissolveRow(group)];
       // Neighbours in one container go side by side, a column each.
       items.push(...groupRow(sections, splitRows(group)));
       items.push({ label: t("删除"), icon: ICONS.trash, hint: "Del", disabled: Boolean(refused), note, run: () => remove(group) });
@@ -193,7 +195,7 @@ export function createBlockMenu({ info, menu, selection, remove, turnInto, conve
     }
     const sections = [];
     if (chapter(target)) sections.push({ label: t("在下方新建分区"), icon: ICONS.section, run: () => add(target, "section") });
-    if (chapters?.wrapCheck([target]) === "") sections.push({ label: t("组成新分区"), icon: ICONS.group, run: () => chapters.wrap([target]) });
+    if (chapters?.wrapCheck(takenWith([target])) === "") sections.push({ label: t("组成新分区"), icon: ICONS.group, run: () => chapters.wrap(takenWith([target])) });
     sections.push(...dissolveRow([target]));
     const splits = splitRows([target]);
     // 选中外层 joins 分区与分栏 › where the block has that submenu; a block with none gets none for it.

package/browser/editor/page/blocks.mjs

@@ -1,6 +1,7 @@
 import { createBlockInfo } from "./block-info.mjs";
 import { createBlockMenu } from "./block-menu/index.mjs";
 import { createDrag } from "./drag/index.mjs";
+import { createFolds } from "./fold/index.mjs";
 import { createHandle } from "./handle/index.mjs";
 import { createMenu } from "./menu.mjs";
 import { createDelete } from "./selection/delete.mjs";
@@ -19,6 +20,7 @@ import { pageObjects } from "./page-objects.mjs";
 //   block-menu/   the menu a handle opens: turning a block into another type, layout, a new block below, columns, sections, deleting
 //   selection/    the selected blocks and their fills; box selection (marquee.mjs); deleting (delete.mjs)
 //   drag/         moving blocks: dragging a handle, where they would go (drop.mjs), Ctrl+Shift+arrows
+//   fold/         a heading's section folded: the triangle right of its words, what is hidden, the section going with its heading
 //
 // What they share: what the page knows of a block (block-info.mjs), the menu card (menu.mjs), one
 // task of the editor's frames (frames.mjs) that keeps the handle, the bar and the fills where their
@@ -49,8 +51,9 @@ import { pageObjects } from "./page-objects.mjs";
  * notes.write(units) the annotation begun.
  * copyLink(unit): 复制块链接, the block menu's (the editor's copyBlockLink), or null for no such row.
  * linkAhead(): a block's menu opens with that row in it: what the click will want is read now.
+ * slug: the report's (what is folded is kept by report: fold/).
  */
-export function createBlocks({ units, boxes, active, struct, look, say, edit, turnInto, convert, turnIntoAll = () => null, convertAll = () => null, below, belowTypes = () => [], add, after = () => false, blank, nest, keepsHandle = () => false, addNear = () => {}, copyLink = () => {}, linkAhead = () => {}, notes }) {
+export function createBlocks({ slug = "", units, boxes, active, struct, look, say, edit, turnInto, convert, turnIntoAll = () => null, convertAll = () => null, below, belowTypes = () => [], add, after = () => false, blank, nest, keepsHandle = () => false, addNear = () => {}, copyLink = () => {}, linkAhead = () => {}, notes }) {
   const info = createBlockInfo({ units, boxes });
   const menu = createMenu();
   const closeMenu = () => menu.close();
@@ -59,10 +62,11 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
   const schedule = () => frames.wake();
 
   const selection = createSelection({ info, active, say, closeMenu, schedule });
-  const drag = createDrag({ info, selection, struct, say, closeMenu, schedule });
-  const blockMenu = createBlockMenu({ info, menu, selection, remove: (targets) => remove(targets), turnInto, convert, turnIntoAll, convertAll, below, belowTypes, add, look, copyLink, linkAhead });
-  const handle = createHandle({ info, active, selection, drag, menu, openMenu: blockMenu.open, drawing: () => marquee.drawing, schedule, keeps: keepsHandle, add: (target, where) => { selection.clear(); addNear(target, where); }, notes });
-  const remove = createDelete({ info, selection, struct, say, closeMenu, forget: () => handle.forget() });
+  const folds = createFolds({ slug, selection, active, schedule });
+  const drag = createDrag({ info, selection, struct, say, closeMenu, schedule, folds });
+  const blockMenu = createBlockMenu({ info, menu, selection, remove: (targets) => remove(targets), takenWith: folds.takenWith, turnInto, convert, turnIntoAll, convertAll, below, belowTypes, add, look, copyLink, linkAhead });
+  const handle = createHandle({ info, active, selection, drag, menu, openMenu: blockMenu.open, drawing: () => marquee.drawing, schedule, keeps: (node) => keepsHandle(node) || folds.holds(node), aside: folds.holds, add: (target, where) => { selection.clear(); addNear(target, where); }, notes });
+  const remove = createDelete({ info, selection, struct, say, closeMenu, forget: () => handle.forget(), folds });
   // What a component makes with these tools (`blockTools`): a Sheet's tabs as Notion's pills, a click, a drag, their menu, + (components/sheets/pills.mjs).
   const parts = pageObjects().flatMap((page) => page.blockTools?.({ active, drag, menu, openMenu: blockMenu.open, struct, say }) ?? []);
   // A press on empty space: a box selection, or a click there (marquee.mjs clears the selection).
@@ -86,8 +90,9 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
     step("drag", () => drag.step(), () => drag.end(false));
     step("selection", () => selection.paint(drag.active), () => selection.unpaint());
     step("handle", () => handle.place(), () => handle.hide());
+    step("fold", () => folds.place(handle.pointed), () => folds.hide());
     if (drag.active) return true;
-    return handle.showing || selection.picked.length > 0 ? FOLLOW : false;
+    return handle.showing || folds.showing || selection.picked.length > 0 ? FOLLOW : false;
   }
 
   // One tool's part of a frame; when it throws, what that tool draws goes, and it is said.
@@ -105,7 +110,7 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
   // A press anywhere but on the block tools closes the menu; on a divider line it selects the line,
   // on empty space it may start a box selection, elsewhere it clears the selection.
   document.addEventListener("pointerdown", (event) => {
-    if (handle.holds(event.target) || menu.contains(event.target) || parts.some((part) => part.holds(event.target))) return;
+    if (handle.holds(event.target) || folds.holds(event.target) || menu.contains(event.target) || parts.some((part) => part.holds(event.target))) return;
     closeMenu();
     const line = event.button === 0 && active() ? handle.lineAt(event.target, event.clientX, event.clientY) : null;
     if (line) {
@@ -199,6 +204,7 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
     drag.end(false);
     marquee.cancel();
     handle.hide();
+    folds.hide();
     selection.unpaint();
   }
 
@@ -206,6 +212,7 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
     if (drag.active) drag.end(false);
     marquee.cancel();
     handle.hide();
+    folds.hide();
     parts.forEach((part) => part.hide());
     selection.hide();
     closeMenu();
@@ -225,6 +232,8 @@ export function createBlocks({ units, boxes, active, struct, look, say, edit, tu
     mark: selection.mark,
     keepText: info.keepText,
     moveBy: drag.moveBy,
+    /** Headings' sections folded (fold/). */
+    folds,
     remove,
     closeMenu,
     /** A block selected and its menu open by `rect` (a component's own button: an image's 更多). */

package/browser/editor/page/caret.mjs

@@ -507,7 +507,10 @@ export function reveal(host, line, margin = 24) {
   const style = getComputedStyle(scroller ?? document.documentElement);
   const above = kept(style.scrollPaddingTop, margin);
   const below = kept(style.scrollPaddingBottom, margin);
-  const delta = line.bottom > view.bottom - below ? line.bottom - view.bottom + below : line.top < view.top + above ? line.top - view.top - above : 0;
+  const exact = line.bottom > view.bottom - below ? line.bottom - view.bottom + below : line.top < view.top + above ? line.top - view.top - above : 0;
+  // Whole pixels, away from the line: a scroll by a fraction is rounded by the browser, and rounded
+  // down it left a line at the window's bottom a fraction of a pixel past it.
+  const delta = exact > 0 ? Math.ceil(exact) : Math.floor(exact);
   if (!delta) return;
   if (scroller) scroller.scrollTop += delta;
   else scrollBy(0, delta);