@heycys/gallery 0.1.2 → 0.2.1

package/browser/editor/page/history.mjs

@@ -69,7 +69,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
       typing.time = at;
     } else {
       closeTyping();
-      typing = { type: "text", element: host, before, after, time: at };
+      typing = { type: "text", element: host, before, after, time: at, began: at };
     }
     changed(now);
   }
@@ -83,8 +83,14 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
     changed(true);
   }
 
+  // A run of typing closed: a step of its own, unless it went into the block the last step made for
+  // what was typed (struct's `typedInto`: a paragraph after a block, after/), begun within a second of it:
+  // then it is part of that step, which undo takes away whole, redo putting the words back with it.
   function closeTyping() {
-    if (typingChanged()) push(typing);
+    const last = undoStack.at(-1);
+    if (typingChanged() && last?.typedInto === typing.element && typing.began - last.madeAt < 1000) last.htmlAfter.set(typing.element, typing.after);
+    else if (typingChanged()) push(typing);
+    if (typing && last?.typedInto) last.typedInto = null;
     typing = null;
   }
 
@@ -151,7 +157,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // An attribute the file gave another value than the page had (`changes`: [element, name, from, to],
   // `to` null for none; a key of a table a commit gave a pair anew: page/commit.mjs apply), the page's
   // element set so: the steps that recorded `from` of it record `to` instead, so that an undo or a redo
-  // puts back what the file has, never the value it changed (a table's 视图 › redone with the key its view
+  // puts back what the file has, never the value it changed (a view made from "/" redone with the key its view
   // no longer carries).
   function rekeyed(changes) {
     if (changes.length === 0) return;
@@ -162,6 +168,14 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
           if (values?.some(([each, value]) => each === name && value === from)) recorded.set(element, values.map(([each, value]) => [each, each === name && value === from ? to : value]));
         }
       }
+      // A view's table chosen in its 设置 is a step of look (installed/page.mjs readTable): its attributes by element.
+      if (step.type === "look") {
+        for (const recorded of [step.before, step.after]) {
+          step.elements.forEach((each, index) => {
+            for (const [element, name, from, to] of changes) if (each === element && recorded[index]?.attributes?.[name] === from) recorded[index].attributes[name] = to;
+          });
+        }
+      }
     }
   }
 
@@ -194,7 +208,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
   // spans and widths, which its operations change: components/table/page.mjs). `caret`: where the caret
   // stood in the first text block it touched is kept too, which undo puts back (notion-lite's Enter in the
   // page's title, enter.js: "撤销后光标回到回车前的位置"; typing/ enterBody).
