@heycys/gallery 0.1.2 → 0.2.0

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 {};
 }

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

@@ -11,7 +11,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 
 // A table's column widths (notion-lite's: a 3px strip on each column's right edge; the plan's D4:
 // the kit's own widths until the reader sizes a column). Dragging a strip sizes its column (35px at
-// least, nothing snapped), shown as it goes (Esc puts it back), written when let go as one undo
+// least; the last one's, the table's right edge, snaps where the table is exactly as wide as the
+// text: SNAP), shown as it goes (Esc puts it back), written when let go as one undo
 // step: every column's width on the topmost cell of that column alone (--doc-column-width,
 // index.mjs COLUMN_WIDTH; shared/table-slots.mjs widthHolder: a merged cell holds none), the kit laying the table
 // out at them (tables/layout.js manualLayout); the first
@@ -50,6 +51,8 @@ const STYLE = `
   .ge-trows > b > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
   ${gestureLock("data-ge-tresize", { cursor: "col-resize", select: true })}
 `;
+const SNAP = 6; // px: the last column's edge within this of the width that fills the text lands on it (as the resize tool's: resize/)
+const LIVE = 60000; // ms: the notice saying the table is full stays while the drag lasts (taken off when it ends)
 const DOUBLE = 500; // two presses on a strip within this many ms are a double click (a press on the armed edge after its click too)
 const EDGE = 8; // the edges' strips reach this far past the table (the resize tool's grab)
 const ARROWS = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M1.5 6h9M3.5 4 1.5 6l2 2M8.5 4l2 2-2 2"/></svg>';
