@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/margin.mjs

@@ -1,14 +1,19 @@
 import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCES_KEY } from "../../shared/preferences.mjs";
+import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
+import { ADD, HANDLE } from "./handle-sizes.mjs";
 
 // The right side of the page while it is edited (docs/editor.md, "The outline and the right side"): the
 // outline (目录, outline/) docked at the window's right edge, the cards of 批注 (annotate/) between it and
 // the column, and where the body column goes beside them. The outline is a panel at the window's right
 // edge, in full (its list, 200px unless the reader dragged its guide wider or narrower: `outlineWidth`;
-// the guide 8px in) or as its strip (36px: a short line a heading, its card shown while the pointer is
-// on it), as the room allows.
+// the list 8px in, its guide a little further in, close to its top level's titles: outline/list.mjs
+// LIST) or as its strip (36px: a short line a heading, its card shown while the pointer is
+// on it), as the room allows; or as its strip wherever the reader collapsed it (a click on its guide:
+// `collapsed`, the preference outlineCollapsed, until a click on the guide in the strip's card takes it
+// back, which gives the list only where the room allows it).
 //
 // One rule places the column: in the middle of what the outline leaves of the page, as far from the
-// window's left edge as from the outline (its guide, or its strip). With the outline the rooms at the
+// window's left edge as from the outline (its list's edge, or its strip). With the outline the rooms at the
 // column's two sides are the same, and they stay the same as the guide is dragged (each gives or takes
 // half of what the list takes or gives) and as the window is resized; without it the column is
 // centered in the page as ever. Each room is the edge room at least (64: the block handle at the left,
@@ -48,18 +53,29 @@ import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCE
 // column stands where it will stay from the first paint, and by setMargin() after that.
 // When they move the column, the page hears a resize, so what stands over the text (the format bar, a
 // selection's strips, a card) is placed again.
+//
+// The edge room is also the page's gutters (the kit's --doc-page-gutter and --doc-wide-gutter, page.css),
+// set by MARGIN_STYLE, which the edit service puts in the page's head: the column the kit lets show
+// (data-doc-ready, the frame a workbench swaps the page in on) stands where the editor keeps it, its lines
+// broken as they stay, before the editor has started, the outline off and no 批注 as much as with them.
+// (Until 2026-11-09 the handle put them in once the page edited: in a workbench with its sidebar open, a
+// page 795px wide came in with the kit's 20px gutters, its column 712 wide and 42 in, and moved to 667 and
+// 64 a few frames later, its lines breaking anew: the user's report on 0.1.1.)
 
 /**
- * The numbers: the edge room (the least room either side of the column keeps), the least it gives up
+ * The numbers: the edge room (the least room either side of the column keeps, and the page's gutters:
+ * the bar's square left of the block handle's grip, the grip, its gap and room to breathe, 64), the least it gives up
  * to (the block handle's: its 38px, its 12px gap, 2px), the column, the least a full-width column
  * keeps, the outline in full (its default width, the least and the most it is dragged to), its
- * guide's inset in its panel (the column's right room ends there), how far left of the guide its grip
- * reaches, its strip, the hysteresis; how far right of the column a card of 批注 stands (the button beside
+ * list's inset in its panel (`guide`: the column's right room ends there, at the list's edge, its
+ * guide's hairline LIST.guide further in, outline/list.mjs; the guide stood there
+ * until 2026-11-07, the numbers kept so the forms switch at the same widths), how far left of the guide's
+ * hairline its grip reaches (and how far short of the list what stands in the column's right room stays), its strip, the hysteresis; how far right of the column a card of 批注 stands (the button beside
  * a block, past a section's strip, ends 52px out, and a card under the pointer comes 5px left: 3px
  * clear; one focused comes 20px left, and no button shows then), a card's width, the least it gives up
- * to, and the room past it (clear of the outline's guide and grip).
+ * to, and the room past it (clear of the outline's list: its guide and grip).
  */
