@heycys/gallery 0.1.0 → 0.1.2

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

@@ -11,8 +11,9 @@ import { t } from "../../../shared/i18n/index.mjs";
 
 // Resizing chart cards and tables in the preview ("Sizes" in the kit's styles/sizes.css). With the pointer on the
 // right edge of a card or table, or on its bottom edge (a chart's plot height, a table's scroll
-// height), the cursor changes; dragging shows a blue line where the edge goes and the size that
-// makes, and letting go applies it as one undo step (Esc cancels). Widths are shares of the width
+// height), the cursor changes; dragging shows a gray line where the edge goes (darker where it
+// snaps) and the bottom notice says the size that makes while the drag lasts (no label beside the
+// line: the user, 2026-11-07), and letting go applies it as one undo step (Esc cancels). Widths are shares of the width
 // the block stands in: the reading width, or its column's. A card's width snaps to the middle and
 // to the end; a centered card grows on both sides. A table's
 // width moves its own right end by as much as the pointer moves, also when the table is wider than
@@ -23,17 +24,19 @@ import { t } from "../../../shared/i18n/index.mjs";
 // height of its frame: shorter than its code, the code scrolls inside it, and the edge snaps to the
 // height that shows all of it (no height of its own). Letting go where the drag started changes
 // nothing. Anything that ends the press another way (the capture lost, the window losing the
-// focus, the page hidden) cancels it; the lines and the label belong to the drag (overlays.mjs). A
-// code block's bottom edge has no label: the line alone (where it snaps, the status line says after).
+// focus, the page hidden) cancels it; the lines belong to the drag (overlays.mjs), and the notice it
+// put up goes with it. Snapping takes the edge within SNAP (6px) of a place, little enough that a
+// size near one can still be had (14px before 2026-11-07, which the user found too strong).
 
 const STYLE = `
   ${gestureLock("data-ge-resize=\"x\"", { cursor: "ew-resize" })}
   ${gestureLock("data-ge-resize=\"y\"", { cursor: "ns-resize" })}
-  .ge-resize-line { position: fixed; left: 0; top: 0; z-index: ${Z.guide}; border-radius: 2px; background: rgb(151 197 241); pointer-events: none; }
-  .ge-resize-label { position: fixed; left: 0; top: 0; z-index: ${Z.label}; padding: 2px 7px; border-radius: 5px; background: var(--doc-accent, #2678d8); color: #fff; font: 12px/18px var(--doc-font, system-ui, sans-serif); white-space: nowrap; pointer-events: none; }
+  .ge-resize-line { position: fixed; left: 0; top: 0; z-index: ${Z.guide}; border-radius: 1px; background: var(--ge-guide-hot); pointer-events: none; }
+  .ge-resize-line[data-snap] { background: var(--ge-guide-snap); }
 `;
 const GRAB = { inside: 3, outside: 8 }; // how near an edge the pointer takes it, inside and outside the block (px)
-const SNAP = 14; // px
+const SNAP = 6; // px
+const LIVE = 60000; // ms: the notice saying the size dragged to stays while the drag lasts (it is taken off when it ends)
 const MIN_WIDTH = 160; // px: the least a card's edge is dragged to (a table's is its columns' floors)
 // The sizes (name and range) are each component's description's (registry SIZES): the same ones the
 // server checks a size by.
@@ -45,11 +48,12 @@ const heightRange = (kind) => range(kind, heightOf(kind));
 
 /**
  * units: Map(id -> { kind }) from the edit map. active(): whether resizing may start.
- * look(element, { sizes }, select): the editor's undoable change of sizes. say(text): the status line.
+ * look(element, { sizes }, select): the editor's undoable change of sizes. say(text, kind, hold): the
+ * bottom notice; settle(): the notice taken off.
  * owns(node): whether a table's right and bottom edges are the table tools' (table/widths.mjs: a
  * click arms one, a drag then is this tool's, `startTable`).
  */
