@heycys/gallery 0.1.0 → 0.1.2

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

@@ -1,6 +1,5 @@
 import { MEDIA_BLOCKS, MEDIA_CLASS, mediaBlockOf } from "../../../shared/components/index.mjs";
 import { caretAt } from "../../page/caret.mjs";
-import { UNIT } from "../../page/core.mjs";
 import { openMediaMenu } from "../../page/media-menu/index.mjs";
 import { keptByComponent } from "../../page/page-objects.mjs";
 import { blobBase64 } from "../../page/post.mjs";
@@ -8,6 +7,7 @@ import { addStyle } from "../../page/ui.mjs";
 import { barClass } from "../placeholder-bar.mjs";
 import { captionOf } from "./parts.mjs";
 import { TOOLBAR_STYLE } from "./toolbar.mjs";
+import { ZWSP } from "../../../shared/inline-spacing.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // What the four media blocks (图片, 文件, 网页书签, 嵌入) do on the page alike (notion-lite's
@@ -15,13 +15,17 @@ import { t } from "../../../shared/i18n/index.mjs";
 // block's menu; what is chosen replaces the placeholder with a NEW element (never the same one, so
 // that undo brings back the placeholder as it was and the file loses the block); a caption shows
 // once it is asked for or focused, goes out of sight when it is left empty, and Enter in it makes a
-// paragraph after the block. What a block makes of what is chosen (its picture, row, card or frame),
-// its menu, rows and tools are its own (image/, file/, bookmark/, embed/ page.mjs).
+// paragraph after the block; Backspace or Delete in an empty one closes it and selects its block. It
+// is plain text under the block, with no fill under the pointer or the caret. What a block makes of
+// what is chosen (its picture, row, card or frame), its menu, rows and tools are its own (image/,
+// file/, bookmark/, embed/ page.mjs).
 
 const STYLE = `${TOOLBAR_STYLE}
   /* A caption is shown with words, while it has the caret, or once 标题 asks for it (data-ge-caption), with Notion's placeholder. */
   ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]}[data-ge-caption] > figcaption`).join(", ")} { display: block; }
   ${MEDIA_BLOCKS.map((id) => `[data-ge-editing] .${MEDIA_CLASS[id]} > figcaption:empty::before`).join(", ")} { content: ${JSON.stringify(t("写一个标题…"))}; color: var(--ge-tx3); }
