@heycys/gallery 0.1.0 → 0.1.2

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.1.0 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
+@heycys/gallery 0.1.2 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
 
 ## @asamuzakjp/css-color 5.1.11
 
@@ -3251,3 +3251,53 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
+
+## Lucide icons
+
+A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, and the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab).
+
+```
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/browser/editor/components/callout/index.mjs

@@ -1,15 +1,23 @@
 import { svg } from "../icons.mjs";
+import { CALLOUT } from "../kit.mjs";
+import { setApart } from "../set-apart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
-// 提示块: the kit's .doc-callout holding inline text only, one text block that does not split
-// (Enter at its end makes a paragraph after it: `opensAfter`). page.mjs: its look while edited.
+// 提示块: the kit's .doc-callout, a box of blocks that keep their own types set apart on a fill, a
+// line at its left (the user's, 2026-11-07: a container as the highlight block is). It is the
+// highlight block's kind of block in every rule but its look: no icon leads it, its line, its square
+// corners. One written the old way, words straight in it (every callout before 2026-11-07, and what
+// an Agent may still write), holds them as one paragraph: natural HTML makes them one in the file
+// the first time the page writes it (source/natural.mjs, a box that holds one), the clipboard reads
+// it so (set-apart.mjs).
 //
-// Where the engines reach it (src/editor/page/ unless named): typing/ (Enter: `opensBefore`, `opensAfter`),
-// core.mjs (a new one's kind and capabilities: newHost, reading `host`), convert.mjs (its type), clipboard/own/ (`clipboard`),
-// ../source/ (finding one that holds inline text only, and taking in the paragraph an Agent writes alone in one: `takes`).
-// Its look: the kit's styles/callout.css (src/render/kit/); its color a background only, the
-// palette's blue when it has none (`defaults`: that blue is the one 颜色 › marks, and picking it
-// writes no class).
+// Where the engines reach it (src/editor/page/ unless named): typing/ (Enter on its empty last
+// paragraph: `leaveByEnter`, typing/leave.mjs; Backspace in its one empty block: `removedEmpty`),
+// convert.mjs (a block turned into one keeps its type; none inside another), clipboard/own/ (copying
+// it, and any block with its class: `clipboard`), handle/ (its first line shows its handle:
+// `firstLineActs`). Its look: the kit's styles/callout.css (src/render/kit/); its color a background
+// only, the palette's blue when it has none (`colorDefaults`: that blue is the one 颜色 › marks, and
+// picking it writes no class).
 
 // Its type's icon: a rounded box whose left side is a bar more than twice as thick as its lines (the
 // callout's line), the text's T in the middle of the room right of it. Drawn on the 20-unit grid
@@ -20,20 +28,37 @@ export default {
   name: "callout",
   listed: () => t("提示块"),
   units: {
-    callout: { name: t("提示块"), match: [{ rank: 130, class: "doc-callout" }], boxed: true, colors: ["background"], colorDefaults: { background: "blue" } },
+    callout: {
+      name: t("提示块"), match: [{ rank: 130, class: "doc-callout" }],
+      boxed: true,
+      removedEmpty: true, // Backspace on its one empty block deletes it whole (typing/)
+      colors: ["background"], colorDefaults: { background: "blue" },
+    },
   },
-  components: ["doc-callout"],
-  hosts: {
-    // It may be left empty (an empty one stays, as Notion's), and is written so.
-    callout: { name: t("提示块"), whole: "div.doc-callout", takes: "p", opensBefore: true, opensAfter: true, caps: ({ bound }) => bound ? ["empty", "links"] : ["remove", "empty", "links"] },
+  boxes: {
+    callout: {
+      role: "flow", name: t("提示块"),
+      leaveByEnter: true, // Enter on its empty last block moves that block out after it (typing/leave.mjs)
+      endIsPadding: true, // under its last block is its padding: a click there makes no block (geometry.mjs endOf)
+      firstLineActs: true, // its first block shows its handle
+      groups: true,
+      holdsOne: true, // emptied, it keeps an empty paragraph (core.mjs tidyEmptied)
+      selectAll: { content: true },
+      classes: [{ rank: 75, class: "doc-callout" }],
+    },
   },
   types: {
     callout: {
       turn: 12, menu: ["basic", 11],
-      tag: "div", className: "doc-callout", kind: "callout", host: "callout", leaf: "callout", text: true, empty: true, clipboard: { kind: "callout" },
+      tag: "div", className: "doc-callout", kind: "callout", box: "callout", leaf: "paragraph", container: ".doc-callout",
+      takesAsIs: true, holder: 4,
+      nests: false, // none inside another (a drop or a file may still nest one)
+      joins: false, // a block turned into one is one of its own, never another's
+      // Its blocks, one with words straight in it a paragraph of them (set-apart.mjs, the highlight block's rule too).
+      clipboard: { kind: "aside", claims: CALLOUT.match, ...setApart("callout", CALLOUT.match) },
       label: t("提示块"), icon: CALLOUT_ICON,
       words: "提示块 提示框 提示 注意 警告 tishi zhuyi jinggao tsk ts callout tip warning notice",
-      glance: { row: 12, name: "提示块", write: "`div.doc-callout`", rule: "Kit blocks" },
+      glance: { row: 12, name: "提示块", write: "`div.doc-callout` holding `<p>`", rule: "Kit blocks" },
     },
   },
 };

package/browser/editor/components/columns/page.mjs

@@ -49,11 +49,11 @@ export function ratiosAfterRemove(ratios, removed) {
 /**
  * The gap after column `index` dragged by `fraction` of the row's width: only the two columns
  * beside it change, snapping to their equal split or to a tenth of the row for the left one when
- * within 1%, both keeping the least share (1/24, or more where `least` says so for a part: the
+ * within `near` of the row (page/columns/ gives 5px of it; 1% when not said; 0: no snapping), both keeping the least share (1/24, or more where `least` says so for a part: the
  * share its content needs, a flowchart's node as narrow as the kit lets it be, page/columns/).
  * `ratios` are those when the drag started.
  */
-export function ratiosAfterResize(ratios, index, fraction, least = []) {
+export function ratiosAfterResize(ratios, index, fraction, least = [], near = 0.01) {
   const left = ratios[index];
   const right = ratios[index + 1];
   const low = Math.max(MIN_RATIO, least[index] ?? 0);
@@ -62,8 +62,8 @@ export function ratiosAfterResize(ratios, index, fraction, least = []) {
   let moved = fraction;
   const equal = (left + right) / 2 - left;
   const step = Math.round(10 * (left + moved)) / 10 - left;
-  if (Math.abs(equal - moved) < 0.01) moved = equal;
-  else if (Math.abs(step - moved) < 0.01) moved = step;
+  if (Math.abs(equal - moved) < near) moved = equal;
+  else if (Math.abs(step - moved) < near) moved = step;
   moved = Math.min(Math.max(moved, low - left), right - high);
   const out = [...ratios];
   out[index] = left + moved;
@@ -97,36 +97,42 @@ export function setRatios(row, ratios) {
 // ---------- making rows and columns ----------
 
 /**
- * A new row where `target` stands: `target` in one column, each of `groups` (lists of nodes: blocks
- * with their leads) in a column of its own, `side` of it ("left" or "right"); equal widths.
- * Returns { focus: the row, created }.
+ * A new row where `target` stands: `target` (a block, or blocks next to each other: a folded heading
+ * with what it hides) in one column, each of `groups` (lists of nodes: blocks with their leads) in a
+ * column of its own, `side` of it ("left" or "right"); equal widths. Returns { focus: the row, created }.
  */
 export function rowAround(target, groups, side = "right") {
   begin();
-  const doc = target.ownerDocument;
-  const parts = withLeads(target);
+  const own = [target].flat();
+  const doc = own[0].ownerDocument;
+  const parts = own.flatMap(withLeads);
   const row = made(newContainer(doc, "columns"));
   parts[0].before(row);
-  const own = made(newContainer(doc, "column"));
-  placeBefore(own, parts, null);
+  const column = made(newContainer(doc, "column"));
+  placeBefore(column, parts, null);
   const others = groups.map((nodes) => {
-    const column = made(newContainer(doc, "column"));
-    placeBefore(column, nodes, null);
-    return column;
+    const other = made(newContainer(doc, "column"));
+    placeBefore(other, nodes, null);
+    return other;
   });
-  row.append(...(side === "left" ? [...others, own] : [own, ...others]));
+  row.append(...(side === "left" ? [...others, column] : [column, ...others]));
   return done(row);
 }
 
-/** Blocks next to each other (with their leads), each in a column of its own of a new row where they stood. Returns { focus: the row, created }. */
+/**
+ * Blocks next to each other (with their leads), each in a column of its own of a new row where they
+ * stood; one may be a list of blocks (a folded heading with what it hides), a column for them all.
+ * Returns { focus: the row, created }.
+ */
 export function rowOf(units) {
   begin();
-  const doc = units[0].ownerDocument;
+  const groups = units.map((unit) => [unit].flat());
+  const doc = groups[0][0].ownerDocument;
   const row = made(newContainer(doc, "columns"));
-  withLeads(units[0])[0].before(row);
-  for (const unit of units) {
+  withLeads(groups[0][0])[0].before(row);
+  for (const group of groups) {
     const column = made(newContainer(doc, "column"));
-    placeBefore(column, withLeads(unit), null);
+    placeBefore(column, group.flatMap(withLeads), null);
     row.append(column);
   }
   return done(row);
@@ -151,11 +157,12 @@ export function addColumn(row, index, nodes = null) {
 }
 
 /**
- * 分两栏 (分三栏, 分四栏: `count` columns) with a block alone: a new row, the block in the left column
- * and a new empty paragraph in each of the others. Returns { focus: the first of them, created }.
+ * 分两栏 (分三栏, 分四栏: `count` columns) with a block alone (or a folded heading with what it hides,
+ * `target` a list: rowAround): a new row, the block in the left column and a new empty paragraph in
+ * each of the others. Returns { focus: the first of them, created }.
  */
 export function splitBeside(target, count = 2) {
-  const paragraphs = Array.from({ length: count - 1 }, () => newHost(target.ownerDocument, "paragraph"));
+  const paragraphs = Array.from({ length: count - 1 }, () => newHost([target].flat()[0].ownerDocument, "paragraph"));
   const { created } = rowAround(target, paragraphs.map((paragraph) => [paragraph]), "right");
   return { focus: paragraphs[0], created };
 }
@@ -174,9 +181,11 @@ export const fitColumn = (units) => units.length > 0 && units.every((unit) => ac
  * "分栏" for blocks (in document order): null when it does not apply, otherwise why it cannot be
  * done, or "". One block in a column adds a column right of its own; one block elsewhere becomes a
  * row with a new empty column beside it; several next to each other in one container (not in a
- * column), a row with a column each.
+ * column), a row with a column each. `taken(unit)`: what goes into a unit's column with it (a folded
+ * heading's: it and what it hides, fold/ withHidden), each of which a column must take, and which
+ * stands between the units it joins as they are next to each other for the reader.
  */
-export function columnsCheck(units) {
+export function columnsCheck(units, taken = (unit) => [unit]) {
   if (units.length === 0) return null;
   const box = units[0].parentElement;
   if (!box?.hasAttribute("data-ge-box") || units.some((unit) => unit.parentElement !== box)) return null;
@@ -185,12 +194,13 @@ export function columnsCheck(units) {
     if (units.length > 1) return null;
     return columnsOf(column.parentElement).length >= MAX_COLUMNS ? t("一行最多 {0} 栏", MAX_COLUMNS) : "";
   }
-  if (!accepts(boxKind(box), "columns") || !fitColumn(units)) return null;
+  const all = units.flatMap(taken);
+  if (!accepts(boxKind(box), "columns") || !fitColumn(all)) return null;
   if (units.length > MAX_COLUMNS) return t("一行最多 {0} 栏", MAX_COLUMNS);
   if (units.length === 1) return "";
   const blocks = unitsOf(box);
-  const first = blocks.indexOf(units[0]);
-  return units.every((unit, index) => blocks[first + index] === unit) ? "" : t("只有相邻的块能并排分栏：中间还有没选中的块");
+  const first = blocks.indexOf(all[0]);
+  return all.every((unit, index) => blocks[first + index] === unit) ? "" : t("只有相邻的块能并排分栏：中间还有没选中的块");
 }
 
 // ---------- the commands ----------
@@ -200,10 +210,13 @@ export function columnsCheck(units) {
  * struct (a structural undo step), say, and blocks() (the block handles and selection, blocks.mjs).
  */
 export function create({ struct, say, blocks }) {
+  // What goes into a block's column with it: a folded heading's section goes with it (fold/ withHidden).
+  const taken = (unit) => blocks().folds?.withHidden(unit) ?? [unit];
+
   // Blocks that pass columnsCheck: a block in a column gets a column right of its own; a block
   // elsewhere becomes a row of `count` columns, it in the first and empty ones beside it (Feishu's
-  // two columns; the block menu's 分两栏, 分三栏, 分四栏); several, a row with a column each. The caret
-  // goes into the first new column's paragraph, or the row is selected.
+  // two columns; the block menu's 分两栏, 分三栏, 分四栏); several, a row with a column each, a folded
+  // heading's with what it hides. The caret goes into the first new column's paragraph, or the row is selected.
   function split(units, count = 2) {
     blocks().clear();
     const column = units.length === 1 ? columnOf(units[0]) : null;
@@ -212,7 +225,7 @@ export function create({ struct, say, blocks }) {
       return;
     }
     const result = struct([units[0].parentElement], [], () => {
-      const made = units.length === 1 ? splitBeside(units[0], count) : rowOf(units);
+      const made = units.length === 1 ? splitBeside(taken(units[0]), count) : rowOf(units.map(taken));
       return { touched: [], focus: made.focus, select: units, created: made.created };
     });
     if (units.length === 1) caretAt(result.focus, "start");
@@ -238,7 +251,7 @@ export function create({ struct, say, blocks }) {
   return {
     tidy: tidyRows,
     // What the block tools and the gaps between columns read and do by themselves (block-menu/, drag/, page/columns/).
-    columnOps: { split, add, columnOf, columnsCheck, columnsOf, addColumn, rowAround, ratiosOf, ratiosAfterResize, setRatios, sized },
+    columnOps: { split, add, columnOf, columnsCheck: (units, take = taken) => columnsCheck(units, take), columnsOf, addColumn, rowAround, ratiosOf, ratiosAfterResize, setRatios, sized },
   };
 }
 

package/browser/editor/components/details/index.mjs

@@ -26,7 +26,8 @@ export default {
   },
   boxes: {
     // Its content always holds a block (holdsOne): emptied, it keeps an empty paragraph to write in.
-    details: { role: "flow", name: t("折叠列表"), groups: true, holdsOne: true, emptyIsNothing: true, selectAll: { content: true }, classes: [{ rank: 30, class: classOf(stepOf(DETAILS.content)) }], find: (unit) => detailsContent(unit) },
+    // Under its last block is its padding: a click there makes no block (endIsPadding).
+    details: { role: "flow", name: t("折叠列表"), groups: true, holdsOne: true, endIsPadding: true, emptyIsNothing: true, selectAll: { content: true }, classes: [{ rank: 30, class: classOf(stepOf(DETAILS.content)) }], find: (unit) => detailsContent(unit) },
   },
   placeholders: { label: t("折叠列表标题") },
   hosts: {

package/browser/editor/components/dialog/index.mjs

@@ -22,7 +22,8 @@ export const DIALOG_TRIGGER = "doc-dialog-trigger";
 
 export default {
   name: "dialog",
-  // A link in the text that opens a card, a chip as padded as code: Backspace beside it takes it whole.
+  // A link in the text that opens a card, a chip as padded as code: Backspace right of it (Delete
+  // left of it) takes it whole, as a chip of the text goes; its words are edited from inside it.
   entry: { at: `a.${DIALOG_TRIGGER}`, removed: t("入口已移除：页面上没有地方能打开这张详情卡片了 · Ctrl+Z 撤销") },
   units: {
     // The server finds detail cards by their element (findUnits). No block of the page's flow, a card

package/browser/editor/components/dialog/page.mjs

@@ -1,7 +1,6 @@
 import { can, firstHost, newHost } from "../../page/core.mjs";
 import { caretAt, editable } from "../../page/caret.mjs";
 import { padCaret } from "../../page/pads.mjs";
-import { addStyle } from "../../page/ui.mjs";
 import { DIALOG } from "../kit.mjs";
 import { linkAround } from "../../page/links/index.mjs";
 import { DIALOG_TRIGGER, dialogContent, entryOf } from "./index.mjs";
@@ -18,22 +17,6 @@ import { t } from "../../../shared/i18n/index.mjs";
 // no one sees (an undo step, a word 搜索文档 found) opens it (show). A page shown again has the
 // cards it had, the same one on top (kept, reopen).
 
-// While the page is edited the page's gutters are the room the handle takes beside a block
-// (--ge-edge-room, handle/). The card keeps its width and its text the page's (dialog.css): at a
-// window narrower than it, what is left of those gutters stands outside the card, where a press
-// closes it.
-const STYLE = `
-  :root[data-ge-editing] { --doc-dialog-edge: calc(var(--ge-edge-room) - var(--doc-dialog-side)); }
-  @media screen {
-    /* Where the page keeps room for the outline (margin.mjs), a card stands on the column, its text on the page's: the column and the room at each side of its text, as far left. */
-    :root[data-ge-margin] .doc-dialog {
-      width: calc(var(--ge-margin-column) + 2 * var(--doc-dialog-side));
-      margin-left: calc(max(var(--ge-margin-side), calc((100% - var(--ge-outline-room, 0px) - var(--ge-margin-column)) / 2)) - var(--doc-dialog-side));
-      margin-right: 0;
-    }
-  }
-`;
-
 /**
  * A new detail card (dialog.doc-dialog) with this id, the kit's markup: a content region (a box)
  * holding a heading of `title` (text), the size a detail card's opens with, and an empty paragraph.
@@ -112,7 +95,6 @@ function followCards() {
  * the page), blocks (the block tools) and isEditing.
  */
 export function create({ struct, say, limitText, selectionContext, hideFormatBar, closeTools, blocks, isEditing }) {
-  addStyle(STYLE);
   const cards = followCards();
 
   // A card closed: it leaves nothing behind. The caret goes to its entry, outside it, when that is in

package/browser/editor/components/divider/index.mjs

@@ -22,7 +22,7 @@ export default {
   name: "divider",
   listed: () => t("分割线"),
   units: {
-    rule: { name: t("分割线"), match: [{ rank: 230, tag: "hr" }], boxed: true, turnsEmpty: true },
+    rule: { name: t("分割线"), match: [{ rank: 230, tag: "hr" }], boxed: true, turnsEmpty: true, leadsChapter: true },
   },
   types: {
     divider: {

package/browser/editor/components/embed/index.mjs

@@ -24,8 +24,8 @@ export const HEIGHT = "--doc-embed-height";
 /** The frame's height as a size: the least and the most (px) it may be given. */
 export const HEIGHT_SIZE = { min: 96, max: 2000, px: true };
 
-/** The sandbox of a web page's frame (Notion's), and of an HTML file's (no origin of its own). */
-export const WEB_SANDBOX = "allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin allow-storage-access-by-user-activation allow-popups-to-escape-sandbox";
+/** The sandbox of a web page's frame (Notion's: the sidebar's web links have it too, shared/web-links.mjs), and of an HTML file's (no origin of its own). */
+export { WEB_SANDBOX } from "../../../shared/web-links.mjs";
 export const FILE_SANDBOX = "allow-scripts allow-popups allow-forms allow-modals";
 
 /**

package/browser/editor/components/figure/page.mjs

@@ -1,18 +1,27 @@
 import { SPAN } from "../../../shared/media.mjs";
 import { ICONS } from "../../page/menu.mjs";
 import { lookRow } from "../rows.mjs";
+import { addStyle } from "../../page/ui.mjs";
 import { CENTERED, CHART_HEIGHT } from "./index.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 卡片 on the page: its rows of the block menu (docs/editor.md, "Resizing cards, tables and
 // code blocks"; resize/ drags the same sizes by their edges): the card centered or at full width,
-// and back to the default size once a width or height is set.
+// and back to the default size once a width or height is set. Its title and caption take no fill
+// while edited.
+
+// A card's title and caption (the `field` kind, a table's scope line with it) are plain text, as a
+// media block's caption: no fill under the pointer or the caret (editor.mjs's --ge-text-tint).
+const STYLE = `
+  [data-ge-editing] [data-ge-kind="field"][contenteditable="true"] { --ge-text-tint: none; }
+`;
 
 /**
  * look(element, { classes, sizes }, select): the editor's undoable change of classes and sizes
  * (history.mjs); say: the status line.
  */
 export function create({ look, say }) {
+  addStyle(STYLE);
   const row = (target, options) => lookRow({ look, say }, target, options);
   return {
     /** The card's rows of the block menu (none for another block). */

package/browser/editor/components/file/page.mjs

@@ -103,8 +103,8 @@ export function create({ pages, fileUrl }) {
     pick, menuItems,
     /** Whether a file makes a file block: any that is no image. */
     acceptsFile: (file) => !/^image\//.test(file.type),
-    /** A file block below the block of `host` (a text block), `file` uploaded. Returns whether it took it. */
-    fromFiles: (host, [file]) => media.paste(host, file, newFile, uploadInto),
+    /** A file block made of `file`, put where the paste puts it (`put`), its file uploaded. Returns whether it took it. */
+    fromFiles: (put, [file]) => media.paste(put, file, newFile, uploadInto),
     /** A new one: its file chosen next. */
     onCreated(figure) {
       pick(figure);

package/browser/editor/components/flowchart/add.mjs

@@ -10,20 +10,21 @@ import { t } from "../../../shared/i18n/index.mjs";
 // card's vertical middle (the layer over the page draws it: overlay-layer.mjs, so it scrolls with
 // the node and never touches the report's markup; above the handle and a section's bar there,
 // IN_LAYER button, so the half of a row's last node's button over its section's bar is the
-// button's), a white surface with a hairline border and a thin outline plus, grey once the pointer
-// is on it (Notion-flat: no blue). A click adds a node right
+// button's), a white surface lifted by a soft shadow (no line round it) and a thin outline plus, the plus
+// darker once the pointer is on it and the surface grey only while it is pressed (the editor's icon button
+// look, look.mjs BUTTONS; Notion-flat: no blue). A click adds a node right
 // after it (page.mjs addAfter: one undo step, the caret in its empty first line, bold armed); the
 // press itself moves no caret and starts no box selection. It goes as the pointer leaves the node
 // (and the button), as a drag or a box selection begins, and with any structural change that takes
 // its node away.
 
 const STYLE = `
