@heycys/gallery 0.1.1 → 0.2.0

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

@@ -0,0 +1,103 @@
+import { insertRow, moveRow, removeRows, tableState } from "../../components/table/page.mjs";
+import { tableOf } from "../../components/table/grid.mjs";
+import { ownHTML } from "../core.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
+// (shared/table-chart.mjs VIEW_FROM, the key a chart drawn from a table reads it by), reads the table's
+// rows (the kit's context.table()) and changes them only by asking: a doc-table-intent the kit puts on
+// the instance (runtime/kernel.js), which these tools answer at once, made as the table's own tools make
+// a change, so that a view has no commit, undo or conflict of its own:
+//
+//   set     one cell's words: a text step of that cell (history.mjs recordStep), its commit a cell's text
+//           as typing's is, merged word by word with someone else's change of the cell (source/merge.mjs);
+//   move    a row put before or after another, the cells it names set in the same step (a card dropped
+//           in another column: its status and its place);
+//   add     a row put in after another or last, its cells' words those it names;
+//   remove  a row taken out (never the last of the body, as the tools' 删除);
+//   check   nothing: answered as the others would be (the kit's table().canEdit()), so that a view of a
+//           table these tools do not manage shows it read-only;
+//
+// move, add and remove are the table tools' operations (components/table/page.mjs moveRow, insertRow,
+// removeRows) in one undo step each (index.mjs change), their commit the table's operation, which a
+// change someone else made to the table meanwhile holds back as a conflict with its card, as any. Only a
+// table these tools manage (GRID: written as the kit writes one) and with no merged cell takes them: a
+// view of any other is read-only, as it is in an export (the kit asks nothing there). Its rows of data
+// 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.
+//
+// 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). drawn(): the tools drawn again (a row taken out).
+ */
+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;
+
+  // What a view asks (`detail` of doc-table-intent: kernel.js tableView), made, or refused (false).
+  function run({ table, op, row = null, before = null, after = null, cells = [] }) {
+    if (!active() || !table?.isConnected) return false;
+    const unit = tableAt(table);
+    if (!unit || tableOf(unit) !== table) return false;
+    const state = tableState(unit);
+    if (merged(state.rows) || !Array.isArray(cells) || !cells.every(([column, text]) => Number.isInteger(column) && column >= 0 && column < state.columns && typeof text === "string")) return false;
+    // A view's table().canEdit(): whether an intent of this table would be taken now, nothing changed.
+    if (op === "check") return true;
+    // Its rows of data: after the header a view reads its names from (the head, else the body's first row).
+    const all = state.rows;
+    const data = all.slice(Math.max(1, state.head?.rows.length ?? 0));
+    const ofData = (node) => data.includes(node);
+    const cellsOf = (target) => cells.map(([column]) => target.cells[column]);
+    if (op === "set") {
+      if (!ofData(row) || cells.length !== 1) return false;
+      const [[column, text]] = cells;
+      const cell = row.cells[column];
+      if (!writable(cell)) return false;
+      if (holds(cell, text)) return true;
+      const was = ownHTML(cell);
+      cell.textContent = text;
+      recordStep(cell, was);
+      return true;
+    }
+    if (op === "move") {
+      const target = before ?? after;
+      if (!ofData(row) || (target && !ofData(target)) || !cellsOf(row).every(writable)) return false;
+      const from = all.indexOf(row);
+      const rest = all.filter((node) => node !== row);
+      const to = !target || target === row ? from : before ? rest.indexOf(before) : rest.indexOf(after) + 1;
+      if (to === from && cells.every(([column, text]) => holds(row.cells[column], text))) return true;
+      return change(unit, () => {
+        if (to !== from && moveRow(unit, from, to) === false) return false;
+        for (const [column, text] of cells) row.cells[column].textContent = text;
+        return true;
+      }, null, cellsOf(row)) !== null;
+    }
+    if (op === "add") {
+      if (after && !ofData(after)) return false;
+      const at = after ? all.indexOf(after) + 1 : all.length;
+      return change(unit, () => {
+        const made = insertRow(unit, at);
+        for (const [column, text] of cells) if (made.cells[column]) made.cells[column].textContent = text;
+        return made;
+      }, null) !== null;
+    }
+    if (op === "remove") {
+      if (!ofData(row)) return false;
+      const at = all.indexOf(row);
+      const done = change(unit, () => removeRows(unit, at, at), null) !== null;
+      drawn();
+      return done;
+    }
+    return false;
+  }
+  document.addEventListener("doc-table-intent", (event) => {
+    if (run(event.detail ?? {})) event.preventDefault();
+  });
+
+  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/text-select/index.mjs

