@heycys/gallery 0.1.1 → 0.2.0

package/browser/editor/page/present-links.mjs

@@ -1,7 +1,8 @@
 import { t } from "../../shared/i18n/index.mjs";
 import { addressOn, elsewhere, fromFile, isPageAddress, mayBePage, pageAddress, workbenchHash } from "../../shared/page-address.mjs";
 import { inTrash, linkedPages, pageLinks } from "../../shared/page-links.mjs";
-import { PROTOCOL, VERSION } from "../../shared/session.mjs";
+import { entryOfKey } from "../../shared/extension-sidebar.mjs";
+import { SHELL, tell } from "./present-shell.mjs";
 
 // The links of a page shown in 演示视图 (?present: src/server/routes.mjs), which has no editor and whose
 // frame the presentation holds (src/workbench/app/features/present/). A link to a document or a block
@@ -13,7 +14,10 @@ import { PROTOCOL, VERSION } from "../../shared/session.mjs";
 // it is, with a word through it (the workbench's notice), and on another port what the list does not
 // hold (addressOn) is another program's, a web address like any. What the kit or the browser does with
 // a click stays theirs: an anchor, a link to save, a link of a target of its own, any click with a key
-// held.
+// held. A workbench's address that names a web link of the sidebar, or an entry of an extension's column
+// (#~<id>/<entry id>, one with an address), is a web address to the presentation: its page goes to a new
+// tab; an entry the list does not hold, or one with no address, is said gone as a document is. (In a draft's presentation, a frame
+// of its workspace's own server, the word goes to the workbench of another origin and a link keeps it around the page: present-shell.mjs.)
 
 const own = pageAddress(location.href)?.slug ?? null;
 const openTab = (address) => window.open(address, "_blank", "noopener");