-export function createResize({ units, active, look, say, owns = () => false }) {
+export function createResize({ units, active, look, say, settle = () => {}, owns = () => false }) {
   addStyle(STYLE);
   let hover = null; // { node, axis } under the pointer
   let drag = null;
@@ -134,12 +138,12 @@ export function createResize({ units, active, look, say, owns = () => false }) {
     const snaps = [{ x: table.press, label: t("原宽度"), keep: true }, { x: table.press + (box.width - table.width), label: t("铺满正文") }];
     const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
     if (snap) edge = snap.x;
-    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before, snapped: true };
     // Rounded up, so the frame is never narrower than where it was let go (at the floors, say).
     const share = Math.ceil(Math.max(range("table", SPAN).min, width(edge) / box.width) * 1000) / 1000;
     const label = snap?.label ?? (share > 1 ? t("超宽表 · 表宽 {0}px，横向滚动", Math.round(width(edge)))
       : edge <= narrowest + 0.5 ? t("最窄 · {0}%", Math.round(share * 100)) : `${Math.round(share * 100)}%`);
-    return { edge, label, value: Math.abs(share - 1) < 0.005 ? "1" : String(Math.min(share, range("table", SPAN).max)) };
+    return { edge, label, value: Math.abs(share - 1) < 0.005 ? "1" : String(Math.min(share, range("table", SPAN).max)), snapped: Boolean(snap) };
   }
 
   // Where the edge may go and where it snaps: back where it started (no change), the middle (a
@@ -158,13 +162,13 @@ export function createResize({ units, active, look, say, owns = () => false }) {
     let edge = Math.min(Math.max(x, near), far);
     const snap = snaps.find((candidate) => Math.abs(candidate.x - edge) <= SNAP);
     if (snap) edge = snap.x;
-    if (snap?.keep) return { edge, label: snap.label, value: drag.before };
+    if (snap?.keep) return { edge, label: snap.label, value: drag.before, snapped: true };
     const share = Math.round(Math.max(range(kind, SPAN).min, shareAt(edge)) * 1000) / 1000;
     const whole = Math.abs(share - 1) < 0.005;
     const label = snap?.label ?? `${Math.round(share * 100)}%${centered ? t(" · 居中") : ""}`;
     // A card at the whole width is the default.
     const value = whole ? (kind === "figure" && !centered ? null : "1") : String(Math.min(share, range(kind, SPAN).max));
-    return { edge, label, value };
+    return { edge, label, value, snapped: Boolean(snap) };
   }
 
   // ---------- heights ----------
@@ -184,8 +188,8 @@ export function createResize({ units, active, look, say, owns = () => false }) {
       const header = rect.height - code.getBoundingClientRect().height;
       const whole = rect.height + (code.scrollHeight - code.clientHeight); // all its lines, no scrolling
       const height = Math.min(Math.max(y - rect.top, Math.min(whole, header + heightRange(kind).min)), whole);
-      if (before !== null && Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: before };
-      if (whole - height <= SNAP) return { edge: rect.top + whole, label: t("显示全部代码"), value: null };
+      if (before !== null && Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: before, snapped: true };
+      if (whole - height <= SNAP) return { edge: rect.top + whole, label: t("显示全部代码"), value: null, snapped: true };
       const frame = Math.round(height - header);
       return { edge: rect.top + header + frame, label: t("高 {0}px · 其余滚动查看", frame), value: `${frame}px` };
     }
@@ -194,19 +198,20 @@ export function createResize({ units, active, look, say, owns = () => false }) {
       const drawn = drawnHeight(svg);
       const scale = svg.getBoundingClientRect().height / drawn || 1;
       const floor = 160; // the least a chart is drawn at (a softer floor than the one a size is checked by)
-      if (Math.abs(rect.bottom - y) <= SNAP) return { edge: rect.bottom, label: t("原高度"), value: before };
+      if (Math.abs(rect.bottom - y) <= SNAP) return { edge: rect.bottom, label: t("原高度"), value: before, snapped: true };
       // Level with a card beside it (in another column of its row): the bottoms meet.
       const beside = drag.beside.find((bottom) => Math.abs(bottom - y) <= SNAP);
       const height = Math.round(Math.min(Math.max(drawn + ((beside ?? y) - rect.bottom) / scale, floor), heightRange(kind).max));
       const edge = rect.bottom + (height - drawn) * scale;
-      return { edge, label: beside !== undefined && Math.abs(edge - beside) < 1.5 ? t("与旁边对齐 · 图表高 {0}px", height) : t("图表高 {0}px", height), value: `${height}px` };
+      const level = beside !== undefined && Math.abs(edge - beside) < 1.5;
+      return { edge, label: level ? t("与旁边对齐 · 图表高 {0}px", height) : t("图表高 {0}px", height), value: `${height}px`, snapped: level };
     }
     const all = node.scrollHeight + (node.offsetHeight - node.clientHeight);
     let height = Math.min(Math.max(y - rect.top, heightRange(kind).min), all);
-    if (Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: drag.before };
+    if (Math.abs(rect.top + height - rect.bottom) <= SNAP / 2) return { edge: rect.bottom, label: t("原高度"), value: drag.before, snapped: true };
     if (height >= all - 2) {
       const fits = all <= scrollHeight(node); // the default scroll area shows them all
-      return { edge: rect.top + all, label: t("显示全部行"), value: fits ? null : "none" };
+      return { edge: rect.top + all, label: t("显示全部行"), value: fits ? null : "none", snapped: true };
     }
     height = Math.round(height);
     return { edge: rect.top + height, label: t("高 {0}px", height), value: `${height}px` };
@@ -231,6 +236,7 @@ export function createResize({ units, active, look, say, owns = () => false }) {
     const rect = node.getBoundingClientRect();
     drag = {
       node, axis, kind, name, before, rect,
+      press: { x: event.clientX, y: event.clientY },
       box: contentBox(node.parentElement),
       // A card's height snaps level with the cards beside it: the bottoms of those in the other columns of its row.
       beside: axis === "y" && kind === "figure" ? besideBottoms(node) : [],
@@ -243,19 +249,22 @@ export function createResize({ units, active, look, say, owns = () => false }) {
         press: event.clientX,
         atEnd: node.scrollLeft + node.clientWidth >= node.scrollWidth - 2,
       } : null,
-      label: kind === "code" ? null : element("div", { class: "ge-resize-label" }),
       result: null,
+      told: null, // what the notice says now
     };
     const session = drag;
     session.lines = (session.centered ? [0, 1] : [0]).map(() => element("div", { class: "ge-resize-line" }));
-    for (const part of [session.label, ...session.lines].filter(Boolean)) mount(own(part, "resize", { owner: node, alive: () => drag === session }));
+    for (const part of session.lines) mount(own(part, "resize", { owner: node, alive: () => drag === session }));
     note("resize", `start ${axis}`);
     document.documentElement.setPointerCapture?.(event.pointerId);
     update(event.clientX, event.clientY);
   }
 
+  // What is being resized, in the notice's words: 卡片 and 宽度, 表格 and 高度, 代码块 and 高度.
+  const what = (kind, axis) => [kind === "figure" ? t("卡片") : kind === "code" ? t("代码块") : t("表格"), axis === "x" ? t("宽度") : t("高度")];
+
   function update(x, y) {
-    const { axis, rect, box, lines, label } = drag;
+    const { axis, kind, rect, box, lines } = drag;
     drag.result = axis === "x" ? widthAt(x) : heightAt(y);
     const { edge } = drag.result;
     if (axis === "x") {
@@ -264,24 +273,28 @@ export function createResize({ units, active, look, say, owns = () => false }) {
         width: "2px", height: `${Math.round(rect.height)}px`,
         transform: `translate(${Math.round((index ? mirror : edge) - 1)}px, ${Math.round(rect.top)}px)`,
       }));
-      if (label) label.style.transform = `translate(${Math.round(Math.min(edge + 10, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.max(8, y - 30))}px)`;
     } else {
       Object.assign(lines[0].style, { width: `${Math.round(rect.width)}px`, height: "2px", transform: `translate(${Math.round(rect.left)}px, ${Math.round(edge - 1)}px)` });
-      if (label) label.style.transform = `translate(${Math.round(Math.min(x + 12, innerWidth - label.offsetWidth - 8))}px, ${Math.round(Math.min(edge + 8, innerHeight - 28))}px)`;
     }