+  /* A caption is plain text under its block, as Notion's and Feishu's: no fill under the pointer or the caret (editor.mjs's --ge-text-tint). */
+  [data-ge-editing] [data-ge-kind="mediaCaption"][contenteditable="true"] { --ge-text-tint: none; }
 `;
 
 // Every media placeholder (a gray bar), by the selector the page finds it by.
@@ -30,6 +34,10 @@ const BARS = MEDIA_BLOCKS.map((id) => `main figure.${MEDIA_CLASS[id]} > .${barCl
 // What a placeholder's words were before something was under way (busy), by the words' element.
 const idleWords = new WeakMap();
 
+// A caption with nothing in it: no words, no chip (a formula, a page's link); what the browser or a
+// pad leaves (a <br>, a zero-width space) is nothing. A space is something: Backspace takes it.
+const blank = (text) => !text.textContent.replaceAll(ZWSP, "") && !text.querySelector("[data-ge-atom]");
+
 /**
  * The media blocks on the page, with what the editor gives them: struct (an undo step), say,
  * active() (the block tools may act), blocks() (the block tools), newParagraph(parent, after),
@@ -78,6 +86,30 @@ export function create({ struct, finishStep, look, say, active, blocks, newParag
     event.preventDefault();
     newParagraph(figure.parentElement, figure);
   }, true);
+  // Backspace or Delete in an empty caption closes it (the user's rule, 2026-11-06; Notion's and
+  // notion-lite's do nothing there): out of sight as when the caret leaves it, the file keeping its
+  // empty <figcaption> (no undo step: nothing of the file changes), and its block selected, as Esc
+  // there does and as Backspace selects a block above that holds no text (typing/): Backspace again
+  // deletes the block. A key held down stops at the empty caption (`repeat`), so that holding
+  // Backspace to clear its words never takes the block with them.
+  document.addEventListener("keydown", (event) => {
+    if ((event.key !== "Backspace" && event.key !== "Delete") || event.ctrlKey || event.metaKey || event.altKey || event.isComposing || event.keyCode === 229) return;
+    const text = event.target?.closest?.('[data-ge-kind="mediaCaption"]');
+    const figure = text?.parentElement?.closest("figure");
+    if (!figure || !active() || !blank(text)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (!event.repeat) closeCaption(text, figure);
+  }, true);
+
+  // A caption closed: emptied of what the browser left, its mark gone, its block selected (which
+  // takes the focus off it; where the block cannot be selected, the focus leaves it all the same).
+  function closeCaption(text, figure) {
+    text.replaceChildren();
+    figure.removeAttribute("data-ge-caption");
+    select(figure);
+    if (text.contains(document.activeElement)) text.blur();
+  }
 
   /** The parts the editing of media block `id` is made from. */
   function block(id) {
@@ -133,25 +165,23 @@ export function create({ struct, finishStep, look, say, active, blocks, newParag
         if (!pasted) select(next);
         else if (picked) blocks().select(next, { quiet: true });
       },
-      /** The caption shown (an empty one too), the caret at its end. */
+      /** The caption shown (an empty one too), the caret at its end, no block left selected (notion-lite's editCaption: setSelection([])). */
       caption(figure) {
         const text = figure && captionOf(figure);
         if (!text) return;
+        blocks()?.clear();
         figure.setAttribute("data-ge-caption", "");
         caretAt(text, "end");
       },
       /**
-       * `file` pasted into `host` (a text block): a new block made by `make(doc)` below its block, then
-       * `fill(figure, file)` (its placeholder filled). Returns whether it took the file.
+       * `file` pasted: a new block made by `make(doc)`, put in its place by `put` (the paste's, clipboard/:
+       * where a block pasted there goes, one undo step; false when it could not), then `fill(figure, file)`
+       * (its placeholder filled). Returns whether it took the file.
        */
-      paste(host, file, make, fill) {
-        const unit = host?.closest?.(UNIT);
-        if (!file || !unit?.parentElement) return false;
-        const figure = make(host.ownerDocument);
-        struct([unit.parentElement], [], () => {
-          unit.after(figure);
-          return { touched: [], focus: null };
-        });
+      paste(put, file, make, fill) {
+        if (!file) return false;
+        const figure = make(document);
+        if (!put(figure)) return false;
         fill(figure, file);
         return true;
       },

package/browser/editor/components/pages.mjs

@@ -1,5 +1,4 @@
 import { create as bookmark } from "./bookmark/page.mjs";
-import { create as callout } from "./callout/page.mjs";
 import { create as code } from "./code/page.mjs";
 import { create as columns } from "./columns/page.mjs";
 import { create as details } from "./details/page.mjs";
@@ -15,6 +14,7 @@ import { create as installed } from "./installed/page.mjs";
 import { create as list } from "./list/page.mjs";
 import { create as math } from "./math/page.mjs";
 import { create as media } from "./media/page.mjs";
+import { create as heading } from "./heading/page.mjs";
 import { create as paragraph } from "./paragraph/page.mjs";
 import { create as section } from "./section/page.mjs";
 import { create as sheets } from "./sheets/page.mjs";
@@ -29,7 +29,7 @@ import { create as table } from "./table/page.mjs";
 // listeners onto the document as it is made, and media comes before the four blocks made of its
 // parts (block(id)). It is also the order they are asked in where every one is: the columns tidy
 // before the lists (`tidy`), an image takes a pasted file before a file block does (`acceptsFile`).
-const PAGES = { columns, code, list, flowchart, nodeAdder, details, dialog, callout, paragraph, section, icon, sheets, sheetPills, figure, media, image, file, bookmark, embed, math, table, installed };
+const PAGES = { columns, code, list, flowchart, nodeAdder, details, dialog, paragraph, heading, section, icon, sheets, sheetPills, figure, media, image, file, bookmark, embed, math, table, installed };
 
 /**
  * Every component's page object, by its component's name (and the flowchart's "+", nodeAdder, and a

package/browser/editor/components/registry.mjs

@@ -23,6 +23,7 @@ import sheets from "./sheets/index.mjs";
 import table from "./table/index.mjs";
 import widget from "./widget/index.mjs";
 import { CATEGORIES, componentOf } from "../../shared/components/index.mjs";
+import { slotAround } from "../../shared/components/installed.mjs";
 import { COLOR_CLASSES } from "./colors.mjs";
 import { MEDIA_HOSTS } from "./media/parts.mjs";
 import { t } from "../../shared/i18n/index.mjs";
@@ -34,14 +35,16 @@ import { t } from "../../shared/i18n/index.mjs";
 // whose category it takes: a basic block, a container, a card or a whole block (CATEGORIES there).
 // Each describes itself:
 //
-//   listed      what 设置 › 组件 calls it (a function, as the server says it in both languages), for a
+//   listed      what 设置 › 组件列表 calls it (a function, as the server says it in both languages), for a
 //               component the reader meets in the "/" menu or as a block of its own; every component
-//               with a type in that menu says it. hideable: false, it stays offered whatever gallery.json
+//               with a type in that menu says it. Its line there shows the icon of its first row in the
+//               "/" menu (basic before advanced, by place), or, for a component with no type there (分区),
+//               its first unit's `icon`; a listed component with neither throws. hideable: false, it stays offered whatever gallery.json
 //               says, its switch there off and locked (文本, 标题, 列表, 分区): what a page cannot do
 //               without. What is hidden goes from "/", 在下方新建 and the handle's grid and nothing else
 //               (page/offered.mjs); its blocks, its Markdown shortcut and "Blocks at a glance" stay.
 //   units       the unit kinds it defines (blocks the reader selects, moves and deletes):
-//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, canHaveChildren?, emptyIsNothing?, fromWords?, attributes? } }
+//               { [kind]: { name, icon?, match, chapter?, fixed?, block?, handle?, below?, boxed?, beside?, inRow?, sharesHeight?, entersAfter?, resizable?, copy?, clipboard?, sizes?, toggles?, colors?, colorDefaults?, removedEmpty?, turnsEmpty?, leadsChapter?, canHaveChildren?, emptyIsNothing?, fromWords?, attributes? } }
 //               match: rules an element matches by its tag (one of `tag`), its class and its
 //               attribute, and by the element it stands in (`parent`: { tag?, class? }, a flowchart's
 //               step being an li whose parent is an ol.doc-flow), whichever are given; every
@@ -80,25 +83,30 @@ import { t } from "../../shared/i18n/index.mjs";
 //               the page, each with the test of its values. icon: what its handle shows, for a
 //               kind no block type stands for (a type's own icon is its `types` entry's). removedEmpty:
 //               Backspace on the one empty block in it deletes it whole (a code block, a highlight block,
-//               a quote, a disclosure: typing/). turnsEmpty: it holds nothing to carry, so what it is
+//               a callout, a quote, a disclosure: typing/). turnsEmpty: it holds nothing to carry, so what it is
 //               turned into is an empty block of the type, in its place (a divider line: convert.mjs).
+//               leadsChapter: it may stand first in a chapter as the line above its heading, so a
+//               folded heading with only such blocks before it covers the chapter (a divider: fold/rule.mjs).
 //               canHaveChildren: notion-lite's, a block right after it goes under it by Tab, so the
 //               keys of a block stand after it as they stand in what it is in (a list: under its last item).
 //               emptyIsNothing: a block of it left empty counts as nothing written, in a container
 //               that says `removedEmpty`. fromWords: a block of it can be made again from its words alone.
 //   boxes       the box kinds it defines (containers whose children are units): { [kind]: { role,
-//               name?, classes?, find?, owner?, takenBy?, also?, leaveByEnter?, lead?, firstLineActs?, firstBlock?, groups?, holdsOne?, emptyIsNothing?, outer?, selectAll? } }, classes being the kit's classes that make an element one
+//               name?, classes?, find?, owner?, takenBy?, also?, leaveByEnter?, endIsPadding?, lead?, firstLineActs?, firstBlock?, groups?, holdsOne?, emptyIsNothing?, outer?, selectAll? } }, classes being the kit's classes that make an element one
 //               (rank order, as above); the others the server knows by their tag (findUnits). find: where
 //               a unit's box of this kind is (a list item's lists, a disclosure's content, a Sheet area's
-//               panels); owner: the element of its unit that takes the box along (a Sheet panel's tab:
+//               panels, an instance's slots by their name: `find(unit, key)`); owner: the element of its unit that takes the box along (a Sheet panel's tab:
 //               boxOwner); takenBy: whether a unit's element is that one, for a box of this key, told from
 //               the element alone, which may be off the page with the box (takesBox);
 //               also: the unit kinds it takes besides what its role takes (a highlight block's icon);
 //               leaveByEnter: Enter on its empty last block moves that block out after it (typing/leave.mjs);
+//               endIsPadding: what is under its last block is its own padding (a highlight block, a
+//               callout, a disclosure's content): a click there makes no block, it is a gap like any other
+//               (geometry.mjs endOf, insert/ clickBlank);
 //               lead: the kind of unit it opens with as its fixed head, which is no block to fall
 //               between (a highlight block's icon: a box selection passes over it, a place before it is
 //               the place after it); firstLineActs: its first block shows the container's handle, not a
-//               handle of its own (Notion's disableFirstItemHoverMenu: a highlight block's, a quote's);
+//               handle of its own (Notion's disableFirstItemHoverMenu: a highlight block's, a callout's, a quote's);
 //               firstBlock: the type its first block (after its lead) always is, its first line (a
 //               flowchart's node: "paragraph", its title), which is turned into no other type (no
 //               转换为, no Markdown shortcut there) and has nothing made, dropped or pasted before it;
@@ -107,7 +115,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               groups: a plain <div> with no class in it is a group of blocks, not a block of its own (the
 //               same boxes as the shared descriptions' GROUPING_FLOWS: tests/unit/components.mjs);
 //               holdsOne: a change that leaves it empty puts an empty paragraph in it, so there is always a
-//               block to write in (a disclosure's content, a highlight block: core.mjs tidyEmptied);
+//               block to write in (a disclosure's content, a highlight block, a callout: core.mjs tidyEmptied);
 //               emptyIsNothing: as on a unit, of a box that is an element of its own, by its `classes`;
 //               outer: false, a block straight in it has no block around it for the reader, whatever
 //               stands around its element: no 选中外层 (a detail card's content: block-info.mjs outerOf);
@@ -121,38 +129,42 @@ import { t } from "../../shared/i18n/index.mjs";
 //   sealed      a selector: what stands in such an element is no text of a text block around it, as
 //               a list item holding it (caret.mjs editable): its own text blocks are the only hosts in it
 //   readOnly    why an element of it stays read-only, on hover and on a click (hints/): rules
-//               { rank, at, says }, at a selector found from the element (closest), says the reason
+//               { rank, at, says }, at a selector found from the element (closest), or a function
+//               of the element saying whether the rule is its (an instance's own region, heldBy, which
+//               no selector tells from its slots), says the reason
 //               in the reader's words, or null for an element that needs none, having a tool of its
 //               own. Every component's rules are tried in `rank` order, with the page's (PAGE below),
 //               and the first match wins: a rule ranked below the page's 80 goes before any control's,
 //               and is the one that can claim a button as its own.
-//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, whole?, takes?, opensBefore?, opensAfter?, textFilters?, formula?, closed?, inner?, blankSays?, placeholder? } }, caps
+//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, opensBefore?, textFilters?, formula?, closed?, inner?, pictures?, blankSays?, placeholder?, untitled?, opensBody? } }, caps
 //               ({ bound, blockLevel }) giving what such a text block can do (source/); opensBefore:
 //               Enter at its very start, with words in it, puts an empty paragraph before its block
-//               where it does not split, as one that splits does (typing/); opensAfter: Enter at its
-//               very end, a paragraph after its block, where it does not split; textFilters: false, what
+//               where it does not split, as one that splits does (typing/); textFilters: false, what
 //               is typed in it is taken as it is, no inline code, no space set by itself (notion-lite's);
 //               formula: false, no inline formula is offered in it or pasted as one, the kit drawing
 //               none there (takesFormula);
 //               closed: the page holds no text block for it until the reader opens it (a code block);
 //               inner(element): the text a save takes of one, as markup, where that is not what its
-//               nodes say (a code block's code);
+//               nodes say (a code block's code); pictures: it holds pictures amid its words (a table
+//               cell's), { show(root) (the file's made the page's: where the server serves them),
+//               write(element) (one's markup, "" for one of no file, null for no picture) } (core.mjs);
 //               parts: the parts of components ([component id, part name]: a part of its shared
 //               description edited as text, src/shared/components/) whose elements are text blocks
-//               of this kind, found so by the server's scan; whole: the element (a selector) that is one
-//               text block of this kind, by the scan too, while it holds inline text alone (a callout); takes: the tag of a
-//               block that, standing alone in `whole` with nothing of its own, natural HTML makes its words; tex: its text is a formula's TeX alone; wrapped: the page makes the text block a
+//               of this kind, found so by the server's scan; tex: its text is a formula's TeX alone; wrapped: the page makes the text block a
 //               span inside the element, which keeps its own behaviour (a Sheet tab's button);
 //               blankSays: what the status line says of one left blank that must hold words, as a
 //               type's says of a block of it (blankSaysOf); placeholder: what one says while it
-//               is empty under the caret, whatever part it is (placeholderOf)
+//               is empty under the caret, whatever part it is (placeholderOf); untitled: it says its
+//               placeholder whenever it is empty, the caret in it or not (the page's title, notion-lite's
+//               data-ph 新页面: typing/ updatePlaceholder); opensBody: Enter in it goes to the body, what
+//               follows the caret a new paragraph right below it (the page's title: typing/ enterBody)
 //   placeholders  what an empty text block says while the caret is in it: { [part]: text }, part
 //               being a part of its shared description (src/shared/components/) whose element it is
 //               (placeholderOf); a heading's own is its type's `placeholder`, and a type's `placeholder:
 //               false` says nothing where a block of it would (a list item)
 //   types       the blocks the reader can make on the page or turn a block into (the "/" menu,
 //               Markdown shortcuts, the block menu), written by the server in the kit's plain markup:
-//               { [type]: { tag, className?, kind, host?, box?, leaf?, wraps?, container?, part?, text?, inside?, tex?,
+//               { [type]: { tag, className?, kind, box?, leaf?, wraps?, container?, part?, text?, inside?, tex?,
 //               empty?, resettable?, bare?, placeholder?, bar?, label?, icon?, hint?, markdown?, words?, turn?, menu?, fresh?,
 //               corner?, preload?, onSplit?, create?, takesAsIs?, holder?, nests?, joins?, leadIcon?, fromSelection?, clipboard?, glance? } } and, for the blocks the page
 //               and the server write apart from text, title?, content?, keyed?, written?,
@@ -165,7 +177,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               quote's paragraph, a list item: notion-lite's `resettable`, typing/leave.mjs). leaf: the text block a block turned
 //               into the type becomes; wraps: such a text block sits in a container of the type, found
 //               by `container` (a selector); text: a plain text leaf; empty: a leaf written with no
-//               text too (a paragraph, a heading, a list item, a code block, a callout: an empty
+//               text too (a paragraph, a heading, a list item, a code block: an empty
 //               one stays, as Notion's; the page's core.mjs and the server's source/checks.mjs read
 //               this and nothing else); inside: the element its text is written in, as plain text
 //               (a code block's code element); tex: its text is a formula's TeX alone (a display
@@ -180,8 +192,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               over (page/markdown/rules.mjs); turn: its place among
 //               the types a text block is turned into; fresh: its place among the types made as an
 //               empty block that stands for an empty one; menu: [group, place], its place in the "/"
-//               menu (group "basic" or "advanced"), which the block menu's 在下方新建 shows too; host: the
-//               kind of text block a new one is (`hosts`; "flow" without: core.mjs newHost); corner: the
+//               menu (group "basic" or "advanced"), which the block menu's 在下方新建 shows too; corner: the
 //               type in whose cell of a type grid it sits, as a gray corner, when the grid has both
 //               (type-grid.mjs); preload: true, it needs something on the page as soon as a type grid
 //               offers it, and before a block with text is turned into it, which its page object's
@@ -197,7 +208,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               paragraph. It returns the node the caret or the choice goes to (null: none); a type
 //               without is a text block, made by convert.mjs standIn.
 //               takesAsIs: a block turned into it goes into it as it is, each keeping its type (a
-//               highlight block, a disclosure); holder: its place among the containers that turn into
+//               highlight block, a callout, a disclosure); holder: its place among the containers that turn into
 //               one another, what they hold carried along; nests: false, none inside another of its
 //               kind; joins: false, a block turned into it never joins the one beside it; leadIcon: the
 //               icon a new one opens with; fromSelection: { label, icon }, its row of the format bar's
@@ -295,8 +306,10 @@ import { t } from "../../shared/i18n/index.mjs";
 // label, width }, or null; reason: why the block may not go, remove(): delete it); rowBeside(target),
 // a row for a block of another component, beside its color, every page object being asked and each
 // testing the block itself; acceptsFile(file), whether a file pasted makes a block of it, and
-// fromFiles(host, files), that block made below the block of `host` (notion-lite's, which gives the
-// data of a new block; the first page object that takes a file in their order); fromLink(figure,
+// fromFiles(put, files), that block made and handed to `put(block)`, the paste's, which puts it where a
+// block pasted at the caret goes (one undo step) and says whether it could (notion-lite's
+// createFromFiles(files, width, place), whose fromFiles gives the data of a new block and whose place
+// the paste gives; the first page object that takes a file in their order); fromLink(figure,
 // url, options), a block of the component filled from an address (notion-lite's, here the figure
 // is there first: one pasted with its address, `{ pasted: true }`, a bookmark in an embed's place).
 // What the rest of the editor asks of a component that does something of its own where every block
@@ -336,8 +349,17 @@ import { t } from "../../shared/i18n/index.mjs";
 // A new kit component gets a folder of its own and a line below.
 export const COMPONENTS = [paragraph, heading, list, flowchart, quote, callout, highlight, details, code, divider, section, sheets, table, figure, image, file, bookmark, embed, columns, math, dialog, widget, icon, installed];
 
-/** The built-in components 设置 › 组件 lists: { id, name() (in the language t() says it in), hideable }, by the order above. */
-export const LISTED_BLOCKS = COMPONENTS.filter((component) => component.listed).map(({ name, listed, hideable = true }) => ({ id: name, name: listed, hideable }));
+// The "/" menu's groups, in order (MENU_GROUPS below says the same).
+const MENU_GROUP_ORDER = ["basic", "advanced"];
+const menuRank = ({ menu }) => MENU_GROUP_ORDER.indexOf(menu[0]) * 1000 + menu[1];
+// The mark of a component's line in 设置 › 组件列表: the icon of its first row in the "/" menu, the
+// same drawing; one with no type there (分区) shows its first unit's (`icon`, a kind no type stands for).
+const listedIcon = ({ types = {}, units = {} }) => Object.values(types).filter((spec) => spec.menu && spec.icon).sort((a, b) => menuRank(a) - menuRank(b))[0]?.icon
+  ?? Object.values(units).find((unit) => unit.icon)?.icon ?? null;
+
+/** The built-in components 设置 › 组件列表 lists: { id, name() (in the language t() says it in), icon (svg markup), hideable }, by the order above. */
+export const LISTED_BLOCKS = COMPONENTS.filter((component) => component.listed).map((component) => ({ id: component.name, name: component.listed, icon: listedIcon(component), hideable: component.hideable ?? true }));
+for (const { id, icon } of LISTED_BLOCKS) if (!icon) throw new Error(`component ${id} has a line in the settings (listed), so it needs an icon: a type in the "/" menu, or a unit's icon`);
 
 /** The names of those the reader may hide. */
 export const HIDEABLE = new Set(LISTED_BLOCKS.filter(({ hideable }) => hideable).map(({ id }) => id));
@@ -363,7 +385,11 @@ const PAGE = {
   hosts: {
     // A free text block may be left empty (Notion's): written as an empty element, one line high.
     flow: { opensBefore: true, caps: ({ bound }) => bound ? ["split", "merge", "links"] : ["split", "merge", "remove", "empty", "links"] },
-    title: { name: t("文档主标题"), caps: () => ["plain"], blankSays: t("文档主标题还空着：写上标题后才会保存。") },
+    // The page's title may be left empty (notion-lite's page title): an untitled document, its title
+    // saying 未命名文档 in gray (`untitled`), never written into the file; whatever names the document
+    // names it so (the workbench's reportTitle, links/pages.mjs, an export's <title>). Enter in it goes to the
+    // body (`opensBody`: typing/ enterBody, notion-lite's page title).
+    title: { name: t("文档主标题"), caps: () => ["plain", "empty"], placeholder: t("未命名文档"), untitled: true, opensBody: true },
     ...MEDIA_HOSTS,
   },
   readOnly: [
@@ -487,7 +513,7 @@ export const FRESH = inOrder((spec) => spec.fresh);
 export const HOLDERS = inOrder((spec) => spec.holder);
 
 /** The "/" menu's groups of block types, in order: { basic, advanced } (the menu says their names). */
-export const MENU_GROUPS = Object.fromEntries(["basic", "advanced"].map((group) => [group, inOrder((spec) => (spec.menu?.[0] === group ? spec.menu[1] : undefined))]));
+export const MENU_GROUPS = Object.fromEntries(MENU_GROUP_ORDER.map((group) => [group, inOrder((spec) => (spec.menu?.[0] === group ? spec.menu[1] : undefined))]));
 
 /** The types a block is made of from selected text, each with its row of the format bar's 更多 (`fromSelection`). */
 export const FROM_SELECTION = Object.entries(BLOCK_TYPES).filter(([, spec]) => spec.fromSelection).map(([type, spec]) => ({ type, ...spec.fromSelection }));
@@ -538,9 +564,12 @@ const ONE_BLOCK_AT = ONE_BLOCK.map(({ at }) => at).join(", ");
 /** What no text block around it reaches into (`sealed`), a selector, "" where no component says. */
 export const SEALED = COMPONENTS.map((component) => component.sealed).filter(Boolean).join(", ");
 
+// What is one block is found inside the slot whose inside is the document's region an element stands
+// in, where it does (an instance's slot holds blocks of their own: installed.mjs slotAround).
 const oneBlockOf = (element) => {
-  let whole = element.closest(ONE_BLOCK_AT);
-  for (let around = whole; around; around = around.parentElement?.closest(ONE_BLOCK_AT)) whole = around;
+  const region = slotAround(element);
+  let whole = null;
+  for (let around = element.closest(ONE_BLOCK_AT); around && (!region || region.contains(around)); around = around.parentElement?.closest(ONE_BLOCK_AT)) whole = around;
   return whole && ONE_BLOCK.find(({ at }) => whole.matches(at)).name;
 };
 
@@ -554,7 +583,8 @@ const textPartOf = (element) => TEXT_PARTS.find(({ match, at }) => [...(element.
 
 /**
  * The component an element is of, by name, or null. Nothing inside an element that is one block is
- * anyone else's, whatever its tag or class (a cell's list, a Sheet's tab). Else that of its kind of text
+ * anyone else's, whatever its tag or class (a cell's list, a Sheet's tab), but what an instance's slot
+ * holds, the document's blocks, each its own. Else that of its kind of text
  * block, where a component defines the kind (a cell, a tab's name), that of the text part of a
  * component it is, that of the unit it is (a flowchart's node, though an li) and last that of its type
  * (a list's item made on the page). What stands in a container is its own component's, not the
@@ -598,7 +628,7 @@ export const takesBox = (element, { kind, key }) => Boolean(element && BOXES[kin
 const FROM_WORDS = flagged("fromWords");
 export const PLAIN_TEXT = new Set(Object.keys(BLOCK_TYPES).filter((type) => FROM_WORDS.has(BLOCK_TYPES[type].kind)));
 
-/** Plain text leaves (paragraphs, small text, headings, callouts). */
+/** Plain text leaves (paragraphs, small text, headings). */
 export const TEXT_TYPES = new Set(Object.keys(BLOCK_TYPES).filter((type) => BLOCK_TYPES[type].text));
 
 /** The heading type of each heading tag (H1 -> heading1). */
@@ -682,6 +712,8 @@ const ROLES = Object.fromEntries(Object.entries(BOXES).map(([kind, box]) => [kin
 /** What a chapter is: the page and Sheet panels hold these besides body text. */
 export const CHAPTER = flagged("chapter");
 const FIXED = flagged("fixed"); // never inside a flow
+/** What may stand first in a chapter as the line above its heading (`leadsChapter`: a divider, fold/). */
+export const LEADS_CHAPTER = flagged("leadsChapter");
 
 /** The kinds of box a plain <div> without a class is a group of blocks in (`groups`; source/units.mjs boxKind). */
 export const GROUPING = new Set(Object.keys(BOXES).filter((kind) => BOXES[kind].groups));
@@ -695,6 +727,9 @@ export const HOLDS_ONE = new Set(Object.keys(BOXES).filter((kind) => BOXES[kind]
 /** The box kinds whose empty last block Enter moves out after the box (`leaveByEnter`). */
 export const LEAVES_BY_ENTER = new Set(Object.keys(BOXES).filter((kind) => BOXES[kind].leaveByEnter));
 
+/** Whether what is under the last block of a box of this kind is its own padding (`endIsPadding`): a click there makes no block (geometry.mjs endOf). */
+export const endIsPadding = (boxKind) => Boolean(BOXES[boxKind]?.endIsPadding);
+
 /** The unit kinds Backspace deletes whole once nothing is written in them (`removedEmpty`). */
 export const REMOVED_EMPTY = Object.keys(UNITS).filter((kind) => UNITS[kind].removedEmpty);
 
@@ -742,7 +777,7 @@ export const hasOuter = (boxKind) => BOXES[boxKind]?.outer !== false;
 /** The unit kinds with a frame of their own (`boxed`): a double click between two makes a paragraph (insert/). */
 export const BOXED = flagged("boxed");
 
-/** The unit kinds a click to the right of one selects: the boxed ones and those that say `beside` (beside.mjs). */
+/** The unit kinds a click to the right of one, past the text area it stands in, selects: the boxed ones and those that say `beside` (beside.mjs). */
 export const BESIDE = new Set([...BOXED, ...flagged("beside")]);
 
 /** Whether a unit of this kind stands beside another now, `element` being that unit (`beside`, `inRow`). */

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

@@ -1,3 +1,4 @@
+import { SECTION_ICON } from "../icons.mjs";
 import { HIGHLIGHT } from "../kit.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 // 分区: section.doc-section, a container of ordinary blocks (its title is whatever heading it
@@ -18,7 +19,7 @@ export default {
   name: "section",
   listed: () => t("分区"), hideable: false,
   units: {
-    section: { name: t("分区"), match: [{ rank: 40, tag: "section" }], chapter: true, fixed: true, handle: "bar" },
+    section: { name: t("分区"), icon: SECTION_ICON, match: [{ rank: 40, tag: "section" }], chapter: true, fixed: true, handle: "bar" },
   },
   boxes: {
     section: { role: "flow", name: t("分区"), groups: true },

package/browser/editor/components/set-apart.mjs

@@ -0,0 +1,24 @@
+import { escapeText } from "../../shared/escape.mjs";
+
+/**
+ * How a box of blocks set apart (a highlight block, a callout: `match` its elements) is copied, one
+ * rule for both, their clipboard's hooks (registry.mjs `clipboard`) for the block of `type`: its
+ * blocks; one with words straight in it (an Agent's, a callout written the old way), 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.
+ */
+export const setApart = (type, match) => ({
+  describe(node, { isHost, holding, colorOf, copiedType, serializeInner, plain }) {
+    if (!node.matches(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, blocks, ...(color ? { color } : {}) } : null;
+  },
+  endsIn(unit, { blocksIn, boxesOf, colorOf }) {
+    if (!unit.matches(match)) return undefined;
+    const color = colorOf(unit);
+    return [{ type, blocks: blocksIn(boxesOf(unit)), ...(color ? { color } : {}) }];
+  },
+  check: (block, { container }) => container(block),
+});

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

@@ -6,6 +6,8 @@ import { columnWidths, slotsOf, tileSlots, tileSpans } from "../../../shared/tab
 import { CELL_ALIGN_CLASSES, CELL_BOLD_CLASS, CELL_VALIGN_CLASSES } from "../../../shared/components/table.mjs";
 import { CHART_KEY, CHART_SOURCE } from "../../../shared/table-chart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
+import { escapeAttribute } from "../../../shared/escape.mjs";
+import { servedFile } from "../../page/served.mjs";
 
 const ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2"/><path d="M3.25 8h13.5M3.25 12.1h13.5M8.25 3.75v12.5"/>');
 
@@ -53,7 +55,9 @@ export default {
       boxed: true,
       resizable: ".doc-table-wrap[data-ge-unit]", // its right and bottom edges, once it is in the file
       copy: "itself", // within the report a copy keeps all of its markup (its scope line, its frame's size); another report's gets the table's data (tableData) made anew
-      attributes: { [NUMBERS]: (value) => value === "off" },
+      // 识别数字列 off, and the key a chart or a view reads it by (src/shared/table-chart.mjs), which 视图 ›
+      // of its menu puts on a table that has none (page/table/views.mjs) in the step that puts the view in.
+      attributes: { [NUMBERS]: (value) => value === "off", [CHART_SOURCE]: (value) => CHART_KEY.test(value) },
       sizes: {
         [SPAN]: { min: 0.15, max: 3 }, // past 1 the table is wider than the text and scrolls in its frame
         [TABLE_HEIGHT]: { min: 80, max: 4000, px: true, none: true, height: true },
@@ -62,7 +66,7 @@ export default {
   },
   components: ["doc-table-wrap", "doc-table-meta"],
   hosts: {
-    cell: { name: t("表格单元格"), caps: () => ["empty", "links"] },
+    cell: { name: t("表格单元格"), caps: () => ["empty", "links"], pictures: { show: showPictures, write: writtenPicture } },
   },
   types: {
     // Made by a paste or the "/" menu (三列三行, a header row: page.mjs newTable): no class here, so
@@ -115,9 +119,11 @@ export const CELL_BOLD = CELL_BOLD_CLASS;
 export const CELL_LOOKS = [...BLOCK_COLORS, ...CELL_ALIGNS.map(([name]) => name), ...CELL_VALIGNS.map(([name]) => name), CELL_BOLD];
 
 /**
- * The look a cell takes when it becomes a header cell (a th: the header row's or column's toggle, a
- * row or column moved there, a cell made there: page.mjs) and loses when it stops being one: bold,
- * and the gray fill unless it has a color of its own. Nothing else of the kit's sets a header apart.
+ * The look a cell takes when it becomes a header row's cell (a th that is no row's header: 标题行's
+ * toggle, a row moved there, a cell made there: page.mjs) and loses when it stops being one: bold,
+ * and the gray fill unless it has a color of its own. A header column's cell (th scope="row") has
+ * none: 标题列 only makes the first column stay when the frame scrolls sideways (the user's,
+ * 2026-11-06). Nothing else of the kit's sets a header apart.
  */
 export const HEADER_LOOK = [CELL_BOLD, "doc-highlight-gray"];
 
@@ -304,3 +310,56 @@ export function tableData(element, serializeInner) {
     ...(chart && CHART_KEY.test(chart) ? { chart } : {}),
   };
 }
+
+// ---------- a cell's pictures ----------
+// 单元格里的图片 (page/table/pictures.mjs; source/blocks.mjs cellPictureProblem says what the file
+// takes): an <img> amid a cell's words, a picture of the report's folder. On the page it shows where
+// the server serves the folder (`src`, page/served.mjs), the file it is in data-ge-src, as an
+// image block's; the cell's text writes it back from its element (the host's `pictures`, which
+// core.mjs reads): <img src="assets/<file>" alt="…" width="N">, its attributes in the order the
+// element has them, the file's own; one the browser put in from elsewhere, its file no picture of
+// the folder, is no part of the text.
+
+const PICTURE_FILE = /^assets\/[A-Za-z0-9][A-Za-z0-9._-]{0,80}$/;
+const PICTURE_WIDTH = /^[1-9]\d{0,3}$/;
+const isPicture = (node) => node?.nodeType === 1 && node.localName === "img";
+
+/** The file of a picture in a cell (assets/<file>), or null: none the page writes. */
+export const pictureFile = (img) => {
+  const file = img.getAttribute("data-ge-src") || img.getAttribute("src") || "";
+  return PICTURE_FILE.test(file) ? file : null;
+};
+
+/**
+ * A picture for a cell: the file `path` (assets/<file>) shown where the server serves it, its `alt`
+ * words, its `width` in pixels (none: the kit's own size).
+ */
+export function cellPicture(doc, path, { alt = "", width = null } = {}) {
+  const img = doc.createElement("img");
+  img.setAttribute("src", servedFile(path));
+  img.setAttribute("alt", alt);
+  if (width) img.setAttribute("width", String(Math.round(width)));
+  img.setAttribute("data-ge-src", path);
+  img.draggable = false;
+  return img;
+}
+
+// A cell's pictures as the file has them made the page's (core.mjs prepareBlock): shown where the server serves them.
+function showPictures(root) {
+  for (const img of root.querySelectorAll("img")) {
+    const file = img.getAttribute("src") ?? "";
+    if (!PICTURE_FILE.test(file)) continue;
+    img.setAttribute("data-ge-src", file);
+    img.setAttribute("src", servedFile(file));
+    img.draggable = false;
+  }
+}
+
+// A picture as the cell's text writes it: its markup, "" (no file of the folder), null (no picture).
+function writtenPicture(node) {
+  if (!isPicture(node)) return null;
+  const file = pictureFile(node);
+  if (!file) return "";
+  const said = [...node.attributes].filter(({ name, value }) => name === "src" || name === "alt" || (name === "width" && PICTURE_WIDTH.test(value)));
+  return `<img${said.map(({ name, value }) => ` ${name}="${escapeAttribute(name === "src" ? file : value)}"`).join("")}>`;
+}