@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/beside.mjs

@@ -0,0 +1,21 @@
+import { BESIDE, ENTERS_AFTER } from "../components/registry.mjs";
+import { isHost } from "./core.mjs";
+
+// What a click beside a block and Enter on a selected block do with it, shared by the tools that
+// place the caret or blocks (insert/), select blocks (blocks.mjs) and say what a selection takes
+// (selection/).
+
+/**
+ * Whether a click to the right of a block (outside it) 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).
+ */
+export const selectsBeside = (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 callout, whose text Enter edits, 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-info.mjs

@@ -0,0 +1,63 @@
+import { SHEETS } from "../components/kit.mjs";
+import { KIND_NAMES, hasOuter, isBlock } from "../components/registry.mjs";
+import { OUTER, UNIT, boxKind } from "./core.mjs";
+import { pageOfUnit } from "./page-objects.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// What the page knows of a block (a unit: a paragraph, a list, a card, a section, a Sheet tab...;
+// findUnits in src/editor/source/), shared by the block tools (blocks.mjs wires them: handle/,
+// selection/, drag/, block-menu/): its kind and name, the blocks of a container, and why a block may
+// not go or move.
+
+export const alive = (target) => Boolean(target?.isConnected);
+
+/** Blocks in document order, none inside another. */
+export const ordered = (nodes) => [...new Set(nodes)]
+  .filter((node, _, all) => !all.some((other) => other !== node && other.contains(node)))
+  .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+
+/** The block around a block, or null: none past a box that has none (`outer`: a detail card's content). */
+export const outerOf = (target) => {
+  if (!hasOuter(boxKind(target.parentElement))) return null;
+  const outer = target.parentElement?.closest(OUTER);
+  // A column is no block of its own: from a block in one, the row of columns.
+  return outer && !isBlock(outer.getAttribute("data-ge-unit-kind")) ? outer.parentElement?.closest(OUTER) ?? null : outer;
+};
+
+/** The other tabs of a tab's row still on the page. */
+export const otherTabs = (tab) => [...tab.parentElement.children].filter((child) => child !== tab && child.matches(`:is(${UNIT})` + SHEETS.tab));
+
+/** units: Map(id -> { kind, keep }) and boxes: Map(id -> { kind }) from the edit map. */
+export function createBlockInfo({ units, boxes }) {
+  const info = (node) => units.get(Number(node.getAttribute("data-ge-unit")));
+  // Blocks made or converted on the page carry their kind; the others got it when the editor started.
+  const kindOf = (node) => node.getAttribute("data-ge-unit-kind") ?? info(node)?.kind;
+  const nameOf = (target) => pageOfUnit(target)?.nameOf?.(target) ?? KIND_NAMES[kindOf(target)] ?? t("整体块");
+
+  return {
+    kindOf,
+    nameOf,
+    /** What the reader calls one block, or several. */
+    named: (targets) => targets.length === 1 ? nameOf(targets[0]) : t("{0} 块", targets.length),
+    /** The kind of a container (a box). */
+    boxKindOf: (container) => container.getAttribute("data-ge-box-kind") ?? boxes.get(Number(container.getAttribute("data-ge-box")))?.kind,
+
+    /** Why a block cannot be deleted on the page (with the others of `group`), or null. */
+    keepText(target, group = [target]) {
+      if (kindOf(target) === "tab" && otherTabs(target).every((tab) => group.includes(tab))) return t("至少要保留一个选项卡。");
+      if (!target.hasAttribute("data-ge-keep")) return null;
+      const { keep } = info(target) ?? {};
+      const names = keep?.names ?? [];
+      const list = names.slice(0, 3).join(t("、")) + (names.length > 3 ? t(" 等") : "");
+      return keep?.reason === "ref"
+        ? t("页面其他地方引用了这块（{0}，例如链接或详情卡片、无障碍关联），删掉会让它们失效，请让 AI 删除。", list)
+        : t("这块被文档的脚本用到（{0}），在页面上删掉会让脚本出错，请让 AI 删除。", list);
+    },
+
+    /** Why a block cannot move at all, or null. */
+    fixedText(target) {
+      if (!target.parentElement?.hasAttribute("data-ge-box")) return t("这个{0}不能移动。", nameOf(target));
+      return null;
+    },
+  };
+}

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

@@ -0,0 +1,82 @@
+import { COLORS, backgroundClass, blockColorsOf, textClass } from "../../components/colors.mjs";
+import { svg } from "../../components/icons.mjs";
+import { RINGS } from "../format-bar/colors.mjs";
+import { tooltip } from "../tooltip.mjs";
+import { addStyle, element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The block menu's 颜色 › (Notion's, notion-lite's colorSections): 上次使用 (the color given last in
+// this page, when there is one), 文本颜色 and 背景颜色, each 默认 and the nine colors, as swatches
+// five to a line, as the format bar's colors are (format-bar/bar.mjs: the same swatches and rings);
+// the block's own colors ringed, one of each family (默认 when it has none of it). When the blocks
+// show one of the nine with none of a family (a callout's background is blue: `defaults`), that
+// family has no 默认: that color is ringed for none, and picking it takes the class away. Each
+// swatch names its color in a tooltip. The swatches are drawn with the kit's own classes, so they
+// match the text in either theme. A pick gives every target that color of its family, the other family's staying (one
+// undo step: look, history.mjs; a table cell's one color: table/). Only the families the targets take show.
+
+const STYLE = `
+  .ge-pop .ge-color-grid { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; padding: 0 11px 4px; }
+  .ge-pop .ge-color-cell { display: block; width: 30px; height: 30px; padding: 2px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+  .ge-pop .ge-color-cell > span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 6px;
+    font-size: 16px; font-weight: 500; line-height: 1; box-shadow: inset 0 0 0 1px var(--ge-ring); }
+  .ge-pop .ge-color-cell > span:not([class*="doc-text-"]) { color: var(--ge-tx); }
+  .ge-pop .ge-color-cell:hover > span, .ge-pop .ge-color-cell[data-active] > span { box-shadow: inset 0 0 0 2px var(--ge-ring); }
+  .ge-pop .ge-color-cell[aria-current="true"] > span { box-shadow: inset 0 0 0 2px var(--ge-ring-strong); }
+  ${Object.entries(RINGS).map(([name, [light, dark, strong, strongDark]]) => `.ge-pop .ge-color-cell[data-ring="${name}"] { --ge-ring: light-dark(${light}, ${dark}); --ge-ring-strong: light-dark(${strong}, ${strongDark}); }`).join("\n  ")}
+`;
+
+/** The 颜色 row's icon (Notion's blockColor: a letter over a stroke). */
+export const COLOR_ICON = svg('<path d="m6.25 12.75 3.75-9.5 3.75 9.5M7.6 9.25h4.8"/><path d="M4 16.25h12" stroke-width="2"/>');
+
+/** How wide 颜色 › is: five swatches and their room. */
+export const COLOR_WIDTH = 5 * 30 + 4 * 4 + 2 * 11;
+
+let lastUsed = null; // { kind, color }: the color given last on this page (Notion keeps one per reader)
+
+const NAMES = Object.fromEntries(COLORS);
+const nameOf = (kind, color) => t("{0}{1}", color ? NAMES[color] : t("默认"), kind === "text" ? t("文本") : t("背景")); // two words: one in Chinese, two in English
+
+/**
+ * The items of 颜色 › for `targets` (blocks that take a color): grids of swatches under their
+ * titles, for `families` ("text", "background"). `look(targets, color)` gives them that color of its
+ * family ({ kind, color }, color null for none of it); `close()` closes the menu (a swatch does its
+ * own work, as a grid's cells do: menu.mjs). `recent`: whether 上次使用 shows (a table's cells have
+ * none, as notion-lite's: table/). `defaults`: by family, the color the targets all show with none
+ * of it (a callout's background: "blue", registry.mjs COLOR_DEFAULTS), which stands for none.
+ */
+export function colorItems(targets, look, close = () => {}, { recent = true, families = ["text", "background"], defaults = {} } = {}) {
+  addStyle(STYLE);
+  // Each family's color the targets share (null: none of it), or undefined when they differ; a
+  // target with none of a family that has a default shows that one.
+  const colors = targets.map(blockColorsOf).map((each) => Object.fromEntries(Object.entries(each).map(([kind, color]) => [kind, color ?? defaults[kind] ?? null])));
+  const shared = (kind) => (colors.every((each) => each[kind] === colors[0][kind]) ? colors[0][kind] : undefined);
+  const cell = (kind, color) => {
+    const value = { kind, color };
+    const current = shared(kind) === color;
+    const name = nameOf(kind, color);
+    const node = element("button", { type: "button", class: "ge-color-cell", "aria-label": name, "aria-current": String(current), "data-ring": color ?? "default" });
+    node.append(element("span", { class: color ? (kind === "text" ? textClass(color) : backgroundClass(color)) : "", text: kind === "text" ? "A" : "" }));
+    node.passed = current; // the keys pass over it (menu.mjs move), as they did a checked row
+    node.addEventListener("mousedown", (event) => event.preventDefault());
+    node.addEventListener("click", () => {
+      close();
+      if (current) return;
+      if (color) lastUsed = value;
+      look(targets, color && color === defaults[kind] ? { kind, color: null } : value);
+    });
+    tooltip(node, current ? t("{0}（当前）", name) : name);
+    return node;
+  };
+  const grid = (cells) => {
+    const node = element("div", { class: "ge-color-grid", role: "group" }, ...cells);
+    return { node, cells, columns: 5 };
+  };
+  const items = [];
+  if (recent && lastUsed && families.includes(lastUsed.kind)) items.push({ title: t("上次使用") }, grid([cell(lastUsed.kind, lastUsed.color)]));
+  // A family's 默认, unless one of the nine is its default.
+  const all = (kind) => [...(defaults[kind] ? [] : [cell(kind, null)]), ...COLORS.map(([color]) => cell(kind, color))];
+  if (families.includes("text")) items.push({ title: t("文本颜色") }, grid(all("text")));
+  if (families.includes("background")) items.push({ title: t("背景颜色") }, grid(all("background")));
+  return items;
+}

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

@@ -0,0 +1,215 @@
+import { colorLook } from "../../components/colors.mjs";
+import { COLOR_DEFAULTS, COLOR_FAMILIES, KIND_ICONS, boxRole, takesBelow } from "../../components/registry.mjs";
+import { COUNTS, columnsIcon } from "../../components/columns/index.mjs";
+import { LINK_ICON } from "../../components/icons.mjs";
+import { extentOf } from "../geometry.mjs";
+import { outerOf } from "../block-info.mjs";
+import { ICONS } from "../menu.mjs";
+import { offeredTurn } from "../offered.mjs";
+import { columnOps, menuRow, pageOfUnit, rowBeside, sectionOps } from "../page-objects.mjs";
+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 { t } from "../../../shared/i18n/index.mjs";
+
+// The block menu (docs/editor.md, "Deleting blocks" and "New blocks and conversions"; the card is
+// menu.mjs, as Notion's block menu without its search), opened by a click on a block's handle (or
+// the right button) or on a section's bar (handle/). For one block: the types it can be turned
+// into as icons side by side, five to a line (小字 the corner of 文本's), at the top (type-grid.mjs, as Feishu's; its own
+// marked), or its name as the title when it turns into nothing; then its component's own rows (its page module's `menuItems`, a card's and a table's size among them),
+// "在下方新建一块" (insert/, as Enter at its end would), "分区与分栏 ›" right above deleting (one row
+// for both, the user's: 在下方新建分区 among chapters, 组成新分区, 解散分区 on a section and 解散所在分区
+// on a block in one, components/section/page.mjs; then 分两栏, 分三栏, 分四栏, the block in the first column and empty ones beside it, as Feishu's
+// columns; in a column, 在右侧新增一栏; components/columns/page.mjs; last, 选中外层, the block around
+// it), 复制块链接 (notion-lite's: one block only, its address named by the click and not by the menu's
+// opening), deleting it (disabled, with the reason, when something refers to it), right below which
+// 选中外层 stands for a block with no such submenu. For several selected blocks, this one among
+// them, what they can do together: below their number the types they can all be turned into, in the
+// same grid (notion-lite's 转换成 for several blocks: only when every one of them can be turned, their
+// type marked only when they all share it; editor.mjs convertAll turns them, one undo step), then
+// "分区与分栏 ›" (组成新分区 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.
+// 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`:
+// an instance's package, for a block of no type of the reader's).
+
+const COLUMNS = MENU_COLUMNS; // types on a line of the grid: 文本 and the headings, then the rest
+const WIDTH = MENU_WIDTH; // the menu, as wide as its grid (no room left beside it), for every block
+
+/**
+ * info: block-info.mjs. menu: the menu card (menu.mjs createMenu). selection: selection/index.mjs.
+ * remove(targets): delete blocks (selection/delete.mjs). turnInto(unit): the types the block can be
+ * turned into, { current, types }, or null; convert(unit, type) turns it. turnIntoAll(units) and
+ * convertAll(units, type): the same for several selected blocks (convert.mjs groupTargets: { current,
+ * types }, current null for a mix). below(unit, type): a block of
+ * the type below it (the editor's insertBelow). add(unit, "section"): a new section right after it.
+ * The rows of 分区与分栏 are `sectionOps` and `columnOps`, of whichever page objects say them:
+ * wrap(units) and unwrap(section, from), a section dissolved (from: the blocks in it it is asked from,
+ * which stay selected), wrapCheck(units) and unwrapCheck(section), why they may not be, dissolvesFrom(unit),
+ * the section dissolving from it takes; split(units), 分栏, columnsCheck(units), why not, columnOf(unit),
+ * the column a block stands in. look(elements, change): the editor's undoable change of classes (the
+ * color rows). copyLink(target): the block's address on the clipboard, in the click on its row; null
+ * on a page no address leads to; linkAhead(): the menu opens with that row, what the click will want is read now.
+ */
+export function createBlockMenu({ info, menu, selection, remove, turnInto, convert, turnIntoAll = () => null, convertAll = () => {}, below, belowTypes = () => [], add, look, copyLink = () => {}, linkAhead = () => {} }) {
+  const chapters = sectionOps();
+  const columns = columnOps();
+  const { kindOf, nameOf, keepText, boxKindOf } = info;
+
+  // A new section can go right after any block standing in the page or a Sheet panel.
+  const chapter = (target) => Boolean(target.parentElement?.hasAttribute("data-ge-box")) && boxRole(boxKindOf(target.parentElement)) === "root";
+  // Nothing goes below a Sheet tab, or a Sheet area, from its menu (`below: false` in their descriptions).
+  const addable = (target) => takesBelow(kindOf(target));
+
+  // "颜色 ›" for blocks that all take a color: the families they all take (a text block's text and
+  // background, a highlight block's or a code block's background: registry.mjs COLOR_FAMILIES), one
+  // undo step for them all; a family's color they all show with none of it (a callout's blue:
+  // COLOR_DEFAULTS) stands for none.
+  const familiesOf = (target) => COLOR_FAMILIES[kindOf(target)] ?? [];
+  const colorable = (target) => familiesOf(target).length > 0;
+  const defaultOf = (target, family) => COLOR_DEFAULTS[kindOf(target)]?.[family] ?? null;
+  const colorRow = (units) => {
+    const families = units.length > 0 ? familiesOf(units[0]).filter((family) => units.every((unit) => familiesOf(unit).includes(family))) : [];
+    const defaults = Object.fromEntries(families.map((family) => [family, defaultOf(units[0], family)]).filter(([family, color]) => color && units.every((unit) => defaultOf(unit, family) === color)));
+    return families.length > 0
+      ? [{ label: t("颜色"), icon: COLOR_ICON, width: COLOR_WIDTH, submenu: () => colorItems(units, (targets, color) => look(targets, colorLook(color)), () => menu.close(), { families, defaults }) }]
+      : [];
+  };
+
+  // The columns rows for blocks: none where they do not apply, disabled with the reason where they
+  // cannot be done. One block: 分两栏, 分三栏, 分四栏 (in a column: 在右侧新增一栏); several: a column each.
+  const splitRows = (units) => {
+    const reason = columns?.columnsCheck(units) ?? null;
+    if (reason === null) return [];
+    const state = { disabled: Boolean(reason), note: reason || undefined };
+    if (units.length > 1) return [{ label: COUNTS[units.length] ? t("分成{0}栏", COUNTS[units.length]) : t("并排分栏"), icon: columnsIcon(Math.min(units.length, 5)), ...state, run: () => columns.split(units) }];
+    if (columns.columnOf(units[0])) return [{ label: t("在右侧新增一栏"), icon: ICONS.plus, ...state, run: () => columns.split(units) }];
+    return [2, 3, 4].map((count) => ({ label: t("分{0}栏", COUNTS[count]), icon: columnsIcon(count), ...state, run: () => columns.split(units, count) }));
+  };
+
+  // 解散分区 on a section; on blocks all in one section, 解散所在分区, which is that section's own row
+  // said from inside it: its check, its undo step, its words, the blocks staying selected and the page
+  // where it is. What it holds comes out as it stands, so a block in a column keeps its column, the row
+  // of columns coming out whole, and one in a section in a Sheet panel ends in the panel. None for a
+  // block that has no 分区与分栏 › of its own (no columns row, in a section: a list item, a flowchart's
+  // node, a quote's later paragraph, a block an item holds).
+  const dissolveRow = (units) => {
+    const section = chapters?.dissolvesFrom(units[0]);
+    if (!section || units.some((unit) => chapters.dissolvesFrom(unit) !== section)) return [];
+    const own = units[0] === section;
+    if (!own && units.some((unit) => (columns?.columnsCheck([unit]) ?? null) === null)) return [];
+    const reason = chapters.unwrapCheck(section);
+    return [{ label: own ? t("解散分区") : t("解散所在分区"), icon: ICONS.dissolve, disabled: Boolean(reason), note: reason || undefined, run: () => chapters.unwrap(section, own ? null : units) }];
+  };
+
+  // 分区与分栏 ›: its groups of rows (the sections', the columns', the block around it), a line
+  // between them, in one submenu as wide as the menu; no row when none has any.
+  const groupRow = (...groups) => {
+    const rows = groups.filter((group) => group.length > 0).flatMap((group, at) => (at > 0 ? [{ separator: true }, ...group] : group));
+    return rows.length > 0 ? [{ label: t("分区与分栏"), icon: KIND_ICONS.columns, width: WIDTH, submenu: () => rows }] : [];
+  };
+
+  // 选中外层, for a block with a block around it (outerOf: the row of columns, from a column).
+  const outerRow = (target) => {
+    const outer = outerOf(target);
+    return outer?.closest("main") ? [{ label: t("选中外层"), icon: ICONS.outer, run: () => selection.select(outer) }] : [];
+  };
+
+  /**
+   * The menu of `target`, by `rect` (the handle), or `side` of it ("right": a section's bar); a
+   * tab's below it. onClose: when the menu closes.
+   */
+  function open(target, rect, side = null, { onClose } = {}) {
+    const special = pageOfUnit(target)?.menu?.(target, { rect, reason: keepText(target), remove: () => remove(target) });
+    if (special) {
+      menu.open(special.items, rect, { label: special.label, width: special.width, onClose });
+      return;
+    }
+    const picked = selection.picked;
+    // Several blocks selected, this one among them: what they can do together.
+    if (picked.length > 1 && picked.includes(target)) {
+      const group = [...picked];
+      const refused = group.map((node) => [node, keepText(node, group)]).find(([, reason]) => reason);
+      const note = refused ? t("其中的{0}不能删除：{1}", nameOf(refused[0]), refused[1]) : undefined;
+      const items = [{ title: t("已选中 {0} 块", group.length) }];
+      // The types they can all be turned into (notion-lite's 转换成 for several blocks: offered when
+      // every one of them can be turned, their type marked only when they share it), as the grid of
+      // one block's menu; a pick turns them all, one undo step, what they are now selected.
+      const turn = offeredTurn(turnIntoAll(group));
+      if (turn && turn.types.some((type) => type !== turn.current)) {
+        const grid = typeGrid(turn.types, turn.current, (type) => {
+          menu.close();
+          if (type !== turn.current) convertAll(group, type);
+        }, { columns: COLUMNS });
+        items.push({ node: grid, cells: [...grid.querySelectorAll(".ge-type")], columns: COLUMNS }, { separator: true });
+      }
+      const colors = 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.
+      const wrap = chapters?.wrapCheck(group) ?? null;
+      const sections = [...(wrap !== null ? [{ label: t("组成新分区"), icon: ICONS.group, disabled: Boolean(wrap), note: wrap || undefined, run: () => chapters.wrap(group) }] : []), ...dissolveRow(group)];
+      // Neighbours in one container go side by side, a column each.
+      items.push(...groupRow(sections, splitRows(group)));
+      items.push({ label: t("删除"), icon: ICONS.trash, hint: "Del", disabled: Boolean(refused), note, run: () => remove(group) });
+      const label = t("{0} 块的操作", group.length);
+      menu.open(items, rect, side ? { label, highlight: false, width: WIDTH, side } : { label, highlight: false, width: WIDTH, around: extentOf(target) });
+      return;
+    }
+    const turn = offeredTurn(turnInto(target));
+    const items = turn && turn.types.length > 1 ? [] : [{ title: nameOf(target), icon: pageOfUnit(target)?.iconOf?.(target) }];
+    if (turn && turn.types.length > 1) {
+      const grid = typeGrid(turn.types, turn.current, (type) => {
+        menu.close();
+        if (type !== turn.current) convert(target, type);
+      }, { columns: COLUMNS });
+      items.push({ node: grid, cells: [...grid.querySelectorAll(".ge-type")], columns: COLUMNS }, { separator: true });
+    }
+    // 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 });
+    // 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) ?? [];
+    if (own.length > 0) items.push(...own, { separator: true });
+    // 在下方新建 (Notion's): resting on it opens the "/" menu's blocks (slash-menu/ typeItems, in a
+    // card as wide as this menu, a search field at its top that finds them as "/" does), one of which
+    // goes below the block (editor.mjs insertBelow); where the block's box takes none, the row makes
+    // a paragraph there.
+    if (addable(target)) {
+      const types = belowTypes(target);
+      const choose = (type) => {
+        menu.close();
+        if (!menuRow(type)) return; // a package's row, its package gone while the menu stood
+        selection.clear();
+        rememberType(type);
+        below(target, type);
+      };
+      items.push(types.length > 0
+        ? { label: t("在下方新建"), icon: ICONS.plus, width: WIDTH, submenu: () => typeItems(types, choose), search: { placeholder: t("搜索块…"), filter: (text) => typeItems(types, choose, text.trim()), empty: t("没有结果") } }
+        : { label: t("在下方新建"), icon: ICONS.plus, run: () => { selection.clear(); below(target, "paragraph"); } });
+    }
+    const sections = [];
+    if (chapter(target)) sections.push({ label: t("在下方新建分区"), icon: ICONS.section, run: () => add(target, "section") });
+    if (chapters?.wrapCheck([target]) === "") sections.push({ label: t("组成新分区"), icon: ICONS.group, run: () => chapters.wrap([target]) });
+    sections.push(...dissolveRow([target]));
+    const splits = splitRows([target]);
+    // 选中外层 joins 分区与分栏 › where the block has that submenu; a block with none gets none for it.
+    const outer = outerRow(target);
+    const grouped = sections.length > 0 || splits.length > 0;
+    items.push(...groupRow(sections, splits, grouped ? outer : []));
+    if (copyLink) {
+      linkAhead();
+      items.push({ label: t("复制块链接"), icon: LINK_ICON, run: () => copyLink(target) });
+    }
+    const reason = keepText(target);
+    items.push({ label: t("删除"), icon: ICONS.trash, hint: "Del", disabled: Boolean(reason), note: reason ?? undefined, run: () => remove(target) });
+    if (!grouped) items.push(...outer);
+    const label = t("{0}的操作", nameOf(target));
+    menu.open(items, rect, side ? { label, highlight: false, width: WIDTH, side } : { label, highlight: false, width: WIDTH, around: extentOf(target) });
+  }
+
+  return { open };
+}

package/browser/editor/page/blocks.mjs

@@ -0,0 +1,246 @@
+import { createBlockInfo } from "./block-info.mjs";
+import { createBlockMenu } from "./block-menu/index.mjs";
+import { createDrag } from "./drag/index.mjs";
+import { createHandle } from "./handle/index.mjs";
+import { createMenu } from "./menu.mjs";
+import { createDelete } from "./selection/delete.mjs";
+import { createSelection } from "./selection/index.mjs";
+import { createMarquee } from "./selection/marquee.mjs";
+import { FOLLOW, task } from "./frames.mjs";
+import { entersAfter } from "./beside.mjs";
+import { describe, onSettle, provide, report } from "./overlays.mjs";
+import { pageObjects } from "./page-objects.mjs";
+
+// The block tools (docs/editor.md, "Deleting blocks", "Moving blocks", "Selecting blocks"): what
+// the reader does with whole blocks (units: paragraphs, lists, cards, tables, sections, Sheet
+// tabs...; see findUnits in src/editor/source/), each in a folder of its own, wired here:
+//
+//   handle/       the handle beside a block (its grip, the bar and "+" beside it), a section's bar; which block the pointer is at
+//   block-menu/   the menu a handle opens: turning a block into another type, layout, a new block below, columns, sections, deleting
+//   selection/    the selected blocks and their fills; box selection (marquee.mjs); deleting (delete.mjs)
+//   drag/         moving blocks: dragging a handle, where they would go (drop.mjs), Ctrl+Shift+arrows
+//
+// What they share: what the page knows of a block (block-info.mjs), the menu card (menu.mjs), one
+// task of the editor's frames (frames.mjs) that keeps the handle, the bar and the fills where their
+// blocks are (it runs only while something shows, and then only when their blocks may have moved),
+// and the keys while the focus is not in text (onKeydown). In each frame every tool's step stands
+// alone: one that throws takes down what that tool draws (a drag is cancelled, never dropped) and is
+// said, and the others go on.
+
+/**
+ * units: Map(id -> { kind, keep }) and boxes: Map(id -> { kind }) from the edit map. active(): whether block tools may show.
+ * struct(parents, touched, mutate): the editor's undoable structural change. look(element,
+ * { classes, sizes }, select): the editor's undoable change of classes and sizes (the block menu's colors).
+ * say(text, kind, hold): the status line. edit(unit): put the caret into the block's text, if any.
+ * turnInto(unit): the types the block can be turned into, { current, types }, or null;
+ * convert(unit, type) turns it; turnIntoAll(units) / convertAll(units, type): the same for several
+ * selected blocks together (convert.mjs groupTargets, editor.mjs convertAll); below(unit, type): a
+ * block of the type below it (the block menu; the editor's insertBelow); add(unit, "section"): a new
+ * section right after it, holding a paragraph with the caret. after(unit): a new paragraph right after
+ * it, with the caret (false when its box takes none: the editor's insert.paragraphAfter).
+ * blank(x, y, target): a click on empty space (the editor: a new
+ * paragraph below the last block). nest(units, delta): selected list items indented (Tab) or
+ * outdented (Shift+Tab) together (components/list/page.mjs); false when they are not all items.
+ * keepsHandle(node): whether a node is another tool's over a block (a table's grips and edges:
+ * table/), where the pointer keeps the handle as it is. addNear(unit, where): the handle's "+", an
+ * empty block "below" the block (or "above": Alt) with the "/" menu open in it (the editor's addNear).
+ * notes: 批注 on blocks (annotate/), for the button beside a block:
+ * notes.can(units) whether they can take one, notes.at(unit) where the button beside the block stands,
+ * notes.write(units) the annotation begun.
+ * copyLink(unit): 复制块链接, the block menu's (the editor's copyBlockLink), or null for no such row.
+ * linkAhead(): a block's menu opens with that row in it: what the click will want is read now.
+ */
+export function createBlocks({ units, boxes, active, struct, look, say, edit, turnInto, convert, turnIntoAll = () => null, convertAll = () => null, below, belowTypes = () => [], add, after = () => false, blank, nest, keepsHandle = () => false, addNear = () => {}, copyLink = () => {}, linkAhead = () => {}, notes }) {
+  const info = createBlockInfo({ units, boxes });
+  const menu = createMenu();
+  const closeMenu = () => menu.close();
+  // What a failed frame takes down: what is drawn, and a drag (cancelled); the selection stays.
+  const frames = task("blocks", { run: tick, fail: () => takeDown() });
+  const schedule = () => frames.wake();
+
+  const selection = createSelection({ info, active, say, closeMenu, schedule });
+  const drag = createDrag({ info, selection, struct, say, closeMenu, schedule });
+  const blockMenu = createBlockMenu({ info, menu, selection, remove: (targets) => remove(targets), 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: keepsHandle, add: (target, where) => { selection.clear(); addNear(target, where); }, notes });
+  const remove = createDelete({ info, selection, struct, say, closeMenu, forget: () => handle.forget() });
+  // 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).
+  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({
+    active: () => active() && !drag.active,
+    selection: { get: () => [...selection.picked], set: (list, options) => selection.select(list, options), clear: selection.clear },
+    click: blank,
+  });
+
+  // Positions follow scrolling, resizing and reflow: while the handle, the bar or the fills show, the
+  // task runs again whenever their blocks may have moved (FOLLOW, frames.mjs), not on every frame (the
+  // pointer resting on a paragraph cost 60–160ms a second for the same picture); on every frame only
+  // while blocks are dragged (the page scrolls by the window's edge under a still pointer).
+  function tick() {
+    if (!active()) {
+      hide();
+      return false;
+    }
+    step("handle", () => handle.track(), () => handle.hide());
+    step("selection", () => selection.prune(), () => selection.unpaint());
+    step("drag", () => drag.step(), () => drag.end(false));
+    step("selection", () => selection.paint(drag.active), () => selection.unpaint());
+    step("handle", () => handle.place(), () => handle.hide());
+    if (drag.active) return true;
+    return handle.showing || selection.picked.length > 0 ? FOLLOW : false;
+  }
+
+  // One tool's part of a frame; when it throws, what that tool draws goes, and it is said.
+  function step(name, run, fail) {
+    try {
+      run();
+    } catch (error) {
+      try {
+        fail();
+      } catch {}
+      report(`block tools: ${name}`, error);
+    }
+  }
+
+  // A press anywhere but on the block tools closes the menu; on a divider line it selects the line,
+  // on empty space it may start a box selection, elsewhere it clears the selection.
+  document.addEventListener("pointerdown", (event) => {
+    if (handle.holds(event.target) || menu.contains(event.target) || parts.some((part) => part.holds(event.target))) return;
+    closeMenu();
+    const line = event.button === 0 && active() ? handle.lineAt(event.target, event.clientX, event.clientY) : null;
+    if (line) {
+      event.preventDefault(); // no caret goes anywhere
+      handle.hover(line);
+      selection.select(line);
+      return;
+    }
+    if (marquee.begin(event)) return;
+    if (selection.picked.length > 0) selection.clear();
+  }, true);
+  addEventListener("scroll", (event) => { if (!menu.contains(event.target)) closeMenu(); }, { passive: true, capture: true });
+  addEventListener("resize", closeMenu);
+  addEventListener("blur", closeMenu);
+
+  /**
+   * Keys while the focus is not in editable text. Returns true when handled: with the menu open,
+   * ↑/↓ move through it (←/→ along its grid of types) and Enter runs a row; Delete/Backspace delete the selected blocks,
+   * Ctrl+Shift+arrows move them, Shift+↑/↓ widen or narrow the selection, Enter edits the first of
+   * them (notion-lite's: the caret at the end of its text; a formula block's editor opens) or, when that
+   * one is no text (a code block, a highlight block, a disclosure, a card, a table, a divider, a row of
+   * columns, a 选项卡区块: beside.mjs entersAfter), puts a new paragraph after the last, arrows select the
+   * neighbouring block, Esc cancels a drag, closes the menu or clears the selection.
+   */
+  function onKeydown(event) {
+    if (event.key === "Escape" && (drag.active || menu.isOpen)) {
+      event.preventDefault();
+      if (drag.active) drag.end(false);
+      else closeMenu();
+      return true;
+    }
+    if (drag.active) return true; // keys wait until the block is dropped
+    const key = event.key;
+    const plain = !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (menu.isOpen && plain && menu.arrow(event)) {
+      event.preventDefault();
+      return true;
+    }
+    // A letter while 在下方新建's blocks are open: into their search field (menu.mjs type).
+    if (menu.isOpen && menu.type(event)) return true;
+    // ←/→ move along the menu's grid of types, when one of them is highlighted.
+    if (menu.isOpen && plain && (key === "ArrowLeft" || key === "ArrowRight") && menu.move(key === "ArrowRight" ? 1 : -1, true)) {
+      event.preventDefault();
+      return true;
+    }
+    if (menu.isOpen && plain && key === "Enter" && menu.hasChoice) {
+      event.preventDefault();
+      menu.choose();
+      return true;
+    }
+    const picked = selection.picked;
+    if (picked.length === 0) return false;
+    // Tab and Shift+Tab: selected list items indent or outdent together, staying selected.
+    if (key === "Tab" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      if (nest(picked, event.shiftKey ? -1 : 1)) selection.select([...picked], { quiet: true });
+      return true;
+    }
+    const vertical = key === "ArrowUp" || key === "ArrowDown";
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && !event.altKey && /^Arrow(Up|Down|Left|Right)$/.test(key)) {
+      event.preventDefault();
+      drag.moveBy(picked, key === "ArrowUp" || key === "ArrowLeft" ? -1 : 1);
+      return true;
+    }
+    if (plain && event.shiftKey && vertical) {
+      event.preventDefault();
+      selection.extend(key === "ArrowDown" ? 1 : -1);
+      return true;
+    }
+    if (!plain) return false;
+    if (key === "Delete" || key === "Backspace") remove(picked);
+    else if (key === "Escape") selection.clear();
+    else if (key === "Enter") {
+      const [first] = picked;
+      closeMenu();
+      if (!entersAfter(first) || !after(picked.at(-1))) {
+        selection.clear();
+        edit(first);
+      }
+    } else if (vertical) {
+      // From the first selected block up, from the last down; the selection becomes that one block.
+      const from = key === "ArrowDown" ? picked.at(-1) : picked[0];
+      const next = selection.sibling(from, key === "ArrowDown") ?? (picked.length > 1 ? from : null);
+      if (next) selection.select(next, { quiet: true });
+    } else return false;
+    event.preventDefault();
+    return true;
+  }
+
+  function takeDown() {
+    drag.end(false);
+    marquee.cancel();
+    handle.hide();
+    selection.unpaint();
+  }
+
+  function hide() {
+    if (drag.active) drag.end(false);
+    marquee.cancel();
+    handle.hide();
+    parts.forEach((part) => part.hide());
+    selection.hide();
+    closeMenu();
+  }
+
+  // Blocks taken off the page by a structural change: out of the selection, the handle away from them.
+  onSettle(() => {
+    selection.prune();
+    handle.settle();
+  });
+  provide("blockTools", () => ({ active: active(), ...selection.state(), dragging: drag.active, drawingBox: marquee.drawing, handleShowing: handle.showing, handleTarget: describe(drag.target) }));
+
+  return {
+    onKeydown,
+    select: selection.select,
+    clear: selection.clear,
+    mark: selection.mark,
+    keepText: info.keepText,
+    moveBy: drag.moveBy,
+    remove,
+    closeMenu,
+    /** A block selected and its menu open by `rect` (a component's own button: an image's 更多). */
+    openMenu(target, rect) {
+      selection.select(target, { quiet: true });
+      blockMenu.open(target, rect);
+    },
+    /** The reader is typing: the handle steps aside until the pointer moves. */
+    typing() {
+      handle.typing();
+      schedule();
+    },
+    /** The selected blocks, in document order. */
+    get picked() { return [...selection.picked]; },
+    /** The editor's UI nodes to keep in the top layer when a modal dialog opens (those drawn over
+     * blocks go in the layer of their block's dialog by themselves, overlay-layer.mjs). */
+    get nodes() { return [...menu.nodes, ...marquee.nodes, ...drag.nodes, ...parts.flatMap((part) => part.nodes)].filter((node) => node?.isConnected); },
+  };
+}