-    if (label) label.textContent = drag.result.label;
+    lines.forEach((line) => line.toggleAttribute("data-snap", Boolean(drag.result.snapped)));
+    // The size in the bottom notice once the pointer has moved (a press alone says nothing), said again
+    // only when it changes (a workbench is told each time).
+    if (!drag.told && Math.hypot(x - drag.press.x, y - drag.press.y) < 2) return;
+    const told = t("{0}{1}：{2}", ...what(kind, axis), drag.result.label);
+    if (told !== drag.told) say(told, "note", LIVE);
+    drag.told = told;
   }
 
   function finish(commit) {
     if (!drag) return;
-    const { node, axis, kind, name, before, lines, label, result, table } = drag;
+    const { node, axis, kind, name, lines, result, table, told } = drag;
     note("resize", commit ? "released" : "cancelled");
     drag = null;
     lines.forEach((line) => line.remove());
-    label?.remove();
+    if (told) settle(); // the size dragged to: what is said next (or nothing) replaces it
     setHover(null);
     if (commit && result && look(node, { sizes: { [name]: result.value } }, null)) {
-      say(t("已调整{0}{1}：{2} · Ctrl+Z 撤销", kind === "figure" ? t("卡片") : kind === "code" ? t("代码块") : t("表格"), axis === "x" ? t("宽度") : t("高度"), result.label));
+      say(t("已调整{0}{1}：{2} · Ctrl+Z 撤销", ...what(kind, axis), result.label));
       // Scrolled to its end, a table stays so: its new end shows at the frame's edge, ready for the
       // next drag (after tables.js has laid it out again, on the next frame).
       if (table?.atEnd) requestAnimationFrame(() => requestAnimationFrame(() => { node.scrollLeft = node.scrollWidth; }));
@@ -322,6 +335,6 @@ export function createResize({ units, active, look, say, owns = () => false }) {
       setHover(null);
     },
     /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
-    get nodes() { return drag ? [...drag.lines, drag.label].filter(Boolean) : []; },
+    get nodes() { return drag ? [...drag.lines] : []; },
   };
 }