@@ -62,8 +65,29 @@ export function createColumnWidths(tools) {
   let armed = null; // an edge clicked: { unit, axis: "x" (right) | "y" (bottom), at: when, shown }, the next drag of it the table's size
   let quick = null; // the armed right edge pressed soon after its click: { unit, index, x } (let go there, a double click)
 
-  /** Each column's width as the table shows it now, px. */
-  const shown = (unit) => tools.geometry(unit).columns.map((column) => Math.round((column.right - column.left) * 100) / 100);
+  /**
+   * Each column's width as the table shows it now, px: the width of its cells, not the distance
+   * between their edges. A table scrolled sideways keeps its first column in sight (position: sticky,
+   * tables.css: a header column or .doc-table--sticky-first), so the edges of those cells are not the
+   * columns' and the column under them would read as the part of it in sight: every width then sums
+   * to the frame's, the table seeming full, the columns before the border squeezed when it was pressed.
+   */
+  const shown = (unit) => {
+    const { slots } = tableState(unit);
+    if (!slots) return tools.geometry(unit).columns.map((column) => Math.round((column.right - column.left) * 100) / 100);
+    const cells = [...slots.places].map(([cell, place]) => ({ ...place, width: cell.getBoundingClientRect().width }));
+    const widths = Array(slots.columns).fill(null);
+    for (const { c, cols, width } of cells) if (cols === 1) widths[c] ??= width;
+    // A column no single cell gives a width: what the cells merged over it leave, shared out.
+    for (const { c, cols, width } of cells.filter((cell) => cell.cols > 1).sort((a, b) => a.cols - b.cols)) {
+      const over = Array.from({ length: cols }, (_, i) => c + i);
+      const open = over.filter((i) => widths[i] === null);
+      if (open.length === 0) continue;
+      const left = Math.max(0, width - over.reduce((sum, i) => sum + (widths[i] ?? 0), 0));
+      for (const i of open) widths[i] = left / open.length;
+    }
+    return widths.map((width) => Math.round((width ?? 0) * 100) / 100);
+  };
   /** The cells holding the columns' widths: per column, its topmost cell alone, or null. */
   const holders = (unit) => {
     const { slots } = tableState(unit);
@@ -101,20 +125,56 @@ export function createColumnWidths(tools) {
     return done;
   }
 
-  // Shown as it goes: the holders' widths set straight (taken back before the undo step).
-  function preview(unit, widths) {
+  // Shown as it goes: the holders' widths set straight (taken back before the undo step), the
+  // table's own width (--doc-span) off while it lasts, as the kit would else keep the columns in
+  // proportion to it and the table where it was.
+  function preview(drag, widths) {
+    const { unit } = drag;
+    if (drag.span === undefined) {
+      drag.span = unit.style.getPropertyValue(SPAN);
+      unit.style.removeProperty(SPAN);
+    }
     holders(unit).forEach((cell, c) => cell?.style.setProperty(COLUMN_WIDTH, `${widths[c]}px`));
     relayout(unit);
   }
-  function putBack({ unit, before }) {
+  function putBack({ unit, before, span }) {
     for (const [cell, width] of before) {
       if (width) cell.style.setProperty(COLUMN_WIDTH, width);
       else cell.style.removeProperty(COLUMN_WIDTH);
       if (cell.getAttribute("style") === "") cell.removeAttribute("style");
     }
+    if (span) unit.style.setProperty(SPAN, span);
     relayout(unit);
   }
 
+  // The columns' widths together (px) at which the table is exactly as wide as the text (or the
+  // column it stands in): the room its frame has, as the kit lays a table out at the reader's widths
+  // (tables/layout.js manualLayout: a table of that width or more has the frame at 100%, one less
+  // a frame as wide as it). Null where the frame has none.
+  function fillOf(unit) {
+    const parent = unit.parentElement;
+    if (!parent) return null;
+    const sides = (node) => {
+      const style = getComputedStyle(node);
+      return ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"].reduce((sum, name) => sum + (parseFloat(style[name]) || 0), 0);
+    };
+    const room = parent.getBoundingClientRect().width - sides(parent) - sides(unit);
+    return room > 0 ? room : null;
+  }
+
+  // The last column's right edge is the table's: within SNAP of the width that fills the text, the
+  // last column takes what the others leave of it (rounded down: never a hair past the frame).
+  // True when it did. `widths` is changed in place.
+  function snapFull({ last, fill, start, index }, widths) {
+    if (!last || fill === null) return false;
+    const rest = start.reduce((sum, width, c) => (c === index ? sum : sum + width), 0);
+    const wanted = Math.floor((fill - rest) * 100) / 100;
+    if (wanted < MIN_COLUMN_WIDTH || Math.abs(rest + widths[index] - fill) > SNAP) return false;
+    widths[index] = wanted;
+    return true;
+  }
+  const FULL = () => [t("表格"), t("宽度"), t("铺满正文")];
+
   // A column fitted to its widest cell of it alone, unwrapped (+1px): by its words, not the words an
   // Agent took out that the page shows in it (changes/: out of the layout while it is measured).
   function fit(unit, index) {
@@ -221,7 +281,7 @@ export function createColumnWidths(tools) {
             return fit(unit, index);
           }
           const { rows } = tableParts(unit);
-          drag = { unit, index, x: event.clientX, last, fresh: true, start: shown(unit), before: new Map(rows.flatMap((row) => [...row.cells]).map((cell) => [cell, widthOf(cell)])) };
+          drag = { unit, index, x: event.clientX, last, fill: last ? fillOf(unit) : null, told: false, fresh: true, start: shown(unit), before: new Map(rows.flatMap((row) => [...row.cells]).map((cell) => [cell, widthOf(cell)])) };
           document.documentElement.setAttribute("data-ge-tresize", "");
           document.documentElement.setPointerCapture?.(event.pointerId);
         });
@@ -262,8 +322,16 @@ export function createColumnWidths(tools) {
     drag.moved = true;
     const widths = [...drag.start];
     widths[drag.index] = Math.max(MIN_COLUMN_WIDTH, Math.round(drag.start[drag.index] + event.clientX - drag.x));
+    // The last column's edge snaps to the table that fills the text; the bottom notice says so while it holds.
+    const snapped = snapFull(drag, widths);
     drag.widths = widths;
-    preview(drag.unit, widths);
+    drag.snapped = snapped;
+    preview(drag, widths);
+    if (snapped !== drag.told) {
+      drag.told = snapped;
+      if (snapped) tools.say(t("{0}{1}：{2}", ...FULL()), "note", LIVE);
+      else tools.settle();
+    }
     tools.draw();
   }, true);
 
@@ -273,9 +341,13 @@ export function createColumnWidths(tools) {
     document.documentElement.removeAttribute("data-ge-tresize");
     if (!done) return;
     putBack(done);
-    if (!cancel && done.widths) set(done.unit, done.widths);
+    if (done.told) tools.settle(); // the notice of the table filling the text: the result's follows, or nothing
+    // Back at the widths it had, snapped to a table that was full already (or dragged out and back): nothing to write.
+    const unchanged = done.widths?.every((width, c) => Math.abs(width - done.start[c]) < 0.5);
+    if (!cancel && done.widths) {
+      if (!unchanged && set(done.unit, done.widths) && done.snapped) tools.say(t("已调整{0}{1}：{2} · Ctrl+Z 撤销", ...FULL()));
     // The last strip clicked (pressed, not moved): the table's right edge armed.
-    else if (!cancel && done.last) return arm(done.unit, "x");
+    } else if (!cancel && done.last) return arm(done.unit, "x");
     tools.draw();
   }
   document.addEventListener("pointerup", () => end(false), true);

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

@@ -7,6 +7,7 @@ import { joinCode } from "../marks.mjs";
 import { numberWithUnit, sideOf, WORD } from "../../../shared/inline-spacing.mjs";
 import { pageOf, pagesAround } from "../page-objects.mjs";
 import { BLOCK_TYPES, HOSTS, accepts, firstSaysOf, placeholderOf, textFilters, textTypeOf } from "../../components/registry.mjs";
+import { unalign } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // Typing in a block (docs/editor.md, "Browser side"): every key goes first to the component the block
@@ -14,7 +15,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // `if (!ctx.def.keys?.enter?.(ctx)) splitBlock(...)`, and then to the rules of every block. Enter
 // splits it, Backspace and Delete at its edges merge it with the block before or after, or remove it
 // once empty, the caret going to the neighbouring block. Backspace in a container with nothing
-// written in it (`removedEmpty`) deletes the container. Chinese typed next to a Latin letter or
+// written in it (`removedEmpty`) or in an empty heading turns it into an empty paragraph. Chinese typed next to a Latin letter or
 // digit gets a space between them (autoSpace; not a number and its unit, nor in a block written without), and an empty block under the caret says what it takes
 // (placeholder). Plain typing and input methods stay with the browser; the keys are routed here by
 // editor.mjs.
@@ -53,8 +54,11 @@ function writtenTogether(host, node, start, end) {
  * deleted as the selected ones are (selection/delete.mjs). adding(): the block the "/" menu the
  * handle's "+" opened is open in (slash-menu/), or null. leave: where Enter and Backspace leave a
  * container (leave.mjs). showHidden(node): the folds hiding a block opened (fold/ showAround).
+ * look(element, change): the editor's undoable change of classes (a block's alignment, align.mjs).
+ * afterAbove(host): Backspace at the start of a text block right after a block of no text, the caret
+ * put after that block (after/ back); whether it was.
  */
-export function createTyping({ struct, say, keepText, paragraphBefore, removeBlocks, selectBlock = () => {}, adding = () => null, leave, showHidden = () => {} }) {
+export function createTyping({ struct, say, keepText, paragraphBefore, removeBlocks, selectBlock = () => {}, adding = () => null, leave, showHidden = () => {}, look = () => false, afterAbove = () => false }) {
   // A key, asked of the component of the text block `host` and then of what stands around it, nearest
   // first (docs/editor.md, "The order of keys"): whether it was theirs. `ctx` is notion-lite's, as
   // much of it as a key reads, the block being an element here.
@@ -101,8 +105,8 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
   function split(host) {
     if (HOSTS[host.getAttribute("data-ge-kind")]?.opensBody) return enterBody(host);
     // The caret at the very start of a block with text: an empty paragraph goes before the block and
-    // the caret stays (a block that splits does this itself, splitBlock). This comes first: in a code
-    // block too, whose own Enter breaks the line.
+    // the caret stays (a block that splits does this itself, splitBlock). Only hosts that opt in take
+    // this rule; code keeps its own Enter, which breaks the line even at the start.
     const own = HOSTS[host.getAttribute("data-ge-kind")]?.opensBefore; // not a cell, a card's field, the title
     if (own && !can(host, "split") && !isEmpty(host) && atEdge(host, false) && paragraphBefore(host)) return;
     // Its component's Enter (a code block's line, a nested item out a level, a title going into its
@@ -152,10 +156,33 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     return true;
   }
 
-  // An empty container deleted whole (one undo step, which selects it again); the caret at the end of
-  // the block before it, or at the start of the one after it when it was first (a formula block passed
-  // over: textNear).
+  // Whether a block may not go (keepText): the reason said, a note that stays a while.
+  function kept(node) {
+    const reason = keepText(node);
+    if (reason) say(reason, "note", 6000);
+    return Boolean(reason);
+  }
+
+  // An empty container turned into an empty paragraph where it stands, the caret in it (the user's,
+  // 2026-11-09: as an empty heading, an empty item and every other empty block go back to body text,
+  // not away with the caret on the block before); one undo step, which brings the container back.
+  // Where its box takes no paragraph it is deleted whole (one undo step, which selects it again), the
+  // caret at the end of the block before it, or at the start of the one after it when it was first (a
+  // formula block passed over: textNear).
   function removeContainer(container) {
+    const box = container.parentElement;
+    const paragraph = newParagraphHost(document);
+    if (box && accepts(boxKind(box), paragraph.getAttribute("data-ge-type"))) {
+      if (kept(container)) return true;
+      const parts = withLeads(container);
+      struct([box], [], () => {
+        parts[0].before(paragraph);
+        parts.forEach((part) => part.remove());
+        return { touched: [paragraph], focus: paragraph };
+      });
+      caretAt(paragraph, "start");
+      return true;
+    }
     const list = hosts();
     const inside = list.filter((node) => container.contains(node));
     const before = textNear(inside[0], -1, list);
@@ -181,11 +208,7 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
       ? (next ? [next, "start"] : [previous, "end"])
       : (previous ? [previous, "end"] : [next, "start"]);
     const node = removalTarget(host);
-    const kept = keepText(node);
-    if (kept) {
-      say(kept, "note", 6000);
-      return true;
-    }
+    if (kept(node)) return true;
     struct([node.parentNode], [host], () => {
       takeOut(node);
       return { touched: [], focus: target };
@@ -203,6 +226,9 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
   // Backspace at the start of a block. Returns whether it was handled.
   function backspace(host) {
     opened(previousLine(host));
+    // A paragraph's or a heading's alignment, then its indent a level at a time, goes before anything
+    // else, one undo step each (align.mjs unalign: Feishu's 退对齐 and 反缩进 before a join).
+    if (unalign(host, look)) return true;
     // The block's component (a list item's: a nested item moves out a level, the first or last item of
     // a top-level list leaves it as body text, an emptied item holding lists stays), then what stands
     // around it (the item a block stands under; a node, at the start of its first line, holding
@@ -212,6 +238,12 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     const container = emptyContainer(host);
     if (container) return removeContainer(container);
     if (leave.backspace(host)) return true;
+    // An empty heading (or small text) is an empty paragraph, where it stands (leave.mjs emptied).
+    if (leave.emptied(host)) return true;
+    // Right after a block of no text (a picture, a table, a code block, a callout, a divider, a card…):
+    // the caret after it, at its bottom right (after/), an empty block going (the user's, 2026-11-09:
+    // Backspace there went into the block, or past a picture to the text before it); never a join.
+    if (afterAbove(host)) return true;
     if (isEmpty(host)) return removeHost(host, false);
     if (merge(host)) return true;
     // A block holding blocks that did not join the line above says why, as its component puts it.