-  function struct(parents, touched, mutate, { attributes = [], caret = false } = {}) {
+  function struct(parents, touched, mutate, { attributes = [], caret = false, typedInto = null } = {}) {
     closeTyping();
     // What the change may leave untidy is tidied after it by the components that know (rows of
     // columns with a column emptied, lists set side by side: tidy), so what they name is recorded
@@ -246,6 +260,7 @@ export function createHistory({ changed, beforeUndo, blocks, afterText, refuse =
       selectAfter: result.selectAfter ?? null, // what redo selects instead
       caret: result.caret ?? null, // where redo puts the caret when it selects nothing (tidyEmptied)
       settle: result.settle ?? null,
+      typedInto, madeAt: Date.now(), // the block made for what is typed, whose first run of typing is part of this step (closeTyping)
     });
     result.touched.forEach((node) => lastKnown.set(node, ownHTML(node)));
     note("history", "change");

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

@@ -1,10 +1,10 @@
 import { OUTER, UNIT, blocksIn, boxKind, heldIn, newHost, newTail, placeBefore, unitElement, withLeads } from "../core.mjs";
 import { containerType } from "../convert.mjs";
 import { begin, done, made } from "../made.mjs";
-import { selectsBeside } from "../beside.mjs";
+import { caretBeside } from "../beside.mjs";
 import { caretAt, nearestOnLine, placeCaret, selectAt } from "../caret.mjs";
 import { sectionOps } from "../page-objects.mjs";
-import { contentOf, endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
+import { endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
 import { BOXED, HOLDS_ONE, accepts } from "../../components/registry.mjs";
 import { DIALOG } from "../../components/kit.mjs";
 
@@ -18,9 +18,9 @@ import { DIALOG } from "../../components/kit.mjs";
 
 /**
  * struct(parents, touched, mutate): the editor's undoable structural change (history.mjs). blocks():
- * the block tools (blocks.mjs).
+ * the block tools (blocks.mjs). after: the caret after a block (after/).
  */
-export function createInsert({ struct, blocks }) {
+export function createInsert({ struct, blocks, after }) {
   // An empty paragraph right before the block of a text block, the caret staying where it is.
   // Returns whether one could go there.
   function paragraphBefore(host) {
@@ -54,10 +54,10 @@ export function createInsert({ struct, blocks }) {
   // (geometry.mjs endOf). Under the last block of a box whose end is its own padding (endIsPadding: a
   // highlight block, a callout, a disclosure's content; the user's, 2026-11-06, as notion-lite's click-blank.js
   // makes a block only below the page and in a column) it is a gap like any other, below. Right of
-  // the text area a boxed block (a code block, a callout, a file…: not text) or a row of columns
-  // stands in, at its height (boxedBeside), that block selected, so Delete takes it and Enter puts a
-  // paragraph after it; between a narrower block's right edge and its column's, as beside any block
-  // of no text (below). Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
+  // a boxed block (a code block, a callout, a file…: not text) or a row of columns, at its height
+  // (boxedBeside), the caret after it, at its bottom right (after/: Backspace deletes it, Enter or a
+  // key makes a paragraph after it; the user's, 2026-11-09: a click there selected it before).
+  // Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
   // side by side), where the line is nearest the click (Notion's way); in the gap between two
   // blocks, or beside a block of no text, into the nearer of the blocks around it that is text, in the
   // innermost box at that height (boxBeside: the press may be on the page's margin, the block in a
@@ -82,7 +82,7 @@ export function createInsert({ struct, blocks }) {
     if (end) return newParagraph(end.box, end.after);
     const top = y + scrollY;
     const beside = boxedBeside(main, x, y, target);
-    if (beside) return blocks().select(beside);
+    if (beside) return after.place(beside);
     const host = hoverAt(measure(main, { top, bottom: top }), x + scrollX, top, { reach: Infinity, skip: (unit) => !unit.text });
     if (host) return caretNear(host, x, y);
     for (let around = boxBeside(box, x, y); around; around = around === box ? null : around.parentElement.closest("[data-ge-box]")) {
@@ -157,26 +157,24 @@ export function createInsert({ struct, blocks }) {
     const texts = [unit, ...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => node.isContentEditable && node.getClientRects().length > 0 && !node.closest("details:not([open]) > :not(summary)"));
     return (last ? texts.at(-1) : texts[0]) ?? null;
   }
-  // A boxed block or a row of columns at height `y` with (x, y) right of the text area it stands in
-  // (the content box of its box: the page's column, a column of 分栏, a section's, a quote's, a
-  // highlight block's or a callout's, a disclosure's content) and right of the block itself (one
-  // wider than that area), or null: in the page's margin, or in the padding of the box it stands in;
-  // never between a narrower block's right edge and its area's (a table, a picture: the user's,
-  // 2026-11-07, a click there selected it), nor in another text area (the blank box `target` the
-  // press was on holds the block: a column further right is no place beside one in the column left
-  // of it). The innermost, but never a block inside a row of columns the click is to the right of too
-  // (the row is selected whole): past a column's edge is the gap to the next column, whose press is
-  // the gap's (columns/: it drags, a click alone changes nothing), or past the row, which is selected.
+  // A boxed block or a row of columns at height `y` with (x, y) right of it: between its right edge
+  // and the text area's it stands in (a table, a picture narrower than its column: the user's,
+  // 2026-11-09, the caret after it where a click there once selected it, 2026-11-07, and later went to
+  // the nearest text), in the padding of the box it stands in (a highlight block's, a callout's) or in the
+  // page's margin; or null. Never in another text area (the blank box `target` the press was on holds the
+  // block: a column further right is no place beside one in the column left of it). The innermost,
+  // but never a block inside a row of columns the click is to the right of too (the caret goes after
+  // the row): past a column's edge is the gap to the next column, whose press is the gap's (columns/:
+  // it drags, a click alone changes nothing), or past the row.
   function boxedBeside(main, x, y, target) {
     let found = null;
     const right = (unit) => {
       const rect = unit.getBoundingClientRect();
       if (y < rect.top || y > rect.bottom || (target?.contains && !target.contains(unit))) return false;
-      const box = unit.parentElement;
-      return x > Math.max(rect.right, contentOf(box.getBoundingClientRect(), getComputedStyle(box)).right);
+      return x > rect.right;
     };
     for (const unit of main.querySelectorAll(`[data-ge-unit-kind]`)) {
-      if (!selectsBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
+      if (!caretBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
       if (!right(unit)) continue;
       const row = unit.parentElement.closest('[data-ge-unit-kind="columns"]');
       if (row && main.contains(row) && right(row)) continue;

package/browser/editor/page/menu.mjs

@@ -86,8 +86,8 @@ const STYLE = `
   /* A note wraps at the card's width and never widens it (no width of its own: contain). */
   .ge-pop-note { contain: inline-size; padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
   .ge-pop-empty { padding: 8px 12px; color: var(--ge-tx3); }
-  /* What a row makes, shown beside it under the pointer (a component package's preview.svg). */
-  .ge-pop-preview { display: block; width: 240px; max-height: 180px; border-radius: 4px; object-fit: contain; background: var(--ge-bg); }
+  /* What a row makes, shown beside it under the pointer (a component package's preview.svg), in the middle of the bubble: its description under it wraps wider than the picture. */
+  .ge-pop-preview { display: block; width: 240px; max-width: 100%; max-height: 180px; margin: 0 auto; border-radius: 4px; object-fit: contain; object-position: center; background: var(--ge-bg); }
   .ge-pop-search { position: sticky; top: 0; z-index: 1; padding: 8px 8px 6px; background: var(--ge-bg); }
   .ge-pop-search input { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none; background: var(--ge-hover); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-line); }
   .ge-pop-search input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
@@ -145,7 +145,9 @@ export const menuOpen = () => opened.size > 0;
  * as its rows (FIT; SEARCHING with a search field). around: the rect of the block a handle
  * (the anchor) stands for; the menu keeps clear of that block: left of it beside the handle, else
  * below or above it (scrolling inside when only part of it fits), and over it only when the block
- * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
+ * leaves no room at all; a tall block (more than TALL high: a table, a formula, a highlight, an image)
+ * has it beside the handle, left of it or, with no room there,
+ * right of it over the block, centered on the handle, never over the handle. 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; a row that opens a
@@ -276,6 +278,7 @@ export function createMenu() {
   }
 
   const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+  const TALL = 34; // px: a block taller than this (a line of text is 26px) is a tall one: its menu may stand over it
 
   function place() {
     if (options.inside) return;
@@ -324,11 +327,16 @@ export function createMenu() {
       const below = innerHeight - margin - (block.bottom + gap);
       const above = block.top - gap - margin;
       const beside = anchor.left - gap - width;
-      if (beside >= margin) {
-        // Left of the block, centered on its handle.
+      // A block of more than a line (a table, a formula, a highlight, an image: taller than TALL) may
+      // have the menu over it: beside its handle, right of it where there is no room left of it,
+      // rather than below the block, away from the handle.
+      const middle = (anchor.top + anchor.bottom) / 2;
+      const onRight = block.bottom - block.top > TALL && anchor.right + gap + width <= innerWidth - margin;
+      if (beside >= margin || onRight) {
+        // Beside the handle (never over it), left first, centered on it.
         fit(room);
-        left = beside;
-        top = clamp((anchor.top + anchor.bottom) / 2 - height / 2, margin, innerHeight - margin - height);
+        left = beside >= margin ? beside : anchor.right + gap;
+        top = clamp(middle - height / 2, margin, innerHeight - margin - height);
       } else if (Math.max(below, above) >= Math.min(height, 180)) {
         // Below the block, else above it; in the larger of the two when it fits in neither.
         left = clamp(anchor.left, margin, innerWidth - width - margin);

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

@@ -36,14 +36,10 @@ const variants = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.entr
 
 /**
  * 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.
+ * one, a view of a table (`readsTables`: a custom block whose needs hold "tables") too, which binds
+ * itself to the table above it as it is made (components/installed/page.mjs; page/table/binding.mjs).
  */
-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);
+export const variantKeys = () => variants().map(([key]) => key);
 
 /** The page objects, in the order they are made. */
 export const pageObjects = () => Object.values(pages);

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

@@ -2,7 +2,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";
+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
@@ -16,7 +16,8 @@ import { PROTOCOL, VERSION } from "../../shared/session.mjs";
 // a click stays theirs: an anchor, a link to save, a link of a target of its own, any click with a key
 // 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.
+// 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");
@@ -24,13 +25,13 @@ 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) {

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/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/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) }));

package/browser/editor/page/table/icons.mjs

@@ -37,6 +37,4 @@ export const TABLE_ICONS = {
   // 一键优化: a magic wand and its sparks; 识别数字列: a number sign.
   magic: svg('<path d="m3.75 16.25 9-9"/><path d="m11.25 5.75 3 3"/><path d="M15.25 2.5v3M13.75 4h3M5.5 3.25v2M4.5 4.25h2M16 10.75v2M15 11.75h2"/>'),
   numbers: svg('<path d="M8.25 4 6.75 16M13.75 4l-1.5 12M4.5 8h12M3.75 12.25h12"/>'),
-  // 视图: three columns of cards, a board drawn from the table.
-  view: svg('<rect x="3.25" y="3.75" width="3.5" height="7.5" rx="1"/><rect x="8.25" y="3.75" width="3.5" height="12.5" rx="1"/><rect x="13.25" y="3.75" width="3.5" height="5" rx="1"/>'),
 };

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

@@ -57,7 +57,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // it (the geometry's view), the grips and + points of the rows and columns in sight.
 // Each change is one undo step; the page writes it as one operation of the table (grid.mjs). The
 // keys and the cells' bar are cells.mjs's; what a view of the table asks (a custom block reading it:
-// set a cell, move, add or take out a row) and 视图 › of its menu, views.mjs's.
+// set a cell, move, add or take out a row), views.mjs's.
 
 const STYLE = `
   .ge-tgrip { display: flex; align-items: center; justify-content: center; cursor: grab; pointer-events: auto; }
@@ -108,15 +108,14 @@ const REACH = { out: 12, in: 8 }; // the pointer this near the table's top (left
  * active(): whether the tools may show. struct(parents, touched, mutate): the editor's undoable
  * structural change; look(elements, change, select): a change of classes and sizes as one undo step. selectBlock(unit):
  * select the table as a block (Esc). resizeTable(event, unit, axis): a drag of the table's width
- * ("x") or scroll height ("y") from an armed edge (resize/). say: the status line. cellsOf(data): what
+ * ("x") or scroll height ("y") from an armed edge (resize/). say: the status line; settle(): takes it off. cellsOf(data): what
  * the clipboard holds as rows of cells, { rows, from } (clipboard/ cellsOf), or null. upload(kind,
  * body): a file sent to the report's folder (POST /__gallery/edit/upload), a picture of a cell's
  * (pictures.mjs).
  * typedKey(event): a key that is the "/" or "@" menu's, standing on a cell's text (slash-menu/, at-menu/), comes before the cell's.
- * recordStep(host, before): a text step of a text block, what a view's set is (history.mjs). insertBelow(unit, key,
- * { attributes, done }): a block of a menu's key put in below a block in one undo step (editor.mjs), what 视图 › makes.
+ * recordStep(host, before): a text step of a text block, what a view's set is (history.mjs).
  */
-export function createTableEditing({ active, struct, look, selectBlock, resizeTable = () => false, say, cellsOf = () => null, upload = async () => { throw new Error("upload"); }, typedKey = () => false, recordStep = () => {}, insertBelow = () => {} }) {
+export function createTableEditing({ active, struct, look, selectBlock, resizeTable = () => false, say, settle = () => {}, cellsOf = () => null, upload = async () => { throw new Error("upload"); }, typedKey = () => false, recordStep = () => {} }) {
   addStyle(STYLE);
   const menu = createMenu();
   let hover = null; // { unit, row, column, edges: { row, column } }: the cell under the pointer, and whether it is at the table's left (top) edge (edgesAt)
@@ -268,7 +267,7 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
       select(null);
       selectBlock(unit);
     },
-    bounds, selectedCells, tableAt, placeOf, cellOf, cellAt, geometry, change, insert, removeRange, duplicate, merge, split, look, struct, say,
+    bounds, selectedCells, tableAt, placeOf, cellOf, cellAt, geometry, change, insert, removeRange, duplicate, merge, split, look, struct, say, settle,
     active,
     menuOpen: () => menu.isOpen,
     typedKey,
@@ -927,15 +926,13 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
 
   addEventListener("scroll", () => { if (!drag) draw(); }, { passive: true, capture: true });
 
-  // What a view of a table asks, and 视图 › (views.mjs).
-  const views = createViews({ active, change, tableAt, recordStep, insertBelow, drawn: () => draw() });
+  // What a view of a table asks (views.mjs).
+  createViews({ active, change, tableAt, recordStep, drawn: () => draw() });
 
   // The rows of a table the tools manage. 一键优化 is a split row (menu.mjs): its words run it, its ›
-  // opens two of its parts to run alone, 自动调整列宽 and 识别数字列 (the user's, 2026-11-07); 视图 › last,
-  // where a custom block reads tables (views.mjs).
+  // opens two of its parts to run alone, 自动调整列宽 and 识别数字列 (the user's, 2026-11-07).
   function toolRows(unit) {
     const state = tableState(unit);
-    const view = views.menuRow(unit);
     return [
       { label: t("标题行"), icon: ICONS.headerRow, checked: state.headerRow, run: () => headerRow(unit, state) },
       { label: t("标题列"), icon: ICONS.headerColumn, checked: state.headerColumn, run: () => change(unit, () => setHeaderColumn(unit, !state.headerColumn), state.headerColumn ? t("已取消标题列") : t("已设为标题列")) },
@@ -947,7 +944,6 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
         ],
       },
       { label: t("均分列宽"), icon: ICONS.even, run: () => widths.even(unit) },
-      ...(view ? [view] : []),
     ];
   }
 
@@ -998,8 +994,8 @@ export function createTableEditing({ active, struct, look, selectBlock, resizeTa
      * A table's rows of its block menu (notion-lite's 表格 section, under the menu's one title): a
      * table of the kind these tools manage has 标题行 and 标题列, switches (checked when on); then
      * actions, each applied once (no check): 一键优化 › (自动调整列宽, 识别数字列 in its submenu),
-     * 均分列宽, 视图 › (where a custom block reads tables: views.mjs); any table in its frame has its
-     * size's rows after them (layoutRows). [] for any other block.
+     * 均分列宽; any table in its frame has its size's rows after them (layoutRows). [] for any other block.
+     * (The table's 对齐 › is the block menu's own row, above 颜色: page/align.mjs, as a text block's.)
      */
     menuItems(target) {
       if (!target?.matches?.('[data-ge-unit-kind="table"]')) return [];

package/browser/editor/page/table/views.mjs

@@ -1,11 +1,6 @@
-import { TABLE } from "../../components/kit.mjs";
 import { insertRow, moveRow, removeRows, tableState } from "../../components/table/page.mjs";
 import { tableOf } from "../../components/table/grid.mjs";
 import { ownHTML } from "../core.mjs";
-import { menuEntry, viewKeys } from "../page-objects.mjs";
-import { CHART_SOURCE, TABLE_READERS, VIEW_FROM, nextChartKey } from "../../../shared/table-chart.mjs";
-import { t } from "../../../shared/i18n/index.mjs";
-import { TABLE_ICONS } from "./icons.mjs";
 
 // The views of a table (docs/editor.md, "Table views"; the plan's 阶段 4): an instance of a custom
 // block whose needs hold "tables", bound to a table of the document by the key its frame carries
@@ -31,25 +26,15 @@ import { TABLE_ICONS } from "./icons.mjs";
 // are those after its header row: the head's rows, or with no head its body's first row, which a view
 // reads its columns' names from; no intent puts a row there or takes that one.
 //
-// 视图 › of a table's block menu (menuRow) lists the custom blocks that read tables and that the
-// document's menus would offer (their `readsTables` row of the custom blocks' menu variants, which follows
-// the 组件列表 switches; page-objects.mjs viewKeys: no other menu lists them, as one put in unbound only
-// says it has no table) and puts one in right after the table bound to it, in one undo step: the table's key
-// where it names this table (the first frame carrying it, as the kit and the checks read a key), or a new
-// one (the first of t1, t2 … the page does not hold) put on its frame in that step (a table made from "/"
-// has none; the second of two an Agent wrote with one key is not the one it names). The commit writes
-// both, and the server makes sure of the key against the file (source/chart-keys.mjs relinkMade); a key
-// it gives the pair anew the page follows, its undo steps too (page/commit.mjs apply, history.mjs rekeyed).
+// Which table a view reads is binding.mjs's: a view made from a menu is bound to the table above it, and
+// its 设置 (components/installed/page.mjs) changes it.
 
 /**
  * active(): whether the page edits now. change(unit, mutate, said, touched): the table tools' one undo
  * step (index.mjs). tableAt(node): the table unit these tools manage that a node is in. recordStep(host,
- * before): a text step of a text block (history.mjs). insertBelow(unit, key, { attributes, done }): a
- * block of the menu's `key` put in below a block in one undo step, `attributes` ([element, names]) recorded
- * with it and `done(made)` run in it on the new block (editor.mjs insertBelow). drawn(): the tools drawn
- * again (a row taken out).
+ * before): a text step of a text block (history.mjs). drawn(): the tools drawn again (a row taken out).
  */
-export function createViews({ active, change, tableAt, recordStep, insertBelow, drawn = () => {} }) {
+export function createViews({ active, change, tableAt, recordStep, drawn = () => {} }) {
   const merged = (rows) => rows.some((row) => [...row.cells].some((cell) => cell.rowSpan !== 1 || cell.colSpan !== 1));
   const writable = (cell) => cell?.getAttribute("contenteditable") === "true";
   const holds = (cell, text) => cell.textContent === text && cell.childElementCount === 0;
@@ -114,37 +99,5 @@ export function createViews({ active, change, tableAt, recordStep, insertBelow,
     if (run(event.detail ?? {})) event.preventDefault();
   });
 
-  // The frame a key names, as the kit reads it (runtime/table-reading.js frameOf) and the checks do: the
-  // first that carries it, none of a dev block's.
-  const frameOf = (key) => [...document.querySelectorAll(`[${CHART_SOURCE}]`)].find((node) => node.getAttribute(CHART_SOURCE) === key && node.matches(TABLE.frame) && !node.closest("[data-doc-dev]")) ?? null;
-  // A view of the block `key` put in right after `unit`, bound to its table: by its key where that names
-  // it, else by a new one put on it in the same step (a table made from "/" has none; one of two an Agent
-  // wrote with one key is not the one it names, the first: a view by it would read and change that one).
-  function insertView(unit, key) {
-    const own = unit.getAttribute(CHART_SOURCE);
-    const taken = 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)));
-    const bound = own !== null && frameOf(own) === unit ? own : nextChartKey(taken);
-    insertBelow(unit, key, {
-      attributes: [[unit, [CHART_SOURCE]]],
-      done(made) {
-        made?.setAttribute(VIEW_FROM, bound);
-        if (bound !== own) unit.setAttribute(CHART_SOURCE, bound);
-      },
-    });
-  }
-
-  return {
-    /** The 视图 › row of a table's block menu: one for each custom block that reads tables, or null where there is none or the table cannot be read as rows (no frame, a merged cell). */
-    menuRow(unit) {
-      const keys = viewKeys();
-      if (keys.length === 0 || !unit.matches(TABLE.frame) || merged(tableState(unit).rows)) return null;
-      return {
-        label: t("视图"), icon: TABLE_ICONS.view,
-        submenu: () => viewKeys().map((key) => {
-          const row = menuEntry(key).variant;
-          return { label: row.label, icon: row.icon, run: () => insertView(unit, key) };
-        }),
-      };
-    },
-  };
+  return {};
 }