-export const MARGIN = Object.freeze({ edge: 64, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
+export const MARGIN = Object.freeze({ edge: ADD.width + HANDLE.width + HANDLE.gap + 12, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
 
 /**
  * The outline's width in full for the reader's choice `chosen` (px; 0 or none: the default), within
@@ -71,19 +87,20 @@ export function outlineWidth(chosen, { full = 200, fullMin = 160, fullMax = 360
 
 /**
  * Where the right side's parts go on a page `width` px wide (its window less its scrollbar): `outline`,
- * whether the outline is on, `notes`, whether the page has 批注, `full`, its width in full
- * (outlineWidth), `wide`, a report read full width, `was`, the layout given last for the same request
- * (a form it laid out is kept for `hysteresis` px under the width it needs).
+ * whether the outline is on, `collapsed`, whether the reader collapsed it to its strip, `notes`,
+ * whether the page has 批注, `full`, its width in full (outlineWidth), `wide`, a report read full
+ * width, `was`, the layout given last for the same request (a form it laid out is kept for
+ * `hysteresis` px under the width it needs).
  * Returns { dock: the outline's width at the window's right edge (0, its strip's or its list's),
  * outline: its form, "full" | "strip" | null, room: what the outline takes of the page's width beside
- * the column's rooms (the list's less its guide's inset, the strip's, 0), side: the least room either
+ * the column's rooms (the list's less its inset, the strip's, 0), side: the least room either
  * side of the column keeps, left: the room at the column's left on this page, right: the room right of
  * it to the window's edge (its own and the outline's), column: its width, cards: the width of a card
  * of 批注 standing right of it (0: they fold into markers), cardRoom: what the page's rule keeps right of
  * the column for them (0: none), floor: the least room at its left }. Written with no outside name, so
  * the page's head can carry it as it is (EARLY_MARGIN).
  */
-export function marginLayout({ width, outline = false, notes = false, wide = false, was = null, edge = 64, start = 52, column = 712, least = 560, full = 200, guide = 8, strip = 36, hysteresis = 16, lane = 60, card = 308, cardLeast = 240, cardEnd = 20 }) {
+export function marginLayout({ width, outline = false, collapsed = false, notes = false, wide = false, was = null, edge = 64, start = 52, column = 712, least = 560, full = 200, guide = 8, strip = 36, hysteresis = 16, lane = 60, card = 308, cardLeast = 240, cardEnd = 20 }) {
   const body = wide ? least : column;
   // The column in the middle of what the outline leaves, its rooms `side` at least (narrower only below
   // that), and left of there as far as a card's room asks, down to `start`, the card giving what is short.
@@ -99,17 +116,23 @@ export function marginLayout({ width, outline = false, notes = false, wide = fal
   if (!outline) return placed(null, 0, 0, edge);
   // In full while the list, as wide as the reader gave it, leaves the column the handle's room at both
   // sides (its rooms the edge room, less down to the handle's where the page is short); a form kept
-  // under the width it needs (the hysteresis) narrows the column by what is short. Else its strip.
-  const spare = width + guide - body; // the page beside the column, the list's room counted from its guide
+  // under the width it needs (the hysteresis) narrows the column by what is short. Else, or collapsed by
+  // the reader, its strip.
+  const spare = width + guide - body; // the page beside the column, the list's room counted from its edge (its inset `guide`)
   const kept = was?.outline === "full" ? hysteresis : 0;
-  if (spare + kept >= 2 * start + full) return placed("full", full, full - guide, Math.max(start, Math.min(edge, (spare - full) / 2)));
+  if (!collapsed && spare + kept >= 2 * start + full) return placed("full", full, full - guide, Math.max(start, Math.min(edge, (spare - full) / 2)));
   return placed("strip", strip, strip, edge);
 }
 
 const SLIDE = 200; // ms: the column's slide as the page comes to have 批注 or has none left
 
-/** The page's rules for the room: the column placed (and narrowed only when it must), screen only. */
+/**
+ * The page's rules for the room: its gutters the edge room, and on screen the column placed (and
+ * narrowed only when it must).
+ */
 export const MARGIN_STYLE = `
+  /* The handle's room beside the page's blocks, the page's gutters from its first paint (a page the editor edits: this sheet is in the head the edit service serves); resize/ and the workbench's sidebar read --ge-edge-room. */
+  :root { --ge-edge-room: ${MARGIN.edge}px; --doc-page-gutter: var(--ge-edge-room); --doc-wide-gutter: var(--ge-edge-room); }
   @media screen {
     :root[data-ge-margin] {
       /* The least room either side of the column keeps (marginLayout's side: the edge room, less where the page is short of it, down to the handle's). */
@@ -143,8 +166,9 @@ const roomCss = ({ room, side, cardRoom = 0, floor = side }) => `:root[data-ge-m
 
 // The head's script (EARLY_MARGIN): the outline's room before the page shows, when the report has it
 // on (`keys.open`: the reports that have it on, shared/preferences.mjs outlineOpen; `slug`: this page's), as
-// wide as the reader's preferences say (`keys.preferences`: outlineWidth, the same for every report),
-// and the cards' room, when it has 批注 (`notes`, the edit service's word).
+// wide as the reader's preferences say and in the form they chose (`keys.preferences`: outlineWidth,
+// outlineCollapsed, the same for every report), and the cards' room, when it has 批注 (`notes`, the
+// edit service's word).
 // Never on a page opened on its own in a frame (?solo, the 写作偏好 dialog), which has none.
 // In the head the page has no content yet, so no scrollbar: its width is read again at
 // DOMContentLoaded, when the content is in and the kit has not shown it yet (a frame later), unless the
@@ -157,13 +181,17 @@ function earlyMargin(layout, widthOf, numbers, keys, slug, notes, room, early, c
     const outline = Array.isArray(open) && open.includes(slug);
     if (!outline && !notes) return;
     const prefs = JSON.parse(read(keys.preferences, keys.oldPreferences) || "{}") || {};
-    const asked = { outline, notes, outlineWidth: Number(prefs.outlineWidth) || 0 };
+    const asked = { outline, notes, outlineWidth: Number(prefs.outlineWidth) || 0, collapsed: prefs.outlineCollapsed === true };
     const root = document.documentElement;
     const sheet = document.createElement("style");
     sheet.setAttribute("data-doc-dev", "");
     sheet.setAttribute(room, "");
     const lay = () => {
-      const given = layout({ ...numbers, width: root.clientWidth, outline, notes, full: widthOf(asked.outlineWidth, numbers), wide: root.getAttribute("data-doc-width") === "full" });
+      // The column the kit's stylesheet gives (a document's look, its 正文宽度 alone, makes it another
+      // than 712px: src/shared/document-look.mjs), read as the editor reads it (numbers() below); the kit's
+      // stylesheet stands before this script in the head, so it is in.
+      const column = parseFloat(getComputedStyle(root).getPropertyValue("--doc-content-max-width")) || numbers.column;
+      const given = layout({ ...numbers, column, width: root.clientWidth, outline, collapsed: asked.collapsed, notes, full: widthOf(asked.outlineWidth, numbers), wide: root.getAttribute("data-doc-width") === "full" });
       sheet.textContent = css(given);
       sheet.setAttribute(early, JSON.stringify({ given, asked }));
     };
@@ -186,7 +214,7 @@ export const earlyMarginScript = (slug, { notes = false } = {}) => {
 
 // ---------- on the page ----------
 
-const asked = { outline: false, notes: false, outlineWidth: 0 }; // what the outline and 批注 ask for
+const asked = { outline: false, notes: false, outlineWidth: 0, collapsed: false }; // what the outline and 批注 ask for
 const listeners = new Set();
 let now = null; // the layout given last
 let request = null; // what it was given for: { outline, wide } (the outline's width keeps the form laid out)
@@ -311,14 +339,16 @@ function start() {
   addEventListener("resize", resized);
   // The page's width changes without the window's too: its scrollbar comes or goes.
   new ResizeObserver(resized).observe(document.documentElement);
-  // A report read full width, or no longer.
-  new MutationObserver(() => apply()).observe(document.documentElement, { attributes: true, attributeFilter: ["data-doc-width"] });
+  // A report read full width, or no longer; the document's look changed (its column's width with its
+  // 正文宽度, never its 字体大小: the kit's ui.js puts it on the root, src/shared/document-look.mjs).
+  new MutationObserver(() => apply()).observe(document.documentElement, { attributes: true, attributeFilter: ["data-doc-width", ...Object.values(LOOK_ATTRIBUTES)] });
 }
 
 /**
  * Ask for room: { outline } (whether it shows), { outlineWidth } (its width in full as the reader
- * chose it, px; 0: the default), { notes } (whether the page has 批注: the column slides when that
- * changes it). The layout is given at once and again whenever the page's width changes it.
+ * chose it, px; 0: the default), { collapsed } (the reader collapsed it to its strip), { notes }
+ * (whether the page has 批注: the column slides when that changes it). The layout is given at once and
+ * again whenever the page's width changes it.
  */
 export function setMargin(part) {
   start();
@@ -331,7 +361,13 @@ export function setMargin(part) {
 /** The layout given last ({ dock, outline, room, side, left, right, column, cards, cardRoom, floor }; see marginLayout). */
 export const margin = () => now ?? layoutFor(isWide(), null);
 
-/** How far right of the column what stands in its right room may reach, by `layout` (marginLayout): short of the outline's guide and its grip, or of its strip, or of the window's edge. */
+/**
+ * Whether the page's room gives the outline its list in full now, the reader's collapse aside: what a
+ * click on the guide in the strip's card would bring (the whole width needed, as for any strip going up).
+ */
+export const listFits = () => marginLayout({ ...MARGIN, width: pageWidth(), ...numbers(), ...asked, outline: true, collapsed: false, full: outlineWidth(asked.outlineWidth, MARGIN), wide: isWide(), was: null }).outline === "full";
+
+/** How far right of the column what stands in its right room may reach, by `layout` (marginLayout): MARGIN.grip short of the outline's list (its guide and grip further in), or of its strip, or of the window's edge. */
 export const rightRoom = ({ right, room } = margin()) => right - room - MARGIN.grip;
 
 /** Call `listener(layout)` whenever the layout changes (the outline's form or width, the column's least rooms, the cards' width). */

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

@@ -28,15 +28,14 @@ const STYLE = `
   .nmedia-menu-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 2px solid var(--c-texPri); }
   .nmedia-menu-body { padding: 12px 12px 10px; }
   .nmedia-menu-inner { display: flex; justify-content: center; padding: 4px; }
-  .nmedia-menu-upload { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ca-borPriTra); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 20ms ease-in; }
-  .nmedia-menu-upload:hover { background: var(--ca-bacIntTra); }
+  /* Its buttons are the editor's one button look (look.mjs BUTTONS): the pale blue primary, here what the tab does. */
+  .nmedia-menu-upload, .nmedia-menu-embed { width: 100%; font-size: 14px; }
   .nmedia-menu-link { flex-direction: column; align-items: stretch; gap: 8px; }
   .nmedia-menu-input { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-bacSecTra); box-shadow: 0 0 0 1px var(--ca-borPriTra); box-sizing: border-box; }
   .nmedia-menu-input:focus-within { box-shadow: var(--c-inpBluFocRin); }
   .nmedia-menu-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }
   .nmedia-menu-input input::placeholder { color: var(--c-texTer); }
-  .nmedia-menu-embed { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; margin: 0 auto; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--c-bluBacAccPri); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; }
-  .nmedia-menu-embed:hover { filter: brightness(.94); }
+  .nmedia-menu-embed { max-width: 300px; margin: 0 auto; }
   .nmedia-menu-caption { margin: -6px 0 4px; padding: 4px 0; font-size: 12px; line-height: 1.4; color: var(--c-texSec); text-align: center; }
   .nmedia-menu.dragover .nmedia-menu-body { background: var(--ca-bluBacSecTra); }
   .nmedia-menu-choose { margin-top: 8px; }
@@ -76,10 +75,10 @@ export function openMediaMenu(anchor, { tabs, width, upload = {}, link = {}, onU
       `<div class="nmedia-menu-tab-wrap"><div role="tab" class="nmedia-menu-tab${key === current ? " active" : ""}" aria-selected="${key === current}" data-tab="${key}">${esc(label)}</div></div>`).join("")}</div>` : "")
       + `<div class="nmedia-menu-body">${current === "upload"
         ? (upload.primary
-          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="nmedia-menu-embed nmedia-menu-choose" data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
-          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="nmedia-menu-upload" data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
+          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="ge-btn nmedia-menu-embed nmedia-menu-choose" data-primary data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
+          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="ge-btn nmedia-menu-upload" data-primary data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
         : `<div class="nmedia-menu-inner nmedia-menu-link"><div class="nmedia-menu-input"><input type="url" placeholder="${esc(link.placeholder ?? t("粘贴链接…"))}" autocomplete="off"></div>`
-          + `<div role="button" tabindex="0" class="nmedia-menu-embed" data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
+          + `<div role="button" tabindex="0" class="ge-btn nmedia-menu-embed" data-primary data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
           + (link.caption ? `<div class="nmedia-menu-caption">${esc(link.caption)}</div>` : "") + "</div>"}</div>`;
     const input = el.querySelector("input");
     if (input) {

package/browser/editor/page/menu.mjs

@@ -1,7 +1,7 @@
 import { Z } from "../../shared/layers.mjs";
 import { addStyle, element, mount } from "./ui.mjs";
 import { hideTooltip, tooltip } from "./tooltip.mjs";
-import { svg } from "../components/icons.mjs";
+import { SECTION_ICON, svg } from "../components/icons.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 
 // The editor's menu card, used by the "/" menu (slash-menu/: block types, filtered as the reader
@@ -12,16 +12,33 @@ import { t } from "../../shared/i18n/index.mjs";
 // the page with a block selected). A press on a row never moves the caret. Colors follow the
 // report's light or dark theme (light-dark()). A row may open a submenu (Notion's 颜色 ›): a second
 // card right of it, opened by resting on the row, a click, Enter or →, and closed by ←, by resting
-// on another row, or with the menu; while it is open from the keys they move in it.
+// on another row, or with the menu; while it is open from the keys they move in it. A row that both
+// runs and opens a submenu (a split row: a table's 一键优化 ›) is two parts side by side, each with
+// its own grey under the pointer: its words, which a click or Enter runs, and its › at its right,
+// which opens the submenu (resting on it, a click, or →); resting on its words opens nothing.
+//
+// A card is as wide as its rows (Notion's menus: 180px at least), up to FIT.most, past which a row's
+// words are cut by an ellipsis, so a short submenu (一键优化 ›: 自动调整列宽, 识别数字列; 对齐 ›) is no
+// wider than its words; it once took 265px whatever it held. A card whose rows change as it is used
+// keeps the one width its caller gives (`width`: the block menu's grid, the "/" menu, a code block's
+// languages), or SEARCHING when it has a search field and gives none, so it never jumps as rows come
+// and go.
+
+const FIT = { least: 180, most: 320 }; // a card with no width given: as wide as its rows, between these
+const SEARCHING = 240; // a card with a search field and no width given: its rows filtered as typed
 
 const STYLE = `
   .ge-pop {
-    position: fixed; left: 0; top: 0; z-index: ${Z.menu}; width: 265px; max-width: calc(100vw - 16px); max-height: calc(100vh - 24px);
+    position: fixed; left: 0; top: 0; z-index: ${Z.menu}; width: max-content; min-width: ${FIT.least}px; max-width: min(${FIT.most}px, calc(100vw - 16px)); max-height: calc(100vh - 24px);
     overflow-x: hidden; overflow-y: auto; padding: 4px 0; border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx);
     box-shadow: var(--ge-shadow-pop);
     font: 14px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
     user-select: none; scrollbar-width: thin; scrollbar-color: var(--ge-line-strong) transparent; animation: ge-pop-in .12s ease-out;
   }
+  /* A width given (data-sized: opts.width, placed by place()): that width, whatever the rows hold. */
+  .ge-pop[data-sized] { min-width: 0; max-width: calc(100vw - 16px); }
+  /* A short list of one kind of word (a card's 大小 ›: 4 × 2): only as wide as its rows, no 180px floor. */
+  .ge-pop[data-compact] { min-width: 0; }
   @keyframes ge-pop-in { from { opacity: 0; transform: scale(.98); } }
   @media (prefers-reduced-motion: reduce) { .ge-pop { animation: none; } }
   .ge-pop-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
@@ -43,6 +60,7 @@ const STYLE = `
      words and the hint takes what is left, cut short with an ellipsis where it is too long (an English
      row's current choice once took the whole row, its label drawn 0px wide). */
   .ge-pop-label:has(+ .ge-pop-hint) { flex: 1 0 auto; max-width: 100%; }
+  .ge-pop-of { color: var(--ge-tx3); }
   .ge-pop-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ge-tx3); font-size: 12px; white-space: nowrap; }
   /* A row of a page (its title, the page it is under as its hint): a long title is what an ellipsis
      cuts, and the page above keeps its words, up to a part of the row. */
@@ -52,9 +70,21 @@ const STYLE = `
   .ge-pop-arrow { color: var(--ge-tx3); }
   .ge-pop-arrow svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
   .ge-pop-row[aria-expanded="true"] { background: var(--ge-hover); }
+  /* A split row (run and submenu both): its words (.ge-pop-main) and its › (.ge-pop-more, 32px wide:
+     the › where another submenu row has its own) side by side, 2px apart, each grey on its own: the words
+     when the row is highlighted and the pointer is not on the ›, the › under the pointer and while its
+     submenu is open. The row itself takes no grey. */
+  .ge-pop-row[data-split] { gap: 2px; padding: 0; }
+  .ge-pop-row[data-split][data-active], .ge-pop-row[data-split][aria-expanded="true"] { background: transparent; }
+  .ge-pop-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; align-self: stretch; padding: 0 8px; border-radius: 6px; }
+  .ge-pop-more { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; align-self: stretch; border-radius: 6px; }
+  .ge-pop-row[data-split][data-active]:not([data-more]) > .ge-pop-main,
+  .ge-pop-row[data-split][data-more] > .ge-pop-more,
+  .ge-pop-row[data-split][aria-expanded="true"] > .ge-pop-more { background: var(--ge-hover); }
   .ge-pop-check svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
   .ge-pop-sep { height: 1px; margin: 3px 12px 4px; background: var(--ge-line); }
-  .ge-pop-note { padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
+  /* A note wraps at the card's width and never widens it (no width of its own: contain). */
+  .ge-pop-note { contain: inline-size; padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
   .ge-pop-empty { padding: 8px 12px; color: var(--ge-tx3); }
   /* What a row makes, shown beside it under the pointer (a component package's preview.svg). */
   .ge-pop-preview { display: block; width: 240px; max-height: 180px; border-radius: 4px; object-fit: contain; background: var(--ge-bg); }
@@ -63,7 +93,7 @@ const STYLE = `
   .ge-pop-search input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
   .ge-pop-search input::placeholder { color: var(--ge-tx3); }
   /* Rows in a card that is there already (inside: a link card's pages): under what stands in it, as wide as it, no card of their own. */
-  .ge-pop[data-inside] { position: static; flex: 0 0 100%; width: auto; max-width: none; padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
+  .ge-pop[data-inside] { position: static; flex: 0 0 100%; width: auto; min-width: 0; max-width: none; padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
   .ge-pop[data-inside] .ge-pop-row { width: 100%; margin-inline: 0; }
 `;
 
@@ -78,8 +108,7 @@ export const ICONS = {
   outer: svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5" stroke-dasharray="2.2 2.2"/><rect x="6.5" y="6.5" width="7" height="7" rx="1.25"/>'),
   section: svg(`${SECTION_LINES}<path d="M14.5 12v5M12 14.5h5"/>`),
   dissolve: svg(`${SECTION_LINES}<path d="m12.75 12.75 3.5 3.5M16.25 12.75l-3.5 3.5"/>`), // section's plus, turned 45°
-  // Blocks gathered into a new section: their lines between brackets.
-  group: svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2H6M14 3.75h.75a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H14"/><path d="M7.25 7.75h5.5M7.25 12.25h5.5"/>'),
+  group: SECTION_ICON, // blocks gathered into a new section: their lines between brackets (components/icons.mjs)
   center: svg('<rect x="5.25" y="4.25" width="9.5" height="11.5" rx="1.75"/><path d="M2.75 4v12M17.25 4v12"/>'),
   full: svg('<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="1.75"/><path d="m6.5 10h7M6.5 10l1.75-1.75M6.5 10l1.75 1.75M13.5 10l-1.75-1.75M13.5 10l-1.75 1.75"/>'),
   reset: svg('<path d="M4.75 6.75A6 6 0 1 1 4 10.5"/><path d="M4.5 3.5v3.5H8"/>'),
@@ -99,23 +128,29 @@ const opened = new Set(); // the menus open now, whichever part of the page open
 export const menuOpen = () => opened.size > 0;
 
 /**
- * items: rows { label, run, icon?, hint?, long?, current?, checked?, disabled?, note?, preview? } (long:
+ * items: rows { label, run, icon?, of?, hint?, long?, current?, checked?, disabled?, note?, preview? } (of: what
+ * the label is of, grey after it, a block's pack where two rows have one name; long:
  * a label of any length, a page's title, cut before its hint is; current: the choice
  * made, checked and not to be chosen again; checked: a switch that is on, checked and clicked to turn
- * it off; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
+ * it off; selected: the choice of a dropdown (a field's list of options), checked as current is but
+ * still a row to click, which closes the card with nothing changed; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
  * shown at the row's right while the pointer rests on it, notion-lite's row tooltip) (or { label, icon?, submenu:
  * () => items, width?, search? } opening a submenu, with a search field at its top when `search` is
- * given, as `opts.search` below, and `search.empty` the words shown when nothing is found), titles
+ * given, as `opts.search` below, and `search.empty` the words shown when nothing is found; a row
+ * with both `run` and `submenu` is a split row: its words run, its › opens the submenu), titles
  * { title, icon? }, separators { separator: true } and grids { node, cells, columns } (type-grid.mjs: the
  * node shown as it is, its cells, buttons that act on their own click, highlighted as rows are).
- * opts: { label, empty, highlight, onClose, around, side, width } — width: the card's, in px, instead
- * of 265 (the block menu: as wide as its grid of types). around: the rect of the block a handle
+ * opts: { label, empty, highlight, onClose, around, side, width } — width: the card's, in px, whatever
+ * its rows hold (the block menu: as wide as its grid of types), where without it the card is as wide
+ * as its rows (FIT; SEARCHING with a search field). around: the rect of the block a handle
  * (the anchor) stands for; the menu keeps clear of that block: left of it beside the handle, else
  * below or above it (scrolling inside when only part of it fits), and over it only when the block
  * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
  * room), level with it (a section's bar). Without either the menu stands below the anchor (the
  * caret), or above it when there is no room below; align: "end", its right edge at the anchor's.
- * icons: false, rows of words alone (no column for icons: a code block's languages); height: the
+ * icons: false, rows of words alone (no column for icons: a code block's languages; a row that opens a
+ * submenu says it of its own as `icons: false`, and `compact: true` makes it only as wide as its rows, no
+ * 180px floor: a card's 大小 ›); height: the
  * card's greatest height, in px (its rows scroll inside it past that). stand(size): where the card
  * stands, its { left, top } for its { width, height }, in place of all of these rules (a pasted
  * address's 选择视图, by the format bar's rule: placement.mjs besideText). inside: an element the rows
@@ -139,25 +174,32 @@ export function createMenu() {
   let subKeys = false; // opened from the keys: they move in it
   let subTimer = 0;
   let pointedRow = null;
+  let pointedMore = false; // the pointer on a split row's › (not on its words)
 
   // The pointer over a row highlights it. In a menu that starts with nothing highlighted (the block
   // menu), leaving the row takes the highlight off again, as :hover would; a row the keys moved to
-  // stays, and so does the "/" menu's, the row Enter runs.
-  const point = (row) => {
+  // stays, and so does the "/" menu's, the row Enter runs. On a split row, `more`: the pointer is on
+  // its › (data-more on the row, which greys the › instead of the words), the part that opens.
+  const point = (row, more = false) => {
     highlight(rows.indexOf(row), false);
     pointed = true;
-    if (row === pointedRow) return;
+    if (row.split) row.toggleAttribute("data-more", more);
+    if (row === pointedRow && more === pointedMore) return;
     pointedRow = row;
+    pointedMore = more;
     clearTimeout(subTimer);
     // Notion's: a submenu opens 80ms after the pointer rests on its row (200ms while another is
-    // open), and goes 250ms after the pointer rests elsewhere.
-    if (row.submenu && row !== subRow) subTimer = setTimeout(() => openSub(row), subRow ? 200 : 80);
-    else if (!row.submenu && subRow) subTimer = setTimeout(closeSub, 250);
+    // open), and goes 250ms after the pointer rests elsewhere (a split row's words being elsewhere).
+    const opens = Boolean(row.submenu) && (!row.split || more);
+    if (opens && row !== subRow) subTimer = setTimeout(() => openSub(row), subRow ? 200 : 80);
+    else if (!opens && subRow) subTimer = setTimeout(closeSub, 250);
   };
   const leave = (row) => {
     if (pointed && rows[active] === row && options.highlight === false) highlight(-1);
+    row.removeAttribute("data-more");
     if (pointedRow !== row) return;
     pointedRow = null;
+    pointedMore = false;
     clearTimeout(subTimer); // passing over a row opens nothing
     if (subRow === row && !subKeys) subTimer = setTimeout(closeSub, 250); // unless the pointer goes into it
   };
@@ -180,28 +222,36 @@ export function createMenu() {
         children.push(item.node);
       } else {
         const row = element("button", { type: "button", class: "ge-pop-row", role: "menuitem" });
+        // A split row's words go in a part of their own, its › in another (CSS above).
+        row.split = Boolean(item.run && item.submenu);
+        const words = row.split ? element("span", { class: "ge-pop-main" }) : row;
+        if (row.split) row.setAttribute("data-split", "");
         if (item.long) row.setAttribute("data-long", "");
-        if (options.icons !== false) row.append(element("span", { class: "ge-pop-icon", html: item.icon ?? "" }));
-        row.append(element("span", { class: "ge-pop-label", text: item.label }));
-        if (item.hint) row.append(element("span", { class: "ge-pop-hint", text: item.hint }));
+        if (options.icons !== false) words.append(element("span", { class: "ge-pop-icon", html: item.icon ?? "" }));
+        // A row's pack where two rows have one name (我的待办 · 柔光风格): grey, after the name, in the label.
+        words.append(item.of ? element("span", { class: "ge-pop-label" }, item.label, element("span", { class: "ge-pop-of", text: ` · ${item.of}` })) : element("span", { class: "ge-pop-label", text: item.label }));
+        if (item.hint) words.append(element("span", { class: "ge-pop-hint", text: item.hint }));
+        if (row.split) row.append(words, element("span", { class: "ge-pop-more", html: `<span class="ge-pop-arrow">${ICONS.chevron}</span>` }));
+        else if (item.submenu) row.append(element("span", { class: "ge-pop-arrow", html: ICONS.chevron }));
         if (item.submenu) {
-          row.append(element("span", { class: "ge-pop-arrow", html: ICONS.chevron }));
           row.setAttribute("aria-haspopup", "menu");
           row.submenu = item.submenu;
           row.subWidth = item.width;
           row.subSearch = item.search;
+          row.subLook = { icons: item.icons, compact: item.compact };
         }
-        if (item.current || item.checked) {
-          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.current ? t("当前") : t("已开启") }));
+        if (item.current || item.checked || item.selected) {
+          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.checked ? t("已开启") : t("当前") }));
           row.setAttribute("data-current", "");
-          if (item.checked) row.setAttribute("aria-checked", "true");
+          if (item.checked || item.selected) row.setAttribute("aria-checked", "true");
         }
         row.disabled = Boolean(item.disabled || item.current);
         row.run = item.run;
         row.addEventListener("mousedown", (event) => event.preventDefault());
-        row.addEventListener("pointermove", () => point(row));
+        const onMore = (event) => row.split && Boolean(event.target.closest?.(".ge-pop-more"));
+        row.addEventListener("pointermove", (event) => point(row, onMore(event)));
         row.addEventListener("pointerleave", () => leave(row));
-        row.addEventListener("click", () => run(row));
+        row.addEventListener("click", (event) => run(row, onMore(event)));
         rows.push(row);
         children.push(row);
         if (item.note) children.push(element("div", { class: "ge-pop-note", text: item.note }));
@@ -319,6 +369,7 @@ export function createMenu() {
     const search = row.subSearch && { placeholder: row.subSearch.placeholder, filter: (text) => closing(row.subSearch.filter(text)) };
     sub.open(items, row.getBoundingClientRect(), {
       side: "right", gap: 0, height: Math.round(innerHeight * 0.7), highlight: keys, width: row.subWidth, label: row.textContent, search, empty: row.subSearch?.empty, focus: keys,
+      ...(row.subLook.icons === false ? { icons: false } : {}), ...(row.subLook.compact ? { compact: true } : {}),
       onClose: () => {
         row.removeAttribute("aria-expanded");
         if (subRow === row) {
@@ -335,9 +386,11 @@ export function createMenu() {
     sub?.close();
   }
 
-  function run(row) {
+  // A row's work: its submenu opened (a split row's only from its ›: `more`), a grid's cell's own
+  // click, or the menu closed and its action run (Enter and a click on a split row's words).
+  function run(row, more = false) {
     if (!row || row.disabled) return false;
-    if (row.submenu) {
+    if (row.submenu && (!row.split || more)) {
       openSub(row, true);
       return true;
     }
@@ -391,10 +444,12 @@ export function createMenu() {
   const menu = {
     open(items, rect, opts = {}) {
       close();
-      options = opts;
+      options = opts.search && !opts.width ? { ...opts, width: SEARCHING } : opts;
       anchor = rect;
       opened.add(menu);
       node = element("div", { class: "ge-pop", role: "menu", "aria-label": opts.label ?? t("菜单") });
+      if (options.width) node.setAttribute("data-sized", "");
+      if (options.compact) node.setAttribute("data-compact", "");
       if (opts.inside) {
         node.setAttribute("data-inside", "");
         opts.inside.append(node);

package/browser/editor/page/merge.mjs

@@ -30,6 +30,30 @@ export function commonRun(xs, ys) {
   return [...head, ...middle, ...tail];
 }
 
+// A word diff of two texts, the reader's version against the file's (the conflict card's), or an
+// Agent's baseline against the page (changes/): runs of { tag, text }, tag null
+// for words both have, "del" for the reader's alone and "ins" for the file's alone (an ins before
+// the del it stands beside). Words are runs of letters and digits, spaces, single other characters
+// (each Chinese character on its own); at most 1500 words of each (commonRun above finds what is shared).
+export function wordDiff(mine, theirs) {
+  const tokens = (text) => (text.match(/[A-Za-z0-9]+|\s+|[^A-Za-z0-9\s]/gu) ?? []).slice(0, 1500);
+  const a = tokens(mine);
+  const b = tokens(theirs);
+  const runs = [];
+  const add = (tag, text) => {
+    if (runs.at(-1)?.tag === tag) runs.at(-1).text += text;
+    else runs.push({ tag, text });
+  };
+  let [i, j] = [0, 0];
+  for (const [x, y] of [...commonRun(a, b), [a.length, b.length]]) {
+    while (j < y) add("ins", b[j++]);
+    while (i < x) add("del", a[i++]);
+    if (x < a.length) add(null, a[i++]);
+    j++;
+  }
+  return runs;
+}
+
 // ---------- merging a block both sides changed ----------
 
 // Tokens of a block's inline HTML: a tag, an entity, a word, a run of spaces, or any other single

package/browser/editor/page/notices.mjs

@@ -1,6 +1,6 @@
 import { Z } from "../../shared/layers.mjs";
 import { PANEL_STYLE, onPanels, panelGone, panelRoom, panelShown } from "./panel.mjs";
-import { addStyle, button, element, mount } from "./ui.mjs";
+import { addStyle, element, mount, textButton } from "./ui.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 import { preference } from "../../shared/preferences.mjs";
 import { routine } from "./quiet.mjs";
@@ -24,7 +24,7 @@ import { routine } from "./quiet.mjs";
 // so that the box has the whole window to be as wide as.
 
 const STYLE = `
-  .ge-toast { position: fixed; left: 0; right: 0; bottom: 24px; z-index: ${Z.toast}; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: fit-content; max-width: min(640px, calc(100vw - 32px)); margin: 0 auto; padding: 8px 14px; border-radius: 8px; background: var(--ge-toast-bg); color: #f0efed; box-shadow: var(--ge-shadow); font: 14px/1.45 var(--doc-font, system-ui, sans-serif); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
+  .ge-toast { position: fixed; left: 0; right: 0; bottom: 24px; z-index: ${Z.toast}; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: fit-content; max-width: min(640px, calc(100vw - 32px)); margin: 0 auto; padding: 8px 14px; border-radius: 8px; background: var(--ge-toast-bg); color: #f0efed; box-shadow: var(--ge-shadow); font: 14px/1.45 var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
   .ge-toast[data-show] { opacity: 1; transform: none; }
   .ge-toast[data-tone="error"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; }
 `;
@@ -128,7 +128,7 @@ export function showPanel(title) {
   closePanel();
   addStyle(PANEL_STYLE);
   panel = mount(element("div", { class: "ge-panel", role: "region", "aria-label": title },
-    element("div", { class: "ge-panel-head" }, element("span", { text: title }), button(t("关闭"), closePanel, { "data-quiet": "" }))));
+    element("div", { class: "ge-panel-head" }, element("span", { text: title }), textButton(t("关闭"), closePanel, { quiet: true }))));
   panelShown(panel);
 }
 

package/browser/editor/page/offered.mjs

@@ -1,6 +1,6 @@
 import { TYPE_COMPONENT, blocksHidden } from "../components/registry.mjs";
 
-// What the menus that make a block offer of the reader's 设置 › 组件 (docs/workbench.md): the one place
+// What the menus that make a block offer of the reader's 设置 › 组件列表 (docs/workbench.md): the one place
 // that hears what is hidden, gallery.json's as the page's map holds it (`hidden`), then as its event
 // stream says it (`doc-settings-changed`), which costs the page nothing. A block type goes with its
 // component. "/", 在下方新建 (both slash-menu/ typeItems) and the handle's grid (block-menu/) read it; no

package/browser/editor/page/outline/folds.mjs

@@ -1,23 +1,24 @@
 // What is folded in the outline, kept for each report (localStorage, so the page the workbench shows
 // again after an Agent's write, which is a new page, folds what the reader folded): a node's key (a
-// heading's block id, a tab's area and tab), the reports folded last kept and the oldest let go.
+// heading's block id, a tab's area and tab), the reports folded last kept and the oldest let go. The
+// headings folded on the page (fold/) are kept the same way under a key of their own (`key`).
 
 import { KEYS } from "../../../shared/renamed-storage.mjs";
 
 export const FOLDS_KEY = KEYS.outlineFolds;
 const KEEP = 100; // reports
 
-function read(storage) {
+function read(storage, key) {
   try {
-    const value = JSON.parse(storage.get(FOLDS_KEY) ?? "null");
+    const value = JSON.parse(storage.get(key) ?? "null");
     if (value && typeof value === "object" && value.folds && typeof value.folds === "object") return value;
   } catch {}
   return { folds: {} };
 }
 
-/** The keys folded in report `slug` (`storage`: { get, set }, page/storage.mjs). */
-export function foldsOf(storage, slug) {
-  const keys = read(storage).folds[slug];
+/** The keys folded in report `slug` (`storage`: { get, set }, page/storage.mjs), kept under `key`. */
+export function foldsOf(storage, slug, key = FOLDS_KEY) {
+  const keys = read(storage, key).folds[slug];
   return new Set(Array.isArray(keys) ? keys.filter((key) => typeof key === "string") : []);
 }
 
@@ -25,14 +26,14 @@ export function foldsOf(storage, slug) {
  * Keep `folded` for report `slug`: only the keys the page still has (`present`), the report the one
  * folded last; none folded forgets the report. At most KEEP reports, the oldest going first.
  */
-export function keepFolds(storage, slug, folded, present = null) {
-  const value = read(storage);
-  const keys = [...folded].filter((key) => !present || present.has(key));
+export function keepFolds(storage, slug, folded, present = null, key = FOLDS_KEY) {
+  const value = read(storage, key);
+  const keys = [...folded].filter((each) => !present || present.has(each));
   delete value.folds[slug]; // put back last: the report folded last
   if (keys.length) value.folds[slug] = keys;
   const slugs = Object.keys(value.folds);
   for (const old of slugs.slice(0, Math.max(0, slugs.length - KEEP))) delete value.folds[old];
-  storage.set(FOLDS_KEY, JSON.stringify(value));
+  storage.set(key, JSON.stringify(value));
 }
 
 /**