package/browser/editor/page/selection/delete.mjs

@@ -10,19 +10,21 @@ import { t } from "../../../shared/i18n/index.mjs";
 // tab is clicked (undo clicks it back). One undo step, which selects the blocks again. A box that
 // always holds a block gets an empty paragraph once they are gone (core.mjs tidyEmptied), the caret
 // in it. That one empty paragraph stays (keptAnyway: it would be put back as it is), so deleting
-// only it does nothing and says nothing.
+// only it does nothing and says nothing. A folded heading goes with what it hides, or as the section
+// it covers whole (fold/ takenWith).
 
 /**
  * info: block-info.mjs. selection: selection/index.mjs. struct(parents, touched, mutate): the
  * editor's undoable structural change (history.mjs). say: the status line. closeMenu(): the block
- * menu closes. forget(): the handle forgets the block it stood beside.
+ * menu closes. forget(): the handle forgets the block it stood beside. folds: the headings' folds (fold/).
  */
-export function createDelete({ info, selection, struct, say, closeMenu, forget }) {
-  const { kindOf, nameOf, keepText } = info;
+export function createDelete({ info, selection, struct, say, closeMenu, forget, folds = null }) {
+  const { kindOf, nameOf, keepText, named } = info;
 
   return function remove(targets = selection.picked) {
     closeMenu();
-    const list = ordered([targets].flat().filter(alive)).filter((target) => !keptAnyway(target));
+    const picked = ordered([targets].flat().filter(alive));
+    const list = (folds ? folds.takenWith(picked) : picked).filter((target) => !keptAnyway(target));
     if (list.length === 0) return;
     const refused = list.map((target) => [target, keepText(target, list)]).find(([, reason]) => reason);
     if (refused) {
@@ -53,7 +55,7 @@ export function createDelete({ info, selection, struct, say, closeMenu, forget }
     });
     if (done?.caret) caretAt(done.caret, "start");
     const emptied = nodes.some((node) => !list.includes(node));
-    const name = list.length === 1 ? nameOf(nodes[0]) : t("{0} 块", list.length);
+    const name = list.length === 1 ? nameOf(nodes[0]) : folds ? folds.namedWith(picked, list, named) : t("{0} 块", list.length);
     say(t("已删除{0}{1}{2} · Ctrl+Z 撤销", name, emptied ? t("（外层已空，一并删除）") : "", tabs.length > 0 ? t("，连同其中的内容") : ""));
   };
 }

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

@@ -2,6 +2,7 @@ import { unitElement, unitsOf, withLeads } from "../core.mjs";
 import { alive, ordered } from "../block-info.mjs";
 import { entersAfter } from "../beside.mjs";
 import { createFills } from "../fills.mjs";
+import { FOLDED } from "../folded.mjs";
 import { describe, note, report } from "../overlays.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
@@ -20,6 +21,12 @@ import { t } from "../../../shared/i18n/index.mjs";
 // page, made to match the selection the moment it changes (render), never on a later frame, so no
 // fill outlives its block's selection, and none is drawn while the block tools are off. The frames
 // only keep them where their blocks are (paint); a fill that cannot be drawn goes.
+//
+// What a folded heading hides (fold/) is never selected: select() leaves it out, Shift+↑/↓ and ↑/↓
+// pass over it; what takes a folded heading away whole takes it along when it acts (fold/ takenWith).
+
+// Whether a block is hidden by a folded heading (data-ge-folded on it or a block around it).
+const folded = (node) => node.closest(`[${FOLDED}]`) !== null;
 
 /**
  * info: block-info.mjs. active(): whether block tools may show. say(text, kind, hold): the status
@@ -37,7 +44,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   /** Select a block, or several (none is clearing); `quiet`: without saying so. */
   function select(targets, { quiet = false } = {}) {
     closeMenu();
-    const next = ordered([targets].flat().filter(alive));
+    const next = ordered([targets].flat().filter(alive)).filter((node) => !folded(node));
     if (next.length === 0) return clear();
     if (next.length !== picked.length || next.some((node, index) => node !== picked[index])) {
       picked = next;
@@ -79,7 +86,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   // Shift+↑/↓: the selection widens (or narrows) by one block among the anchor's neighbours.
   function extend(delta) {
     const container = anchor?.parentElement;
-    const list = container ? unitsOf(container) : [];
+    const list = container ? unitsOf(container).filter((unit) => !folded(unit)) : [];
     const at = list.indexOf(anchor);
     if (at < 0) return;
     const inside = picked.map((node) => list.indexOf(node)).filter((index) => index >= 0);
@@ -94,7 +101,7 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   function sibling(node, forward) {
     for (let next = forward ? node.nextElementSibling : withLeads(node)[0].previousElementSibling; next; next = forward ? next.nextElementSibling : next.previousElementSibling) {
       const unit = unitElement(next);
-      if (unit && unit.parentElement === node.parentElement && unit !== node) return unit;
+      if (unit && unit.parentElement === node.parentElement && unit !== node && !folded(unit)) return unit;
     }
     return null;
   }

package/browser/editor/page/served.mjs

@@ -0,0 +1,14 @@
+// Where the page shows a file of the report's folder (assets/<file>): the server's asset route,
+// which editor.mjs gives (serveFiles) once it knows the report. A picture in a table cell's text is
+// shown there (components/table/ cellPicture). No imports: a component's index.mjs reads it while
+// the registry is still being made.
+
+let fileUrl = (path) => path;
+
+/** Where the page shows a file of the report's folder from now on: `urlOf(path)`. */
+export const serveFiles = (urlOf) => {
+  fileUrl = urlOf;
+};
+
+/** Where the page shows `path`, a file of the report's folder (assets/<file>). */
+export const servedFile = (path) => fileUrl(path);

package/browser/editor/page/session.mjs

@@ -1,20 +1,41 @@
 import { OLD_PROTOCOL, PROTOCOL, PROTOCOLS, VERSION, keyCombo } from "../../shared/session.mjs";
+import { lookOf, lookOfElement } from "../../shared/document-look.mjs";
 
 // The report page inside a workbench (an iframe of the same origin): it answers a few commands and
 // tells the workbench its state, never the report's content. Nothing happens when the page is not
 // embedded. The protocol is src/shared/session.mjs; how a workbench uses it, docs/workbench.md.
 //
-// A message counts only from the parent window, of this origin and protocol. A command names the
+// A workbench of another workspace shows a draft of this one from its own origin (docs/workbench.md
+// "Drafts of other workspaces"), naming that origin in the frame's address (?shell=<origin>): the page
+// then asks its own server whether that is a Gallery server of this computer (GET
+// /__gallery/workspace/shell: on the registry, running, its token and process as it announces them),
+// and talks to it alone once it is, holding what it says until then; one that is not hears nothing and
+// is heard by nothing, so that no other page of this computer drives a document by framing it. Going,
+// such a page says `bye` (the workbench of another origin cannot see it go).
+//
+// A message counts only from the parent window, of this origin (or the shell's, vouched for) and protocol. A command names the
 // report it is meant for: one for another report (the iframe went to another page meanwhile) is
 // refused. Every command gets exactly one reply, once it is done. Besides the editor's commands the
-// session itself answers four: `theme` (show the report light or dark, or as the reader chose, without
-// storing it), `keys` (key combinations to hand to the workbench when the page does not use them),
+// session itself answers five: `theme` (show the report light or dark, or as the reader chose, without
+// storing it), `look` (show the document in a look, 字体与布局: { look }, src/shared/document-look.mjs; the
+// workbench writes it into doc.json), `keys` (key combinations to hand to the workbench when the page does not use them),
 // `scroll-top` (back to the top when scrolled down) and `close-card` (the detail card on top closes as a
 // press on its backdrop closes it: the workbench asks on a press on its own bars, or Esc there, while
-// the page says a card is open, `card` in what it sends).
+// the page says a card is open, `card` in what it sends). A card stands in the middle of the
+// workbench's window, not of the frame (centreCards, below). A block's 允许访问 (doc-net-consent, the kit's)
+// is sent as `consent`.
 
 /** A page opened in a frame on its own (?solo), not as the workbench's report: no session, its own notices. */
 export const SOLO = new URLSearchParams(location.search).has("solo");
+/** The origin of a workbench of another workspace showing this page (?shell=<origin>), or null: this one's. */
+const SHELL = (() => {
+  const named = new URLSearchParams(location.search).get("shell");
+  return named && named !== location.origin ? named : null;
+})();
+
+// Whether this page's server vouches for the workbench at `origin` (GET /__gallery/workspace/shell).
+const vouched = (origin) => fetch(`/__gallery/workspace/shell?origin=${encodeURIComponent(origin)}`, { cache: "no-store" })
+  .then((answer) => answer.json()).then((answer) => answer?.shell === true, () => false);
 
 /**
  * slug: the report's; snapshot(): { title, state } (state: STATE_FLAGS of src/shared/session.mjs);
@@ -34,11 +55,29 @@ export const SOLO = new URLSearchParams(location.search).has("solo");
  */
 export function connectWorkbench({ slug, snapshot, commands, modals }) {
   if (window.parent === window || SOLO) return null;
+  centreCards(modals);
+  // The workbench's origin: this one's, or the shell's once this page's server vouched for it (null till
+  // then: what the page says is held, and is dropped when it does not).
+  let parentOrigin = SHELL ? null : location.origin;
+  let held = SHELL ? [] : null;
+  if (SHELL) {
+    vouched(SHELL).then((ok) => {
+      const waiting = held;
+      held = null;
+      if (!ok) return;
+      parentOrigin = SHELL;
+      for (const [type, fields, protocols] of waiting) send(type, fields, protocols);
+      // A workbench of another origin sees no pagehide of this page: it is told.
+      addEventListener("pagehide", () => send("bye", {}), { once: true });
+    });
+  }
   // The id the workbench speaks (src/shared/session.mjs, OLD_PROTOCOL): null until its first command,
   // and meanwhile every message goes under both, so that a workbench of either version hears it.
   let spoken = null;
   const send = (type, fields, protocols = spoken ? [spoken] : [PROTOCOL, OLD_PROTOCOL]) => {
-    for (const protocol of protocols) window.parent.postMessage({ protocol, v: VERSION, type, slug, ...fields }, location.origin);
+    if (held) return void held.push([type, fields, protocols]);
+    if (!parentOrigin) return;
+    for (const protocol of protocols) window.parent.postMessage({ protocol, v: VERSION, type, slug, ...fields }, parentOrigin);
   };
   let last = null;
   const update = () => {
@@ -60,12 +99,28 @@ export function connectWorkbench({ slug, snapshot, commands, modals }) {
     event.preventDefault();
     send("key", { key });
   });
+  // A block's card asks the reader to let it online (its 允许访问 button: the kit's net.js): the workbench
+  // opens its consent dialog, the one 设置 › 组件列表 opens, and writes what the reader says; the page
+  // hears it on its event stream, and the kit starts the instance again.
+  addEventListener("doc-net-consent", (event) => {
+    const { block, hosts } = event.detail ?? {};
+    if (typeof block !== "string") return;
+    event.preventDefault();
+    send("consent", { block, hosts: Array.isArray(hosts) ? hosts : [] });
+  });
   const own = {
     async theme({ theme = null }) {
       if (theme !== null && theme !== "light" && theme !== "dark") return { ok: false, reason: "theme" };
       dispatchEvent(new CustomEvent("doc-theme-request", { detail: { theme } })); // the kit's ui.js
       return { ok: true };
     },
+    // The document's look shown at once (the kit's ui.js puts it on <html> and lays out again), never
+    // stored here: the workbench writes doc.json. Answers with the look the page shows then.
+    async look({ look = null }) {
+      if (look !== null && (typeof look !== "object" || Array.isArray(look))) return { ok: false, reason: "look" };
+      dispatchEvent(new CustomEvent("doc-look-request", { detail: { look: lookOf(look) } }));
+      return { ok: true, look: lookOfElement(document.documentElement) };
+    },
     async keys({ keys: list }) {
       if (!Array.isArray(list) || !list.every((key) => typeof key === "string")) return { ok: false, reason: "keys" };
       keys = new Set(list);
@@ -86,7 +141,7 @@ export function connectWorkbench({ slug, snapshot, commands, modals }) {
 
   addEventListener("message", async (event) => {
     const message = event.data;
-    if (event.source !== window.parent || event.origin !== location.origin) return;
+    if (event.source !== window.parent || !parentOrigin || event.origin !== parentOrigin) return;
     if (!PROTOCOLS.includes(message?.protocol) || message.v !== VERSION || message.type !== "command") return;
     spoken = message.protocol;
     const run = Object.hasOwn(all, message.name) ? all[message.name] : null;
@@ -115,3 +170,43 @@ export function connectWorkbench({ slug, snapshot, commands, modals }) {
     workspace: () => send("workspace", {}),
   };
 }
+
+// A detail card stands in the middle of the workbench's window, as the workbench's own dialogs do
+// (组件列表, 写作偏好), not in the middle of this frame right of its sidebar and under its top bar;
+// the workbench covers its bars while the page says a card is open (`card`), the card's backdrop
+// the rest. The kit's dialog.css puts the card's middle at --doc-dialog-centre-x and -y, as far as
+// the frame lets it stay clear of its sides, and makes it 80% as high as --doc-dialog-window-height.
+// They are read from the frame's place in the workbench's window (of this origin, as every message
+// of the session is), and said in a sheet the document adopts, which is in no markup (a copy of the
+// view, the file); again as the frame changes size (the window resized, the sidebar opened, closed or
+// dragged wider) and as a card opens or closes.
+function centreCards(modals) {
+  let sheet;
+  try {
+    sheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  } catch {
+    return; // a browser with no constructed sheets: the card in the middle of the frame
+  }
+  let said = null;
+  const place = () => {
+    let rule = "";
+    try {
+      const frame = window.frameElement;
+      const outer = frame?.ownerDocument.documentElement;
+      if (outer) {
+        const box = frame.getBoundingClientRect();
+        const style = frame.ownerDocument.defaultView.getComputedStyle(frame);
+        const left = box.left + frame.clientLeft + parseFloat(style.paddingLeft);
+        const top = box.top + frame.clientTop + parseFloat(style.paddingTop);
+        rule = `:root { --doc-dialog-centre-x: ${outer.clientWidth / 2 - left}px; --doc-dialog-centre-y: ${outer.clientHeight / 2 - top}px; --doc-dialog-window-height: ${outer.clientHeight}px; }`;
+      }
+    } catch { /* a frame of another origin's page, or one taken away: in the middle of the frame */ }
+    if (rule === said) return;
+    said = rule;
+    sheet.replaceSync(rule);
+  };
+  place();
+  addEventListener("resize", place);
+  modals.listen(place);
+}

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

@@ -42,12 +42,12 @@ const INLINE = {
 };
 
 // Groups of the unfiltered menu: 基本区块, 高级区块 (media, code, tabs and formula blocks: what
-// holds more than text; the types' own `menu`, registry.mjs MENU_GROUPS), 组件 (what the variants
-// are now: the workspace's), and what is no block under 内联.
+// holds more than text; the types' own `menu`, registry.mjs MENU_GROUPS), 自定义块 (what the variants
+// are now: the workspace's custom blocks, plan §4.1's name for the group 组件 was), and what is no block under 内联.
 const SECTIONS = [
   { title: t("基本区块"), types: () => MENU_GROUPS.basic },
   { title: t("高级区块"), types: () => MENU_GROUPS.advanced },
-  { title: t("组件@group"), types: variantKeys },
+  { title: t("自定义块"), types: variantKeys },
 ];
 
 const infoOf = (key) => INLINE[key] ?? menuRow(key);

package/browser/editor/page/table/cell-bar.mjs

@@ -2,7 +2,7 @@ import { belowControl, colorSection, colorSwatch, FORMAT_ICONS, formatLook, list
 import { HIGHLIGHTS, TEXT_COLORS } from "../marks.mjs";
 import { placeBox } from "../placement.mjs";
 import { hideTooltip, shortcut } from "../tooltip.mjs";
-import { element, fadeIn, fadeOut, mount } from "../ui.mjs";
+import { addStyle, element, fadeIn, fadeOut, mount } from "../ui.mjs";
 import { alignItems } from "./aligns.mjs";
 import { TABLE_ICONS } from "./icons.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
@@ -19,6 +19,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 const APPEAR = 120;
 const PANEL = 120;
 const GAP = 8; // between the cells and the bar
+// A cell's fill is a block's: its swatches and its "A" show --doc-fill, not the words' deeper fill the kit gives a span.
+const STYLE = `.ge-cell-bar :is(.ge-ink-sample, .ge-swatch > span)[class*="doc-highlight-"] { background: var(--doc-fill); }`;
 
 /**
  * run(command, value): "color" with { kind: "text" | "background", color } (null: none), "bold", "align" with an
@@ -27,6 +29,7 @@ const GAP = 8; // between the cells and the bar
  */
 export function createCellBar(run) {
   formatLook();
+  addStyle(STYLE);
   const sample = element("span", { class: "ge-ink-sample", text: "A" });
   const tools = {
     color: tool("color", t("颜色"), sample, () => toggle("colors")),