@heycys/gallery 0.1.1 → 0.1.2

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

@@ -28,15 +28,14 @@ const STYLE = `
   .nmedia-menu-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 2px solid var(--c-texPri); }
   .nmedia-menu-body { padding: 12px 12px 10px; }
   .nmedia-menu-inner { display: flex; justify-content: center; padding: 4px; }
-  .nmedia-menu-upload { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ca-borPriTra); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 20ms ease-in; }
-  .nmedia-menu-upload:hover { background: var(--ca-bacIntTra); }
+  /* Its buttons are the editor's one button look (look.mjs BUTTONS): the pale blue primary, here what the tab does. */
+  .nmedia-menu-upload, .nmedia-menu-embed { width: 100%; font-size: 14px; }
   .nmedia-menu-link { flex-direction: column; align-items: stretch; gap: 8px; }
   .nmedia-menu-input { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-bacSecTra); box-shadow: 0 0 0 1px var(--ca-borPriTra); box-sizing: border-box; }
   .nmedia-menu-input:focus-within { box-shadow: var(--c-inpBluFocRin); }
   .nmedia-menu-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }
   .nmedia-menu-input input::placeholder { color: var(--c-texTer); }
-  .nmedia-menu-embed { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; margin: 0 auto; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--c-bluBacAccPri); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; }
-  .nmedia-menu-embed:hover { filter: brightness(.94); }
+  .nmedia-menu-embed { max-width: 300px; margin: 0 auto; }
   .nmedia-menu-caption { margin: -6px 0 4px; padding: 4px 0; font-size: 12px; line-height: 1.4; color: var(--c-texSec); text-align: center; }
   .nmedia-menu.dragover .nmedia-menu-body { background: var(--ca-bluBacSecTra); }
   .nmedia-menu-choose { margin-top: 8px; }
@@ -76,10 +75,10 @@ export function openMediaMenu(anchor, { tabs, width, upload = {}, link = {}, onU
       `<div class="nmedia-menu-tab-wrap"><div role="tab" class="nmedia-menu-tab${key === current ? " active" : ""}" aria-selected="${key === current}" data-tab="${key}">${esc(label)}</div></div>`).join("")}</div>` : "")
       + `<div class="nmedia-menu-body">${current === "upload"
         ? (upload.primary
-          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="nmedia-menu-embed nmedia-menu-choose" data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
-          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="nmedia-menu-upload" data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
+          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="ge-btn nmedia-menu-embed nmedia-menu-choose" data-primary data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
+          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="ge-btn nmedia-menu-upload" data-primary data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
         : `<div class="nmedia-menu-inner nmedia-menu-link"><div class="nmedia-menu-input"><input type="url" placeholder="${esc(link.placeholder ?? t("粘贴链接…"))}" autocomplete="off"></div>`
-          + `<div role="button" tabindex="0" class="nmedia-menu-embed" data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
+          + `<div role="button" tabindex="0" class="ge-btn nmedia-menu-embed" data-primary data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
           + (link.caption ? `<div class="nmedia-menu-caption">${esc(link.caption)}</div>` : "") + "</div>"}</div>`;
     const input = el.querySelector("input");
     if (input) {

package/browser/editor/page/menu.mjs

@@ -37,6 +37,8 @@ const STYLE = `
   }
   /* A width given (data-sized: opts.width, placed by place()): that width, whatever the rows hold. */
   .ge-pop[data-sized] { min-width: 0; max-width: calc(100vw - 16px); }
+  /* A short list of one kind of word (a card's 大小 ›: 4 × 2): only as wide as its rows, no 180px floor. */
+  .ge-pop[data-compact] { min-width: 0; }
   @keyframes ge-pop-in { from { opacity: 0; transform: scale(.98); } }
   @media (prefers-reduced-motion: reduce) { .ge-pop { animation: none; } }
   .ge-pop-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
@@ -58,6 +60,7 @@ const STYLE = `
      words and the hint takes what is left, cut short with an ellipsis where it is too long (an English
      row's current choice once took the whole row, its label drawn 0px wide). */
   .ge-pop-label:has(+ .ge-pop-hint) { flex: 1 0 auto; max-width: 100%; }
+  .ge-pop-of { color: var(--ge-tx3); }
   .ge-pop-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ge-tx3); font-size: 12px; white-space: nowrap; }
   /* A row of a page (its title, the page it is under as its hint): a long title is what an ellipsis
      cuts, and the page above keeps its words, up to a part of the row. */
