@heycys/gallery 0.1.2 → 0.2.0

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

@@ -0,0 +1,288 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
+import { UNIT, can, isEmpty, isHost, newHost, removalTarget, takeOut, withLeads } from "../core.mjs";
+import { atEdge, caretAt, hosts } from "../caret.mjs";
+import { caretBeside } from "../beside.mjs";
+import { contentOf, extentOf } from "../geometry.mjs";
+import { FOLLOW, task } from "../frames.mjs";
+import { layerOf } from "../overlay-layer.mjs";
+import { onSettle, own } from "../overlays.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { alignClass, shownAlign } from "../align.mjs";
+import { accepts, texOnly } from "../../components/registry.mjs";
+
+// The caret after a block (docs/editor.md, "The caret after a block"; the user's, 2026-11-09): a click
+// right of a block that is no text of its own (a picture, a table, a code block, a callout, a divider, a
+// card, an instance of a custom block, a row of columns…: insert/ boxedBeside, beside.mjs) puts a caret
+// at its bottom right, a blinking one, as the browser draws in text. Neither notion-lite nor
+// feishu-lite has one (Gallery's click there selected the block before); this is the plainest rule.
+// The text right below such a block comes back to it (the user's, 2026-11-09: Backspace there went
+// into the block, a table's last cell, a callout's box, or past it, a picture passed over): Backspace
+// at the start of the text block right after it (typing/, after the block's own keys and its
+// alignment), and ← or ↑ there, put this caret after it, an empty block left going as it does
+// (one undo step), one with words staying (no step); a second Backspace is this caret's.
+//
+//   Backspace, Delete   the block becomes an empty paragraph in its place, whatever follows it (the
+//                       user's, 2026-11-09; the box it stands in taking one), aligned as the block was
+//                       shown (a picture centred: centred, align.mjs shownAlign), the caret in it; one
+//                       more Backspace takes that alignment off (typing/: align.mjs unalign) before
+//                       anything else
+//   Enter               an empty paragraph right after it, the caret in it
+//   a key typed         a paragraph right after it holding what was typed, the caret at its end (an
+//                       input method composes in the caret, its words going there once it ends)
+//   ↑ ←, ↓ →            the text before it (its own last text: a table's last cell, a picture's caption),
+//                       or after it, at its end or start; none there, the caret stays
+//   Esc                 the block selected
+//   Ctrl+V              a paste goes into a new paragraph after it
+//
+// Each change is one undo step, the words typed going with the paragraph they made (history.mjs
+// typedInto), and undo puts this caret back after the block. The caret is an element of the editor's
+// layer (overlay-layer.mjs: the page's, a dialog's), never the report's: an empty field that takes the
+// focus, in the body text's font, at the block's right edge with its bottom on the block's, kept there
+// as the page moves (a task of frames.mjs); it goes with the focus, its block, or a press elsewhere.
+
+const STYLE = `
+  .ge-after { z-index: ${IN_LAYER.frame}; display: inline-block; min-width: 2px; margin: 0; padding: 0; border: 0; outline: none; white-space: pre; background: transparent; color: var(--doc-text, currentColor); caret-color: var(--doc-text, currentColor); pointer-events: none; }
+`;
+
+/**
+ * struct(parents, touched, mutate, options): the editor's undoable structural change (history.mjs).
+ * blocks(): the block tools (blocks.mjs). keepText(unit): why a block may not go. removeBlocks(units):
+ * the blocks deleted as the selected ones are (where no paragraph can take its place). say: the status
+ * line. undo(), redo(): the editor's.
+ */
+export function createAfter({ struct, blocks, keepText, removeBlocks, say, undo, redo }) {
+  addStyle(STYLE);
+  const node = element("span", { class: "ge-after", contenteditable: "true", spellcheck: "false", "data-doc-dev": "" });
+  let at = null; // the block the caret stands after
+
+  const follow = task("after", {
+    run() {
+      if (!at) return false;
+      if (!at.isConnected || at.getClientRects().length === 0) {
+        hide();
+        return false;
+      }
+      draw();
+      return FOLLOW;
+    },
+    fail: () => hide(),
+  });
+
+  // At the block's right edge, its bottom on the block's: as tall as a line of the body text of the box it stands in.
+  function draw() {
+    const rect = extentOf(at);
+    if (!rect) return;
+    const layer = layerOf(at);
+    if (node.parentNode !== layer) layer.append(node);
+    const origin = layer.getBoundingClientRect();
+    const height = node.offsetHeight || 24;
+    node.style.transform = `translate(${Math.round(rect.right + 1 - origin.left)}px, ${Math.round(rect.bottom - height - origin.top)}px)`;
+    own(node, "after", { owner: at, alive: () => Boolean(at) && at.isConnected });
+  }
+
+  /** The caret after block `unit`, focused. */
+  function place(unit) {
+    if (!unit?.isConnected) return;
+    blocks().clear();
+    at = unit;
+    // The body text's font of the box it stands in (what a paragraph there is typed in).
+    const style = getComputedStyle(unit.parentElement ?? document.body);
+    const size = parseFloat(style.fontSize) || 16;
+    const line = parseFloat(style.lineHeight) || size * 1.5;
+    Object.assign(node.style, { fontFamily: style.fontFamily, fontSize: `${size}px`, lineHeight: `${line}px`, height: `${line}px` });
+    node.textContent = "";
+    draw();
+    node.focus({ preventScroll: true });
+    const range = document.createRange();
+    range.setStart(node, 0);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+    follow.wake();
+  }
+
+  function hide() {
+    at = null;
+    node.textContent = "";
+    node.remove();
+  }
+
+  // What the caret stands after, the caret taken away (the focus going where the change puts it).
+  function take() {
+    const unit = at;
+    at = null;
+    node.textContent = "";
+    if (document.activeElement === node) node.blur();
+    node.remove();
+    return unit;
+  }
+
+  const takesParagraph = (box) => Boolean(box) && accepts(box.getAttribute("data-ge-box-kind") ?? "flow", "paragraph");
+
+  // A paragraph right after the block (`text` in it: what was typed), the caret at its end; one undo
+  // step, the words typed on into it with it (typedInto), undo putting this caret back after the block.
+  function paragraphAfter(text = "") {
+    const unit = at;
+    const box = unit?.parentElement;
+    if (!takesParagraph(box)) return null;
+    take();
+    const paragraph = newHost(document, "paragraph");
+    if (text) paragraph.textContent = text;
+    struct([box], [], () => {
+      unit.after(paragraph);
+      return { touched: [paragraph], focus: paragraph, settle: (backwards) => backwards && queueMicrotask(() => place(unit)) };
+    }, { typedInto: text ? paragraph : null });
+    caretAt(paragraph, "end");
+    return paragraph;
+  }
+
+  // Backspace, Delete: the block becomes an empty paragraph in its place, aligned as it was shown, the
+  // caret in it, whatever follows it (the user's, 2026-11-09: it was the text after it that took the
+  // caret, no paragraph made); where its box takes none, it is deleted as a selected block is. One undo
+  // step, which puts this caret back after the block.
+  function remove() {
+    const unit = at;
+    const reason = keepText(unit);
+    if (reason) {
+      say(reason, "note", 6000);
+      return;
+    }
+    const box = unit.parentElement;
+    if (!takesParagraph(box)) {
+      take();
+      removeBlocks([unit]);
+      return;
+    }
+    const parts = withLeads(unit);
+    const area = contentOf(box.getBoundingClientRect(), getComputedStyle(box));
+    const aligned = alignClass(shownAlign(unit.getBoundingClientRect(), area));
+    take();
+    const paragraph = newHost(document, "paragraph");
+    if (aligned) paragraph.classList.add(aligned);
+    struct([box], [], () => {
+      parts[0].before(paragraph);
+      parts.forEach((part) => part.remove());
+      return { touched: [paragraph], focus: paragraph, settle: (backwards) => backwards && queueMicrotask(() => place(unit)) };
+    });
+    caretAt(paragraph, "start");
+  }
+
+  // The block of no text right above text block `host` (one a click right of puts this caret after:
+  // beside.mjs caretBeside), shown: the block before it in its box, before a list's first item the one
+  // before the list; or null. `host` is the first text of its block (a paragraph, a heading, a list's
+  // first item), never a table's cell or a code block's text.
+  function above(host) {
+    if (!isHost(host) || texOnly(host) || !host.matches(UNIT)) return null;
+    let node = host;
+    while (!withLeads(node)[0].previousElementSibling && /^(UL|OL)$/.test(node.parentElement?.tagName ?? "") && node.parentElement.matches(UNIT)) node = node.parentElement;
+    const block = withLeads(node)[0].previousElementSibling;
+    return caretBeside(block) && block.parentElement?.hasAttribute("data-ge-box") && block.getClientRects().length > 0 && block.checkVisibility?.() !== false ? block : null;
+  }
+
+  /**
+   * Backspace at the start of text block `host` (typing/, after its own keys): the caret after the
+   * block of no text right above it, `host` going when it is empty (one undo step, undo putting the
+   * caret back in it, redo this caret after the block), staying when it holds words. Whether it did.
+   */
+  function back(host) {
+    const unit = above(host);
+    if (!unit) return false;
+    const node = isEmpty(host) && can(host, "remove") ? removalTarget(host) : null;
+    if (node && !keepText(node)) {
+      struct([node.parentNode], [host], () => {
+        takeOut(node);
+        return { touched: [], focus: null, settle: (backwards) => !backwards && queueMicrotask(() => place(unit)) };
+      });
+    }
+    place(unit);
+    return true;
+  }
+
+  /** ← or ↑ with the caret at the start of text block `host` (editor.mjs): the caret after the block above it, as back(). Whether it did. */
+  function up(host, key) {
+    if (key !== "ArrowLeft" && key !== "ArrowUp") return false;
+    const selection = getSelection();
+    if (!selection.rangeCount || !selection.isCollapsed || !atEdge(host, false)) return false;
+    const unit = above(host);
+    if (!unit) return false;
+    place(unit);
+    return true;
+  }
+
+  // ↑ ←: the text before the caret (the block's own last, or the one before it), at its end; ↓ →: the
+  // first after it, at its start. Formula blocks are passed over (no text to type in).
+  function leave(back) {
+    const unit = at;
+    const list = hosts().filter((host) => !texOnly(host));
+    const before = (host) => unit.contains(host) || Boolean(host.compareDocumentPosition(unit) & Node.DOCUMENT_POSITION_FOLLOWING);
+    const target = back ? list.filter(before).at(-1) : list.find((host) => !before(host));
+    if (!target) return;
+    take();
+    caretAt(target, back ? "end" : "start");
+  }
+
+  /** A key with the caret after a block (editor.mjs onKeydown, first): whether it was this caret's. */
+  function key(event) {
+    if (!at || event.target !== node) return false;
+    if (event.isComposing || event.keyCode === 229) return true; // an input method's: composed here, put in at its end
+    const mod = event.ctrlKey || event.metaKey;
+    const name = event.key.toLowerCase();
+    if (mod && !event.altKey && (name === "z" || name === "y")) {
+      event.preventDefault();
+      take();
+      name === "y" || event.shiftKey ? redo() : undo();
+      return true;
+    }
+    if (mod && !event.altKey && !event.shiftKey && name === "v") {
+      paragraphAfter(); // the paste that follows goes into it
+      return true;
+    }
+    if (mod && name === "s") return false; // saving, the editor's
+    if (event.key === "Backspace" || event.key === "Delete") remove();
+    else if (event.key === "Enter") paragraphAfter();
+    else if (event.key === "Escape") {
+      const unit = take();
+      blocks().select(unit);
+    } else if (event.key.startsWith("Arrow") && !mod && !event.altKey) leave(event.key === "ArrowUp" || event.key === "ArrowLeft");
+    else if (!mod && event.key.length === 1) return true; // a character: typed here, put in a paragraph (input)
+    else if (mod || event.key === "Tab") event.preventDefault(); // nothing to format or move: the keys do nothing here
+    else return true;
+    event.preventDefault();
+    return true;
+  }
+
+  // What was typed (a key's character, an input method's words once it ends): a paragraph after the
+  // block holding it.
+  node.addEventListener("input", (event) => {
+    if (event.isComposing || !at) return;
+    const text = node.textContent;
+    node.textContent = ""; // nothing stays in the field, wherever the words go (a box that takes no paragraph: nowhere)
+    if (text) paragraphAfter(text);
+  });
+  node.addEventListener("compositionend", (event) => {
+    if (!at) return;
+    const text = event.data || node.textContent;
+    node.textContent = "";
+    if (text) paragraphAfter(text);
+  });
+  // The focus gone elsewhere on the page (a press, a key that moved it): the caret goes. The window
+  // losing it keeps it, as the browser's own caret is kept.
+  node.addEventListener("blur", () => {
+    if (at && document.hasFocus()) hide();
+  });
+  // Its block taken off the page (an Agent's write, undo): it goes at once.
+  onSettle(() => {
+    if (at && !at.isConnected) hide();
+  });
+  globalThis.__galleryAfter = () => (at && document.activeElement === node ? at : null); // the block the caret stands after (the browser tests)
+
+  return {
+    place,
+    key,
+    back,
+    up,
+    /** The block the caret stands after, or null. */
+    get block() { return at; },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens. */
+    get nodes() { return node.isConnected ? [node] : []; },
+  };
+}