-  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 1px solid light-dark(rgb(29 29 31 / 16%), rgb(243 243 243 / 18%)); border-radius: 50%;
-    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px light-dark(rgb(25 25 25 / 6%), rgb(0 0 0 / 20%));
-    opacity: 0; transition: opacity .12s, background-color .12s, color .12s, border-color .12s; }
+  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
+    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%));
+    opacity: 0; transition: opacity .12s, background-color .12s, color .12s; }
   .ge-flow-add[data-shown] { opacity: 1; }
   .ge-flow-add > svg { display: block; width: 14px; height: 14px; margin: 3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
-  .ge-flow-add:hover { background: light-dark(#f4f4f3, #2f2f2f); color: var(--ge-ico); border-color: light-dark(rgb(29 29 31 / 24%), rgb(255 255 255 / 26%)); }
+  .ge-flow-add:hover { color: var(--ge-ico); }
   .ge-flow-add:active { background: light-dark(#ebebea, #404040); }
   @media (prefers-reduced-motion: reduce) { .ge-flow-add { transition: none; } }
 `;

package/browser/editor/components/flowchart/page.mjs

@@ -266,7 +266,7 @@ const NODE_CHOICES = [
 const STYLE = `
   [data-ge-editing] ol.doc-flow > li { --ge-text-radius: 8px; }
   [data-ge-editing] ol.doc-flow > li > * { --ge-text-radius: 3px; }
-  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 600; }
+  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 700; }
 `;
 
 /**

package/browser/editor/components/heading/index.mjs

@@ -8,6 +8,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // Where the engines reach it (src/editor/page/ unless named): typing/ (an empty heading's
 // placeholder, `placeholder` below), convert.mjs and markdown/ ("# " to "#### "), core.mjs (Enter splits a
 // heading into a paragraph), clipboard/own/ and src/transfer/markdown.mjs (written by its level: `clipboard`).
+// Folding its section: page/fold/ (the triangle right of its words, what is hidden, the section going with
+// it wherever blocks are taken away whole) and page.mjs (Ctrl/⌘+Enter in its words).
 // Its color (颜色 in the block menu): class switches, colors.mjs.
 // Its look: the kit's styles/flow.css (src/render/kit/).
 // How a heading of a level is written out: # … #### by level.

package/browser/editor/components/heading/page.mjs

@@ -0,0 +1,6 @@
+// 标题 on the page: Ctrl/⌘+Enter in its words folds or unfolds its section (notion-lite's toggle's
+// commandEnter); the fold itself, its triangle and what goes with a folded heading are page/fold/.
+
+export function create(ctx) {
+  return { keys: { commandEnter: ({ host }) => ctx.blocks()?.folds.toggle(host) ?? false } };
+}

package/browser/editor/components/highlight/index.mjs

@@ -1,6 +1,6 @@
-import { escapeText } from "../../../shared/escape.mjs";
 import { svg } from "../icons.mjs";
 import { HIGHLIGHT } from "../kit.mjs";
+import { setApart } from "../set-apart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 高亮块: the kit's .doc-panel, a box of blocks that keep their own types, with the opening
@@ -33,6 +33,7 @@ export default {
       role: "flow", name: t("高亮块"),
       also: ["icon"], // a highlight block's icon
       leaveByEnter: true, // Enter on its empty last block moves that block out after it (typing/leave.mjs)
+      endIsPadding: true, // under its last block is its padding: a click there makes no block (the user's, 2026-11-06; geometry.mjs endOf)
       lead: "icon", // its icon, first in it
       firstLineActs: true, // its first block shows its handle
       groups: true,
@@ -52,25 +53,8 @@ export default {
       nests: false, // none inside another (a drop or a file may still nest one)
       joins: false, // a block turned into one is one of its own (Notion's callout), never another's
       leadIcon: "💡", // Notion's new callout
-      clipboard: {
-        kind: "aside", claims: HIGHLIGHT.match,
-        // Its blocks; one with words straight in it, a paragraph of what it says. A list with its class
-        // is a list, and a text block of a type of its own that type.
-        describe(node, { isHost, holding, colorOf, copiedType, serializeInner, plain }) {
-          if (!node.matches(HIGHLIGHT.match) || node.matches("ul, ol") || (isHost(node) && copiedType(node))) return undefined;
-          const straight = [...node.childNodes].some((child) => child.nodeType === 3 && child.data.trim());
-          const words = isHost(node) ? serializeInner(node) : straight ? escapeText(plain(node)) : null;
-          const blocks = words === null ? holding(node) : [{ type: "paragraph", html: words }];
-          const color = colorOf(node);
-          return blocks ? { type: "highlight", blocks, ...(color ? { color } : {}) } : null;
-        },
-        endsIn(unit, { blocksIn, boxesOf, colorOf }) {
-          if (!unit.matches(HIGHLIGHT.match)) return undefined;
-          const color = colorOf(unit);
-          return [{ type: "highlight", blocks: blocksIn(boxesOf(unit)), ...(color ? { color } : {}) }];
-        },
-        check: (block, { container }) => container(block),
-      },
+      // Its blocks, one with words straight in it a paragraph of them (set-apart.mjs, the callout's rule too).
+      clipboard: { kind: "aside", claims: HIGHLIGHT.match, ...setApart("highlight", HIGHLIGHT.match) },
       label: t("高亮块"), icon: svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><rect x="6" y="6.5" width="8" height="2.75" rx=".6" fill="currentColor" stroke="none" opacity=".35"/><path d="M6.25 12.75h7.5"/>'),
       words: "高亮块 高亮 概述 摘要 gaoliang gaishu zhaiyao glk gl highlight panel summary",
       glance: { row: 12, name: "高亮块", before: "; ", write: "`<aside>`", after: "`aside.doc-panel` (one made in the preview a `div.doc-panel`, the same block)", rule: "Kit blocks" },

package/browser/editor/components/icons.mjs

@@ -18,8 +18,19 @@ const LEVELS = {
 export const FORMULA_ICON = svg('<path d="M1.6 11.6 5.5 16.25 9.5 3.75h8.75"/><path d="m10.6 7.9 6.6 8.35M17.2 7.9l-6.6 8.35"/>');
 
 /** A link (two rings of a chain): the "/" menu's 链接, 链接视图, an empty link's chip, one drawing. */
-/** A page (the workbench's tree draws the same): the "/" menu's 页面, a page block left empty, a page with no icon in a search's rows. */
-export const PAGE_ICON = svg('<path d="M5.75 2.75h5.5l3.5 3.5v9.5a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5V4.25a1.5 1.5 0 0 1 1.5-1.5z"/><path d="M11 2.75v3c0 .41.34.75.75.75h3"/><path d="M7.25 10h5.5M7.25 13h3.5"/>');
+/** A page (as the workbench's tree draws one with no icon: Lucide's file-text, FinHarness's 文档, here in 20 units): the "/" menu's 页面, a page block left empty, a page with no icon in a search's rows. */
+export const PAGE_ICON = svg('<path d="M5 18.33a1.67 1.67 0 0 1-1.67-1.66V3.33a1.67 1.67 0 0 1 1.67-1.66h6.67a2 2 0 0 1 1.42.58l2.99 2.99a2 2 0 0 1 .59 1.43v10a1.67 1.67 0 0 1-1.67 1.66z"/><path d="M11.67 1.67v4.16c0 .46.37.84.83.84h4.17"/><path d="M8.33 7.5H6.67M13.33 10.83H6.67M13.33 14.17H6.67"/>');
+
+/** A section (分区): blocks gathered between brackets, the block menu's 组成新分区 and the section's line in 设置 › 组件列表. */
+export const SECTION_ICON = 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"/>');
+
+/**
+ * A custom block (自定义块): a card of text, a rounded square with a short title line over two longer
+ * ones. The one mark of a block that has no picture of its own: the "/" menu's row and a block's menu,
+ * 添加自定义块's library, and a custom block's line in 设置 › 组件列表. On the 20 box of the icons beside
+ * it, so that the menus' stroke (1.25 at 20px) is its stroke too.
+ */
+export const BLOCK_ICON = svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><path d="M6.75 7h3.5M6.75 10h6.5M6.75 13h4.5"/>');
 
 /** A detail card (详情卡片): a card with two lines of text. */
 export const DIALOG_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2.5"/><path d="M6.5 8h7M6.5 11.5h4.5"/>');

package/browser/editor/components/image/crop.mjs

@@ -1,5 +1,5 @@
 import { Z } from "../../../shared/layers.mjs";
-import { addStyle, element, mount } from "../../page/ui.mjs";
+import { addStyle, element, mount, textButton } from "../../page/ui.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 裁剪图片 (notion-lite's blocks/image/edit/crop.js, Notion's 31868): a dialog over the page, the
@@ -19,13 +19,10 @@ const STYLE = `
     box-shadow: 0 0 0 1px var(--ge-outline), 0 20px 40px rgb(0 0 0 / 30%); }
   .ge-crop-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ge-line); }
   .ge-crop-title { flex: 1; text-align: center; font-weight: 500; white-space: nowrap; }