@@ -125,10 +128,12 @@ const opened = new Set(); // the menus open now, whichever part of the page open
 export const menuOpen = () => opened.size > 0;
 
 /**
- * items: rows { label, run, icon?, hint?, long?, current?, checked?, disabled?, note?, preview? } (long:
+ * items: rows { label, run, icon?, of?, hint?, long?, current?, checked?, disabled?, note?, preview? } (of: what
+ * the label is of, grey after it, a block's pack where two rows have one name; long:
  * a label of any length, a page's title, cut before its hint is; current: the choice
  * made, checked and not to be chosen again; checked: a switch that is on, checked and clicked to turn
- * it off; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
+ * it off; selected: the choice of a dropdown (a field's list of options), checked as current is but
+ * still a row to click, which closes the card with nothing changed; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
  * shown at the row's right while the pointer rests on it, notion-lite's row tooltip) (or { label, icon?, submenu:
  * () => items, width?, search? } opening a submenu, with a search field at its top when `search` is
  * given, as `opts.search` below, and `search.empty` the words shown when nothing is found; a row
@@ -143,7 +148,9 @@ export const menuOpen = () => opened.size > 0;
  * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
  * room), level with it (a section's bar). Without either the menu stands below the anchor (the
  * caret), or above it when there is no room below; align: "end", its right edge at the anchor's.
- * icons: false, rows of words alone (no column for icons: a code block's languages); height: the
+ * icons: false, rows of words alone (no column for icons: a code block's languages; a row that opens a
+ * submenu says it of its own as `icons: false`, and `compact: true` makes it only as wide as its rows, no
+ * 180px floor: a card's 大小 ›); height: the
  * card's greatest height, in px (its rows scroll inside it past that). stand(size): where the card
  * stands, its { left, top } for its { width, height }, in place of all of these rules (a pasted
  * address's 选择视图, by the format bar's rule: placement.mjs besideText). inside: an element the rows
@@ -221,7 +228,8 @@ export function createMenu() {
         if (row.split) row.setAttribute("data-split", "");
         if (item.long) row.setAttribute("data-long", "");
         if (options.icons !== false) words.append(element("span", { class: "ge-pop-icon", html: item.icon ?? "" }));
-        words.append(element("span", { class: "ge-pop-label", text: item.label }));
+        // A row's pack where two rows have one name (我的待办 · 柔光风格): grey, after the name, in the label.
+        words.append(item.of ? element("span", { class: "ge-pop-label" }, item.label, element("span", { class: "ge-pop-of", text: ` · ${item.of}` })) : element("span", { class: "ge-pop-label", text: item.label }));
         if (item.hint) words.append(element("span", { class: "ge-pop-hint", text: item.hint }));
         if (row.split) row.append(words, element("span", { class: "ge-pop-more", html: `<span class="ge-pop-arrow">${ICONS.chevron}</span>` }));
         else if (item.submenu) row.append(element("span", { class: "ge-pop-arrow", html: ICONS.chevron }));
@@ -230,11 +238,12 @@ export function createMenu() {
           row.submenu = item.submenu;
           row.subWidth = item.width;
           row.subSearch = item.search;
+          row.subLook = { icons: item.icons, compact: item.compact };
         }
-        if (item.current || item.checked) {
-          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.current ? t("当前") : t("已开启") }));
+        if (item.current || item.checked || item.selected) {
+          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.checked ? t("已开启") : t("当前") }));
           row.setAttribute("data-current", "");
-          if (item.checked) row.setAttribute("aria-checked", "true");
+          if (item.checked || item.selected) row.setAttribute("aria-checked", "true");
         }
         row.disabled = Boolean(item.disabled || item.current);
         row.run = item.run;
@@ -360,6 +369,7 @@ export function createMenu() {
     const search = row.subSearch && { placeholder: row.subSearch.placeholder, filter: (text) => closing(row.subSearch.filter(text)) };
     sub.open(items, row.getBoundingClientRect(), {
       side: "right", gap: 0, height: Math.round(innerHeight * 0.7), highlight: keys, width: row.subWidth, label: row.textContent, search, empty: row.subSearch?.empty, focus: keys,
+      ...(row.subLook.icons === false ? { icons: false } : {}), ...(row.subLook.compact ? { compact: true } : {}),
       onClose: () => {
         row.removeAttribute("aria-expanded");
         if (subRow === row) {
@@ -439,6 +449,7 @@ export function createMenu() {
       opened.add(menu);
       node = element("div", { class: "ge-pop", role: "menu", "aria-label": opts.label ?? t("菜单") });
       if (options.width) node.setAttribute("data-sized", "");
+      if (options.compact) node.setAttribute("data-compact", "");
       if (opts.inside) {
         node.setAttribute("data-inside", "");
         opts.inside.append(node);

package/browser/editor/page/notices.mjs

@@ -1,6 +1,6 @@
 import { Z } from "../../shared/layers.mjs";
 import { PANEL_STYLE, onPanels, panelGone, panelRoom, panelShown } from "./panel.mjs";
-import { addStyle, button, element, mount } from "./ui.mjs";
+import { addStyle, element, mount, textButton } from "./ui.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 import { preference } from "../../shared/preferences.mjs";
 import { routine } from "./quiet.mjs";
@@ -128,7 +128,7 @@ export function showPanel(title) {
   closePanel();
   addStyle(PANEL_STYLE);
   panel = mount(element("div", { class: "ge-panel", role: "region", "aria-label": title },
-    element("div", { class: "ge-panel-head" }, element("span", { text: title }), button(t("关闭"), closePanel, { "data-quiet": "" }))));
+    element("div", { class: "ge-panel-head" }, element("span", { text: title }), textButton(t("关闭"), closePanel, { quiet: true }))));
   panelShown(panel);
 }
 

package/browser/editor/page/page-objects.mjs

@@ -31,8 +31,19 @@ export function menuEntry(key) {
 /** The row of a key of a menu of blocks: its type's, or its variant's; null for neither. */
 export const menuRow = (key) => TYPE_INFO[key] ?? menuEntry(key).variant;
 