package/browser/editor/page/align.mjs

@@ -0,0 +1,91 @@
+import { ALIGNS, ALIGN_TOGGLES, INDENT_MOST, alignLook, alignOf, aligns, indentLook, indentOf, indents } from "../components/align.mjs";
+import { TOGGLES } from "../components/registry.mjs";
+import { svg } from "../components/icons.mjs";
+import { TABLE_ICONS } from "./table/icons.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// 对齐与缩进 (docs/editor.md, "Alignment and indent"; Feishu's 缩进和对齐 ›, its block menu's), shared by
+// the tools that use it (block-menu/, typing/, after/): a
+// paragraph's or a heading's alignment and indent, class switches its component takes (components/
+// align.mjs) that the file keeps and the kit draws; a table's frame takes the alignment alone (it is
+// placed on the page left, centred or right, as a text block's words are), by the same row, named 对齐.
+// The block menu's row (block-menu/), for one block or
+// for several selected that all take them, one undo step; Enter carrying them to the block it makes
+// (core.mjs newBlock: components/align.mjs carry), and Backspace at a block's start taking them off before anything else
+// (typing/: unalign), one at a time: a centred or right-aligned block to the left, then its indent a
+// level less (Feishu's text block: 退对齐, then 反缩进, then 合并到上一块), each one undo step, the caret
+// staying at the start. The same for a paragraph left in a block's place by Backspace after it
+// (after/): it takes the alignment the block showed.
+
+// Its icons, in the menus' lines (20 units, the table's alignments beside them): text lines the middle
+// two moved in (the row), and the same with an arrow in (增加缩进) or out (减少缩进) at their left.
+const LINES = '<path d="M3.75 4.75h12.5M9.25 8.5h7M9.25 11.75h7M3.75 15.25h12.5"/>';
+export const ALIGN_ICONS = {
+  row: svg('<path d="M3.75 4.75h12.5M7.25 8.5h9M7.25 11.75h9M3.75 15.25h12.5"/>'),
+  left: TABLE_ICONS["doc-align-left"],
+  center: TABLE_ICONS["doc-align-center"],
+  right: TABLE_ICONS["doc-align-right"],
+  indent: svg(`${LINES}<path d="m3.75 7.9 2.25 2.25-2.25 2.25"/>`),
+  outdent: svg(`${LINES}<path d="M6 7.9 3.75 10.15 6 12.4"/>`),
+};
+
+const LABELS = { left: t("左对齐"), center: t("居中对齐"), right: t("右对齐") };
+
+/** Whether a block takes an alignment: its kind's class switches hold it (`kind`: its unit kind). */
+export const alignable = (kind) => aligns(TOGGLES[kind]);
+
+/** Whether a block takes an indent too, as a text block does (`kind`: its unit kind). */
+export const indentable = (kind) => indents(TOGGLES[kind]);
+
+/**
+ * The block menu's 对齐与缩进 › for `units` (one block, or several selected), when they all take one
+ * (kindOf(unit): its unit kind), or none: the three alignments (the one they share checked), then 增加缩进
+ * and 减少缩进 (each a level for every one of them, disabled where none can go further), one undo step
+ * each (look: the editor's change of classes). Where they do not all take an indent (a table's frame
+ * has none) the row is 对齐 › with the three alignments alone.
+ */
+export function alignRows(units, { kindOf, look }) {
+  if (units.length === 0 || !units.every((unit) => alignable(kindOf(unit)))) return [];
+  const shared = units.every((unit) => alignOf(unit) === alignOf(units[0])) ? alignOf(units[0]) : null;
+  const withIndent = units.every((unit) => indentable(kindOf(unit)));
+  const levels = units.map(indentOf);
+  const indent = (step) => look(units, units.map((unit) => indentLook(Math.max(0, Math.min(INDENT_MOST, indentOf(unit) + step)))), units);
+  return [{
+    label: withIndent ? t("对齐与缩进") : t("对齐"), icon: ALIGN_ICONS.row,
+    submenu: () => [
+      ...["left", "center", "right"].map((name) => ({ label: LABELS[name], icon: ALIGN_ICONS[name], current: shared === name, run: () => look(units, alignLook(name), units) })),
+      ...(withIndent ? [
+        { separator: true },
+        { label: t("增加缩进"), icon: ALIGN_ICONS.indent, disabled: levels.every((level) => level >= INDENT_MOST), run: () => indent(1) },
+        { label: t("减少缩进"), icon: ALIGN_ICONS.outdent, disabled: levels.every((level) => level === 0), run: () => indent(-1) },
+      ] : []),
+    ],
+  }];
+}
+
+/**
+ * Backspace at the start of text block `host` (typing/): its alignment taken off (to the left), else its
+ * indent a level less, one undo step (look), the caret where it is. Returns whether it did either.
+ */
+export function unalign(host, look) {
+  if (!indentable(host.getAttribute?.("data-ge-unit-kind")) || !ALIGN_TOGGLES.some((name) => host.classList.contains(name))) return false;
+  if (alignOf(host) !== "left") return look(host, alignLook("left"));
+  return look(host, indentLook(indentOf(host) - 1));
+}
+
+/**
+ * The alignment a block shows in the text area of the box it stands in (`area`: that area's rect,
+ * window coordinates): "center" or "right" when it is narrower and stands there, else "left" (a
+ * block as wide as the area has none). How a picture, a card or a table set narrower is placed,
+ * whatever says so (its class, its margins): what the reader sees.
+ */
+export function shownAlign(rect, area) {
+  const left = rect.left - area.left;
+  const right = area.right - rect.right;
+  if (left <= 2 && right <= 2) return "left";
+  if (Math.abs(left - right) <= 2) return "center";
+  return right <= 2 ? "right" : "left";
+}
+
+/** The class that gives a new paragraph the alignment `name`, or null for the left. */
+export const alignClass = (name) => ALIGNS[name] ?? null;