-  .ge-crop-shape, .ge-crop-cancel, .ge-crop-save { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
-  .ge-crop-shape { color: var(--ge-tx2); }
+  .ge-crop-shape { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx2); font: inherit; cursor: pointer; }
   .ge-crop-shape[aria-pressed="true"] { background: var(--ge-fill); color: var(--ge-accent-text); }
-  .ge-crop-shape:hover, .ge-crop-cancel:hover { background: var(--ge-hover); }
-  .ge-crop-cancel { color: var(--ge-tx2); }
-  .ge-crop-save { background: var(--ge-accent); color: #fff; font-weight: 500; }
-  .ge-crop-save:hover { background: var(--ge-accent-hover); }
+  .ge-crop-shape:hover { background: var(--ge-hover); }
+  .ge-crop-shape[aria-pressed="true"]:hover { background: var(--ge-btn-primary-hover); }
   .ge-crop-body { display: flex; justify-content: center; padding: 30px; background: light-dark(#f7f6f3, #1f1f1f); }
   .ge-crop-stage { position: relative; overflow: hidden; }
   .ge-crop-stage > img { display: block; max-width: 70vw; max-height: 75vh; pointer-events: none; }
@@ -56,8 +53,8 @@ export function openCrop(img, save, from = {}) {
     button.addEventListener("click", () => shape(ratio, button));
     return button;
   });
-  const cancel = element("button", { type: "button", class: "ge-crop-cancel", text: t("取消") });
-  const done = element("button", { type: "button", class: "ge-crop-save", text: t("保存") });
+  const cancel = textButton(t("取消"), null, { class: "ge-crop-cancel" });
+  const done = textButton(t("保存"), null, { class: "ge-crop-save", primary: true });
   const dialog = element("div", { class: "ge-crop-dialog", role: "dialog", "aria-label": t("裁剪图片") },
     element("div", { class: "ge-crop-bar" }, ...shapes, element("div", { class: "ge-crop-title", text: t("裁剪图片") }), cancel, done),
     element("div", { class: "ge-crop-body" }, stage));

package/browser/editor/components/image/page.mjs

@@ -373,8 +373,8 @@ export function create({ pages, assetUrl }) {
     pick, menuItems, fromLink,
     /** Whether a file makes an image. */
     acceptsFile: (file) => /^image\//.test(file.type),
-    /** An image below the block of `host` (a text block), the picture of `file` uploaded. Returns whether it took it. */
-    fromFiles: (host, [file]) => media.paste(host, file, newImage, uploadInto),
+    /** An image made of `file`, put where the paste puts it (`put`), its picture uploaded. Returns whether it took it. */
+    fromFiles: (put, [file]) => media.paste(put, file, newImage, uploadInto),
     /** A new one: its picture chosen next. */
     onCreated(figure) {
       pick(figure);