-/** The keys of every variant there is now. */
-export const variantKeys = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.keys(pageOfType(type)?.menuVariants?.() ?? {}).map((name) => `${type}:${name}`));
+// Every variant there is now: [key, row].
+const variants = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.entries(pageOfType(type)?.menuVariants?.() ?? {}).map(([name, row]) => [`${type}:${name}`, row]));
+
+/**
+ * The keys of the variants the menus of blocks offer now ("/", 在下方新建, the handle's +, 转换成): every
+ * one but a view of a table (`readsTables`: a custom block whose needs hold "tables"), which a table's
+ * 视图 › alone offers, as it puts one in bound to that table (viewKeys): one put in anywhere else would
+ * only say it has no table to read.
+ */
+export const variantKeys = () => variants().filter(([, row]) => !row.readsTables).map(([key]) => key);
+
+/** The keys of the variants that are views of a table, for a table's 视图 › (table/views.mjs). */
+export const viewKeys = () => variants().filter(([, row]) => row.readsTables).map(([key]) => key);
 
 /** The page objects, in the order they are made. */
 export const pageObjects = () => Object.values(pages);

package/browser/editor/page/panel.mjs

@@ -3,8 +3,10 @@ import { Z } from "../../shared/layers.mjs";
 // The editor's bottom panels: the conflicts' (conflicts.mjs, left) and the lost texts' (notices.mjs,
 // right) are the same card, and the bar of the Agent's changes (changes/bar.mjs, in the middle) is its
 // buttons in a row: a small muted head with a red dot, items under it, the reader's words as
-// a quote, one filled primary button, the rest outlined or, looking only, quiet text. No notice covers
-// one: while one stands, the toast stands above it (notices.mjs, and the workbench's, told the room).
+// a quote, one pale blue primary button, the rest with no line and no fill (gray under the pointer) or, looking
+// only, quiet text: all of them the editor's one button look (look.mjs BUTTONS, ui.mjs textButton), none of
+// their own here. No notice covers one: while one stands, the toast stands above it (notices.mjs, and the
+// workbench's, told the room).
 
 const PANELS = ".ge-conflicts:not([hidden]), .ge-panel, .ge-changes:not([hidden])";
 
@@ -55,11 +57,4 @@ export const PANEL_STYLE = `
   :is(.ge-conflict, .ge-panel-item) p + .ge-version { margin-top: 6px; }
   :is(.ge-conflicts, .ge-panel) .ge-version { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ge-quote); overflow-wrap: anywhere; }
   :is(.ge-conflicts, .ge-panel) .ge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
-  :is(.ge-conflicts, .ge-panel) button { height: 28px; padding: 0 10px; border: 1px solid var(--ge-edge); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
-  :is(.ge-conflicts, .ge-panel) button:hover:not(:disabled) { background: var(--ge-hover); }
-  :is(.ge-conflicts, .ge-panel) button[data-primary] { border-color: transparent; background: var(--ge-accent); color: #fff; }
-  :is(.ge-conflicts, .ge-panel) button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
-  :is(.ge-conflicts, .ge-panel) button[data-quiet] { height: 24px; padding: 0 6px; border-color: transparent; color: var(--ge-tx2); font-weight: 400; }
-  :is(.ge-conflicts, .ge-panel) button[data-quiet]:hover:not(:disabled) { color: var(--ge-tx); background: transparent; }
-  :is(.ge-conflicts, .ge-panel) button:disabled { opacity: .45; cursor: default; }
 `;

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

@@ -1,6 +1,7 @@
 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 { entryOfKey } from "../../shared/extension-sidebar.mjs";
 import { PROTOCOL, VERSION } from "../../shared/session.mjs";
 
 // The links of a page shown in 演示视图 (?present: src/server/routes.mjs), which has no editor and whose
@@ -13,7 +14,9 @@ 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.
 
 const own = pageAddress(location.href)?.slug ?? null;
 const openTab = (address) => window.open(address, "_blank", "noopener");
@@ -34,7 +37,13 @@ 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/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/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);