@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/components/rows.mjs

@@ -0,0 +1,16 @@
+import { t } from "../../shared/i18n/index.mjs";
+// What a component's own rows of the block menu share (`menuItems` of each component's page module:
+// block-menu/index.mjs asks the block's own, one source of a block's component rows). A row that changes a
+// block's look, its classes and sizes, as one undo step.
+
+/**
+ * The row for `target`: `change` ({ classes, sizes }) applied by look(element, change, select)
+ * (the editor's undoable change, history.mjs: the block is selected again on undo), `done` said on
+ * the status line once it was. `state` ({ current } or { checked }) is how the menu shows it.
+ */
+export const lookRow = ({ look, say }, target, { label, icon, change, done, ...state }) => ({
+  label,
+  icon,
+  ...state,
+  run: () => { if (look(target, change, target)) say(t("{0} · Ctrl+Z 撤销", done)); },
+});

package/browser/editor/components/section/index.mjs

@@ -0,0 +1,42 @@
+import { SECTION_ICON } from "../icons.mjs";
+import { HIGHLIGHT } from "../kit.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+// 分区: section.doc-section, a container of ordinary blocks (its title is whatever heading it
+// holds, a line above it an <hr> at its top) that stands in the page or a Sheet panel only. It is
+// a chapter: optional, made and dissolved only by explicit commands, never derived from headings.
+// page.mjs: a new section, 组成新分区, 解散分区.
+//
+// Where the engines reach it (src/editor/page/ unless named): handle/ (its bar along its right side),
+// block-menu/ (the menu rows: page.mjs `sectionOps`), drag/drop.mjs (a drop goes by its
+// edges), clipboard/own/ (copying sections: `clipboard`), commit.mjs (one made again by undo), ../source/ (a new one
+// set apart like the chapters around it: separator).
+// Its look: none of its own, its blocks are a flow's (the kit's styles/flow.css, src/render/kit/).
+// A section of the page, not a <section> that is a block of another kind (a Sheet area, one with a
+// highlight block's class).
+const isSection = (node) => node.localName === "section" && node.getAttribute("data-ge-box-kind") === "section" && !node.matches(HIGHLIGHT.match);
+
+export default {
+  name: "section",
+  listed: () => t("分区"), hideable: false,
+  units: {
+    section: { name: t("分区"), icon: SECTION_ICON, match: [{ rank: 40, tag: "section" }], chapter: true, fixed: true, handle: "bar" },
+  },
+  boxes: {
+    section: { role: "flow", name: t("分区"), groups: true },
+  },
+  types: {
+    section: {
+      tag: "section", className: "doc-section", kind: "section", box: "section",
+      clipboard: {
+        kind: "flatten", html: "section",
+        describe(node, { isHost, holding }) {
+          if (!isSection(node) || isHost(node)) return undefined;
+          const blocks = holding(node);
+          return blocks ? { type: "section", blocks } : null;
+        },
+        endsIn: (unit, { blocksIn, boxesOf }) => (isSection(unit) ? [{ type: "section", blocks: blocksIn(boxesOf(unit)) }] : undefined),
+        check: (block, { container }) => container(block),
+      },
+    },
+  },
+};

package/browser/editor/components/section/page.mjs

