@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/editor.mjs

@@ -3,6 +3,7 @@
 import "../../shared/renamed-storage.mjs";
 import { OUTER, can, captureLayout, editableAhead, firstHost, isHost, limitText, markFrames, markKinds, matchesSource, newHost, newMention, ownHTML, plainText, prepareBlock, splitBlock, textEnd, tidyEmptied, unitElement, withLeads } from "./core.mjs";
 import { createBlocks } from "./blocks.mjs";
+import { hiddenByFold, reveal } from "./folded.mjs";
 import { createFlags } from "./flags.mjs";
 import { createFrame } from "./frame.mjs";
 import { createHistory } from "./history.mjs";
@@ -14,10 +15,12 @@ import { createCommits, kindOf } from "./commit.mjs";
 import { createConflicts, packageChanged, unfit } from "./conflicts.mjs";
 import { checkLeft, createAutosave, keepWith, lostKey, pendingKey, readLost, recover, reloadView, setReloader, takeView, viewNow } from "./autosave.mjs";
 import { SOLO, connectWorkbench } from "./session.mjs";
+import { lookOfElement } from "../../shared/document-look.mjs";
 import { belowTargets, convertBlock, convertGroup, groupParents, groupTargets, noTextToCarry, targetsOf, touchedBy, turnInto, turnParents, turnUnit, typeOf } from "./convert.mjs";
 import { joinCode, rangeAt, rangeOffsets } from "./marks.mjs";
-import { addStyle, button, copyAddress, element, layer } from "./ui.mjs";
+import { addStyle, copyAddress, element, layer, textButton } from "./ui.mjs";
 import { createClipboard } from "./clipboard/index.mjs";
+import { serveFiles } from "./served.mjs";
 import { createFormatting } from "./format-bar/index.mjs";
 import { connectHints, hideHint, readOnlyReason, scheduleHint, trackPointer } from "./hints/index.mjs";
 import { createInsert } from "./insert/index.mjs";
@@ -26,7 +29,8 @@ import { bookmarkItems, connectViews, linkTitle, offerViews } from "./links/view
 import { connectChipFills } from "./chip-fills.mjs";
 import { connectFormula, dismissFormula, formulaBoxNode, loadKatex, openFormula } from "./formula/index.mjs";
 import { settlePads } from "./pads.mjs";
-import { beforeDelete, codeArrow, codeClick, codePress, settleCodeEdge } from "./typing/code-edges.mjs";
+import { followLongRuns } from "./long-runs.mjs";
+import { beforeDelete, codeArrow, codeClick, codePress, deletedBack, deletingBack, settleCodeEdge, takeEntry } from "./typing/code-edges.mjs";
 import { createMarkdown } from "./markdown/index.mjs";
 import { createResize } from "./resize/index.mjs";
 import { connectPages, fieldOpen, keptByComponent, menuRow, modalOps, pageAt, pageIcon, pageObjects, pageOf, pageOfHost, pageOfType, pageOfUnit, panelOpen, typedAsIs } from "./page-objects.mjs";
@@ -42,6 +46,7 @@ import { createSelectAll, topStep } from "./select-all/index.mjs";
 import { revealText } from "./find/index.mjs";
 import { createOutline } from "./outline/index.mjs";
 import { createAnnotate } from "./annotate/index.mjs";
+import { createChanges as createAgentChanges } from "./changes/index.mjs";
 import { BLOCK_TYPES, HOSTS, PLAIN_TEXT, TYPE_INFO, accepts, blankSaysOf, boxOwner, texOnly, textFilters } from "../components/registry.mjs";
 import { createPages } from "../components/pages.mjs";
 import { openMediaPicker } from "./emoji-picker/index.mjs";
@@ -54,6 +59,7 @@ import { goBackTo, placeIn, unmoved } from "../../shared/reading-place.mjs";
 import { heldList, holdPages } from "./links/pages.mjs";
 import { hideBlocks } from "./offered.mjs";
 import { local, storageOf } from "./storage.mjs";
+import { createTodoWrites } from "./todo-writes.mjs";
 import { language, t } from "../../shared/i18n/index.mjs";
 
 // In-place editing for the live preview (`npm run dev:local` only; never exported).
@@ -77,6 +83,7 @@ import { language, t } from "../../shared/i18n/index.mjs";
 //   select-all/   Ctrl+A: the block's text, then its container's blocks, one level a press, then the page
 //   outline/      目录: the page's headings at its right (the room there is margin.mjs's)
 //   annotate/     批注: started from the format bar, a block's button or Ctrl+Alt+M; cards in the margin, with no room markers in the gutter and the card by the words
+//   changes/      the Agent's changes (设置 › 显示变更): what an Agent wrote since the reader last kept or reverted it, marked; the bar at the bottom
 //   blocks.mjs    the block tools: handle/, block-menu/, selection/, drag/
 //
 // and the components' own editing (src/editor/components/<name>/page.mjs). Undo and redo are
@@ -103,6 +110,7 @@ let markdown = null; // Markdown shortcuts as the reader types (markdown/)
 let selectAll = null; // Ctrl+A widening step by step (select-all/)
 let outline = null; // the page's headings at its right (outline/), not on a page opened on its own (?solo)
 let annotate = null; // 批注 (annotate/), on every page of a session
+let agentChanges = null; // what an Agent changed, under review (changes/), on every page of a session
 let editing = false;
 let composing = false; // an input method is composing
 // A composition ends with compositionend, which Chrome does not always send (a paste over the text
@@ -112,6 +120,7 @@ const compositionOver = (event) => {
   if (composing && !event.isComposing && event.keyCode !== 229) composing = false;
 };
 let pressing = false; // the main button is down on the page (a click or a drag under way)
