@heycys/gallery 0.1.0 → 0.1.1

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

@@ -4,13 +4,13 @@ import { begin, done, made } from "../made.mjs";
 import { selectsBeside } from "../beside.mjs";
 import { caretAt, nearestOnLine, placeCaret, selectAt } from "../caret.mjs";
 import { sectionOps } from "../page-objects.mjs";
-import { endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
+import { contentOf, endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
 import { BOXED, HOLDS_ONE, accepts } from "../../components/registry.mjs";
 import { DIALOG } from "../../components/kit.mjs";
 
 // Where new blocks come from (docs/editor.md, "New blocks and conversions" and "Selecting
-// blocks"): a click on the empty space below the last block of a box (a new paragraph there, or the
-// caret into the empty one already at its end), Enter at the very start of a block (a paragraph
+// blocks"): a click on the empty space below the last block of a box (not one whose end is its
+// padding; a new paragraph there, or the caret into the empty one already at its end), Enter at the very start of a block (a paragraph
 // before it), the handle's "+" (an empty block beside the block: addNear), and the block menu's new section after a block (components/section/page.mjs). A
 // paragraph made here is written once it has text. "在下方新建一块" in a block's menu, like the "/"
 // menu's blocks in a block with text, is the editor's insertBelow; blocks also come from conversions
@@ -49,16 +49,20 @@ export function createInsert({ struct, blocks }) {
   }
 
   // A click on empty space (selection/marquee.mjs), below the last block of the box clicked (the
-  // page, a Sheet panel, a section, a highlight block, a disclosure's content; below the report, the
-  // page): a new paragraph at its end, or the caret into the empty paragraph already there
-  // (geometry.mjs endOf). To the right of a boxed block (a code block, a callout, a file…: not text)
-  // or of a row of columns, that block selected, so Delete takes it and Enter puts a paragraph after
-  // it. Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
+  // page, a Sheet panel, a section, a column, a detail card's content, a flowchart's node; below the
+  // report, the page): a new paragraph at its end, or the caret into the empty paragraph already there
+  // (geometry.mjs endOf). Under the last block of a box whose end is its own padding (endIsPadding: a
+  // highlight block, a callout, a disclosure's content; the user's, 2026-11-06, as notion-lite's click-blank.js
+  // makes a block only below the page and in a column) it is a gap like any other, below. Right of
+  // the text area a boxed block (a code block, a callout, a file…: not text) or a row of columns
+  // stands in, at its height (boxedBeside), that block selected, so Delete takes it and Enter puts a
+  // paragraph after it; between a narrower block's right edge and its column's, as beside any block
+  // of no text (below). Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
   // side by side), where the line is nearest the click (Notion's way); in the gap between two
   // blocks, or beside a block of no text, into the nearer of the blocks around it that is text, in the
   // innermost box at that height (boxBeside: the press may be on the page's margin, the block in a
   // Sheet's panel or a section), else in the boxes around that one, at the place nearest the click on
-  // its nearest line (always somewhere: a click there never does nothing). The page stays where it
+  // its nearest line (somewhere in the box clicked or around it, when any is text). The page stays where it
   // is, that text out of sight too (caretNear; notion-lite's click-blank.js scrolls no page either).
   function clickBlank(x, y, target) {
     // In an open detail card, its content is the page: never a block behind it (marquee.mjs topOf).
@@ -77,7 +81,7 @@ export function createInsert({ struct, blocks }) {
     if (end?.focus) return caretAt(end.focus, "end");
     if (end) return newParagraph(end.box, end.after);
     const top = y + scrollY;
-    const beside = boxedBeside(main, x, y);
+    const beside = boxedBeside(main, x, y, target);
     if (beside) return blocks().select(beside);
     const host = hoverAt(measure(main, { top, bottom: top }), x + scrollX, top, { reach: Infinity, skip: (unit) => !unit.text });
     if (host) return caretNear(host, x, y);
@@ -144,8 +148,8 @@ export function createInsert({ struct, blocks }) {
     return Math.max(rect.top - y, y - rect.bottom, 0);
   };
   // A block that is no text of its own (its category: a card, a container of its own or a whole
-  // block; a code block, a callout, a formula block, a divider), as opposed to text blocks and the
-  // boxes text flows in (a list, a quote, a section, columns).
+  // block, a highlight block, a callout; a code block, a formula block, a divider), as opposed to text
+  // blocks and the boxes text flows in (a list, a quote, a section, columns).
   const boxed = (unit) => BOXED.has(unit.getAttribute("data-ge-unit-kind"));
   // The text block of `unit` at its bottom (`last`) or its top: itself, or the last (first) of those it holds; none in a boxed block.
   function textEdge(unit, last) {
@@ -153,14 +157,23 @@ export function createInsert({ struct, blocks }) {
     const texts = [unit, ...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => node.isContentEditable && node.getClientRects().length > 0 && !node.closest("details:not([open]) > :not(summary)"));
     return (last ? texts.at(-1) : texts[0]) ?? null;
   }
-  // A boxed block or a row of columns at height `y` with (x, y) to its right (in the page's margin,
-  // or beside a narrower block), or null: the innermost, but never a block inside a row of columns
-  // the click is to the right of too (the row is selected whole).
-  function boxedBeside(main, x, y) {
+  // A boxed block or a row of columns at height `y` with (x, y) right of the text area it stands in
+  // (the content box of its box: the page's column, a column of 分栏, a section's, a quote's, a
+  // highlight block's or a callout's, a disclosure's content) and right of the block itself (one
+  // wider than that area), or null: in the page's margin, or in the padding of the box it stands in;
+  // never between a narrower block's right edge and its area's (a table, a picture: the user's,
+  // 2026-11-07, a click there selected it), nor in another text area (the blank box `target` the
+  // press was on holds the block: a column further right is no place beside one in the column left
+  // of it). The innermost, but never a block inside a row of columns the click is to the right of too
+  // (the row is selected whole): past a column's edge is the gap to the next column, whose press is
+  // the gap's (columns/: it drags, a click alone changes nothing), or past the row, which is selected.
+  function boxedBeside(main, x, y, target) {
     let found = null;
     const right = (unit) => {
       const rect = unit.getBoundingClientRect();
-      return y >= rect.top && y <= rect.bottom && x > rect.right;
+      if (y < rect.top || y > rect.bottom || (target?.contains && !target.contains(unit))) return false;
+      const box = unit.parentElement;
+      return x > Math.max(rect.right, contentOf(box.getBoundingClientRect(), getComputedStyle(box)).right);
     };
     for (const unit of main.querySelectorAll(`[data-ge-unit-kind]`)) {
       if (!selectsBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;

package/browser/editor/page/long-runs.mjs

@@ -0,0 +1,75 @@
+import { holdsLongRun } from "../../shared/long-runs.mjs";
+import { textFilters } from "../components/registry.mjs";
+import { addStyle } from "./ui.mjs";
+
+// A long run in the text the page editor edits (src/shared/long-runs.mjs: a path, a URL, a long
+// identifier, more than 20 characters with no place to break inside it) breaks where its line ends,
+// as the kit breaks it in the page a reader sees (runtime/spacing.js, a span that breaks anywhere,
+// .doc-long-run). No span goes into text the editor keeps equal to the file, so a text block whose
+// own text holds such a run breaks anywhere as a whole (data-ge-long-run: word-break: break-all),
+// and an ordinary word in that block may then be parted at a line's end too, which no other block's
+// is (the compromise docs/editor.md names). The rule's weight is none: a block's own (a table's
+// header keep-all, a short field normal, a code block's lines) wins; what the block holds that is a
+// block or an atom of its own ([contenteditable="false"]: a nested list, a formula) breaks as it would
+// without it, and an item of that list is judged by its own text. Never a block of plain text (a code
+// block's lines, a tab's name: textFilters false), which keeps its own rule; a text part of an
+// instance of a component package is judged as any text block (its component's own word-break, where
+// it says one, wins), though the kit holds no run in an instance's own region.
+//
+// Judged as editing starts, for every text block, and again for the blocks whose text changed, as it
+// changes, whatever changed it (typing, a paste, undo, a rebuild from the file, a block made or made
+// editable): the page's mutations are watched (childList, characterData, contenteditable), and only
+// the blocks they stand in are judged, each by its own text (a regular expression over a block's
+// words: no scan of the page per keystroke). The marker is no text of the file's: a data-ge-* attribute
+// on the block itself (core.mjs), set or taken off only where it changes.
+
+const MARK = "data-ge-long-run";
+const HOST = '[contenteditable="true"]';
+
+const STYLE = `
+  /* A text block holding a long run breaks anywhere (long-runs.mjs), of no weight: a block's own rule wins. */
+  :where([data-ge-editing] [data-ge-long-run]) { word-break: break-all; }
+  /* What it holds of its own (a nested list, a formula) breaks as the page's text does. */
+  :where([data-ge-editing] [data-ge-long-run] [contenteditable="false"]) { word-break: normal; }
+`;
+
+// The text of `host` its own: not a block or an atom it holds (contenteditable="false"), a line break a space.
+function ownText(host) {
+  const walker = host.ownerDocument.createTreeWalker(host, 5, { // NodeFilter.SHOW_ELEMENT | SHOW_TEXT
+    acceptNode: (node) => (node.nodeType === 1 && node !== host && node.hasAttribute("contenteditable") ? 2 : 1), // FILTER_REJECT, FILTER_ACCEPT
+  });
+  let text = "";
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.nodeType === 3) text += node.data;
+    else if (node.localName === "br") text += " ";
+  }
+  return text;
+}
+
+/** Marks `element` as a text block holding a long run, or takes the mark off: whether it holds one. */
+export function judgeLongRuns(element) {
+  const long = element.isConnected && element.matches(HOST) && textFilters(element) && holdsLongRun(ownText(element));
+  if (long !== element.hasAttribute(MARK)) element.toggleAttribute(MARK, long);
+  return long;
+}
+
+/** Judges every text block under `root` now, and each again as its text changes. */
+export function followLongRuns(root) {
+  addStyle(STYLE);
+  for (const host of root.querySelectorAll(`${HOST}, [${MARK}]`)) judgeLongRuns(host);
+  new MutationObserver((records) => {
+    const judged = new Set();
+    for (const record of records) {
+      if (record.type === "attributes") judged.add(record.target); // made editable, or no longer
+      const at = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+      const host = at?.closest(HOST);
+      if (host) judged.add(host);
+      for (const node of record.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.matches(HOST)) judged.add(node);
+        for (const inner of node.querySelectorAll(HOST)) judged.add(inner);
+      }
+    }
+    judged.forEach(judgeLongRuns);
+  }).observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["contenteditable"] });
+}

package/browser/editor/page/look.mjs

@@ -11,15 +11,17 @@
 //
 // Two shadows, because Notion has two surfaces: --ge-shadow, a card standing over the text (the
 // format bar, the formula and link cards, the conflicts, a notice), and --ge-shadow-pop, a menu
-// (Notion's large outer shadow). The emoji picker (emoji-picker/support.mjs) carries notion-lite's
-// own --c-* variables, taken over as they are.
+// (Notion's large outer shadow). The icon picker reads this palette too (emoji-picker/styles.mjs);
+// emoji-picker/support.mjs keeps notion-lite's --c-* variables only for the media menu and the image's
+// alignment bar.
 
 export const TOKENS = `
   :root {
     --ge-tx: light-dark(#2c2c2b, #f0efed);
     --ge-tx2: light-dark(#7d7a75, #ada9a3);
     --ge-tx3: light-dark(#a19e99, #7d7a75);
-    --ge-ico: light-dark(#383836, #e6e5e3);
+    /* The workbench's --icoPri (FinHarness-Demo's --ink-2). */
+    --ge-ico: light-dark(#5c5a55, #a9a69e);
     --ge-ico2: light-dark(#8e8b86, #ada9a3);
     /* The quietest icon gray (notion-lite's --c-icoTer): the block handle's dots, its bar and its +. */
     --ge-ico3: light-dark(#ada9a3, #7d7a75);
@@ -61,5 +63,15 @@ export const TOKENS = `
     --ge-note-hot-line: light-dark(rgb(222 160 0 / 90%), rgb(255 204 64 / 80%));
     /* A card of 批注 in the margin under the pointer (notion-lite's --c-hovMarDisBac): a shade of the page. */
     --ge-note-shade: light-dark(#f9f9f8, #202020);
+    /* The Agent's changes (changes/, 设置 › 显示变更): Notion's green and red backgrounds, the conflict card's two versions (conflicts.mjs);
+       words added get a 批注's look (a faint fill under a 2px underline) in green, blocks a fainter fill; words
+       taken out stand in red struck through on the red, deleted blocks' ghost on a fainter red. */
+    --ge-diff-add: light-dark(rgb(0 100 45 / 9%), rgb(108 255 172 / 15.7%));
+    --ge-diff-add-line: light-dark(rgb(68 131 97 / 60%), rgb(111 197 150 / 55%));
+    --ge-diff-add-fill: light-dark(rgb(0 100 45 / 5.5%), rgb(108 255 172 / 9%));
+    --ge-diff-add-text: light-dark(#448361, #6fc596);
+    --ge-diff-del: light-dark(rgb(223 22 0 / 9.4%), rgb(255 104 92 / 24%));
+    --ge-diff-del-fill: light-dark(rgb(223 22 0 / 4.5%), rgb(255 104 92 / 10%));
+    --ge-diff-del-text: light-dark(#cf5148, #ff8f85);
   }
 `;

package/browser/editor/page/margin.mjs

@@ -1,14 +1,18 @@
 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";
 
 // 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,
@@ -53,11 +57,13 @@ import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCE
  * The numbers: the edge room (the least room either side of the column keeps), 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 });
 
@@ -71,19 +77,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,10 +106,11 @@ 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);
 }
 
@@ -143,8 +151,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 +166,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 +199,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 +324,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 +346,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/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,31 @@ 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); }
   @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; }
@@ -52,9 +67,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 +90,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 +105,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"/>'),
@@ -105,11 +131,13 @@ export const menuOpen = () => opened.size > 0;
  * it off; 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
@@ -139,25 +167,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,12 +215,17 @@ 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 ?? "" }));
+        words.append(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;
@@ -199,9 +239,10 @@ export function createMenu() {
         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 }));
@@ -335,9 +376,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 +434,11 @@ 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 (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

@@ -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; }
 `;