@@ -0,0 +1,141 @@
+import { UNIT, boxKind, holdsBlocks, isHost, newContainer, newHost, placeBefore, unitsOf, withLeads } from "../../page/core.mjs";
+import { outerOf } from "../../page/block-info.mjs";
+import { caretAt } from "../../page/caret.mjs";
+import { isTex } from "../math/index.mjs";
+import { accepts, boxRole } from "../registry.mjs";
+import { begin, done, made } from "../../page/made.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 分区 on the page. A section is a container of ordinary blocks, like a highlight panel without a
+// look of its own: a heading in it (its title, when it has one) and a divider line at its top are
+// blocks like any other. It stands in the page or a Sheet panel only. A new one ("在下方新建分区")
+// holds one empty paragraph to write in; blocks next to each other there can become one ("组成新分区");
+// dissolving one ("解散分区", "解散所在分区" in the menu of a block in it) leaves its blocks where it
+// was. Its handle is the bar along its right side (handle/).
+
+const isSection = (node) => node?.nodeType === 1 && node.localName === "section" && boxKind(node) === "section";
+const inRoot = (node) => Boolean(node?.parentElement?.hasAttribute("data-ge-box")) && boxRole(boxKind(node.parentElement)) === "root";
+
+/** A new section after `unit` (a block standing in the page or a Sheet panel), holding one empty paragraph. Returns { focus: the paragraph, created }. */
+export function sectionAfter(unit) {
+  begin();
+  const next = made(newContainer(unit.ownerDocument, "section"));
+  const paragraph = newHost(unit.ownerDocument, "paragraph");
+  next.append(paragraph);
+  unit.after(next);
+  return done(paragraph);
+}
+
+/**
+ * The section `unit` stands in, the innermost, itself when it is one, or null: none is around it, or
+ * only past a detail card, which stands for itself (outerOf).
+ */
+export function sectionOf(unit) {
+  for (let node = unit; node; node = outerOf(node)) if (isSection(node)) return node;
+  return null;
+}
+
+/**
+ * "解散分区" for a section straight in the page or a Sheet panel: null when it does not apply,
+ * otherwise why it cannot be done, or "".
+ */
+export function unwrapCheck(section) {
+  if (!isSection(section) || !section.matches(UNIT) || !inRoot(section)) return null;
+  if (section.hasAttribute("data-ge-keep-own")) return t("这个分区被脚本或链接用到，不能解散");
+  return [...section.children].every(holdsBlocks) ? "" : t("分区里有不能移动的内容（例如脚本），不能解散");
+}
+
+/** The section dissolving from `unit` takes: the innermost around it unwrapCheck applies to, so that a section in a section goes with the one around it, or null. */
+export function dissolvesFrom(unit) {
+  for (let section = sectionOf(unit); section; section = sectionOf(outerOf(section))) if (unwrapCheck(section) !== null) return section;
+  return null;
+}
+
+/**
+ * "组成新分区" for blocks (in document order): null when they do not all stand straight in the page
+ * or a Sheet panel, otherwise why they cannot become one section, or "". They must be neighbours in
+ * one box, with nothing left out between them: a selection with gaps is not quietly completed.
+ */
+export function wrapCheck(units) {
+  if (units.length === 0 || !units.every(inRoot)) return null;
+  const box = units[0].parentElement;
+  if (units.some((unit) => unit.parentElement !== box)) return t("只有同一层里的块能组成分区");
+  if (units.some((unit) => !accepts("section", unit.getAttribute("data-ge-unit-kind")))) return t("分区里不能再放分区或选项卡区块");
+  const blocks = unitsOf(box);
+  const first = blocks.indexOf(units[0]);
+  return units.every((unit, index) => blocks[first + index] === unit) ? "" : t("只有相邻的块能组成分区：中间还有没选中的块");
+}
+
+/** Blocks that pass wrapCheck, in a new section where they stood. Returns { focus: the section, created }. */
+export function wrapSection(units) {
+  begin();
+  const section = made(newContainer(units[0].ownerDocument, "section"));
+  const parts = units.flatMap((unit) => withLeads(unit));
+  parts[0].before(section);
+  section.append(...parts);
+  return done(section);
+}
+
+// A block the caret can stand in: a text block, not a display formula, where nothing is typed.
+const takesCaret = (node) => isHost(node) && !isTex(node);
+// The block of a section that takes the reader once it is dissolved: its first that takes the caret, or its first block.
+const firstOfSection = (section) => [...section.children].find(takesCaret) ?? [...section.children].find(holdsBlocks) ?? null;
+
+/** A section's blocks where it was, the section gone (with its identity). Returns { focus: its first block, created }. */
+export function unwrapSection(section) {
+  const focus = firstOfSection(section);
+  const moving = [...section.children];
+  begin();
+  placeBefore(section.parentElement, moving, withLeads(section)[0]);
+  for (const part of withLeads(section)) part.remove();
+  return done(focus);
+}
+
+/**
+ * The block menu's section commands, with what the editor gives it: struct (a structural undo
+ * step), say, and blocks() (the block handles and selection, blocks.mjs).
+ */
+export function create({ struct, say, blocks }) {
+  // A new section holding one empty paragraph, right after a block.
+  function addAfter(unit) {
+    blocks().clear();
+    const result = struct([unit.parentElement], [], () => {
+      const { focus, created } = sectionAfter(unit);
+      return { touched: [focus], focus, created };
+    });
+    caretAt(result.focus, "start");
+    say(t("已新建分区 · 标题、分割线都可以按需加"));
+  }
+
+  // Blocks next to each other in the page or a Sheet panel, put into a new section where they stand
+  // (block-menu/ checks wrapCheck first), one undo step; the section is selected.
+  function wrap(units) {
+    blocks().clear();
+    const result = struct([units[0].parentElement], [], () => {
+      const { focus: section, created } = wrapSection(units);
+      return { touched: [], focus: section, select: units, created }; // undo selects the blocks again
+    });
+    blocks().select(result.focus, { quiet: true });
+    say(t("已把{0}组成新分区 · 标题、分割线都可以按需加 · Ctrl+Z 撤销", units.length > 1 ? t(" {0} 块", units.length) : t("这一块")));
+  }
+
+  // A section dissolved: its blocks where it was, one undo step. Asked from blocks in it (`from`: the
+  // menu of a block, which may stand far down a long section), those stay selected, undo and redo
+  // selecting them again, and the page stays where it is; asked from the section, its first text block
+  // takes the caret, undo and redo bringing it back there (its first block selected, when none is).
+  function unwrap(section, from = null) {
+    blocks().clear();
+    const first = firstOfSection(section);
+    const select = from ?? (first && !takesCaret(first) ? first : null);
+    const result = struct([section, section.parentElement], first && takesCaret(first) ? [first] : [], () => {
+      const { focus, created } = unwrapSection(section);
+      return { touched: focus && takesCaret(focus) ? [focus] : [], focus, created, ...(select ? { select, reselect: true } : {}) };
+    });
+    if (from) blocks().select(from, { quiet: true });
+    else if (result.focus && takesCaret(result.focus)) caretAt(result.focus, "start");
+    else if (result.focus) blocks().select(result.focus, { quiet: true });
+    say(t("已解散分区，内容留在原处 · Ctrl+Z 撤销"));
+  }
+
+  return { sectionOps: { addAfter, wrap, unwrap, wrapCheck, unwrapCheck, sectionOf, dissolvesFrom } };
+}