+let pressedText = null; // the text block a press of the main button came down in (onPointerDown), for the click that ends it
 let commits = null; // the page's commits (commit.mjs)
 let autosave = null; // when they go (autosave.mjs)
 let conflicts = null; // what the file refused, for the reader to decide (conflicts.mjs)
@@ -150,7 +159,8 @@ const STYLE = `
      as the element's own outline. Selected blocks get a fill instead (selection/). */
   /* Editable text has a text block's corners and, framed, a light fill under the pointer, unless its
      component declares others: --ge-text-radius, and --ge-text-tint (none: plain, as Notion's and
-     Feishu's; a cell, a callout, a code block and its title, a disclosure's title). */
+     Feishu's; a cell, a code block and its title, a disclosure's title, a media block's
+     caption, a card's title and caption). */
   [data-ge-editing] [contenteditable="true"] { border-radius: var(--ge-text-radius, 3px); }
   [data-ge-editing] [contenteditable="true"]:focus { outline: none; }
   [data-ge-editing] [data-ge-round="box"] { border-radius: 8px; }
@@ -260,7 +270,12 @@ const { newParagraph } = insert;
 
 // The icon picker's images go into the report's folder (editor/media-store.mjs), where the server serves them.
 const assetUrl = (file) => mediaUrl("asset", MAP.slug, file);
+serveFiles(assetUrl); // a table cell's pictures (单元格里的图片) show where the server serves them
 connectPicker({ slug: MAP.slug, token: MAP.token, notify: say });
+// A block of the page checking a to-do of a document (context.workspace.setTodo: ./todo-writes.mjs): written
+// by the workspace's service, this one's too as any write it did not make, which the page merges; no step of
+// its undo (only a custom page keeps one: board/).
+createTodoWrites({ token: MAP.token }).listen();
 // Whether a block tool may act: the page edits, no reload is on its way and no field of a component is being edited.
 const active = () => editing && !autosave?.state.reloading && !fieldOpen();
 // A picture or file sent to the report's folder (kind: "image", "file" or "embed"): the server's answer.
@@ -307,9 +322,10 @@ connectPages(createPages({
 })); // what the engines ask of a component (page-objects.mjs)
 
 const typing = createTyping({
-  struct, say, keepText: (node) => blocks.keepText(node), paragraphBefore: insert.paragraphBefore, paragraphAfter: insert.paragraphAfter, removeBlocks: (units) => blocks.remove(units), selectBlock: (unit) => blocks.select(unit),
+  struct, say, keepText: (node) => blocks.keepText(node), paragraphBefore: insert.paragraphBefore, removeBlocks: (units) => blocks.remove(units), selectBlock: (unit) => blocks.select(unit),
   adding: () => slash?.adding ?? null,
   leave: createLeaving({ struct, touchedBy, convertHost, typeOf, targetsOf }),
+  showHidden: (node) => blocks?.folds.showAround(node), // a folded heading's section opened before a join takes in its words (fold/)
 });
 // Selecting text across blocks: its listeners go before the editor's own keys and clipboard.
 const crossText = createTextSelection({
@@ -363,6 +379,7 @@ const clipboard = createClipboard({
   pageLink: pageLinkOf,
   titleBold: () => formatting?.armed ?? false, // a node's empty title: what is pasted there bold, as typed
   showCaret,
+  pictures: () => tables?.pictures ?? null, // a table cell's (table/pictures.mjs)
 });
 
 // ---------- editing ----------
@@ -411,6 +428,8 @@ function enter() {
   });
   layout = captureLayout(document, MAP);
   markFrames(document, layout, hosts);
+  // A text block holding a long run (a path, a URL) breaks anywhere, judged now and as its text changes (long-runs.mjs).
+  followLongRuns(document.querySelector("main") ?? document.body);
   commits = createCommits({ root: document, map: MAP, baselines, units, boxes, getLayout: () => layout, setLayout: (next) => (layout = next) });
   // Commits wait while an input method composes, a formula is being edited (formula/), the "/" menu
   // or the "@" menu stands on what is typed for it (half of it is no text of the file's) or a gap
@@ -429,16 +448,19 @@ function enter() {
       conflicts.add(entries.map((entry) => ({ ...entry, key: `r:${entry.key}`, revert: entry.key, kind: entry.written ? "reverted-source" : entry.unit === undefined ? "reverted" : "reverted-unit" })));
       say(t("AI 的写入把你之前保存的 {0} 处修改改回去了：在左下方选择保留哪一边。", entries.length), "error");
     },
+    listed: () => showLost(), // a block the page before this one made, which someone else's write took out
   });
   conflicts = createConflicts({ act: decide, nodeOf: conflictNode, restorable, copyBlock: (node) => clipboard.copyBlocks([node]), say });
   editing = true;
   document.documentElement.setAttribute("data-ge-editing", "");
+  typing.untitled(); // an empty title says 未命名文档 from the start
+  blocks?.folds.start(); // what was folded, folded again in this task: no frame shows it open (fold/)
   refresh();
   for (const page of pageObjects()) page.entered?.();
 }
 
 // What the page says when what a component wrote went by a manifest that changed: given up, the page shown again.
-const outdatedNotice = () => t("组件包刚刚变了，这次改动没有保存，页面已按新的组件重新显示。");
+const outdatedNotice = () => t("自定义块刚刚变了，这次改动没有保存，页面已按新的块重新显示。");
 
 // What 仍然调整 wrote over someone else's change of what a component writes, by page unit: the step that
 // gives theirs back (installed/ overwrite), and when its write went in, all of it (commit.mjs `forced`).
@@ -453,8 +475,10 @@ const keepsOverwrite = (asked) => !asked && [...overwrites.values()].some(({ lan
 
 // A commit was taken in (commit.mjs): a block merged with someone else's words shows the merge;
 // what the file refused is flagged and held back, the rest goes on.
-function committed({ conflicts: held, merged, outdated, forced = [] }, receipt) {
+function committed({ conflicts: held, merged, outdated, forced = [], rekeyed = [] }, receipt) {
+  agentChanges?.committed(receipt);
   for (const host of merged) history.merged(host);
+  history.rekeyed(rekeyed); // the keys of tables the file gave otherwise, in the steps that recorded them
   for (const unit of forced) {
     const written = overwrites.get(unit);
     if (!written || written.landed > 0) continue;
@@ -472,7 +496,7 @@ function committed({ conflicts: held, merged, outdated, forced = [] }, receipt)
     conflicts.add(held);
     const conflicted = held.filter((entry) => !unfit(entry) && !packageChanged(entry)).length;
     const packaged = held.filter(packageChanged).length;
-    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("组件包刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
+    say(conflicted > 0 ? t("{0} 处修改和文件的最新版本冲突，没有保存：在左下方选择怎么处理。", conflicted) : packaged > 0 ? t("自定义块刚刚变了，{0} 处修改没有保存：在左下方选择怎么处理。", packaged) : t("{0} 处内容文档存不下，没有保存：在左下方选择怎么处理。", held.length), "error");
   }
   else if (outdated || merged.length > 0 || receipt.texts?.some((entry) => entry.status === "merged")) {
     const count = receipt.texts.filter((entry) => entry.status === "merged").length;
@@ -599,6 +623,7 @@ function markChanged(now = false) {
     conflicts?.reflag();
   }
   if (messageKind() === "error") settle(); // the reader is dealing with it
+  typing.untitled(); // a title emptied (or filled) by any change says 未命名文档 (or nothing) at once
   lastChange = Date.now();
   discrete ||= now;
   const counting = checkPending;
@@ -678,7 +703,10 @@ function afterConvert(focus, type, said) {
  * heading) and the new block turns into the type; below any other block, an empty paragraph of its
  * box does (the first box out that takes one). One undo step.
  */
-function insertBelow(target, type, typed = null) {
+// `also` (a table's 视图 ›: page/table/views.mjs): `attributes` ([element, names]) the step records too, and
+// `done(made)` run in it on the new block (the element where the empty paragraph was), so that what binds
+// the block to the one above it is the same step.
+function insertBelow(target, type, typed = null, also = null) {
   const splits = isHost(target) && can(target, "split");
   let after = target;
   while (!splits && after && !accepts(after.parentElement?.getAttribute("data-ge-box-kind"), "paragraph")) after = after.parentElement?.closest(OUTER);
@@ -696,10 +724,12 @@ function insertBelow(target, type, typed = null) {
       after.after(fresh);
     }
     if (!fresh) return null;
+    const prior = fresh.previousSibling; // what the new block stands right after, made where the paragraph was
     const turned = type === "paragraph" && fresh.localName === "p" ? { focus: null, created: [] } : convertBlock(fresh, type, { fresh: true });
+    also?.done?.(fresh.isConnected ? fresh : prior?.nextElementSibling ?? null);
     const focus = turned.focus ?? fresh;
     return { touched: splits ? [target, focus] : [focus], focus, created: turned.created };
-  });
+  }, { attributes: also?.attributes ?? [] });
   if (result) afterConvert(result.focus, type, t("已插入{0}", menuRow(type).label));
 }
 
@@ -757,7 +787,7 @@ function convertUnit(unit, type, { loaded = false } = {}) {
   if (!made || !onCreated(type, result.focus)) {
     if (emptied && isHost(result.focus)) caretAt(result.focus, "start");
     else {
-      // What it is now: the new highlight block a block went into, as a disclosure (notion-lite's
+      // What it is now: the new highlight block or callout a block went into, as a disclosure (notion-lite's
       // transformBlocks selects the callout), the flowchart a block or a list went into (a container
       // of a type that takes a block as it is, no `wraps`), else the block holding the text.
       const { container, wraps } = BLOCK_TYPES[type];
@@ -946,6 +976,18 @@ function onBeforeInput(event) {
   } else if (type === "insertLineBreak" && can(host, "plain")) {
     event.preventDefault();
     say(limitText(host, "split"));
+  } else if (/^delete[A-Za-z]+(Backward|Forward)$/.test(type) && !event.isComposing && textFilters(host)) {
+    // Backspace or Delete beside a component's entry whose keydown onKeydown passed by (an input
+    // method's, keyCode 229): the whole entry, as there (typing/code-edges.mjs takeEntry). A
+    // deletion backward the browser does: the caret kept outside inline code it comes to (deletedBack).
+    const back = type.endsWith("Backward");
+    const before = type === "deleteContentBackward" || type === "deleteContentForward" ? ownHTML(host) : null;
+    const removed = before !== null ? takeEntry(host, back) : undefined;
+    if (removed) {
+      event.preventDefault();
+      recordStep(host, before);
+      say(removed);
+    } else if (back) deletingBack(host);
   } else if (type.startsWith("format")) {
     event.preventDefault(); // formatting goes through format-bar/: the kit's markup only
   } else if (type === "insertFromDrop" || type === "deleteByDrag") {
@@ -974,6 +1016,7 @@ function onInput(event) {
   }
   // What stood between two pieces of inline code deleted: they are one (marks.mjs joinCode).
   if (event.inputType.startsWith("delete") && textFilters(host)) joinCode(host);
+  if (event.inputType.startsWith("delete") && event.inputType.endsWith("Backward") && textFilters(host)) deletedBack(host);
   pageOf(host)?.typed?.(host);
   recordText(host);
   markdown.typed(host, event.data);
@@ -1012,6 +1055,7 @@ function onPointerDown(event) {
   hideHint();
   endArrowRun();
   if (event.button === 0) pressing = true;
+  pressedText = event.button === 0 && editing ? editable(event.target) : null;
   // What the press came down on may take it, by its component's `press`: code opens for editing, a
   // display formula goes into the formula editor, and no caret goes in.
   if (editing && event.button === 0 && pageAt(event.target)?.press?.(event)) return;
@@ -1033,6 +1077,9 @@ function onSelectionChange() {
   formatting.schedule();
   if (!composing) formatting.moved();
   const selection = getSelection();
+  // The caret, or an end of a text selection, in what a folded heading hides (undo put it back there):
+  // the fold opens (fold/).
+  for (const end of [selection.anchorNode, selection.focusNode]) if (end && hiddenByFold(end)) blocks?.folds.showAround(end);
   const host = selection.rangeCount ? editable(selection.anchorNode) : null;
   // A text block no step named, one a block made on the page came with: what the caret finds there is
   // what the first change of it undoes to, as a change is only seen once made.
@@ -1130,7 +1177,8 @@ async function newSubpage(title) {
 }
 
 // The report's title as the reader sees it now (while editing, the title block's text).
-const currentTitle = () => (document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1"))?.textContent.replace(/\s+/g, " ").trim() ?? "";
+const titleNode = () => document.querySelector('[data-ge-kind="title"]') ?? document.querySelector("h1.doc-title, .doc-header h1");
+const currentTitle = () => titleNode()?.textContent.replace(/\s+/g, " ").trim() ?? "";
 
 // This page, as the list of pages takes it (links/pages.mjs).
 const thisPage = () => ({ slug: MAP.slug, title: currentTitle() });
@@ -1173,7 +1221,10 @@ const COMMANDS = {
   },
   // 搜索文档 opened the report at a hit: its words scrolled into view and marked for a moment (find/).
   async reveal(message) {
-    return revealText(message, (node) => modalOps().show(node));
+    return revealText(message, (node) => {
+      blocks?.folds.showAround(node); // a folded heading's section opened (fold/)
+      return modalOps().show(node);
+    });
   },
   // A link or an address opened the report at a block.
   async "reveal-block"({ block }) {
@@ -1222,11 +1273,12 @@ const COMMANDS = {
 // ---------- links to blocks and documents ----------
 
 // The block of this id, once the page is drawn (what its charts move is moved by then), or an element
-// of this id (an address may name a heading's): what hides it opened (the kit's DocKit.reveal: a
-// detail card that does not hold it closed, a disclosure, a tab, the card it is in), in the middle of
-// the window and selected, as notion-lite's revealBlock, and the keys are the page's. What was just
-// shown lays itself out in the frames after (a tab's tables) and a card closed gives the focus back
-// then, so it is brought there again before it is selected. A block that is gone is said, unless
+// of this id (an address may name a heading's): what hides it opened (a folded heading's section,
+// folded.mjs reveal, then the kit's DocKit.reveal: a detail card that does not hold it closed, a
+// disclosure, a tab, the card it is in), in the middle of the window and selected, as notion-lite's
+// revealBlock, and the keys are the page's. What was just shown lays itself out in the frames after (a
+// tab's tables) and a card closed gives the focus back then, so it is brought there again before it is
+// selected. A block that is gone is said, unless
 // `quiet`, the page staying as it is; #top with no such element is the top of the page, as for a browser.
 // A later step (a link, the way back or forth, an address) started past its waits leaves it there.
 async function revealBlock(id, { quiet = false } = {}) {
@@ -1239,7 +1291,7 @@ async function revealBlock(id, { quiet = false } = {}) {
     else if (!quiet) say(t("这个块已经不在了。"));
     return { ok: false, reason: "missing" };
   }
-  globalThis.DocKit.reveal(block);
+  reveal(block); // a fold over it too (fold/)
   block.scrollIntoView({ block: "center" });
   await painted();
   await painted();
@@ -1418,7 +1470,22 @@ function handOff() {
 // The workbench around the page, if any: it hears the page's state and notices, and asks it to save,
 // close and show the report again.
 function connect() {
-  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: currentTitle(), icon: pageIcon(), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  // The look the page shows (字体与布局: its <html>'s, src/shared/document-look.mjs), which the workbench's
+  // 更多 marks as chosen; told again when it changes (the kit's ui.js, doc-look-change).
+  // `title`: null for a page with no title at all (the workbench names it by its doc.json); "" an untitled one (未命名文档).
+  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: titleNode() ? currentTitle() : null, icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  addEventListener("doc-look-change", () => workbench?.update());
+  // A block's context.workspace.open (the kit's runtime/workspace.js): a document, or a block of one, goes
+  // where a link to it goes (goTo: in the workbench, its address; on its own, the page once saved); a custom
+  // page, the workbench's #@<slug>, or /pages/<slug> once saved.
+  addEventListener("doc-open-request", (event) => {
+    const { slug = null, block = null, page = null } = event.detail ?? {};
+    event.preventDefault();
+    if (page) {
+      if (window.parent !== window && !SOLO) workbench?.open({ hash: `@${page}` });
+      else COMMANDS["prepare-close"]().then(() => location.assign(`/pages/${page}`));
+    } else goTo({ slug, block }, `/generated/${slug}.html${block ? `#${encodeURIComponent(block)}` : ""}`);
+  });
   relayTo(workbench ? workbench.notice : null, workbench ? workbench.noticeRoom : null); // the workbench shows the page's notices, above the page's bottom panels
   handOff();
   // A page on its own in a frame (?solo: the 写作偏好 dialog's, which no session asks to save) is saved
@@ -1471,11 +1538,16 @@ async function start() {
     else if (typeof state.docBlock === "string") revealBlock(state.docBlock, { quiet: true });
   });
   annotate?.start();
+  agentChanges?.start();
   const open = await openTabs();
   if (open.has(TAB)) { // a duplicated tab: its own id from now on
     TAB = newTab();
     session.set(keys.tab, TAB);
   }
+  // What earlier pages of the document committed, made and wrote (this tab's, and those of tabs no longer
+  // open), asked of at once where this page opened on another version of the file than they last knew
+  // (its cards and list said through the workbench).
+  autosave?.opened(open);
   const prefix = pendingKey(MAP.slug, "");
   const left = local.keys().filter((key) => key.startsWith(prefix) && key !== pendingKey(MAP.slug, TAB) && !open.has(key.slice(prefix.length)));
   if (left.length === 0) return;
@@ -1535,7 +1607,7 @@ function showLost() {
     if (block) {
       panelItem(
         element("p", { text: t("文件里的这一块已被修改：复制你的版本，再粘贴到页面上。") }),
-        element("div", { class: "ge-actions" }, button(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
+        element("div", { class: "ge-actions" }, textButton(t("复制这一块"), () => { if (!clipboard.copyBlocks([block])) say(t("没能完成，请再试一次。"), "error"); })),
       );
       continue;
     }
@@ -1543,10 +1615,10 @@ function showLost() {
     panelItem(
       element("p", { text: LOST[item.why] ?? LOST.refused }),
       element("div", { class: "ge-version", text }),
-      element("div", { class: "ge-actions" }, button(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
+      element("div", { class: "ge-actions" }, textButton(t("复制文字"), () => navigator.clipboard?.writeText(text).then(() => say(t("已复制。"))))),
     );
   }
-  panelItem(element("div", { class: "ge-actions" }, button(t("都处理好了，不再保留"), () => {
+  panelItem(element("div", { class: "ge-actions" }, textButton(t("都处理好了，不再保留"), () => {
     local.remove(lostKey(MAP.slug));
     closePanel();
   }, { primary: true })));
@@ -1569,7 +1641,7 @@ function boot() {
   atMenu = createAtMenu({ composing: () => composing, page: thisPage, recordText, recordStep });
   markdown = createMarkdown({ slash, at: atMenu, convert: convertHost, recordStep });
   blocks = createBlocks({
-    units, boxes, active, struct, look: lookStep, say, edit: editBlock, turnInto, convert: convertUnit, turnIntoAll: groupTargets, convertAll, add: insert.addAfter, after: insert.paragraphAfter,
+    slug: MAP.slug, units, boxes, active, struct, look: lookStep, say, edit: editBlock, turnInto, convert: convertUnit, turnIntoAll: groupTargets, convertAll, add: insert.addAfter, after: insert.paragraphAfter,
     below: insertBelow, belowTypes: belowTargets,
     blank: insert.clickBlank, nest: (units, delta) => pageObjects().some((page) => page.nestBlocks?.(units, delta)),
     keepsHandle: (node) => tables?.holds(node) ?? false,
@@ -1579,10 +1651,13 @@ function boot() {
     copyLink: SOLO ? null : copyBlockLink, // what ?solo shows (写作偏好) only its dialog opens: no address leads there
     linkAhead: () => holdPages(thisPage),
   });
-  resize = createResize({ units, active, look: lookStep, say, owns: (node) => tables?.owns(node) ?? false });
-  gaps = createColumnGaps({ active, struct, look: lookStep, say });
+  resize = createResize({ units, active, look: lookStep, say, settle, owns: (node) => tables?.owns(node) ?? false });
+  gaps = createColumnGaps({ active, struct, look: lookStep, say, settle });
   for (const page of pageObjects()) page.install?.(); // the round "+" at a flowchart node's right, renaming Sheet tabs
-  tables = createTableEditing({ active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, ownCells: (data) => clipboard.ownCells(data), typedKey });
+  tables = createTableEditing({
+    active, struct, look: lookStep, selectBlock: (unit) => blocks.select(unit), resizeTable: (event, unit, axis) => resize.startTable(event, unit, axis), say, cellsOf: (data) => clipboard.cellsOf(data), upload: uploadTo, typedKey,
+    recordStep, insertBelow: (unit, type, also) => insertBelow(unit, type, null, also),
+  });
   selectAll = createSelectAll({ blocks, say, cells: { table: () => tables.selectedTable, clear: () => tables.clear() } });
   createFrame(() => editing);
   createFlags(() => editing);
@@ -1605,14 +1680,30 @@ function boot() {
     changed: () => workbench?.update(),
     removed: (items) => workbench?.annotationsRemoved(items),
   });
+  // Read at once, drawn once the page is ready; commits and autosave are made as the page edits (enter).
+  if (!SOLO) agentChanges = createAgentChanges({
+    slug: MAP.slug, token: MAP.token, commits: () => commits, autosave: () => autosave, say, session,
+    across: crossText, // a selection across blocks, kept on its words as the marks go and come
+    flush: async () => {
+      checkAll();
+      return (await autosave?.flush()) ?? "nothing";
+    },
+  });
   document.addEventListener("pointerup", (event) => {
     pressing = false;
     formatting.released();
-    // A click at an edge of inline code: the caret on the side it was made on.
+    // A click at an edge of inline code or an entry: the caret on the side it was made on, when the
+    // press came down on that text; a press elsewhere that put the caret there (a card's backdrop,
+    // which closed it and put the caret at its entry; the page's empty space) leaves it at the stop
+    // it is at.
     const selection = getSelection();
     const host = editing && event.button === 0 && selection.rangeCount && selection.isCollapsed ? editable(selection.anchorNode) : null;
+    const pressed = pressedText;
+    pressedText = null;
     if (host && outOfAtom(event.clientX)) return; // a click beside a formula that put the caret in it
-    if (host && textFilters(host)) codeClick(host, event.clientX);
+    if (!host || !textFilters(host)) return;
+    if (pressed && (pressed === host || pressed.contains(host))) codeClick(host, event.clientX);
+    else settleCodeEdge(host);
   }, true);
   document.addEventListener("focusin", passTab, true);
   document.addEventListener("compositionstart", (event) => {
@@ -1711,6 +1802,7 @@ function boot() {
     checkAll();
     autosave?.leave();
     annotate?.leave();
+    agentChanges?.leave();
   });
   document.addEventListener("visibilitychange", () => {
     if (!document.hidden || !autosave) return;

package/browser/editor/page/emoji-picker/emoji-tab.mjs

@@ -1,19 +1,24 @@
-// Taken over from notion-lite (its src/ui/media-picker/emoji-tab.js), as it is: only what it imports is
-// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+// Taken over from notion-lite (its src/ui/media-picker/emoji-tab.js): its structure and behaviour as
+// there, what it imports Gallery's own (support.mjs, src/shared/emoji/), and since 2026-11 (the user's
+// word) its look Gallery's own (styles.mjs: the editor's palette, no blue), no 旗帜 group (the data holds
+// no flag: src/shared/emoji/data/README.md), every emoji a Twemoji picture on every system, the skin
+// button's hand too (the system's font only for one the pack lacks), and a group's title sticking to
+// the list's top. Its notes, below, are notion-lite's, those changes written in.
 /* “表情符号”页签（943244 EmojiPicker、885963 选肤色、625478 格子和肤色变体；尺寸是线上实测）。
- *   分组：最近（筛选词为空时）、标注（从标注打开时，固定 26 个）、人物、动物与自然、食物与饮料、活动、旅行与地点、物品、符号、旗帜、
+ *   分组：最近（筛选词为空时）、标注（从标注打开时，固定 26 个）、人物、动物与自然、食物与饮料、活动、旅行与地点、物品、符号（没有旗帜：Gallery 整组去掉）、
  *     自定义（本机的自定义表情，按名字排；第一个格子是“添加表情符号”的圆形加号）
- *   每行 (408 − 24) / 32 = 12 个；标题 12px / 500、上 6+6 下 8；格子 32×32、圆角 4、表情 24（../emoji/emoji.js）
+ *   每行 (408 − 24) / 32 = 12 个；标题 12px / 500、高 28，滚动时钉在列表顶上；格子 32×32、圆角 6、表情 24（Twemoji 图，../emoji/emoji.js）
  *   筛选（943244 W）：按关键词打分——筛选词里有这个表情 > “:筛选词” > 关键词等于 > 关键词开头 > 多个词都对上 > 包含，常用的加分；
  *     自定义表情的关键词是它的名字（871871 g）。结果（连同加号）超过 12 × 12 / 2 = 72 个时仍按分组显示，否则拍平成一组按分数排
  *     （加号排最后）；只剩加号时显示“无结果”和“添加表情符号”按钮
- *   底部分类栏（943244 y）：上边一条 --c-borSec，内边距 8 12 10；按钮 32×32、图标 22；当前滚到的分组按钮有底色；
- *     没有表情的分组按钮半透明不可点（“自定义”“添加”总能点）；悬停提示分组名（左对齐、在下方）；点了把那一组滚到顶上，
+ *   底部分类栏（943244 y）：上边一条 --ge-line，内边距 6 12 8；按钮 28×28、图标 18；当前滚到的分组按钮有底色；
+ *     没有表情的分组按钮半透明不可点（“自定义”“添加”总能点）；悬停提示分组名（左对齐、在下方）；点了把那一组（连同组名）滚到顶上，
  *     “添加”打开“添加表情符号”浮层。筛选结果拍平时不显示
- *   最近（943244 F）：常用表情按次数、时间排，取 2 行；选中一个表情记一次（../emoji/data.js recordEmojiUse）
+ *   最近（943244 F）：常用表情按次数、时间排，取 2 行，只取数据还认得的和自定义表情（以前用过的旗不再出现）；打开时读一次；
+ *     选中一个表情记一次（../emoji/data.js recordEmojiUse）
  *   格子（625478）：没设过肤色时点有肤色变体的表情，先弹出一排变体（选了正好 5 个变体的就记下肤色）；
  *     自定义表情（758388）24×24、contain，提示是它的名字
- *   右边按钮（885963）：选肤色，28×28、字号 20 的“✋”（设过就是那个肤色的手），点开一排六只手
+ *   右边按钮（885963）：选肤色，28×28、18 的“✋”（Twemoji 图，设过就是那个肤色的手；数据到了再画），点开一排六只手
  *   随机（859941）：活动 / 物品 / 旅行与地点里随便一个，选上但不关菜单
  *   添加表情符号（943244 Y → 757573 → 749527 tM）：在加号 / 底栏按钮 / 无结果按钮下面打开 ./upload.js 的浮层；
  *     存好以后交给 env.uploaded（选上这个表情、关菜单）
@@ -52,7 +57,6 @@ const CATEGORIES = [
   { id: 'travel', category: 'Travel & Places', title: t("旅行与地点"), icon: 'airplane' },
   { id: 'objects', category: 'Objects', title: t("物品"), icon: 'lightBulbBright' },
   { id: 'symbols', category: 'Symbols', title: t("符号"), icon: 'checkmarkCircle' },
-  { id: 'flags', category: 'Flags', title: t("旗帜"), icon: 'flag' },
   { id: 'custom', title: t("自定义"), icon: 'squareGrid2X2' },
   { id: 'add', title: ADD_LABEL, icon: 'plusCircle' },
 ];
@@ -89,7 +93,7 @@ function rank(emoji, filter, splitFilter) {
 
 /* 943244 W：分好组、切成一行行。返回 { categorized, rows: [{ id, title?, emojis }] }；只剩加号时 rows 是 [{ emojis: [ADD] }] */
 function buildRows(rawFilter, isCallout, recent) {
-  const cats = [!rawFilter.trim() ? CATEGORY.recent : null, isCallout ? CATEGORY.callout : null, ...CATEGORIES.slice(2, 10), CATEGORY.custom].filter(Boolean);
+  const cats = [!rawFilter.trim() ? CATEGORY.recent : null, isCallout ? CATEGORY.callout : null, ...CATEGORIES.filter(c => c.category), CATEGORY.custom].filter(Boolean);
   const filter = normalizeFilter(rawFilter) ?? '';
   const split = rawFilter.split(' ').filter(Boolean);
   const rows = [];
@@ -152,7 +156,7 @@ export function createEmojiTab(env) {
   el.className = 'nmm-body';
   el.innerHTML = `<div class="nmm-scroller notion-scroller vertical"><div role="grid" class="nmm-grid"></div></div><div class="nmm-categories"></div>`;
   const grid = el.querySelector('.nmm-grid'), scroller = el.querySelector('.nmm-scroller'), bar = el.querySelector('.nmm-categories');
-  const recent = recentEmojis(PER_ROW);
+  let recent = null;   // read once, when the data is in (render; Notion's: not reordered while open)
   let view = { categorized: true, rows: [] }, lastFilter = '', addPopup = null;
   const focus = createGridFocus({ scroller, grid, rows: () => view.rows.map(r => r.emojis.length) });
 
@@ -174,6 +178,10 @@ export function createEmojiTab(env) {
   function render(filter) {
     lastFilter = filter;
     if (!emojiDataLoaded()) { grid.innerHTML = ''; bar.hidden = true; view = { categorized: true, rows: [] }; return; }   // 数据加载完再画
+    if (recent === null) {   // 数据到了：最近（只要还认得的，去掉的旗不再出现）读一次，选肤色的手画成 Twemoji 图
+      recent = recentEmojis(PER_ROW, e => isCustomEmojiString(e) || Boolean(emojiInfo(e)));
+      paintSkin();
+    }
     view = buildRows(filter, env.isCallout, recent);
     const { rows } = view;
     let html = '';
@@ -205,7 +213,7 @@ export function createEmojiTab(env) {
     const present = new Set(view.rows.map(r => r.id));
     const enabled = c => c.id === 'custom' || c.id === 'add' || present.has(c.id);
     bar.innerHTML = CATEGORIES.filter(c => c.id !== 'callout').map(c =>
-      `<div role="button" tabindex="-1" class="nmm-category${enabled(c) ? '' : ' disabled'}" data-category="${c.id}" aria-label="${t("跳转到类别：{0}", esc(c.category ?? c.id))}" aria-pressed="false"${enabled(c) ? '' : ' aria-disabled="true"'}>${icon(c.icon, 22)}</div>`).join('');
+      `<div role="button" tabindex="-1" class="nmm-category${enabled(c) ? '' : ' disabled'}" data-category="${c.id}" aria-label="${t("跳转到类别：{0}", esc(c.category ?? c.id))}" aria-pressed="false"${enabled(c) ? '' : ' aria-disabled="true"'}>${icon(c.icon, 18)}</div>`).join('');
     for (const b of bar.children) hoverTooltip(b, CATEGORY[b.dataset.category].title, { placement: 'bottom', align: 'start' });
     updateBarFocus();
   }
@@ -258,7 +266,8 @@ export function createEmojiTab(env) {
   right.className = 'nmm-skin-wrap';
   right.innerHTML = `<div role="button" tabindex="0" class="nmm-skin" data-act="skin"></div>`;
   const skinBtn = right.firstElementChild;
-  const paintSkin = () => { const tone = getSkinTone(); skinBtn.textContent = tone !== undefined ? SKIN_TONE_HANDS[tone] : '✋'; };
+  // The hand as a Twemoji picture (a placeholder of its size until the data is in: render paints it again then).
+  function paintSkin() { skinBtn.innerHTML = emojiHTML(SKIN_TONE_HANDS[getSkinTone() ?? 0], { size: 18 }); }
   paintSkin();
   hoverTooltip(skinBtn, t("选择肤色"), { placement: 'bottom' });
   skinBtn.addEventListener('click', () => {

package/browser/editor/page/emoji-picker/grid.mjs

@@ -1,7 +1,8 @@
-// Taken over from notion-lite (its src/ui/media-picker/grid.js), as it is: only what it imports is
-// Gallery's own (support.mjs, src/shared/emoji/). Its notes, below, are notion-lite's.
+// Taken over from notion-lite (its src/ui/media-picker/grid.js): what it imports is Gallery's own
+// (support.mjs, src/shared/emoji/), its look too (styles.mjs: a deeper gray, no blue ring), and a cell the
+// keys reach stays below a group's title stuck at the list's top. Its notes, below, are notion-lite's.
 /* 表情 / 图标格子共用的焦点（558045 Grid + 625478 / 485357 H 的提示）：
- *   鼠标悬停和方向键共用一个焦点（有底色）；方向键不绕回，上下按列对齐（短的一行取最后一个）；键盘移动时焦点格有蓝色焦点环、
+ *   鼠标悬停和方向键共用一个焦点（有底色）；方向键不绕回，上下按列对齐（短的一行取最后一个）；键盘移动时焦点格是更深的灰底、
  *   滚进视野，并且一直显示名字（forceVisibleState）；鼠标悬停 150ms 后在下方显示名字（closeDelay 0）。
  *   懒加载：格子里 img[data-src] / img[data-svg]（表情包里的码点）滚到附近才换成 src（../emoji/emoji.js lazySrc；矢量表情一千多张，一次全做太慢）。
  * 格子是 .nmm-cell[data-r][data-c]，提示文字在 data-tip（没有就用 aria-label）。
@@ -25,8 +26,9 @@ export function createGridFocus({ scroller, grid, rows }) {
     cell.classList.add('focused');
     if (!byKeyboard) return;
     cell.classList.add('focus-visible');
-    const cr = cell.getBoundingClientRect(), sr = scroller.getBoundingClientRect();
-    if (cr.top < sr.top) scroller.scrollTop -= sr.top - cr.top;
+    const cover = grid.querySelector('.nmm-section-title')?.offsetHeight ?? 0;   // a group's title stays at the top (styles.mjs: sticky); a flat search has none
+    const cr = cell.getBoundingClientRect(), sr = scroller.getBoundingClientRect(), top = sr.top + cover;
+    if (cr.top < top) scroller.scrollTop -= top - cr.top;
     else if (cr.bottom > sr.bottom) scroller.scrollTop += cr.bottom - sr.bottom;
     if (tipOf(cell)) showTooltip(cell.getBoundingClientRect(), tipOf(cell), { placement: 'bottom' });
   }

package/browser/editor/page/emoji-picker/icon-tab.mjs

@@ -1,4 +1,4 @@
-// The 图标 tab (notion-lite's src/ui/media-picker/icon-tab.js, its grid, colors and sizes as there),
+// The 图标 tab (notion-lite's src/ui/media-picker/icon-tab.js, its grid and behaviour as there, its look Gallery's own: styles.mjs),
 // its icons Gallery's own: two open-source sets of the same 443 things, MingCute and Tabler, and
 // Tabler's 40 numbers, in 12 categories (src/shared/emoji/glyphs.mjs). Its notes, below, are
 // notion-lite's, the icons' own changed.
@@ -13,8 +13,8 @@
  *     数字只有 Tabler 有：切换时不动，选中的也总是 Tabler 的值（提示里写明 Tabler）
  *   颜色（icon_picker_color）：设了就直接用这个颜色插入、格子也显示这个颜色；没设（“每次询问”）时格子显示默认灰色，
  *     点一下先弹出 10 种颜色（两行各 5 个、行内边距 2、间距 1，贴在格子下面）再选
- *   右边按钮（q）：选图标颜色——28×28 带边框，圆圈图标描边 / 填充是当前颜色（没设时描边浅灰、填充 --c-icoTer）；
- *     菜单 134 宽：两行色块（22×22、圆角 6，没设颜色时这两行半透明）+ 分隔线下“每次询问”开关
+ *   右边按钮（q）：选图标颜色——28×28 无框，圆圈图标描边 / 填充是当前颜色（没设时描边浅灰、填充 --ge-ico3）；
+ *     菜单 160 宽：两行色块（26×26、圆角 6，没设颜色时这两行半透明）+ 分隔线下“每次询问”开关（开是中性灰，不用蓝）
  *   随机：随便一组里这一套的图标，颜色用设好的，没设就随便一种；选上但不关菜单
  * 选中一个图标：记进最近（按组记，两套共用），值是 `/icons/<名字>_<颜色>.svg`（MingCute）或 `/icons/tabler/<名字>_<颜色>.svg`（数字总是这个）。
  * createIconTab(env) → { el, left, right, load(), render(filter), move(key), activateFocused(), random() }
@@ -178,7 +178,7 @@ export function createIconTab(env) {
   function paintColor() {
     const color = getIconColor(), values = ICON_COLOR_BY_THEME[theme()];
     colorBtn.setAttribute('aria-label', t("选择图标颜色，已选定 {0}", color ? colorWord(color) : t("无颜色")));
-    colorBtn.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true" style="width:14px;height:14px;display:block;stroke:${color ? values[color] : values.lightgray};fill:${color ? values[color] : 'var(--c-icoTer)'}">${CIRCLE_16}</svg>`;
+    colorBtn.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true" style="width:14px;height:14px;display:block;stroke:${color ? values[color] : values.lightgray};fill:${color ? values[color] : 'var(--ge-ico3)'}">${CIRCLE_16}</svg>`;
   }
   paintColor();
   hoverTooltip(colorBtn, t("选择图标颜色"), { placement: 'bottom' });