package/browser/editor/page/beside.mjs

@@ -6,16 +6,15 @@ import { isHost } from "./core.mjs";
 // (selection/).
 
 /**
- * Whether a click to the right of a block, past the text area it stands in (insert/ boxedBeside),
- * selects it: a boxed block (a code block, a highlight block, a disclosure, a card, a table, a
- * divider…) or a row of columns, as opposed to text and the boxes text flows in (a list, a quote, a
- * section).
+ * Whether a click to the right of a block (insert/ boxedBeside) puts the caret after it (after/): a
+ * boxed block (a code block, a highlight block, a disclosure, a card, a table, a divider…) or a row
+ * of columns, as opposed to text and the boxes text flows in (a list, a quote, a section).
  */
-export const selectsBeside = (unit) => BESIDE.has(unit?.getAttribute?.("data-ge-unit-kind"));
+export const caretBeside = (unit) => BESIDE.has(unit?.getAttribute?.("data-ge-unit-kind"));
 
 /**
  * Whether Enter on a block selected (the first of those selected) puts a new paragraph after them
  * (blocks.mjs, insert.paragraphAfter): a block of no text of its own, those a click to their right
- * selects and a 选项卡区块; not a text block among them (a formula block, whose editor it opens).
+ * puts the caret after and a 选项卡区块; not a text block among them (a formula block, whose editor it opens).
  */
 export const entersAfter = (unit) => Boolean(unit) && !isHost(unit) && ENTERS_AFTER.has(unit.getAttribute("data-ge-unit-kind"));

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

