@heycys/gallery 0.1.0 → 0.1.2

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

@@ -1,18 +1,23 @@
 import { escapeText } from "../../../shared/escape.mjs";
-import { ATTRIBUTE, FALLBACK, INSTANCE, PACKAGE_ID, instanceMatch, refusedInCopy } from "../../../shared/components/installed.mjs";
+import { ATTRIBUTE, FALLBACK, INSTANCE, PACKAGE_ID, SLOT, SLOT_PART, componentAt, heldBy, instanceMatch, refusedInCopy, slotsIn } from "../../../shared/components/installed.mjs";
 import { wordsIn } from "../../page/clipboard/own/writers.mjs";
-import { svg } from "../icons.mjs";
+import { BLOCK_ICON } from "../icons.mjs";
+import { VIEW_FROM } from "../../../shared/table-chart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 组件: the one kind of block every component package is to the engines, the host of a package's
 // instances (src/shared/components/installed.mjs). It uses only what a definition offers any block:
 // the engines know no package and no part of one. An instance is one block, moved, copied and
-// deleted whole, no container, nothing going in or out; its parts edited as text are text blocks of
-// this kind (file.mjs finds them, as its manifest says), and everything else in it is the component's
-// (page.mjs). A press on its outer frame or on the handle is Gallery's, as for any block.
+// deleted whole; its parts edited as text are text blocks of this kind (file.mjs finds them, as its
+// manifest says), and everything else in its own region is the component's (page.mjs). A press on
+// its outer frame or on the handle is Gallery's, as for any block. Its slots (data-doc-slot, the parts
+// its manifest edits as "flow") are the one way in and out: boxes of kind "slot", keyed by the part's
+// name, whose blocks are the document's, as a column's are (notion-lite's column: a block's own area
+// of child blocks, the frame around it none of theirs).
 //
-// Where the engines reach it (src/editor/page/ unless named): ../source/ (the scan stops at one,
-// natural.mjs and old names pass it by: `isInstance`, src/shared/components/), hints/ (`readOnly`), clipboard/own/
+// Where the engines reach it (src/editor/page/ unless named): ../source/ (the scan stops at one and
+// goes on in its slots, natural.mjs and old names pass its own region by: `isInstance`,
+// `instanceSlots`, src/shared/components/), hints/ (`readOnly`), clipboard/own/
 // (`clipboard`, copied as itself), caret.mjs (`sealed`: `editable`, where most of the page's events
 // start from), text-select/, editor.mjs's entries and the tools that go by a kit's class (`keepsKeys`,
 // page.mjs), formula/, the "/" menu, the format bar and clipboard/ (`formula`). The "/" menu and 在下方新建
@@ -23,21 +28,27 @@ import { t } from "../../../shared/i18n/index.mjs";
 
 // An instance as Markdown, the words of the file and none of what a component draws: as its package's
 // manifest says (`markdown`), each part in the file's order with `parts`, a table a table, one edited
-// as text a paragraph and any other its words and pictures, or with `text`, and where no package says,
-// its words as any whole block's.
+// as text a paragraph, a slot its blocks as each is written anywhere (notion-lite's column, `flatten`)
+// and any other its words and pictures, or with `text`, and where no package says, its words as any
+// whole block's.
 function instanceParts(unit, how) {
   const found = how.packageOf(unit.getAttribute(ATTRIBUTE));
   if (found?.markdown !== "parts") return [how.words(unit)];
   return saidParts(unit, found.parts).flatMap(({ part, edit }) => {
+    if (edit === "flow") {
+      const lines = how.lines(how.unitsOf(part)); // as a column's, not in from the margin as a disclosure's
+      return lines.length > 0 ? [lines] : [];
+    }
     if (part.matches("table")) return [how.writtenAs("table", part)];
     return (edit === "text" ? [how.own(part)] : [how.wordsIn(part).join(" · "), ...how.picturesIn(part)]).map((line) => [line]);
   }).filter(([first, ...more]) => first || more.length > 0);
 }
 