package/browser/editor/page/emoji-picker/icons.mjs

@@ -13,7 +13,6 @@ const ICONS = {
   airplane: svg('<path d="M17.25 10c0-.9-.8-1.5-1.7-1.5H11L7.5 3.5H5.75l1.75 5H4.25L3 7H2l.75 3L2 13h1l1.25-1.5H7.5l-1.75 5H7.5L11 11.5h4.55c.9 0 1.7-.6 1.7-1.5z"/>'),
   lightBulbBright: svg('<path d="M10 2.75a5 5 0 0 0-3 9c.6.5 1 1.2 1 2v.5h4v-.5c0-.8.4-1.5 1-2a5 5 0 0 0-3-9z"/><path d="M8.25 16.5h3.5"/>'),
   checkmarkCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="m6.75 10.25 2.4 2.4 4.1-4.9"/>'),
-  flag: svg('<path d="M5.25 17V3.75"/><path d="M5.25 4.75c2.5-1.5 4.5 1.5 7 0 1-.6 2-.8 2.75-.7v6.5c-.75-.1-1.75.1-2.75.7-2.5 1.5-4.5-1.5-7 0"/>'),
   squareGrid2X2: svg('<rect x="3.5" y="3.5" width="5" height="5" rx="1.25"/><rect x="11.5" y="3.5" width="5" height="5" rx="1.25"/><rect x="3.5" y="11.5" width="5" height="5" rx="1.25"/><rect x="11.5" y="11.5" width="5" height="5" rx="1.25"/>'),
   plusCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="M10 6.75v6.5M6.75 10h6.5"/>'),
   xMarkCircle: svg('<circle cx="10" cy="10" r="7.25"/><path d="m7.75 7.75 4.5 4.5m0-4.5-4.5 4.5"/>'),