@@ -21,20 +25,26 @@ const read = (route) => fetch(`/__gallery/workspace/${route}`).then((answer) =>
 
 function go({ slug, block }) {
   const fragment = block ? `#${encodeURIComponent(block)}` : "";
-  if (slug !== own) location.assign(`/generated/${slug}.html?present${fragment}`);
+  if (slug !== own) location.assign(`/generated/${slug}.html?present${SHELL ? `&shell=${encodeURIComponent(SHELL)}` : ""}${fragment}`); // a draft's presentation keeps the workbench around it (present-shell.mjs)
   else if (block) dispatchEvent(new CustomEvent("doc-jump-request", { detail: { hash: fragment } })); // the kit's jump, a step of the history as a link #<block id> is
 }
 
 function sayGone(name, { trash = [] } = {}) {
   const text = inTrash(trash, name) ? t("这个页面已删除。") : t("没有找到这个页面。");
-  window.parent.postMessage({ protocol: PROTOCOL, v: VERSION, type: "notice", slug: own, text }, location.origin);
+  tell("notice", { text });
 }
 
 async function follow(address) {
   if (!mayBePage(address)) return void openTab(address);
   const listed = await read("outline");
   const place = addressOn(address, listed?.reports ? pageLinks(linkedPages(listed.reports)) : null, location.origin);
-  if (place) go(place);
+  const web = place && listed?.reports?.[place.slug]?.kind === "link" ? listed.reports[place.slug] : null;
+  const entry = !place && !elsewhere(address, location.origin) ? entryOfKey(listed?.extensions, workbenchHash(address) ?? "") : null;
+  if (web) {
+    if (/^https?:/.test(web.url ?? "")) openTab(web.url);
+    else sayGone(web.slug, listed);
+  } else if (place) go(place);
+  else if (entry?.url) openTab(entry.url);
   else if (isPageAddress(address) && !elsewhere(address, location.origin)) sayGone(pageAddress(address)?.slug ?? workbenchHash(address), listed ?? undefined);
   else openTab(address);
 }

package/browser/editor/page/present-shell.mjs

@@ -0,0 +1,63 @@
+import { pageAddress } from "../../shared/page-address.mjs";
+import { KEEPS_KEYS, stepSection } from "../../shared/present-step.mjs";
+import { PROTOCOL, PROTOCOLS, VERSION } from "../../shared/session.mjs";
+
+// What a page shown in 演示视图 (?present: src/server/routes.mjs, no editor) says to the presentation around it and
+// hears from it. The presentation of a document of this workspace is a frame of the same origin, which it reaches into (its
+// scroll, its keys, its theme); that of a draft of another workspace (docs/workbench.md "Drafts of other workspaces") is a frame
+// of that workspace's server, named by the page's address (?shell=<the workbench's origin>) as the editor's page names it
+// (session.mjs): this page then asks its own server whether that is a Gallery server of this computer (GET
+// /__gallery/workspace/shell) and talks to it alone once it is, holding what it says until then; one that is not hears nothing.
+// It tells where the page is scrolled (`present-view`: { x, y }, with `ready` once the page can be spoken to) and the keys pressed
+// in it that are the presentation's (`present-key`: { key, ctrlKey, metaKey, altKey, kept (a control holds the key), prevented }),
+// and does what it is asked: `theme` (the workbench's, light or dark), `go-section` (上一节 / 下一节) and `scroll` ({ left, top }: the wheel). Every message is the session
+// protocol's envelope (src/shared/session.mjs).
+
+/** The origin of a workbench of another origin showing this page (?shell=<origin>), or null: this one's. */
+export const SHELL = (() => {
+  const named = new URLSearchParams(location.search).get("shell");
+  return named && named !== location.origin ? named : null;
+})();
+
+const vouched = (origin) => fetch(`/__gallery/workspace/shell?origin=${encodeURIComponent(origin)}`, { cache: "no-store" })
+  .then((answer) => answer.json()).then((answer) => answer?.shell === true, () => false);
+
+let parentOrigin = SHELL ? null : location.origin;
+let held = SHELL ? [] : null;
+
+/** Tell the presentation around the page (`window.parent`) something; held until its origin is vouched for, dropped when it is not. */
+export function tell(type, fields = {}) {
+  if (window.parent === window) return;
+  if (held) return void held.push([type, fields]);
+  if (!parentOrigin) return;
+  window.parent.postMessage({ protocol: PROTOCOL, v: VERSION, type, slug: pageAddress(location.href)?.slug ?? "", ...fields }, parentOrigin);
+}
+
+function bridge() {
+  let frame = 0;
+  const view = (ready = false) => tell("present-view", { x: scrollX, y: scrollY, ...(ready ? { ready: true } : {}) });
+  addEventListener("scroll", () => { frame ||= requestAnimationFrame(() => { frame = 0; view(); }); }, { passive: true });
+  addEventListener("keydown", (event) => {
+    if (event.isComposing) return;
+    tell("present-key", { key: event.key, ctrlKey: event.ctrlKey, metaKey: event.metaKey, altKey: event.altKey, kept: Boolean(event.target?.closest?.(KEEPS_KEYS)), prevented: event.defaultPrevented });
+  });
+  addEventListener("message", (event) => {
+    const message = event.data;
+    if (event.source !== window.parent || event.origin !== parentOrigin || !PROTOCOLS.includes(message?.protocol) || message.v !== VERSION || message.type !== "command") return;
+    if (message.name === "theme") dispatchEvent(new CustomEvent("doc-theme-request", { detail: { theme: message.theme === "dark" ? "dark" : "light" } })); // the kit's ui.js
+    else if (message.name === "go-section") stepSection(window, message.direction > 0 ? 1 : -1);
+    else if (message.name === "scroll") scrollBy({ left: Number(message.left) || 0, top: Number(message.top) || 0 }); // the wheel over the presentation's ink
+  });
+  view(true);
+}
+
+if (SHELL && window.parent !== window) {
+  vouched(SHELL).then((ok) => {
+    const waiting = held;
+    held = null;
+    if (!ok) return;
+    parentOrigin = SHELL;
+    for (const [type, fields] of waiting) tell(type, fields);
+    bridge();
+  });
+}

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-sans-font, 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/index.mjs

@@ -5,6 +5,7 @@ import { createFills } from "../fills.mjs";
 import { FOLDED } from "../folded.mjs";
 import { describe, note, report } from "../overlays.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
+import { UNFILLED_ALONE } from "../../components/registry.mjs";
 
 // Selected blocks (docs/editor.md, "Selecting blocks"): a set of blocks, none inside another, in
 // document order. A box selection drawn from empty space gives blocks of one container
@@ -109,10 +110,17 @@ export function createSelection({ info, active, say, closeMenu, schedule }) {
   // The fills made to match the selection now: those of blocks no longer selected (or no longer on
   // the page) go at once; each selected block shown gets its fill where it is, reaching past it as
   // reachOf says, never into a neighbour's (roomOf). One that cannot be drawn takes all the fills
-  // down (said once): better none than one in the wrong place.
+  // down (said once): better none than one in the wrong place. A kind whose own tools show it selected
+  // (UNFILLED_ALONE: the image with its picture, its corner grips and toolbar) draws no fill selected alone (the user, 2026-11-09: no pale
+  // blue over a picture clicked); among other blocks it is filled as they are.
+  const toolsShowIt = () => {
+    if (picked.length !== 1 || marked.length !== 0) return false;
+    const holds = UNFILLED_ALONE[picked[0].getAttribute?.("data-ge-unit-kind")];
+    return holds !== undefined && picked[0].querySelector?.(holds) !== null;
+  };
   function render() {
     try {
-      halos.paint(hidden || !active() ? [] : [...picked, ...marked].filter(alive));
+      halos.paint(hidden || !active() || toolsShowIt() ? [] : [...picked, ...marked].filter(alive));
     } catch (error) {
       unpaint();
       report("selection fills", error);

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

@@ -5,7 +5,15 @@ import { lookOf, lookOfElement } from "../../shared/document-look.mjs";
 // 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 five: `theme` (show the report light or dark, or as the reader chose, without
@@ -14,10 +22,20 @@ import { lookOf, lookOfElement } from "../../shared/document-look.mjs";
 // `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). A card stands in the middle of the
-// workbench's window, not of the frame (centreCards, below).
+// 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);
@@ -38,11 +56,28 @@ 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 = () => {
@@ -64,6 +99,15 @@ 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" };
@@ -97,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;

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/binding.mjs

@@ -0,0 +1,87 @@
+import { TABLE } from "../../components/kit.mjs";
+import { CHART_SOURCE, TABLE_READERS, VIEW_FROM, nextChartKey } from "../../../shared/table-chart.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { menuRow } from "../page-objects.mjs";
+
+// Which table a view reads (docs/editor.md, "Table views"). A view of a table (an instance of a custom
+// block whose needs hold "tables") names its table by a key: VIEW_FROM on the instance, CHART_SOURCE on
+// the table's frame, never by an id or the blocks' order. A view made on the page ("/", 在下方新建, 转换成)
+// is bound to the nearest table above it as it is made, in the same undo step; the table it reads is the
+// reader's to change after that, in the block's 设置 (installed/page.mjs), which lists the document's tables.
+// A table with no key gets one in the same step (the first of t1, t2 … the page does not hold), and so
+// does the second of two an Agent wrote with one key: a view by that key would read the first.
+
+const FRAME_WITH_TABLE = (frame) => frame.querySelector("table") !== null && !frame.closest("[data-doc-dev]");
+
+/** The tables of the page, in the document's order: their frames (.doc-table-wrap). */
+export const tableFrames = () => [...document.querySelectorAll(TABLE.frame)].filter(FRAME_WITH_TABLE);
+
+/** The frame a key names, as the kit reads it (runtime/table-reading.js frameOf) and the checks do: the first that carries it. */
+export const frameOf = (key) => tableFrames().find((frame) => frame.getAttribute(CHART_SOURCE) === key) ?? null;
+
+/** The nearest table above `node`, in the document's order, that does not hold it; null where there is none. */
+export function tableAbove(node) {
+  let found = null;
+  for (const frame of tableFrames()) {
+    if (frame.contains(node)) continue;
+    if (frame.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) found = frame;
+  }
+  return found;
+}
+
+// Every key a chart or a view names, or a frame carries.
+const takenKeys = () => new Set([...document.querySelectorAll([CHART_SOURCE, ...TABLE_READERS].map((name) => `[${name}]`).join(", "))]
+  .flatMap((node) => [CHART_SOURCE, ...TABLE_READERS].map((name) => node.getAttribute(name)).filter((value) => value !== null)));
+
+/** The key `frame` is read by: its own where it names this frame, else a new one (not yet written). */
+export function keyOf(frame) {
+  const own = frame.getAttribute(CHART_SOURCE);
+  return own !== null && frameOf(own) === frame ? own : nextChartKey(takenKeys());
+}
+
+/**
+ * `instance` made a view of `frame` (or of none: null takes its key off): its VIEW_FROM set, and the key
+ * on the frame where it carried none that names it. Records nothing: the caller's undo step does
+ * (`viewFrames`, struct's `attributes`). Returns whether anything changed.
+ */
+export function bindView(instance, frame) {
+  if (!frame) {
+    if (!instance.hasAttribute(VIEW_FROM)) return false;
+    instance.removeAttribute(VIEW_FROM);
+    return true;
+  }
+  const key = keyOf(frame);
+  let changed = false;
+  if (instance.getAttribute(VIEW_FROM) !== key) {
+    instance.setAttribute(VIEW_FROM, key);
+    changed = true;
+  }
+  if (frame.getAttribute(CHART_SOURCE) !== key) {
+    frame.setAttribute(CHART_SOURCE, key);
+    changed = true;
+  }
+  return changed;
+}
+
+/** A view that was made bound to the table above it. */
+export function bindAbove(instance) {
+  return bindView(instance, tableAbove(instance));
+}
+
+/**
+ * What the undo step that makes a block of the menu's key records of the tables' keys (struct's
+ * `attributes`): every table's frame when the block reads tables, as the table it is bound to is only
+ * known as the block is made; nothing for any other block.
+ */
+export const viewFrames = (key) => (menuRow(key)?.readsTables ? tableFrames().map((frame) => [frame, [CHART_SOURCE]]) : []);
+
+// A table named for a reader: its place among the document's tables and the words of its first row.
+function labelOf(frame, place) {
+  const first = frame.querySelector("tr");
+  const words = first ? [...first.cells].map((cell) => cell.textContent.replace(/\s+/g, " ").trim()).filter(Boolean).slice(0, 4).join("、") : "";
+  const shown = words.length > 28 ? `${words.slice(0, 27)}…` : words;
+  return shown ? t("表格 {0} · {1}", place, shown) : t("表格 {0}", place);
+}
+
+/** The document's tables for a list to choose from: [{ frame, label }], the label naming the table by its place and its first row. */
+export const tableChoices = () => tableFrames().map((frame, at) => ({ frame, label: labelOf(frame, at + 1) }));