package/browser/editor/components/set-apart.mjs

@@ -0,0 +1,24 @@
+import { escapeText } from "../../shared/escape.mjs";
+
+/**
+ * How a box of blocks set apart (a highlight block, a callout: `match` its elements) is copied, one
+ * rule for both, their clipboard's hooks (registry.mjs `clipboard`) for the block of `type`: its
+ * blocks; one with words straight in it (an Agent's, a callout written the old way), a paragraph of
+ * what it says. A list with its class is a list, and a text block of a type of its own that type.
+ */
+export const setApart = (type, match) => ({
+  describe(node, { isHost, holding, colorOf, copiedType, serializeInner, plain }) {
+    if (!node.matches(match) || node.matches("ul, ol") || (isHost(node) && copiedType(node))) return undefined;
+    const straight = [...node.childNodes].some((child) => child.nodeType === 3 && child.data.trim());
+    const words = isHost(node) ? serializeInner(node) : straight ? escapeText(plain(node)) : null;
+    const blocks = words === null ? holding(node) : [{ type: "paragraph", html: words }];
+    const color = colorOf(node);
+    return blocks ? { type, blocks, ...(color ? { color } : {}) } : null;
+  },
+  endsIn(unit, { blocksIn, boxesOf, colorOf }) {
+    if (!unit.matches(match)) return undefined;
+    const color = colorOf(unit);
+    return [{ type, blocks: blocksIn(boxesOf(unit)), ...(color ? { color } : {}) }];
+  },
+  check: (block, { container }) => container(block),
+});

package/browser/editor/components/sheets/index.mjs

