@heycys/gallery 0.1.0 → 0.1.1

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

@@ -11,8 +11,12 @@ import { element, mount } from "../ui.mjs";
 // (theirs stay theirs, a chart's gradients among them). The page's own rules are brought in as one
 // stylesheet (made once, applied at once: no unstyled first frame), and each copy stands in a frame
 // of its ancestors as the page has them (shallow copies, display: contents), so a list item keeps its
-// marker and its number, and a section's paragraph its section's look. At most MAX blocks, each at
-// most TALL of the window (cut, fading out at the bottom).
+// marker and its number, and a section's paragraph its section's look. A frame draws nothing of its
+// own (visibility: hidden, the copy visible): display: contents leaves an element's ::before and
+// ::after and a <details>'s own summary drawn (Chrome's "▶ 详细信息" for one without a summary, an
+// ancestor item's marker, a flowchart step's number, each at the window's left or top), which would
+// follow the pointer (the user's report of 2026-11-06). At most MAX blocks, each at most TALL of the
+// window (cut, fading out at the bottom).
 
 const MAX = 12;
 const TALL = 0.6;
@@ -72,9 +76,9 @@ function copyOf(part, rect, top) {
   }
   const cut = rect.height > innerHeight * TALL;
   if (cut) copy.classList.add("ge-cut");