@@ -1,7 +1,7 @@
 import { chipBox } from "../chip-fills.mjs";
 import { DETAILS, DIALOG } from "../../components/kit.mjs";
 import { boxRole } from "../../components/registry.mjs";
-import { UNIT, can, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
+import { UNIT, can, isEmpty, isHost, mergeInto, partsOf, removalTarget, takeOut, textEnd, unitElement } from "../core.mjs";
 import { atomOf, caretAt, caretAtOffset, dragPlace, editable, hosts, pointRange, select } from "../caret.mjs";
 import { edgeFollower } from "../edge-scroll.mjs";
 import { FOLDED } from "../folded.mjs";
@@ -22,7 +22,9 @@ import { t } from "../../../shared/i18n/index.mjs";
 // the window's edges), drawn with the CSS Custom Highlight API in the selection's own colors, the
 // browser's selecting held off meanwhile; back in that block, the browser's again. Shift+click in
 // another block selects from the caret to there.
-// Its text is that of body text, headings and list items (in quotes, highlight blocks, callouts, columns…).
+// Its text is that of body text, headings and list items (in quotes, highlight blocks, callouts, columns…),
+// and the page's title's, which a deletion takes its part of but never joins with the body's (notion-lite's
+// selection runs from its page title into the blocks; the user's: what is left of the body stays in the body).
 // A block holding none (a code block, a table, a file, an image, a formula block, a
 // divider…) is taken whole as it passes it, filled as a selected block is (selection/ mark), its
 // own text not marked: over one, an end of the selection stands before it or after it, as the drag
@@ -108,6 +110,10 @@ function lineStrips(texts, origin) {
 
 // The text blocks it takes text from, and a deletion joins: body text, headings, list items.
 const isText = (host) => isHost(host) && (host.getAttribute("data-ge-kind") ?? "flow") === "flow";
+// The page's title: text it takes too (drawn, copied, deleted), kept apart: a deletion leaves it what
+// stands outside the selection and joins nothing to it (remove).
+const isTitle = (host) => isHost(host) && host.getAttribute("data-ge-kind") === "title";
+const isPiece = (host) => isText(host) || isTitle(host);
 const textHosts = (unit) => [...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => isHost(node) && isText(node));
 
 // The outermost block around `node` holding no text of the body (a code block, a table, a file…),
@@ -194,12 +200,12 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   function pointAt(x, y, from) {
     const place = dragPlace([from.node, from.offset], x, y);
     const host = place && editable(place[0]);
-    if (host?.closest("main") && isText(host)) return { host, node: place[0], offset: place[1] };
+    if (host?.closest("main") && isPiece(host)) return { host, node: place[0], offset: place[1] };
     const whole = wholeOf(document.elementFromPoint(x, y));
     if (whole) return edge(whole, !from || before(from, edge(whole, false)));
     let best = null;
     let bestScore = null;
-    for (const each of hosts().filter((node) => node.closest("main") && isText(node))) {
+    for (const each of hosts().filter((node) => node.closest("main") && isPiece(node))) {
       const rect = each.getBoundingClientRect();
       // By height, then (level ones: columns side by side) by width; of nested ones, the innermost.
       const score = gapScore(rect, x, y);
@@ -220,7 +226,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   // Where the selection starts, `focus` being its other end: the press's place in body text; begun
   // in a block taken whole (its code, a cell), that block's edge away from `focus`.
   function startOf(anchor, focus) {
-    if (isText(anchor.host)) return anchor;
+    if (isPiece(anchor.host)) return anchor;
     const whole = wholeOf(anchor.host) ?? unitElement(anchor.host);
     if (!whole) return anchor;
     const head = edge(whole, false);
@@ -243,7 +249,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
     // text it reaches: none when its text stands before the start (the selection begun in a block the
     // item holds) or after the end.
     const reaches = (host) => host === selection.start.host || host === selection.end.host || (range.isPointInRange(host, 0) && range.isPointInRange(host, textEnd(host)));
-    const texts = hosts().filter((host) => host.closest("main") && isText(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host) && range.intersectsNode(host) && reaches(host) && !folded(host)).map((host) => {
       const part = document.createRange();
       part.setStart(host, 0);
       part.setEnd(host, textEnd(host));
@@ -496,7 +502,7 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       select(range);
       return;
     }
-    const texts = hosts().filter((host) => host.closest("main") && isText(host));
+    const texts = hosts().filter((host) => host.closest("main") && isPiece(host));
     const next = texts.find((host) => before(point, { node: host, offset: 0 }));
     const previous = texts.filter((host) => before({ node: host, offset: textEnd(host) }, point)).at(-1);
     const host = forward ? next ?? previous : previous ?? next;
@@ -504,14 +510,17 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
   }
 
   // Delete it: the first block keeps its text before it and takes the last block's after it, the
-  // blocks between go (those taken whole among them); one undo step, the caret where it began.
+  // blocks between go (those taken whole among them); one undo step, the caret where it began. From
+  // the page's title (`apart`) nothing joins: the title keeps what stands before it (empty, it says
+  // 未命名文档), the last block what stands after it in a block of its own (gone when that is nothing).
   // Returns whether it went.
   function remove() {
     const selection = cross;
     const { start, end } = selection;
     letGo();
     if (!(start.host ?? start.node).isConnected || !(end.host ?? end.node).isConnected) return false;
-    if (![start.host, end.host].every((host) => !host || isText(host))) {
+    const apart = isTitle(start.host) || isTitle(end.host);
+    if (![start.host, end.host].every((host) => !host || isPiece(host))) {
       say(t("跨块删除只支持正文、标题和列表里的文字。"));
       return false;
     }
@@ -553,9 +562,14 @@ export function createTextSelection({ isEditing, struct, say, keepText, selectUn
       }
       for (const target of targets) takeOut(target);
       // Joined unless the two cannot be (a block that may not merge, lists that cannot go along):
-      // then each keeps what is left of its text.
-      if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
-      if (start.host) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      // then each keeps what is left of its text. Apart from the title, the last block left empty
+      // goes as the blocks between do (it was all selected), else it stays with its rest.
+      if (apart) {
+        const last = isTitle(end.host) ? null : end.host;
+        if (last && endTarget && isEmpty(last) && can(last, "remove") && !keepText(endTarget)) takeOut(endTarget);
+      } else if (start.host && end.host && mergeInto(start.host, end.host, { anyKind: true }) && endTarget !== end.host && endTarget.isConnected) takeOut(endTarget);
+      if (start.host && !apart) joinCode(start.host); // inline code meeting inline code at the join is one piece
+      if (isTitle(start.host) && isEmpty(start.host)) start.host.replaceChildren(); // no <br> left in an emptied title
       return { touched: touched.filter((host) => host.isConnected), focus: start.host ?? end.host ?? null };
     });
     if (!result) return false;

package/browser/editor/page/todo-writes.mjs

@@ -0,0 +1,75 @@
+import { TODO_EVENT, TODO_MOST, TODO_ROUTE } from "../../shared/workspace-query.mjs";
+import { postAnswer } from "./post.mjs";
+
+// To-dos of documents checked from this page (workspace.setTodo, the plan's 5.1; docs/editor.md "To-dos
+// checked from another page"): the kit's ask (TODO_EVENT, cancelable on the window: { ask: { slug, ref,
+// done }, answer(promise) }) taken by whoever holds the page's token (a custom page's board, a document's
+// editor) and written by the workspace's service (POST TODO_ROUTE, one document a request: the edit
+// service's setTodos, one commit of the reader's). The checks of one document wait in a line of their own:
+// those asked while one write of it is out go together in the next (its items in the order asked, the
+// last of an item winning), so that a reader ticking five boxes quickly makes two commits, not five.
+// Each ask is answered { ok: true, changed, block } (`block` the item's id now, which the commit gives
+// one that had none) or { ok: false, reason, message? }, never rejected.
+
+/**
+ * `token`: the page map's. `done(ask, answer)`: an ask answered (the board keeps an undo step of one that
+ * changed its document). Returns { write(ask) (a promise of its answer), idle() (once every write asked so
+ * far is answered), listen() (takes the kit's asks; returns the function that stops it) }.
+ */
+export function createTodoWrites({ token, done = () => {} }) {
+  const lines = new Map(); // slug -> { waiting: [{ ask, resolve }], out: Promise | null }
+
+  async function send(slug, line) {
+    const batch = line.waiting.splice(0, TODO_MOST);
+    const answer = await postAnswer(TODO_ROUTE, token, { slug, items: batch.map(({ ask }) => ({ ref: ask.ref, done: ask.done })) });
+    batch.forEach(({ ask, resolve }, index) => {
+      const result = answer?.ok ? answer.results?.[index] ?? { ok: false, reason: "failed" } : { ok: false, reason: answer?.reason === "offline" ? "offline" : answer?.reason ?? "failed", ...(typeof answer?.message === "string" ? { message: answer.message } : {}) };
+      try {
+        done(ask, result);
+      } finally {
+        resolve(result);
+      }
+    });
+  }
+
+  // The line of a document: written once nothing of it is out, what waits then going together.
+  function run(slug) {
+    const line = lines.get(slug);
+    if (line.out || line.waiting.length === 0) return;
+    // A microtask's wait, so that the asks of one gesture (a block checking several at once) go together.
+    line.out = Promise.resolve().then(() => send(slug, line)).catch(() => {}).finally(() => {
+      line.out = null;
+      if (line.waiting.length > 0) run(slug);
+      else lines.delete(slug);
+    });
+  }
+
+  function write(ask) {
+    return new Promise((resolve) => {
+      if (!lines.has(ask.slug)) lines.set(ask.slug, { waiting: [], out: null });
+      lines.get(ask.slug).waiting.push({ ask, resolve });
+      run(ask.slug);
+    });
+  }
+
+  return {
+    write,
+    async idle() {
+      for (;;) {
+        const out = [...lines.values()].map((line) => line.out).filter(Boolean);
+        if (out.length === 0) return;
+        await Promise.all(out);
+      }
+    },
+    listen() {
+      const take = (event) => {
+        const { ask, answer } = event.detail ?? {};
+        if (event.defaultPrevented || !ask || typeof answer !== "function") return;
+        event.preventDefault();
+        answer(write(ask));
+      };
+      addEventListener(TODO_EVENT, take);
+      return () => removeEventListener(TODO_EVENT, take);
+    },
+  };
+}

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

@@ -1,12 +1,13 @@
 import {
-  boxKind, can, emptyContainer, isEmpty, isFirstLine, isHost, limitText, mergeWithPrevious, nestedBlocks, nestedLists, nextLine, parentItem, previousLine, removalTarget, splitBlock, takeOut, textEnd, unitElement,
+  UNIT, boxKind, can, emptyContainer, isEmpty, isFirstLine, isHost, limitText, mergeWithPrevious, nestedBlocks, nestedLists, nextLine, parentItem, previousLine, removalTarget, splitBlock, takeOut, textEnd, unitElement, newParagraphHost, withLeads,
 } from "../core.mjs";
 import { atEdge, caretAt, hosts, select, textNear } from "../caret.mjs";
 import { convertible } from "../convert.mjs";
 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, firstSaysOf, placeholderOf, textFilters, textTypeOf } from "../../components/registry.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.
@@ -25,6 +26,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // 3万5千), and a block written without such spaces is typed in its own way (none added).
 const HAN = /[\u2e80-\u2eff\u2f00-\u2fdf\u3040-\u309f\u30a0-\u30fa\u30fc-\u30ff\u3100-\u312f\u3200-\u32ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/;
 const LATIN = /[A-Za-z0-9]/;
+// The text blocks that say their placeholder whenever they are empty (HOSTS' `untitled`: the page's title).
+const UNTITLED = Object.keys(HOSTS).filter((kind) => HOSTS[kind].untitled).map((kind) => `main [data-ge-kind="${kind}"]`).join(", ");
 const needsSpace = (a, b, before) => ((HAN.test(a) && LATIN.test(b)) || (LATIN.test(a) && HAN.test(b))) && !numberWithUnit(a, b, before);
 // The block's own way with Chinese beside Latin letters and digits, from its text but what was just
 // typed: true when it writes them together more often than apart (a number's unit is no sign either way).
@@ -51,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.
@@ -61,11 +67,46 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     return Boolean(key(pageOf(host)?.keys ?? {})?.(ctx, ...rest) || pagesAround(host).some((page) => key(page.keys?.around ?? {})?.(ctx, ...rest)));
   }
 
+  // Enter in the page's title (HOSTS' `opensBody`): notion-lite's splitBlock for the page (enter.js, its
+  // first rule): what is selected goes, what follows the caret leaves the title for a new paragraph right
+  // below it, the first block of the page (an empty one at its end, a new untitled document's too), and
+  // the caret goes to its start; the title keeps what stands before the caret, never a line break. One
+  // undo step, the caret back in the title where it was. Below the title is the header's first line when it has one
+  // (the paragraph goes before it, in the header), else the first block after the header.
+  function enterBody(title) {
+    const selection = getSelection();
+    if (!selection.rangeCount || !title.contains(selection.getRangeAt(0).startContainer) || !title.contains(selection.getRangeAt(0).endContainer)) return;
+    const range = selection.getRangeAt(0);
+    const header = title.parentElement;
+    let line = title.nextElementSibling;
+    while (line && !line.matches(UNIT)) line = line.nextElementSibling;
+    const [box, before] = line ? [header, withLeads(line)[0]] : [header.parentElement, header.nextSibling];
+    const paragraph = newParagraphHost(document);
+    if (!box?.hasAttribute("data-ge-box") || !accepts(box.getAttribute("data-ge-box-kind"), paragraph.getAttribute("data-ge-type"))) {
+      say(limitText(title, "split"));
+      return;
+    }
+    struct([...new Set([header, box])], [title], () => {
+      range.deleteContents();
+      const tail = document.createRange();
+      tail.setStart(range.startContainer, range.startOffset);
+      tail.setEnd(title, title.childNodes.length);
+      const moved = tail.extractContents();
+      if (moved.textContent.length > 0) paragraph.append(document.createTextNode(moved.textContent)); // the title's words, plain
+      title.normalize();
+      if (isEmpty(title)) title.replaceChildren();
+      box.insertBefore(paragraph, before);
+      return { touched: [title, paragraph], focus: paragraph };
+    }, { caret: true });
+    caretAt(paragraph, "start");
+  }
+
   // Enter.
   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
@@ -115,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);
@@ -144,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 };
@@ -166,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
@@ -175,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.
@@ -266,10 +335,23 @@ export function createTyping({ struct, say, keepText, paragraphBefore, removeBlo
     if (hint) host.setAttribute("data-ge-placeholder", hint);
     else host?.removeAttribute("data-ge-placeholder");
     host?.toggleAttribute("data-ge-adding", add);
+    untitled();
+  }
+
+  // The page's title says 未命名文档 whenever it is empty, the caret in it or not (HOSTS' `untitled`:
+  // notion-lite's page title, data-ph 新页面); asked again on every move of the caret and every input,
+  // so an undo, a deletion across blocks and the workbench's renaming are followed too.
+  function untitled() {
+    if (!UNTITLED) return;
+    for (const host of document.querySelectorAll(UNTITLED)) {
+      if (!isHost(host)) continue;
+      if (isEmpty(host)) host.setAttribute("data-ge-placeholder", placeholderOf(host));
+      else if (host !== placeholder) host.removeAttribute("data-ge-placeholder");
+    }
   }
 
   return {
-    split, backspace, forwardDelete, autoSpace, updatePlaceholder,
+    split, backspace, forwardDelete, autoSpace, updatePlaceholder, untitled,
     /** Tab (`back`: Shift+Tab). Whether the key was taken. */
     tab: (host, back) => asked((keys) => keys.tab, host, back),
     /** Ctrl+Enter. Whether the key was taken. */