@@ -0,0 +1,137 @@
+import { escapeText } from "../../../shared/escape.mjs";
+import { iconKind } from "../../../shared/emoji/icon-value.mjs";
+import { svg } from "../icons.mjs";
+import { SHEETS } from "../kit.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 选项卡区块 and 选项卡 (Notion's tabs block): the kit's Sheets (sheets.js). A Sheet area holds a tab
+// row (.doc-sheet-tabs, a box of tabs) and one panel per tab ([data-doc-sheet], a box like the
+// page: chapters and body text). A tab is a unit that takes its panel along; its name is a text
+// block renamed in place. page.mjs: renaming a tab, a new one; pills.mjs: the tabs as Notion's
+// pills (a press, a drag, the menu, +, an empty tab); file.mjs: a new tab in report.html.
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (a new one: page.mjs
+// `create`), editor.mjs (F2, Enter and Esc while a tab is renamed, undo with a tab focused: page.mjs `key`, `undoHere`, `field`, `click`), core.mjs (a tab's name in a span of its own:
+// prepareBlock; a tab takes its panel: partsOf), selection/delete.mjs and drag/ (deleting and
+// moving tabs, resting on a tab while dragging switches the Sheet),
+// handle/ (room for each tab's handle), blocks.mjs (its tabs as pills, `sheetPills`), drag/drop.mjs (nothing drops over a tab row), clipboard/own/ (copying it: `clipboard`, and `build` in page.mjs), ../source/ (finding tabs and
+// their panels: walkTabs).
+// Its look: the kit's styles/sheets.css, switched by sheets.js (src/render/kit/).
+/** The tabs area's icon: a page with its row of tabs along the top. */
+export const TABS_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2"/><path d="M3.25 8h13.5M8.25 3.75V8M13.25 3.75V8"/>');
+
+/** The name span of a tab in the tab row. */
+export function tabOf(target) {
+  return target?.closest?.(SHEETS.tabIn)?.querySelector(':scope > [data-ge-kind="tab"]') ?? null;
+}
+
+// A tab of a Sheet area described with `blocks` (its panel's): its name and emoji, or null.
+function describeTab(tab, blocks) {
+  const icon = tab.getAttribute("data-tab-icon");
+  const title = (tab.querySelector(':scope > [data-ge-kind="tab"]') ?? tab).textContent.replace(/\s+/g, " ").trim();
+  return blocks && title ? { title, ...(iconKind(icon) === "emoji" ? { icon } : {}), blocks } : null;
+}
+
+export default {
+  name: "sheets",
+  listed: () => t("选项卡"),
+  readOnly: [{ rank: 60, at: `${SHEETS.tabIn}:has(> [data-ge-kind="tab"])`, says: null }], // a tab works as Notion's pill (pills.mjs)
+  units: {
+    sheets: {
+      name: t("选项卡区块"),
+      // A container, so not the plain block's icon: a page with a row of tabs along its top.
+      icon: TABS_ICON,
+      match: [
+        { rank: 20, tag: "section", class: "doc-sheet-shell" },
+        { rank: 30, tag: "section", attr: "data-doc-sheets" },
+      ],
+      chapter: true, fixed: true,
+      handle: "none", // its handle stands on its tab row, a tab's (`outer`)
+      below: false,
+      entersAfter: true,
+      toggles: ["doc-sheet-shell--plain"], // no frame (显示边框 off in its block menu)
+    },
+    // The server marks each tab of a row (findUnits); its emoji (编辑图标 in its menu, notion-lite's) is
+    // an attribute of its button, shown before its name by the kit (sheets.css).
+    tab: { clipboard: { kind: "words" }, name: t("选项卡"), icon: svg('<path d="M2.75 15.75h14.5"/><path d="M4.75 15.75v-9.5a2 2 0 0 1 2-2h4.5a2 2 0 0 1 2 2v9.5"/>'), fixed: true, handle: "outer", below: false, attributes: { "data-tab-icon": (value) => iconKind(value) === "emoji" } },
+  },
+  boxes: {
+    // `owner`: the tab that takes the panel along (its hash covers the panel); `takenBy`: that tab known by
+    // its key, off the page as both are once it is deleted.
+    panel: {
+      role: "root", name: t("选项卡"), selectAll: { content: t("这个选项卡里的全部内容"), whole: true },
+      find: (unit, key) => [...unit.querySelectorAll(SHEETS.panels)].find((child) => child.getAttribute(SHEETS.panelKey) === key) ?? null,
+      owner: (panel) => [...(panel.parentElement?.querySelectorAll(SHEETS.tabs) ?? [])].find((tab) => tab.getAttribute(SHEETS.tabKey) === panel.getAttribute(SHEETS.panelKey)) ?? null,
+      takenBy: (tab, key) => tab.getAttribute(SHEETS.tabKey) === key,
+    },
+    tabs: { role: "tabs", name: t("选项卡栏"), selectAll: { whole: true }, find: (unit) => unit.querySelector(SHEETS.row) },
+  },
+  types: {
+    // A new Sheet area (the "/" menu's 选项卡, 在下方新建: page.mjs newSheets): three tabs, 选项卡 1–3,
+    // their panels empty (notion-lite's), written with them under a name of its own (file.mjs).
+    sheets: {
+      menu: ["advanced", 21], fresh: 6,
+      tag: "section", className: "doc-sheet-shell", kind: "sheets", box: "tabs",
+      clipboard: {
+        kind: "tabs", claims: SHEETS.match,
+        holds: (block) => (block.tabs ?? []).flatMap((tab) => tab.blocks),
+        read: (unit, { plain, unitsOf }) => [...unit.querySelectorAll(SHEETS.tabs)].map((tab) => {
+          const panel = panelFor(tab);
+          return { name: plain(tab.querySelector('[data-ge-kind="tab"]') ?? tab), units: panel ? unitsOf(panel) : [] };
+        }),
+        // Each tab's name, emoji and blocks; its page.mjs makes it again.
+        describe(node, { isHost, holding }) {
+          if (node.getAttribute("data-ge-unit-kind") !== "sheets" || isHost(node)) return undefined;
+          const tabs = [...node.querySelectorAll(SHEETS.tabs)].map((tab) => describeTab(tab, holding(panelFor(tab))));
+          return tabs.length > 0 && tabs.every(Boolean) ? { type: "sheets", tabs } : null;
+        },
+        // The tab shown, with what of its panel comes before the end (notion-lite's tab block holds
+        // the content it shows); its tab row is no text of it, and an end before the panel leaves
+        // none of it. With no tabs it is no Sheet area, whatever it says: any block's rule holds.
+        endsIn(unit, { holdsAny, walk, groupItems }) {
+          const tabs = [...unit.querySelectorAll(SHEETS.tabs)];
+          if (!unit.matches(SHEETS.match) || tabs.length === 0) return undefined;
+          const shown = tabs.flatMap((tab) => {
+            const panel = panelFor(tab);
+            const described = panel && !panel.hidden && holdsAny(panel) ? describeTab(tab, groupItems(walk(panel))) : null;
+            return described ? [described] : [];
+          });
+          return shown.length > 0 ? [{ type: "sheets", tabs: shown }] : [];
+        },
+        check: (block, { string, valid }) => Array.isArray(block.tabs) && block.tabs.length >= 1 && block.tabs.length <= 20
+          && block.tabs.every((tab) => tab && string(tab.title, 200) && tab.title.length >= 1 && !/[<>\r\n]/.test(tab.title)
+            && (tab.icon === undefined || iconKind(tab.icon) === "emoji") && Array.isArray(tab.blocks) && tab.blocks.every((inner) => valid(inner, "panel"))),
+        text: (block, lines) => block.tabs.flatMap((tab) => [escapeText(tab.title), ...lines(tab.blocks)]),
+      },
+      content: (element) => element.querySelector(SHEETS.row),
+      extras: (element) => ({ name: element.getAttribute("data-doc-sheets") }),
+      label: t("选项卡"), icon: TABS_ICON,
+      words: "选项卡 标签页 分页 页签 切换 xuanxiangka biaoqianye fenye yeqian xxk bqy tab tabs tabbed switch",
+      glance: { row: 14, name: "选项卡", write: "`<section data-doc-sheets=\"name\">` holding a `<section>` per tab, starting with its heading, the tab's name", after: "`section.doc-sheet-shell`: its row of tabs, a `div[data-doc-sheet]` per tab", rule: "Kit blocks" },
+    },
+    // A tab made on the page (+ at the end of its row): its name and its panel's blocks, written
+    // with its panel (source/apply.mjs insertTab). No label: nothing is turned into a tab.
+    tab: {
+      tag: "button", className: "doc-sheet-tab", kind: "tab", box: "panel",
+      title: (element) => element.querySelector(':scope > [data-ge-kind="tab"]'), content: (element) => panelFor(element),
+      written: () => true, // with no blocks too: an empty tab
+      extras: (element) => ({ sheet: element.getAttribute(SHEETS.tabKey), ...(iconKind(element.getAttribute("data-tab-icon")) === "emoji" ? { icon: element.getAttribute("data-tab-icon") } : {}) }),
+    },
+  },
+  components: ["doc-sheet-tabs"],
+  hosts: {
+    tab: { name: t("选项卡名称"), caps: () => ["plain"], textFilters: false, wrapped: true, parts: [["sheets", "tabs"]] }, // the name is a span made inside the button, which keeps switching Sheets
+  },
+};
+
+/** A Sheet tab's panel (its description's pair, src/shared/components/sheets.mjs), or null. */
+export function panelOf(node) {
+  return node.hasAttribute("data-ge-unit") ? panelFor(node) : null;
+}
+
+/** The panel of a tab in a Sheet area's row (one of the file's or one made on the page), or null. */
+export function panelFor(tab) {
+  const key = tab.getAttribute(SHEETS.tabKey);
+  const shell = key !== null ? tab.parentElement?.parentElement : null;
+  return shell?.matches(SHEETS.match) ? [...shell.querySelectorAll(SHEETS.panels)].find((child) => child.getAttribute(SHEETS.panelKey) === key) ?? null : null;
+}

package/browser/editor/components/sheets/page.mjs

@@ -0,0 +1,227 @@
+import { frameOf } from "../../page/core.mjs";
+import { pointRange, select } from "../../page/caret.mjs";
+import { closeLink } from "../../page/links/index.mjs";
+import { ICONS } from "../../page/menu.mjs";
+import { iconKind } from "../../../shared/emoji/icon-value.mjs";
+import { TOGGLES } from "../registry.mjs";
+import { SHEETS } from "../kit.mjs";
+import { capsFor } from "../registry.mjs";
+import { lookRow } from "../rows.mjs";
+import { tabOf } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 选项卡 on the page: renaming a tab, and a new one. A tab is a button that switches Sheets, so a
+// click still switches. 重命名 in its menu (a click on the tab shown: pills.mjs), or F2 while the tab
+// has focus, makes the name span editable in place with the whole name selected (Notion's); Enter or
+// leaving the name keeps it, Esc goes back to the name before. While renamed, clicks and keys stay
+// away from sheets.js. Pressing, dragging, the menu and + are pills.mjs's; deleting and moving a tab,
+// the block tools' (blocks.mjs).
+
+// A Sheet area with no frame (显示边框 off), a class switch the description names.
+const PLAIN = TOGGLES.sheets[0];
+
+/**
+ * Renaming tabs, with what the editor gives it: the last recorded content of each block,
+ * recordText (one step of typing), closeTyping and say; the Sheet area's row of the
+ * block menu (look(element, { classes }, select): the editor's undoable change of classes); and the
+ * tab's menu (openMediaPicker: the icon picker).
+ */
+export function create({ lastKnown, recordText, closeTyping, say, look, openMediaPicker }) {
+  let renaming = null; // { host, before }: the name being edited and its HTML when renaming began
+
+  // The caret where the reader pointed (x, y), or the whole name selected.
+  function start(host, x, y) {
+    if (renaming) finish();
+    closeLink(false);
+    closeTyping();
+    renaming = { host, before: host.innerHTML };
+    host.setAttribute("contenteditable", "true");
+    host.parentElement?.setAttribute("data-ge-renaming", ""); // the tab's look while renamed (pills.mjs)
+    const range = x === undefined ? null : pointRange(x, y);
+    host.focus({ preventScroll: true });
+    if (range && host.contains(range.startContainer)) return select(range);
+    const all = document.createRange();
+    all.selectNodeContents(host);
+    select(all);
+  }
+
+  // The name is kept with its spaces tidied. keep: false (Esc), or an emptied name, puts the name
+  // from before back; either is recorded like typing, so it undoes with the typing just before it.
+  function finish(keep = true) {
+    if (!renaming) return;
+    const { host, before } = renaming;
+    renaming = null;
+    const name = host.textContent.replace(/\s+/g, " ").trim();
+    if (!keep || !name) host.innerHTML = before;
+    else if (host.textContent !== name || host.childElementCount > 0) host.textContent = name; // no stray <br>
+    if (host.innerHTML !== lastKnown.get(host)) recordText(host);
+    closeTyping();
+    if (document.activeElement === host) host.blur();
+    host.removeAttribute("contenteditable");
+    host.parentElement?.removeAttribute("data-ge-renaming");
+    const selection = getSelection();
+    if (selection.rangeCount && host.contains(selection.anchorNode)) selection.removeAllRanges();
+    if (keep && !name) say(t("选项卡名称不能为空，已恢复原来的名称。"), "error");
+  }
+
+  // Whether a press or click lands on the tab being renamed (its name or its padding): a text field
+  // then, whose clicks (the space bar's too) do not reach sheets.js.
+  const holds = (target) => Boolean(renaming) && frameOf(renaming.host).contains(target);
+
+  // The page's listeners: a press on the padding of the tab being renamed keeps the caret in its
+  // name; leaving the name ends renaming (switching to another window does not).
+  function install() {
+    document.addEventListener("mousedown", (event) => {
+      if (holds(event.target) && !renaming.host.contains(event.target)) event.preventDefault();
+    }, true);
+    document.addEventListener("focusout", (event) => {
+      if (renaming?.host === event.target && document.hasFocus()) finish();
+    }, true);
+  }
+
+  /**
+   * The tabs' keys, which come before any text block's as a tab holds none of the page's (`key`): the
+   * keys of a tab being renamed stay away from sheets.js (it would switch Sheets on arrows, Home and
+   * End); Enter or Esc ends renaming (the one + just made too: not a text block of the page's until
+   * its commit comes back); F2 on a tab starts it. True when the key was the tabs'.
+   */
+  function key(event) {
+    const renamed = renaming?.host === event.target;
+    if (renamed) event.stopPropagation();
+    if (renamed && !event.isComposing && event.keyCode !== 229 && (event.key === "Enter" || event.key === "Escape")) {
+      event.preventDefault();
+      finish(event.key === "Enter");
+      return true;
+    }
+    const tab = !renamed && tabOf(event.target);
+    if (!tab || event.key !== "F2") return false;
+    event.preventDefault();
+    start(tab);
+    return true;
+  }
+
+  return {
+    create: make, start, install, key,
+    /** A click on the tab being renamed stays away from sheets.js, the space bar's too. True when it was. */
+    click(event) {
+      if (!holds(event.target)) return false;
+      event.stopPropagation();
+      return true;
+    },
+    /** Undo and redo work with the focus on a tab, where no text block hears them. */
+    undoHere: (node) => Boolean(tabOf(node)),
+    /**
+     * A Sheet area's row of the block menu: 显示边框, a switch (checked while the frame shows, clicked
+     * again to take it away: a choice already made, `current`, could not be clicked). None for another block.
+     */
+    menuItems(target) {
+      if (target?.getAttribute?.("data-ge-unit-kind") !== "sheets") return [];
+      const framed = !target.classList.contains(PLAIN);
+      return [lookRow({ look, say }, target, { label: t("显示边框"), icon: ICONS.frame, checked: framed, change: { classes: { [PLAIN]: framed } }, done: t("{0}选项卡区块的边框", framed ? t("已去掉") : t("已显示")) })];
+    },
+    /**
+     * A tab's menu, Notion's, in place of the block menu (no types, nothing below it, nothing around
+     * it): 重命名, 编辑图标 (the emoji picker below the tab, 表情符号 only; its pick, or 移除, one undo
+     * step) and 删除. `tools`: the block menu's { rect: the handle's, reason: why it may not go,
+     * remove(): delete it }. None for another block.
+     */
+    menu(target, { rect, reason, remove }) {
+      if (target?.getAttribute?.("data-ge-unit-kind") !== "tab") return null;
+      const pick = () => {
+        openMediaPicker({ origin: rect ?? target.getBoundingClientRect(), value: target.getAttribute("data-tab-icon"), only: ["emoji"], onPick: (value) => {
+          if (value !== null && iconKind(value) !== "emoji") return;
+          if (look(target, { attributes: { "data-tab-icon": value } })) say(t("{0}选项卡图标 · Ctrl+Z 撤销", value ? t("已更换") : t("已移除")));
+        } });
+      };
+      return {
+        label: t("选项卡的操作"),
+        width: 180,
+        items: [
+          { label: t("重命名"), icon: ICONS.rename, hint: "F2", run: () => { const name = tabOf(target); if (name) start(name); } },
+          { label: t("编辑图标"), icon: ICONS.face, run: () => setTimeout(pick) },
+          { label: t("删除"), icon: ICONS.trash, disabled: Boolean(reason), note: reason ?? undefined, run: remove },
+        ],
+      };
+    },
+    /** The name being renamed, or null. */
+    get field() { return renaming?.host ?? null; },
+  };
+}
+
+/**
+ * A new Sheet area (选项卡, notion-lite's tabs block): a frame holding a row of three tabs, 选项卡 1–3,
+ * each with an empty panel, under a name of its own on the page (the reader's chosen tab is kept
+ * under it). The kit's sheets.js comes too when the page has none (ensureSheetsKit).
+ */
+export function newSheets(doc, given = null) {
+  const shell = doc.createElement("section");
+  shell.className = "doc-sheet-shell";
+  const taken = new Set([...doc.querySelectorAll("[data-doc-sheets]")].map((node) => node.getAttribute("data-doc-sheets")));
+  let name;
+  do name = `tabs-${Math.random().toString(36).slice(2, 6)}`; while (taken.has(name));
+  for (const [attribute, value] of [["data-doc-sheets", name], ["aria-label", t("选项卡")], ["data-ge-new", ""], ["data-ge-type", "sheets"], ["data-ge-unit-kind", "sheets"]]) shell.setAttribute(attribute, value);
+  const row = doc.createElement("div");
+  row.className = "doc-sheet-tabs";
+  for (const [attribute, value] of [["aria-label", t("选项卡")], ["data-ge-box", ""], ["data-ge-box-kind", "tabs"]]) row.setAttribute(attribute, value);
+  shell.append(row);
+  // given: [{ title, icon, blocks }] (a copy pasted), else three empty tabs.
+  for (const [index, wanted] of (given ?? [1, 2, 3].map((number) => ({ title: t("选项卡 {0}", number) }))).entries()) {
+    const { tab, panel } = newTab(shell, wanted.title || t("选项卡 {0}", index + 1));
+    if (wanted.icon) tab.setAttribute("data-tab-icon", wanted.icon);
+    panel.append(...(wanted.blocks ?? []));
+    row.append(tab);
+    shell.append(panel);
+  }
+  ensureSheetsKit(doc);
+  return shell;
+}
+
+/** A Sheet area made again from the clipboard's description (its type's `build`, builders.mjs). */
+export function build({ doc, block, inner }) {
+  return newSheets(doc, block.tabs.map((tab) => ({ title: tab.title, icon: tab.icon, blocks: inner(tab.blocks) })));
+}
+
+/** A Sheet area standing for an empty block (its type's `create`), its three tabs empty; no caret (notion-lite's). */
+export function make({ doc, put }) {
+  put(newSheets(doc));
+  return null;
+}
+
+/** The kit's sheets.js on the page (a page with no Sheet area is served without it), as a kit tag. */
+export function ensureSheetsKit(doc) {
+  if (globalThis.DocSheets || doc.querySelector('script[data-doc-kit="sheets"]')) return;
+  const script = doc.createElement("script");
+  script.src = "/kit/sheets.js";
+  script.setAttribute("data-doc-kit", "sheets");
+  const kit = [...doc.querySelectorAll("script[data-doc-kit]")].at(-1);
+  if (kit) kit.after(script);
+  else doc.body.append(script);
+}
+
+/**
+ * A tab made on the page and its empty panel, for `shell` (a Sheet area), named `name`, under a key
+ * the area has not used: { tab, panel, key }, not yet on the page. The tab is a block made on the
+ * page (its type's, index.mjs), its name a span as prepareBlock makes a tab's; the panel a box made
+ * on the page, which the commit writing the tab makes one of the file's (commit.mjs adopt).
+ */
+export function newTab(shell, name) {
+  const doc = shell.ownerDocument;
+  const taken = new Set([...shell.querySelectorAll(`[${SHEETS.tabKey}], [${SHEETS.panelKey}]`)].map((node) => node.getAttribute(SHEETS.tabKey) ?? node.getAttribute(SHEETS.panelKey)));
+  let key;
+  do key = `tab-${Math.random().toString(36).slice(2, 6)}`; while (taken.has(key));
+  const tab = doc.createElement("button");
+  tab.className = "doc-sheet-tab";
+  tab.type = "button";
+  tab.setAttribute(SHEETS.tabKey, key);
+  for (const [attribute, value] of [["data-ge-new", ""], ["data-ge-type", "tab"], ["data-ge-unit-kind", "tab"]]) tab.setAttribute(attribute, value);
+  const label = doc.createElement("span");
+  label.setAttribute("data-ge-kind", "tab");
+  label.setAttribute("data-ge-caps", capsFor("tab"));
+  label.textContent = name;
+  tab.append(label);
+  const panel = doc.createElement("div");
+  panel.setAttribute(SHEETS.panelKey, key);
+  panel.setAttribute("data-ge-box", "");
+  panel.setAttribute("data-ge-box-kind", "panel");
+  return { tab, panel, key };
+}