-  // Its own size, as it was on the page: no share of a row or of its box (the window is the box here); inline, so the page's rules for the block cannot undo it.
+  // Its own size, as it was on the page: no share of a row or of its box (the window is the box here); inline, so the page's rules for the block cannot undo it. Visible, in frames that are not.
   Object.assign(copy.style, {
-    position: "absolute", margin: "0", maxWidth: "none", minWidth: "0", maxHeight: "none", flex: "none",
+    position: "absolute", margin: "0", maxWidth: "none", minWidth: "0", maxHeight: "none", flex: "none", visibility: "visible",
     left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`,
     height: `${cut ? Math.round(innerHeight * TALL) : rect.height}px`,
   });
@@ -82,6 +86,7 @@ function copyOf(part, rect, top) {
   for (let node = part.parentElement; node && node !== top.parentElement; node = node.parentElement) {
     const shell = clean(node.cloneNode(false));
     shell.style.display = "contents";
+    shell.style.visibility = "hidden"; // a frame lends the copy its rules and draws nothing of its own
     shell.append(outer);
     outer = shell;
   }

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,6 +15,7 @@ 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";
@@ -26,7 +28,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 +45,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";
@@ -77,6 +81,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 +108,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 +118,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 +157,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; }
@@ -307,9 +315,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({
@@ -411,6 +420,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
@@ -433,6 +444,7 @@ function enter() {
   conflicts = createConflicts({ act: decide, nodeOf: conflictNode, restorable, copyBlock: (node) => clipboard.copyBlocks([node]), say });
   editing = true;
   document.documentElement.setAttribute("data-ge-editing", "");
+  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?.();
 }
@@ -454,6 +466,7 @@ 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) {
+  agentChanges?.committed(receipt);
   for (const host of merged) history.merged(host);
   for (const unit of forced) {
     const written = overwrites.get(unit);
@@ -757,7 +770,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 +959,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 +999,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 +1038,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 +1060,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.
@@ -1173,7 +1203,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 +1255,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 +1273,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 +1452,10 @@ 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).
+  workbench = connectWorkbench({ slug: MAP.slug, snapshot: () => ({ title: currentTitle(), icon: pageIcon(), look: lookOfElement(document.documentElement), state: sessionState(), annotations: annotate?.count() }), commands: COMMANDS, modals: modalOps() });
+  addEventListener("doc-look-change", () => workbench?.update());
   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,6 +1508,7 @@ 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();
@@ -1569,7 +1607,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,
@@ -1605,14 +1643,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 +1765,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"/>'),

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

@@ -1,11 +1,13 @@
-// Taken over from notion-lite (its src/ui/media-picker/index.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/index.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, text tabs as the formula editor's, no blue). Its
+// notes, below, are notion-lite's, the look's changed.
 /* 图标选择器（Notion 485357 MediaPicker，页签由 569553 m 给：表情符号 / 图标 / 上传；尺寸、颜色是线上实测）：标注图标、选项卡图标、页面图标共用。
  *   宽 408（569553 popupWidth）；“表情符号”“图标”页签高 390（tabHeight），“上传”页签没给高度，随内容。
- *   页签栏（eU）：高 40、左右 8、底下一条 --ca-borSecTra；“表情符号 / 图标 / 上传”，选中的下面 2px 线；右边“移除”（灰色文字按钮）。
+ *   页签栏（eU）：上下 6、左右 8、底下一条 --ge-line；“表情符号 / 图标 / 上传”是文字页签，当前的一块灰底（没有下划线）；右边“移除”（灰色文字按钮）。
  *     打开时当前图标是 Notion 图标就在“图标”页签，否则在“表情符号”（569553 d；Notion 的当前页签只记在内存里）
- *   筛选行（ec）：只有“表情符号”“图标”页签有。上 4 下 10；里面左右 8、间距 8：输入框（放大镜、“筛选…”、有字时的清除按钮）
- *     + “随机”（28×28 带边框）+ 页签自己的按钮（表情：选肤色；图标：选图标颜色），两个页签共用同一个筛选词（onFilterChange 同时改两边）
+ *   筛选行（ec）：只有“表情符号”“图标”页签有。8 12 6：输入框（放大镜、“筛选…”、有字时的清除按钮；聚焦时灰色内框）
+ *     + “随机”（28×28，无框）+ 页签自己的按钮（表情：选肤色；图标：选图标颜色），两个页签共用同一个筛选词（onFilterChange 同时改两边）
  *   “上传”页签（569553 custom → 963369，./upload.js）：上传 / 拖进来 / 粘贴一张图片或图片链接，“保存”就用它当图标；
  *     勾上“添加到表情符号库”再起个名字，就同时存成自定义表情（以后在“表情符号”页签的“自定义”里）
  *   随机：选上但不关菜单（keepVisible）
@@ -53,9 +55,9 @@ export function openMediaPicker({ origin, value, isCallout = false, onPick, only
     `<div class="nmm-header">` +
       `<div class="nmm-tabbar">` +
         `<div role="tablist" class="nmm-tabs">` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="emoji">${t("表情符号")}</div><div class="nmm-tab-line"></div></div>` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="icon">${t("图标")}</div><div class="nmm-tab-line"></div></div>` +
-          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="upload">${t("上传")}</div><div class="nmm-tab-line"></div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="emoji">${t("表情符号")}</div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="icon">${t("图标")}</div></div>` +
+          `<div class="nmm-tab-wrap"><div role="tab" class="nmm-tab" data-tab="upload">${t("上传")}</div></div>` +
         `</div>` +
         `<div class="nmm-tabbar-right"><div role="button" tabindex="0" class="nmm-text-button" data-act="remove">${t("移除")}</div></div>` +
       `</div>` +
@@ -63,7 +65,7 @@ export function openMediaPicker({ origin, value, isCallout = false, onPick, only
         `<div class="nmm-input"><div class="nmm-input-icon">${icon('magnifyingGlassSmall', 16)}</div>` +
           `<input type="text" role="combobox" placeholder="${t("筛选…")}" autocomplete="off" spellcheck="false" aria-autocomplete="list" aria-haspopup="grid" aria-expanded="true">` +
           `<div role="button" tabindex="0" aria-label="${t("清除输入")}" class="nmm-clear" data-act="clear" hidden>${icon('xMarkCircle', 20)}</div></div>` +
-        `<div class="nmm-filter-right"><div class="nmm-tab-left"></div><div role="button" tabindex="0" aria-label="${t("随机")}" class="nmm-random" data-act="random">${icon('arrowIntersectRightSmall', 14)}</div><div class="nmm-tab-button"></div></div>` +
+        `<div class="nmm-filter-right"><div class="nmm-tab-left"></div><div role="button" tabindex="0" aria-label="${t("随机")}" class="nmm-random" data-act="random">${icon('arrowIntersectRightSmall', 16)}</div><div class="nmm-tab-button"></div></div>` +
       `</div></div>` +
     `</div>` +
     `<div class="nmm-content"></div>`;