-// The parts of an instance that say something, each once and none inside another, in the file's order.
+// The parts of an instance that say something, each once and none inside another, in the file's order:
+// of its own region, a slot only as a part edited as flow and no other part.
 function saidParts(unit, parts) {
   const said = Object.values(parts).flatMap(({ at, edit }) => [...unit.querySelectorAll(at)].map((part) => ({ part, edit })))
-    .filter(({ part }) => !part.matches(`${INSTANCE}, script, style, template`) && part.parentElement.closest(INSTANCE) === unit);
+    .filter(({ part, edit }) => !part.matches(`${INSTANCE}, script, style, template`) && part.parentElement.closest(INSTANCE) === unit && heldBy(part) === unit && (edit === "flow") === part.matches(SLOT_PART));
   const found = [...new Map(said.map((each) => [each.part, each])).values()];
   return found.filter(({ part }) => !found.some((other) => other.part !== part && other.part.contains(part)))
     .sort((a, b) => (a.part.compareDocumentPosition(b.part) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
@@ -46,10 +57,13 @@ function saidParts(unit, parts) {
 // A copy of an instance as blocks, what other programs and a field of plain text read of it: as its
 // package says, as a page export writes it (instanceParts), but for pictures, which are no words. Its
 // words are paragraphs, as `markdown: "parts"` has them; a text part that is a heading says so for the
-// clipboard's HTML (`as`: the type it is written as there, the parts writer's).
-function copiedParts(copy, found, { serializeInner, clipboardOf, copiedType }) {
-  if (found?.markdown !== "parts" || !found.parts) return [{ type: "paragraph", html: escapeText(wordsIn(copy).join(" · ")) }].filter(({ html }) => html);
+// clipboard's HTML (`as`: the type it is written as there, the parts writer's). A slot is its blocks
+// (`flows`, by name, as the clipboard describes them), the copy's slots being empty; its words are
+// among the instance's (`words`, of it with what its slots hold).
+function copiedParts(copy, found, { serializeInner, clipboardOf, copiedType }, { flows = {}, words = wordsIn(copy) } = {}) {
+  if (found?.markdown !== "parts" || !found.parts) return [{ type: "paragraph", html: escapeText(words.join(" · ")) }].filter(({ html }) => html);
   return saidParts(copy, found.parts).flatMap(({ part, edit }) => {
+    if (edit === "flow") return flows[part.getAttribute(SLOT)] ?? [];
     if (part.matches("table")) return [clipboardOf("table").data(part, { serializeInner })].filter(Boolean);
     const html = edit === "text" ? serializeInner(part) : escapeText(wordsIn(part).join(" · "));
     const own = edit === "text" ? copiedType(part) : null;
@@ -73,22 +87,23 @@ function elementOf(html, doc = globalThis.document) {
 // The most a description carries of one piece of markup (blocks.mjs `string`).
 const CARRIED = 1e6;
 
-// A block of four corners and a notch, a piece that fits something else.
-export const ICON = svg('<path d="M4 6.75A1.75 1.75 0 0 1 5.75 5H8a2 2 0 0 1 4 0h2.25A1.75 1.75 0 0 1 16 6.75V9a2 2 0 0 1 0 4v1.25A1.75 1.75 0 0 1 14.25 16H5.75A1.75 1.75 0 0 1 4 14.25z"/>');
+// The mark of any custom block with no picture of its own: a card of text (icons.mjs).
+export const ICON = BLOCK_ICON;
 
 export default {
   name: "installed",
-  // Ahead of every rule of the page's: all that stands in an instance is the component's, its
-  // controls too, and one of no package, or whose component failed, says why nothing there answers.
+  // Ahead of every rule of the page's: all that stands in an instance's own region is the component's,
+  // its controls too, and one of no package, or whose component failed, says why nothing there answers.
+  // What its slots hold is the page's, each block saying what it says anywhere (componentAt).
   readOnly: [
-    { rank: 1, at: `[${FALLBACK}] *`, says: t("这个组件没有运行：内容只能看，可以整块移动、复制和删除。") },
-    { rank: 2, at: `[${ATTRIBUTE}] *`, says: null },
+    { rank: 1, at: (element) => componentAt(element) && Boolean(heldBy(element)?.hasAttribute(FALLBACK)), says: t("这个组件没有运行：内容只能看，可以整块移动、复制和删除。") },
+    { rank: 2, at: componentAt, says: null },
   ],
   attributes: [ATTRIBUTE],
   sealed: INSTANCE,
   units: {
     installed: {
-      name: t("组件@block"),
+      name: t("自定义块@block"),
       icon: ICON,
       match: [{ rank: 0, tag: ["div", "section"], attr: ATTRIBUTE }],
       boxed: true,
@@ -96,6 +111,11 @@ export default {
       copy: "itself",
     },
   },
+  boxes: {
+    // A slot of an instance (data-doc-slot, its manifest's part edited as flow): the document's blocks, as a
+    // column's are, a disclosure's content's rules for an empty one (holdsOne, a plain div a group).
+    slot: { role: "flow", name: t("内容区"), groups: true, holdsOne: true, selectAll: { content: true }, find: (unit, key) => slotsIn(unit).find((slot) => slot.getAttribute(SLOT) === key) ?? null },
+  },
   hosts: {
     // A part a manifest edits as text: words as in a paragraph, emptied but never split, joined or
     // taken out on its own, as a media block's caption is. No formula: the kit draws none in an
@@ -108,24 +128,57 @@ export default {
     // no unit to be made from (`data-ge-copy`).
     installed: {
       tag: "div", kind: "installed", bare: true,
-      extras: (element) => ({ package: element.getAttribute(ATTRIBUTE), ...(element.hasAttribute("data-ge-copy") ? { html: element.getAttribute("data-ge-copy") } : {}) }),
+      // Its markup is the file's, from its template or what was carried (`data-ge-copy`, its slots
+      // empty); what its slots hold goes apart, blocks made on the page as any (`children`, each in the
+      // slot `boxKeys` names), so that the commit's answer names each, as for a block made in a column.
+      // A view of a table (a table's 视图 › made it of its template, or a paste carried one) says the key
+      // of the table it reads as the page has it (`from`, its VIEW_FROM, which a paste may have given it
+      // anew: clipboard/own/chart-keys.mjs), which the file writes on it (file.mjs source); one carried
+      // with none on it says null (a view pasted into another document, its key taken off there), so
+      // that the file has none either, whatever its markup carried.
+      extras(element, { nodes }) {
+        const held = slotsIn(element).filter((slot) => slot.hasAttribute("data-ge-box")).flatMap((slot) => (nodes?.(slot) ?? []).map((node) => [slot.getAttribute(SLOT), node]));
+        return {
+          package: element.getAttribute(ATTRIBUTE),
+          ...(element.hasAttribute("data-ge-copy") ? { html: element.getAttribute("data-ge-copy") } : {}),
+          ...(element.hasAttribute(VIEW_FROM) ? { from: element.getAttribute(VIEW_FROM) } : element.hasAttribute("data-ge-copy") ? { from: null } : {}),
+          ...(slotsIn(element).length > 0 ? { children: held.map(([, node]) => node), boxKeys: held.map(([key]) => key) } : {}),
+        };
+      },
       clipboard: {
         kind: "parts", read: instanceParts,
-        // What carries it where its unit is not (cut, another document): its markup as the kit would
-        // start it, with the ids it names itself, and what it says to whoever reads no blocks. One
-        // whose markup no clipboard may bring anywhere (a handler, a script) has none, and stays a
-        // copy within its document.
-        data(node, { serializeInner, copyOf, clipboardOf, copiedType, page }) {
+        // What carries it where its unit is not (cut, another document), and within its document too
+        // when it has slots: its markup as the kit would start it, with the ids it names itself, its
+        // slots empty, the blocks each holds described as any (`flows`, by name: blocks made on the page
+        // where it is pasted, as a disclosure's are), and what it says to whoever reads no blocks. One
+        // whose markup no clipboard may bring anywhere (a handler, a script) has none, and stays a copy
+        // within its document; so does one with a slot that is no box (words straight in it), or with a
+        // block in one the page cannot make, which then is no copy at all (clipboard/own/describe.mjs).
+        data(node, { serializeInner, copyOf, clipboardOf, copiedType, page, holding }) {
+          const slots = slotsIn(node);
+          const flows = Object.fromEntries(slots.map((slot) => [slot.getAttribute(SLOT), slot.hasAttribute("data-ge-box") ? holding?.(slot) ?? null : null]));
+          if (Object.values(flows).some((blocks) => !blocks)) return null;
           const copy = copyOf(node, { named: true });
+          const words = wordsIn(copy);
+          slotsIn(copy).forEach((slot) => slot.replaceChildren());
           const html = copy.outerHTML;
           if (html.length > CARRIED || refused(copy) || !elementOf(html, node.ownerDocument)) return null;
           const id = node.getAttribute(ATTRIBUTE);
-          return { type: "installed", package: id, html, blocks: copiedParts(copy, page("installed")?.packageOf(id), { serializeInner, clipboardOf, copiedType }) };
+          return { type: "installed", package: id, html, ...(slots.length > 0 ? { flows } : {}), blocks: copiedParts(copy, page("installed")?.packageOf(id), { serializeInner, clipboardOf, copiedType }, { flows, words }) };
         },
+        // What its slots hold, among a paste's blocks (blocks.mjs `holds`).
+        holds: (block) => (block.flows && typeof block.flows === "object" ? Object.values(block.flows).filter(Array.isArray).flat() : []),
+        // Its slots empty in its markup, each named once in `flows`, which holds blocks a slot takes.
         check(block, { string, valid }) {
           if (!string(block.package, 200) || !PACKAGE_ID.test(block.package) || !string(block.html, CARRIED) || !Array.isArray(block.blocks) || !block.blocks.every((inner) => valid(inner))) return false;
           const root = elementOf(block.html);
-          return Boolean(root?.matches(instanceMatch(block.package))) && !refused(root);
+          if (!root?.matches(instanceMatch(block.package)) || refused(root)) return false;
+          const slots = slotsIn(root);
+          if (slots.length === 0) return block.flows === undefined;
+          const names = slots.map((slot) => slot.getAttribute(SLOT));
+          const { flows } = block;
+          return Boolean(flows) && typeof flows === "object" && !Array.isArray(flows) && new Set(names).size === names.length && names.length === Object.keys(flows).length
+            && slots.every((slot) => !slot.firstElementChild && !slot.textContent.trim() && Array.isArray(flows[slot.getAttribute(SLOT)]) && flows[slot.getAttribute(SLOT)].every((inner) => valid(inner, "slot")));
         },
       },
     },

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

@@ -1,10 +1,14 @@
-import { ARRIVING, ATTRIBUTE, DATA_MOST, DATA_SHOWN, FALLBACK, FIELDS, INSTANCE, NO_TEXT, PACKAGE_MARK, SCHEMA, fitsDataScript, instanceMatch, isDataScript, noDataPart, refusedInData, schemaAhead } from "../../../shared/components/installed.mjs";
+import { ARRIVING, ATTRIBUTE, DATA_MOST, DATA_SHOWN, FALLBACK, FIELDS, INSTANCE, NO_TEXT, PACKAGE_MARK, SCHEMA, SLOT, SLOT_PART, componentAt, fitsDataScript, heldBy, instanceMatch, isDataScript, noDataPart, refusedInData, schemaAhead, slotsIn } from "../../../shared/components/installed.mjs";
 import { referencedIds } from "../../../shared/copy-ids.mjs";
-import { language } from "../../../shared/i18n/index.mjs";
+import { language, t } from "../../../shared/i18n/index.mjs";
 import { caretAt, editable } from "../../page/caret.mjs";
+import { htmlToBlocks, parseClipboardHTML } from "../../page/clipboard/import/html.mjs";
+import { toBlocks } from "../../page/clipboard/import/to-blocks.mjs";
+import { build as buildBlock } from "../../page/clipboard/own/blocks.mjs";
 import { copyOf } from "../../page/clipboard/own/describe.mjs";
 import { ownIds } from "../../page/clipboard/own/ids.mjs";
-import { unitElement } from "../../page/core.mjs";
+import { firstHost, newHost, unitElement } from "../../page/core.mjs";
+import { addStyle } from "../../page/ui.mjs";
 import { accepts, capsFor } from "../registry.mjs";
 import { ICON } from "./index.mjs";
 import { followCatalog, followSettings, isBehind } from "./served.mjs";
@@ -38,6 +42,18 @@ import { followCatalog, followSettings, isBehind } from "./served.mjs";
 // the reader writes over someone else's change of a part (仍然调整) is a step of its own from theirs
 // (`overwrite`), so that one undo gives the file's back.
 // One past its manifest's `schema` is read-only, its words and all.
+//
+// Its slots (data-doc-slot, the parts its manifest edits as flow) are the page's: boxes of kind "slot"
+// (index.mjs), whose blocks are edited, moved and undone as anywhere, a press or a key in one no
+// component's (componentAt), whatever state the instance is in, one of no package too. Enter in a text
+// part goes into the first slot after it, as in a disclosure's title. An empty one says so while the
+// page is edited, and a click on it makes a paragraph (insert/, holdsOne), as a disclosure's content.
+// The component reads a slot (context.part) and hears what changes in it (source), and writes nothing
+// there: a slot it takes off its instance is put back where it stood (`keepSlots`), so that no commit
+// takes the reader's blocks out. An instance made on the page, from "/", a clipboard or 恢复我的, has its
+// slots as boxes made on the page, their blocks made on the page as any (`slotsMade`), which the commit
+// carries apart from its markup (index.mjs `extras`) and the answer names, so that they edit at once; a
+// copy carries them so too, in its document as well (`copiesAsItself`, index.mjs `data`).
 
 let held = null; // the map, what makes a block with no editor (the transfer worker) finds none of
 
@@ -119,9 +135,10 @@ function bring({ id, stamp, definition, kit = [], tags }) {
 const partsOf = (instance) => Object.entries(globalThis.DocKit?.description(instance.getAttribute(ATTRIBUTE))?.parts ?? {});
 // Whether an instance holds its content in a shape its manifest does not reach, as the kit was told it.
 const ahead = (instance) => schemaAhead(instance.getAttribute(SCHEMA), globalThis.DocKit?.description(instance.getAttribute(ATTRIBUTE))?.schema);
-// The elements of a part an instance holds, none of an instance in it nor of what the kit draws of a
-// script of data there, which is no element of the file's.
-const elementsOf = (instance, at) => [...instance.querySelectorAll(at)].filter((part) => !part.matches(INSTANCE) && part.parentElement.closest(INSTANCE) === instance && !part.closest(`.${DATA_SHOWN}`));
+// The elements of a part an instance holds, of its own region (none of an instance in it, none of what
+// its slots hold, no slot itself) and none of what the kit draws of a script of data there, which is
+// no element of the file's.
+const elementsOf = (instance, at) => [...instance.querySelectorAll(at)].filter((part) => !part.matches(INSTANCE) && !part.matches(SLOT_PART) && part.parentElement.closest(INSTANCE) === instance && heldBy(part) === instance && !part.closest(`.${DATA_SHOWN}`));
 
 // The elements of an instance its component writes, [[name, element]], as the server finds them
 // (file.mjs dataParts): of each part edited as data the first it holds, as context.part does. One in
@@ -170,7 +187,7 @@ const openness = (instance) => (instance.hasAttribute(FALLBACK) ? "false" : "tru
 function followFallback(instance) {
   const value = openness(instance);
   for (const part of instance.querySelectorAll('[data-ge-kind="installed"]')) {
-    if (part.parentElement.closest(INSTANCE) === instance && part.getAttribute("contenteditable") !== value) part.setAttribute("contenteditable", value);
+    if (part.parentElement.closest(INSTANCE) === instance && heldBy(part) === instance && part.getAttribute("contenteditable") !== value) part.setAttribute("contenteditable", value);
   }
 }
 
@@ -196,12 +213,40 @@ function newInstance(doc, html) {
   return instance;
 }
 
-/** An instance from what a clipboard carried (`data`): the file is written from that markup, which the commit sends. */
-export function build({ doc, block }) {
+/**
+ * The slots of a new instance as boxes made on the page, each holding what `fill(slot)` gives (blocks
+ * made on the page), or an empty paragraph, where the reader writes: what the commit writes in them
+ * goes apart from the instance's markup (index.mjs `extras`), and the page knows each block of it by
+ * the commit's answer, as one made in a new column.
+ */
+function slotsMade(doc, instance, fill) {
+  for (const slot of slotsIn(instance)) {
+    const blocks = fill(slot);
+    slot.setAttribute("data-ge-box", "");
+    slot.setAttribute("data-ge-box-kind", "slot");
+    slot.replaceChildren(...(blocks.length > 0 ? blocks : [newHost(doc, "paragraph")]));
+  }
+}
+
+// What a template's slot holds, as blocks made on the page: read as HTML pasted from elsewhere is
+// (clipboard/import/), each block what a paste makes of it there.
+function blocksOfTemplate(doc, slot) {
+  if (!slot.firstElementChild && !slot.textContent.trim()) return [];
+  const specs = htmlToBlocks(parseClipboardHTML(slot.innerHTML), {});
+  return specs.length > 0 ? toBlocks(specs, "slot").map((block) => buildBlock(doc, block)) : [];
+}
+
+/**
+ * An instance from what a clipboard carried (`data`): the file is written from that markup, which the
+ * commit sends, its slots empty; what they held comes as blocks of their own (`flows`, by name),
+ * made again here as any pasted block (`inner`).
+ */
+export function build({ doc, block, inner }) {
   const entry = entryOf(block.package);
   if (entry) bring(entry);
   const instance = newInstance(doc, block.html);
   instance.setAttribute("data-ge-copy", block.html);
+  slotsMade(doc, instance, (slot) => inner?.(block.flows?.[slot.getAttribute(SLOT)] ?? []) ?? []);
   editableParts(instance);
   return instance;
 }
@@ -232,7 +277,7 @@ const inStep = (entry) => listed && entry !== null && !overtaken(entry);
  * blocks where it came with none.
  */
 function arrive(instance) {
-  if (!instance.isConnected || instance.parentElement?.closest(INSTANCE)) return;
+  if (!instance.isConnected || heldBy(instance)) return;
   const id = instance.getAttribute(ATTRIBUTE);
   const entry = entryOf(id);
   if (isBehind(id) && !inStep(entry)) return void window.dispatchEvent(new CustomEvent("doc-components-changed"));
@@ -242,12 +287,34 @@ function arrive(instance) {
   if (!instance.querySelector("[data-ge-block], [data-ge-part]")) editableParts(instance);
 }
 
+// A slot of the page's (a box) taken off an instance still on the page, by its component's script
+// (`node`, what was taken off from `from`, before `next`; the instance itself taken off is the editor's
+// doing, and none of this): a slot is the document's, which no component writes, so it goes back where
+// it stood, what it holds with it, and the reader's blocks stay, on the page and in the file. Who
+// wrote the package hears of it.
+function keepSlots(node, from, next) {
+  if (node.nodeType !== 1 || node.matches(INSTANCE) || !from.isConnected) return;
+  const instance = from.closest(INSTANCE);
+  const slots = [node, ...node.querySelectorAll(SLOT_PART)].filter((slot) => slot.matches(`:is(${SLOT_PART})[data-ge-box]`) && !slot.parentElement?.closest(INSTANCE));
+  if (!instance || slots.length === 0) return;
+  for (const slot of slots) from.insertBefore(slot, next?.parentNode === from ? next : null);
+  console.error(`[DocKit] ${instance.getAttribute(ATTRIBUTE)}: a slot left its instance: it is put back, its blocks the document's`);
+}
+
 // A package's picture where a menu shows a mark.
 const pictureOf = ({ preview }) => (preview ? `<img src="${preview}" alt="">` : null);
 
+// A slot the file has empty (an Agent's): what a disclosure's content says (details/page.mjs), a click
+// on it making a paragraph there (insert/ clickBlank).
+const SLOT_EMPTY = `
+  [data-ge-editing] [data-doc-slot][data-ge-box]:not(:has(> *))::before { content: ${JSON.stringify(t("空白内容区。点击或拖动区块到这里。"))}; display: block; padding: 3px 2px; border-radius: 4px; color: var(--ge-tx3); cursor: pointer; transition: background 20ms ease-in; }
+  [data-ge-editing] [data-doc-slot][data-ge-box]:not(:has(> *)):hover::before { background: var(--ge-hover); }
+`;
+
 /** An instance on the page: what its events are, what Enter does in its words, and what the menus make of its package. */
-export function create({ map, newParagraph, active, sourceStep }) {
+export function create({ map, newParagraph, active, sourceStep, struct }) {
   held = map;
+  addStyle(SLOT_EMPTY);
   // Whether a key in an instance, on no field of it, is undo or redo: a button or what a component draws
   // has no undo of its own, and a press on one that wrote leaves the focus there, from where the page's
   // undo goes on through every step, as notion-lite's does from anywhere (onHistoryKey). A field keeps
@@ -294,12 +361,30 @@ export function create({ map, newParagraph, active, sourceStep }) {
     return true;
   }
   return {
-    keepsKeys: (node, event) => node?.nodeType === 1 && Boolean(node.parentElement?.closest(INSTANCE)) && !editable(node) && !pageUndo(node, event),
-    undoHere: (node) => Boolean(node.parentElement?.closest(INSTANCE)) && !editable(node),
+    keepsKeys: (node, event) => componentAt(node) && !editable(node) && !pageUndo(node, event),
+    undoHere: (node) => componentAt(node) && !editable(node),
     keys: {
-      // notion-lite's captionEnter: words of a block that are not the block's own line do not split,
-      // Enter there is a text block after the block, the caret in it.
+      // In a text part with a slot after it (in the file's order): the caret goes into the slot, as from
+      // a disclosure's title into its content (details/page.mjs), at the start of its first block, or in
+      // a paragraph made first in it, one step of undo. Else notion-lite's captionEnter: words of a
+      // block that are not the block's own line do not split, Enter there is a text block after the
+      // block, the caret in it.
       enter({ host }) {
+        const instance = host.parentElement?.closest(INSTANCE);
+        const slot = instance && slotsIn(instance).find((each) => each.hasAttribute("data-ge-box") && host.compareDocumentPosition(each) & Node.DOCUMENT_POSITION_FOLLOWING && !host.contains(each));
+        if (slot) {
+          const first = firstHost(slot);
+          if (first) caretAt(first, "start");
+          else {
+            const paragraph = newHost(document, "paragraph");
+            struct([slot], [], () => {
+              slot.prepend(paragraph);
+              return { touched: [paragraph], focus: paragraph };
+            });
+            caretAt(paragraph, "start");
+          }
+          return true;
+        }
         const unit = unitElement(host);
         const box = unit?.parentElement;
         if (!box || !accepts(box.getAttribute("data-ge-box-kind") ?? "flow", "paragraph")) return false;
@@ -311,30 +396,56 @@ export function create({ map, newParagraph, active, sourceStep }) {
     // by block types), by its id, as notion-lite's variants: a row of the menus, found by its name in
     // either language and its words, and what makes one (notion-lite's
     // insertTypedBlock: the caret in its first text part; with none, in an empty paragraph after it, as
-    // for a divider).
-    menuVariants: () => Object.fromEntries((map.components ?? []).filter(({ template, state }) => template && state === "normal").map((entry) => [entry.id, {
-      label: entry.name[language],
-      icon: pictureOf(entry) ?? ICON,
-      words: `${entry.name.zh} ${entry.name.en} ${entry.id} ${entry.words}`.toLowerCase(),
-      sample: true,
-      preview: { src: entry.preview, says: entry.description[language] },
-      create({ doc, put: place, paragraph }) {
-        bring(entry);
-        const instance = newInstance(doc, entry.template);
-        ownIds(doc, [instance]);
-        place(instance);
-        return editableParts(instance)[0] ?? place(paragraph());
-      },
-    }])),
+    // for a divider). Its slots are boxes made on the page at once, what the template has in each made
+    // blocks of the page's (an empty paragraph where it has none), so that the reader writes in one
+    // before the instance is saved, and Enter in a text part goes into the slot after it. One whose needs
+    // hold "tables" is a view a table's 视图 › offers too (`readsTables`: page/table/views.mjs), which
+    // binds the one it makes to the table (VIEW_FROM). Where two offered have one name (the same block
+    // of two packs: 我的待办 of Gallery 风格 and of 柔光风格), each row says its pack's name after it in grey
+    // (`of`: the menu's ge-pop-of).
+    menuVariants: () => {
+      const offered = (map.components ?? []).filter(({ template, state }) => template && state === "normal");
+      const counts = new Map();
+      for (const entry of offered) counts.set(entry.name[language], (counts.get(entry.name[language]) ?? 0) + 1);
+      return Object.fromEntries(offered.map((entry) => [entry.id, {
+        label: entry.name[language],
+        ...(counts.get(entry.name[language]) > 1 ? { of: entry.pack?.name?.[language] ?? entry.id.split("/")[0] } : {}),
+        icon: pictureOf(entry) ?? ICON,
+        words: `${entry.name.zh} ${entry.name.en} ${entry.id} ${entry.words}`.toLowerCase(),
+        sample: true,
+        readsTables: entry.needs?.includes("tables") ?? false,
+        preview: { src: entry.preview, says: entry.description[language] },
+        create({ doc, put: place, paragraph }) {
+          bring(entry);
+          const instance = newInstance(doc, entry.template);
+          slotsMade(doc, instance, (slot) => blocksOfTemplate(doc, slot));
+          ownIds(doc, [instance]);
+          place(instance);
+          return editableParts(instance)[0] ?? firstHost(instance) ?? place(paragraph());
+        },
+      }]));
+    },
+    /**
+     * Whether a copy of an instance's unit stands for it: not where it has slots, whose blocks that copy
+     * would write whole, with no ids the page knows; such an instance is copied by what it carries alone
+     * (index.mjs `data`: its slots' blocks apart), in its document too.
+     */
+    copiesAsItself: (unit) => slotsIn(unit).length === 0,
     /** What the reader calls a block of it: its package's name, where the page knows its package. */
     nameOf: (unit) => entryOf(unit.getAttribute(ATTRIBUTE))?.name[language] ?? null,
     /**
      * One the file dropped that the page still shows, a reader's to keep: it goes from now on as what a
-     * clipboard carried does, its markup as the kit would start it. Its template would not hold what
-     * the reader has.
+     * clipboard carried does, its markup as the kit would start it, its slots empty: what they hold is
+     * made on the page from now on too (sync-state.mjs asMade), and goes apart (index.mjs `extras`).
+     * Its template would not hold what the reader has.
      */
     renew(instance) {
-      if (!instance.hasAttribute("data-ge-copy")) instance.setAttribute("data-ge-copy", copyOf(instance, { named: true }).outerHTML);
+      if (!instance.hasAttribute("data-ge-copy")) {
+        const copy = copyOf(instance, { named: true });
+        const boxes = slotsIn(instance).map((slot) => slot.hasAttribute("data-ge-box"));
+        slotsIn(copy).forEach((slot, index) => { if (boxes[index]) slot.replaceChildren(); });
+        instance.setAttribute("data-ge-copy", copy.outerHTML);
+      }
       instance.setAttribute("data-ge-type", "installed");
       return true;
     },
@@ -401,12 +512,13 @@ export function create({ map, newParagraph, active, sourceStep }) {
       }
       document.addEventListener("doc-component-edit", (event) => { if (write(event.detail, event.target)) event.preventDefault(); });
       new MutationObserver((records) => {
-        for (const { type, target, addedNodes } of records) {
+        for (const { type, target, addedNodes, removedNodes, nextSibling } of records) {
           if (type === "attributes") followFallback(target);
           for (const node of addedNodes) {
             if (node.nodeType !== 1 || node.hasAttribute("data-doc-dev")) continue;
             [...(node.matches(INSTANCE) ? [node] : []), ...node.querySelectorAll(INSTANCE)].forEach(arrive);
           }
+          for (const node of removedNodes) keepSlots(node, target, nextSibling);
         }
       }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [FALLBACK] });
       window.addEventListener("doc-catalog-changed", readList);

package/browser/editor/components/installed/served.mjs

@@ -17,13 +17,14 @@ let any = false; // the server could not say which: the page connected a moment
 export const isBehind = (id) => any || behind.has(id);
 
 /**
- * `components`, the list a page holds, as the reader's settings now say: the state each package says,
- * which a menu reads, at once and with nothing shown again (`doc-settings-changed`). A package that
- * comes on is in none of that yet: it comes with the list the page reads as the catalog changes, as
- * one added does (`doc-catalog-changed`, ./page.mjs).
+ * `components`, the list a page holds, as the reader's settings now say: the state each package says
+ * by its `places` and gallery.json's hidden, shown, disabled, unlisted and packs off (settingState, inDocumentMenus: the
+ * server's own rule), which a menu reads, at once and with nothing shown again (`doc-settings-changed`).
+ * A package that comes on is in none of that yet: it comes with the list the page reads as the catalog
+ * changes, as one added does (`doc-catalog-changed`, ./page.mjs).
  */
 export function followSettings(components, settings) {
-  for (const entry of components) entry.state = settingState(entry.id, settings);
+  for (const entry of components) entry.state = settingState(entry.id, { hidden: [], shown: [], disabled: [], unlisted: [], packsOff: [], ...settings }, entry.places);
 }
 
 /** Hears what changed of the catalog while the page held no instance of it. */

package/browser/editor/components/instances.mjs

@@ -0,0 +1,18 @@
+import { ATTRIBUTE, INSTANCE } from "../../shared/components/installed.mjs";
+
+// A custom page's card read for the instance it holds, by the host's own mark of an instance
+// (shared/components/installed.mjs INSTANCE, ATTRIBUTE: a div or section naming its package): the one
+// the server reads (shared/page-cards.mjs readPage, which refuses an article or a span carrying the
+// attribute, and page check fails it) and the kit's page runtime reads. The board
+// (src/editor/page/board/index.mjs) is a page engine and knows no package's marks, so what it asks of
+// the DOM it asks here: a card with an `<article data-doc-component="…">` is a card with no instance on
+// the page too, offered no settings and sending no part, instead of one the service then refuses.
+
+/** The instance card `card` holds (its child that is one), or null. */
+export const instanceOf = (card) => [...card.children].find((child) => child.matches(INSTANCE)) ?? null;
+
+/** The package id an instance names (<scope>/<name>), or null for no instance. */
+export const packageOf = (instance) => instance?.getAttribute(ATTRIBUTE) ?? null;
+
+/** The nearest instance around `node` (itself counted), or null. */
+export const instanceAround = (node) => node.closest(INSTANCE);

package/browser/editor/components/kit.mjs

@@ -51,6 +51,9 @@ export const CODE = Object.freeze({
 /** A highlight block, the opening summary included: the one place the editor says which elements are one. */
 export const HIGHLIGHT = Object.freeze({ match: component("highlight").match });
 
+/** A callout (提示块). */
+export const CALLOUT = Object.freeze({ match: component("callout").match });
+
 // A display formula block and an inline one (the math description's two rules).
 const [mathInline, mathBlock] = component("math").match.split(",").map((rule) => rule.trim());
 export const MATH = Object.freeze({ inline: mathInline, block: mathBlock });

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

@@ -6,7 +6,7 @@ import { begin, done, made } from "../../page/made.mjs";
 import { createMenu } from "../../page/menu.mjs";
 import { keptByComponent } from "../../page/page-objects.mjs";
 import { hideTooltip, tooltipAt } from "../../page/tooltip.mjs";
-import { addStyle, element } from "../../page/ui.mjs";
+import { addStyle, element, textButton } from "../../page/ui.mjs";
 import { CHECKED, CONTINUE, FLOW, START, TODO, heldListType, holdsSays, listType, mergeSays } from "./index.mjs";
 import { BLOCK_TYPES, accepts } from "../registry.mjs";
 import { FLOW_KEY, isFlowLabel } from "../../../shared/components/list.mjs";
@@ -186,8 +186,7 @@ const STYLE = `
   .ge-list-value-title { padding: 10px 12px 0; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
   .ge-list-value input { box-sizing: border-box; flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none; background: var(--ge-hover); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-line); }
   .ge-list-value input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
-  .ge-list-value button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ge-accent); color: #fff; font: inherit; cursor: pointer; }
-  .ge-list-value button:hover { background: var(--ge-accent-hover); }
+  .ge-list-value .ge-btn { flex: none; }
 `;
 
 // ---------- keys, numbers ----------
@@ -494,9 +493,7 @@ export function create({ struct, say, convertHost, targetsOf, look, isEditing, b
       } else return;
       event.preventDefault();
     });
-    const confirm = element("button", { type: "button", text: t("确定") });
-    confirm.addEventListener("mousedown", (event) => event.preventDefault());
-    confirm.addEventListener("click", apply);
+    const confirm = textButton(t("确定"), apply, { primary: true });
     const view = element("div", {}, element("div", { class: "ge-list-value-title", text: t("新编号为") }), element("div", { class: "ge-list-value" }, field, confirm));
     item.setAttribute("data-ge-number", "open");
     menu.open([{ node: view, cells: [] }], rect, { label: t("修改编号值"), icons: false, width: 148, highlight: false, onClose: () => item.removeAttribute("data-ge-number") });