@@ -10,6 +10,7 @@ import { columnOps, menuRow, pageOfUnit, rowBeside, sectionOps } from "../page-o
 import { MENU_COLUMNS, MENU_WIDTH, typeGrid } from "../type-grid.mjs";
 import { rememberType, typeItems } from "../slash-menu/index.mjs";
 import { COLOR_ICON, COLOR_WIDTH, colorItems } from "./colors.mjs";
+import { alignRows } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // The block menu (docs/editor.md, "Deleting blocks" and "New blocks and conversions"; the card is
@@ -30,7 +31,8 @@ import { t } from "../../../shared/i18n/index.mjs";
 // "分区与分栏 ›" (组成新分区 for neighbours in the page or a Sheet panel, 解散所在分区 for blocks all in
 // one section, 分成 n 栏 for neighbours side by side, a column each) and deleting them all. A block that
 // takes a color (a paragraph, a heading: components/colors.mjs) has "颜色 ›" right below its types,
-// as Notion's (colors.mjs); so do several selected ones that all take one. It keeps clear of the block, or stands right of a section's bar.
+// as Notion's (colors.mjs); so do several selected ones that all take one. A paragraph and a heading
+// have "对齐与缩进 ›" right above it (align.mjs, Feishu's 缩进和对齐 ›), several selected that all take one too. It keeps clear of the block, or stands right of a section's bar.
 // A component whose block has a menu of its own gives it (`menu`): a Sheet tab's is Notion's tab
 // menu, below the tab (components/sheets/page.mjs): 重命名, 编辑图标 and 删除. A block that turns into
 // nothing has its name at the head (`nameOf`), with its mark where its component has one (`iconOf`:
@@ -147,7 +149,7 @@ export function createBlockMenu({ info, menu, selection, remove, takenWith = (un
         }, { columns: COLUMNS });
         items.push({ node: grid, cells: [...grid.querySelectorAll(".ge-type")], columns: COLUMNS }, { separator: true });
       }
-      const colors = colorRow(group);
+      const colors = [...alignRows(group, { kindOf, look }), ...colorRow(group)];
       items.push(...colors, ...(colors.length > 0 ? [{ separator: true }] : []));
       // Blocks next to each other in the page or a Sheet panel become a section; a selection with gaps does not.
       // A folded heading among them goes in with what it hides (fold/).
@@ -171,7 +173,8 @@ export function createBlockMenu({ info, menu, selection, remove, takenWith = (un
     }
     // A highlight block's icon (添加图标 / 更换图标: components/icon/page.mjs rowBeside) beside its color.
     const icon = rowBeside(target);
-    if (colorable(target) || icon) items.push(...(colorable(target) ? colorRow([target]) : []), ...(icon ? [icon] : []), { separator: true });
+    const aligned = alignRows([target], { kindOf, look });
+    if (aligned.length > 0 || colorable(target) || icon) items.push(...aligned, ...(colorable(target) ? colorRow([target]) : []), ...(icon ? [icon] : []), { separator: true });
     // A component's own rows (an image's: components/image/page.mjs; a table's, with its size's
     // 铺满正文宽度…; a card's, a code block's, a Sheet area's), one group, from its page module.
     const own = pageOfUnit(target)?.menuItems?.(target) ?? [];

package/browser/editor/page/blocks.mjs

@@ -67,7 +67,8 @@ export function createBlocks({ slug = "", units, boxes, active, struct, look, sa
   const blockMenu = createBlockMenu({ info, menu, selection, remove: (targets) => remove(targets), takenWith: folds.takenWith, turnInto, convert, turnIntoAll, convertAll, below, belowTypes, add, look, copyLink, linkAhead });
   const handle = createHandle({ info, active, selection, drag, menu, openMenu: blockMenu.open, drawing: () => marquee.drawing, schedule, keeps: (node) => keepsHandle(node) || folds.holds(node), aside: folds.holds, add: (target, where) => { selection.clear(); addNear(target, where); }, notes });
   const remove = createDelete({ info, selection, struct, say, closeMenu, forget: () => handle.forget(), folds });
-  // What a component makes with these tools (`blockTools`): a Sheet's tabs as Notion's pills, a click, a drag, their menu, + (components/sheets/pills.mjs).
+  // What a component makes with these tools (`blockTools`): a Sheet's tabs as Notion's pills, a click, a drag, their menu, + (components/sheets/pills.mjs);
+  // an image's grips and bar while it is the one block selected (components/image/page.mjs), placed in this task's frames (`follow`).
   const parts = pageObjects().flatMap((page) => page.blockTools?.({ active, drag, menu, openMenu: blockMenu.open, struct, say }) ?? []);
   // A press on empty space: a box selection, or a click there (marquee.mjs clears the selection).
   const marquee = createMarquee({
@@ -91,6 +92,7 @@ export function createBlocks({ slug = "", units, boxes, active, struct, look, sa
     step("selection", () => selection.paint(drag.active), () => selection.unpaint());
     step("handle", () => handle.place(), () => handle.hide());
     step("fold", () => folds.place(handle.pointed), () => folds.hide());
+    step("parts", () => parts.forEach((part) => part.follow?.(drag.active ? [] : selection.picked)), () => parts.forEach((part) => part.hide()));
     if (drag.active) return true;
     return handle.showing || folds.showing || selection.picked.length > 0 ? FOLLOW : false;
   }

package/browser/editor/page/board/hint.mjs

@@ -3,27 +3,31 @@ import { postAnswer } from "../post.mjs";
 import { say } from "../notices.mjs";
 import { addStyle, element } from "../ui.mjs";
 
-// The home page's first-open note (notes/plans/component-pages-plan-2026-11-07.md §5.2; docs/render.md
-// "A custom page", **The default home page**): at the top of the home page, while the page map says
-// `hint` (src/server/routes.mjs: the home page, its note not yet closed in this workspace), a short
-// note on its cards: how to move one (the grip at its top-right: drag it), open its menu (a click on
-// the same grip: 大小, 设置, 删除), add one (添加自定义块: the first item of the ··· menu at the top right of the workbench's bar; a page open
-// alone in a tab has it at the top right of its board) and take one out (the menu's 删除), and that a new
-// card or a new page is the Agent's to make, with a sentence the reader can copy and say to one (its 复制
-// button). Its × closes it for good, for the workspace (POST
-// /__gallery/pages/home/hint: .gallery/hints.json), whichever browser shows the page next. In the
+// A custom page's first-open note (notes/plans/component-pages-plan-2026-11-07.md §5.2; docs/render.md
+// "A custom page", **Notes of a page**): at the top of a page whose page.json says `hint` (the default home
+// page's), while the page map says `hint` (src/server/routes.mjs: its note not yet closed in this
+// workspace), a short note on its cards: how to move one (the grip at its top-right: drag it), open its
+// menu (a click on the same grip: 大小, 设置, 删除), add one (添加自定义块: the first item of the ··· menu at the
+// top right of the workbench's bar; a page open alone in a tab has it at the top right of its board) and
+// take one out (the menu's 删除), and that a new card or a new page is the Agent's to make, with a sentence
+// the reader can copy and say to one (its 复制 button). Its × closes it for good, for the workspace (POST
+// /__gallery/pages/<slug>/hint: .gallery/hints.json), whichever browser shows the page next. In the
 // editor's look: grays alone, a quiet fill, no colour; the kit's own light and dark through the
 // editor's tokens (look.mjs).
 //
-// And its note of new default cards (showNews: the plan's 3.4), on a home page made before them (a phase 2
-// home: 问候与日期 and 便签 alone), while the page map says `news`: which default cards it does not hold
-// that came since (我的待办, 最近编辑, 工作区统计, 编辑热力图), and that 加到首页 puts them in the empty spots
-// as 恢复默认卡片 in the home page's menu in the sidebar does (the board's restoreDefaults: what is missing
-// alone, the cards there untouched, one step of the page's undo). A home already made is never changed by
-// itself: the reader is told once, at the top of the page, where the first-open note stands, and nothing
-// moves on the board until they ask. Its × (or 加到首页) says it for the workspace (POST
-// /__gallery/pages/home/hint with { cards: true }), which 恢复默认卡片 from the sidebar does too.
-
+// Its note of new default cards (showNews: the plan's 3.4), on a page with the default cards (its page.json's
+// defaultCards) made before some of them, while the page map says `news`: which default cards it does not
+// hold that came since, and that 加到这一页 puts them in the empty spots as 恢复默认卡片 in the page's menu
+// does (the board's restoreDefaults: what is missing alone, the cards there untouched, one step of the
+// page's undo). A page already made is never changed by itself: the reader is told once, at the top of
+// the page, where the first-open note stands, and nothing moves on the board until they ask. Its × (or
+// 加到这一页) says it for the workspace (POST /__gallery/pages/<slug>/hint with { cards: true }), which
+// 恢复默认卡片 does too.
+//
+// And the middle of a blank page (showBlank: the workbench's 新建页面, which no one has written yet, while
+// the page map says `blank`): that an Agent writes a custom page, any page it likes, a board of cards or
+// not, with a request the reader can copy and say to one, as the first-open note's. Nothing of it is the
+// file's: once an Agent writes page.html the page is shown again without it.
 const STYLE = `
   .ge-home-hint { box-sizing: border-box; max-width: var(--gallery-board-width, 944px); margin: 0 auto 12px; }
   .ge-home-hint-box { position: relative; box-sizing: border-box; max-width: 720px; padding: 14px 44px 14px 16px; border-radius: 10px;
@@ -47,6 +51,9 @@ const STYLE = `
   .ge-home-hint-box .ge-home-hint-add { margin-left: -2px; background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
   .ge-home-hint-box .ge-home-hint-add:hover:not(:disabled) { background: var(--ge-btn-primary-hover); color: var(--ge-btn-primary-text); }
   .ge-home-hint-box .ge-home-hint-add:disabled { opacity: .5; cursor: default; }
+  .ge-page-blank { box-sizing: border-box; display: flex; justify-content: center; padding: max(48px, 18vh) 16px 48px; }
+  .ge-page-blank .ge-home-hint-box { width: 100%; max-width: 520px; padding: 20px 20px 18px; }
+  .ge-page-blank .ge-home-hint-title { font-size: 16px; }
 `;
 
 const DOTS = '<svg viewBox="0 0 10 16" aria-hidden="true"><circle cx="2.5" cy="2" r="1.25"/><circle cx="7.5" cy="2" r="1.25"/><circle cx="2.5" cy="8" r="1.25"/><circle cx="7.5" cy="8" r="1.25"/><circle cx="2.5" cy="14" r="1.25"/><circle cx="7.5" cy="14" r="1.25"/></svg>';
@@ -70,15 +77,15 @@ export function showNews(map, { restore }) {
   if (!map?.news?.length || !main) return null;
   addStyle(STYLE);
   const named = ({ block, name }) => name?.[language === "en" ? "en" : "zh"] ?? name?.zh ?? block;
-  const add = element("button", { type: "button", class: "ge-home-hint-copy ge-home-hint-add", text: t("加到首页") });
+  const add = element("button", { type: "button", class: "ge-home-hint-copy ge-home-hint-add", text: t("加到这一页") });
   const close = element("button", { type: "button", class: "ge-home-hint-close", "aria-label": t("关闭这条说明"), title: t("关闭"), html: CLOSE });
   const box = element("div", { class: "ge-home-hint-box" },
-    element("p", { class: "ge-home-hint-title", text: t("首页有了新的卡片") }),
+    element("p", { class: "ge-home-hint-title", text: t("有了新的默认卡片") }),
     element("p", { text: map.news.map(named).join(t("、")) }),
-    element("p", { class: "ge-home-hint-ask", text: t("点「加到首页」放进空位，已有的卡片不动。以后也可以在侧栏里首页的菜单中点「恢复默认卡片」。") }),
+    element("p", { class: "ge-home-hint-ask", text: t("点「加到这一页」放进空位，已有的卡片不动。以后也可以在这一页的菜单中点「恢复默认卡片」。") }),
     element("div", { class: "ge-home-hint-act" }, add),
     close);
-  const note = noteOf("ge-home-news", t("首页的新卡片"), box);
+  const note = noteOf("ge-home-news", t("新的默认卡片"), box);
   for (const button of [add, close]) button.addEventListener("mousedown", (event) => event.preventDefault());
   const told = () => postAnswer(`/__gallery/pages/${map.slug}/hint`, map.token, { cards: true });
   add.addEventListener("click", async () => {
@@ -86,7 +93,7 @@ export function showNews(map, { restore }) {
     const answer = await restore();
     if (!answer?.ok) {
       add.disabled = false;
-      return say(t("没能把卡片放到首页"), "error");
+      return say(t("没能把卡片放到这一页"), "error");
     }
     note.remove();
     const added = answer.added ?? [];
@@ -104,7 +111,7 @@ export function showNews(map, { restore }) {
 }
 
 /**
- * The note shown, on the home page whose map (`map`: slug, token) says `hint`, at the top of the page
+ * The note shown, on the page whose map (`map`: slug, token) says `hint`, at the top of the page
  * (`main.gallery-page`, before what the page holds). `hosted`: the page stands in a workbench, whose top
  * bar's ··· menu has 添加自定义块 (the words say so), else the page's own at the top right of its board. Returns the
  * note, or null where none is shown.
@@ -114,16 +121,16 @@ export function showHint(map, { hosted = false } = {}) {
   if (!map?.hint || !main) return null;
   addStyle(STYLE);
   // The sentence offered: one that names Gallery, so that the Agent takes up its skill.
-  const ask = t("用 Gallery 在首页加一张卡片，记我每天喝了几杯水。别动我摆好的卡片。");
+  const ask = t("用 Gallery 在「{0}」这一页加一张卡片，记我每天喝了几杯水。别动我摆好的卡片。", map.title ?? document.title);
   const copy = element("button", { type: "button", class: "ge-home-hint-copy", text: t("复制") });
   const close = element("button", { type: "button", class: "ge-home-hint-close", "aria-label": t("关闭这条说明"), title: t("关闭"), html: CLOSE });
   const box = element("div", { class: "ge-home-hint-box" },
-    element("p", { class: "ge-home-hint-title", text: t("这是你的首页") }),
+    element("p", { class: "ge-home-hint-title", text: t("这一页的卡片可以自己摆") }),
     element("p", {}, ...filled(hosted ? t("拖卡片右上角的 {0} 移动它，点一下它打开菜单（大小、设置、删除），点页面右上角的 ··· 里的「添加自定义块」加一张。") : t("拖卡片右上角的 {0} 移动它，点一下它打开菜单（大小、设置、删除），点页面右上方的「添加自定义块」加一张。"), [icon(DOTS)])),
     element("p", { class: "ge-home-hint-ask", text: t("想要新卡片或新页面，跟 Agent 说，比如：") }),
     element("div", { class: "ge-home-hint-say" }, element("span", { text: ask }), copy),
     close);
-  const note = noteOf("", t("首页的说明"), box);
+  const note = noteOf("", t("这一页的说明"), box);
   for (const button of [copy, close]) button.addEventListener("mousedown", (event) => event.preventDefault());
   copy.addEventListener("click", () => {
     // The frame given the focus first: in a workbench a press its mousedown keeps from moving the focus
@@ -143,3 +150,33 @@ export function showHint(map, { hosted = false } = {}) {
   main.prepend(note);
   return note;
 }
+
+/**
+ * The middle of a blank page (the page map's `blank`: the workbench's 新建页面, which no one has written yet):
+ * that an Agent writes it, any page it likes, with a request to copy and say to one. Returns the note, or
+ * null where none is shown (no blank page, or no main.gallery-page to show it in).
+ */
+export function showBlank(map) {
+  const main = document.querySelector("main.gallery-page");
+  if (!map?.blank || !main) return null;
+  addStyle(STYLE);
+  const title = map.title ?? document.title;
+  const ask = t("用 Gallery 把「{0}」这个自定义页写出来：放上我这周的待办，和离月底还有几天。", title);
+  const copy = element("button", { type: "button", class: "ge-home-hint-copy", text: t("复制") });
+  const box = element("div", { class: "ge-home-hint-box" },
+    element("p", { class: "ge-home-hint-title", text: t("这一页还是空的") }),
+    element("p", { text: t("自定义页由 Agent 来写：可以是一页卡片，也可以是它为你做的任何网页。") }),
+    element("p", { class: "ge-home-hint-ask", text: t("跟 Agent 说你想在这里放什么，比如：") }),
+    element("div", { class: "ge-home-hint-say" }, element("span", { text: ask }), copy));
+  const note = noteOf("ge-page-blank", t("空白的自定义页"), box);
+  copy.addEventListener("mousedown", (event) => event.preventDefault());
+  copy.addEventListener("click", () => {
+    window.focus(); // as the first-open note's 复制: Chrome writes no clipboard of a document without the focus
+    navigator.clipboard?.writeText(ask).then(() => {
+      copy.textContent = t("已复制");
+      say(t("已复制这句话，发给 Agent 就行"));
+    }, () => say(t("没能复制：浏览器不允许写剪贴板。"), "error"));
+  });
+  main.append(note);
+  return note;
+}