@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,226 @@
+import { ICONS } from "../../page/menu.mjs";
+import { own } from "../../page/overlays.mjs";
+import { drawAt, shapeOf } from "../../page/overlay-layer.mjs";
+import { keptByComponent } from "../../page/page-objects.mjs";
+import { tooltip } from "../../page/tooltip.mjs";
+import { addStyle, element } from "../../page/ui.mjs";
+import { SHEETS } from "../kit.mjs";
+import { TAB_ICON, iconKind, iconUrl, tabIconValue } from "../../../shared/emoji/icon-value.mjs";
+import { panelFor, tabOf } from "./index.mjs";
+import { newTab } from "./page.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 选项卡 as Notion's pills (notion-lite's src/blocks/tabs/edit/), while the page is edited. A click
+// on a tab not shown switches to it (sheets.js, as when reading); a click on the tab shown opens
+// its menu below it (重命名, 删除: block-menu/), a second click closes it; the right button opens it
+// on any tab, switching first. Pressing a tab and moving more than a few pixels drags it along its
+// row (drag/: a tab stays in its row). With the pointer on a tab row, + stands after its last tab:
+// a new tab "选项卡 N" at the end, shown and renamed at once (page.mjs newTab; one undo step). An
+// empty tab shows Notion's placeholder: a click there makes a paragraph in it (insert/ clickBlank)
+// and blocks drop into it (drag/drop.mjs). Whenever a row's tabs change (+, deleting, moving, undo
+// and redo), its area starts again (DocKit), so sheets.js knows them.
+
+const STYLE = `
+  [data-ge-editing] .doc-sheet-tab:focus-visible { outline: 2px solid var(--doc-accent, #2678d8); }
+  .ge-layer > .ge-tab-add { pointer-events: auto; }
+  .ge-tab-add { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; color: var(--ge-ico2); cursor: pointer; transition: background .1s ease-in-out; }
+  .ge-tab-add:hover { background: var(--ge-hover); }
+  .ge-tab-add:active { background: var(--ge-press); }
+  .ge-tab-add svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
+  /* The tab whose menu is open: as the shown tab under the pointer (Notion's .open). */
+  [data-ge-editing] .doc-sheet-tab[data-ge-open] { background: light-dark(rgb(33 27 23 / 7.5%), rgb(255 255 255 / 8.25%)); }
+  /* A tab being renamed (data-ge-renaming, page.mjs: no :has() on contenteditable, which made every
+     host's contenteditable set as the page opens recalculate the page's style): Notion's editing pill, the name a field. */
+  [data-ge-editing] .doc-sheet-tab[data-ge-renaming] { padding: 0 8px; background: var(--ge-field); cursor: text; }
+  [data-ge-editing] .doc-sheet-tab > [contenteditable="true"] { min-width: 1px; outline: none; -webkit-user-select: text; user-select: text; cursor: text; }
+  /* An empty tab: Notion's placeholder, a click makes a paragraph there. It takes the room of the
+     empty paragraph the click makes (a line of body text, no margin: flow.css's panel edges), so
+     nothing moves when it does; its fill under the pointer reaches 3px past the line (Notion's
+     padding), drawn as a shadow that takes no room. */
+  [data-ge-editing] [data-doc-sheet]:not(:has(> *))::before { content: ${JSON.stringify(t("空白选项卡。点击或拖动区块到这里。"))}; display: block; border-radius: 1px; color: var(--ge-tx3); cursor: pointer; transition: background 20ms ease-in, box-shadow 20ms ease-in; }
+  [data-ge-editing] [data-doc-sheet]:not(:has(> *)):hover::before { background: var(--ge-hover); box-shadow: 0 0 0 3px var(--ge-hover); }
+`;
+
+/**
+ * The pills' page object (a module of its own, as this one needs a page to load in, which page.mjs does
+ * not), with what the editor gives them: active() (whether block tools may show), struct (one undo
+ * step of changes to the page's structure, history.mjs), say (a notice) and the Sheet area's page
+ * object. Its blockTools(tools) is called by the block tools, which hold the rest: drag (drag/index.mjs),
+ * menu (their menu card) and openMenu(tab, rect, side, { onClose }), the block menu (block-menu/).
+ */
+export function create({ active, struct, say, pages }) {
+  const rename = (tab) => {
+    const name = tabOf(tab);
+    if (name) pages.sheets.start(name);
+  };
+  return { blockTools: ({ drag, menu, openMenu }) => tabPills({ active, drag, menu, openMenu, struct, rename, say }) };
+}
+
+function tabPills({ active, drag, menu, openMenu, struct, rename, say }) {
+  addStyle(STYLE);
+  let press = null; // a tab pressed: { tab, x, y, shown: its Sheet showed, dragged }
+  let swallow = false; // the click ending a drag switches nothing
+  let row = null; // the tab row + stands in
+
+  const tabAt = (target) => (keptByComponent(target) ? null : target?.closest?.("main " + SHEETS.tabIn) ?? null);
+  const openTab = () => document.querySelector(SHEETS.tabIn + "[data-ge-open]"); // the tab whose menu is open
+  const keysOf = (area) => [...area.querySelectorAll(SHEETS.tabs)].map((tab) => tab.getAttribute(SHEETS.tabKey)).join(" ");
+
+  // ---------- a press, a drag, the menu ----------
+
+  document.addEventListener("pointerdown", (event) => {
+    swallow = false;
+    const tab = event.button === 0 && active() ? tabAt(event.target) : null;
+    const open = tab && openTab();
+    if (open && open !== tab) menu.close(); // another tab's menu goes; this one's closes on the click
+    press = tab && { tab, x: event.clientX, y: event.clientY, shown: tab.getAttribute("aria-selected") === "true", dragged: false };
+  }, true);
+  document.addEventListener("pointermove", (event) => {
+    if (!press) return;
+    if (press.dragged) {
+      if (drag.active) drag.move(event.clientX, event.clientY);
+      return;
+    }
+    if (Math.hypot(event.clientX - press.x, event.clientY - press.y) <= 4) return;
+    menu.close();
+    if (drag.start(press.tab, event.clientX, event.clientY)) press.dragged = true;
+    else press = null;
+  }, true);
+  document.addEventListener("pointerup", (event) => {
+    const pressed = press;
+    press = null;
+    if (!pressed) return;
+    if (pressed.dragged) {
+      swallow = true;
+      if (drag.active) drag.end(true);
+      return;
+    }
+    if (!pressed.shown || tabAt(event.target) !== pressed.tab) return; // the click shows its Sheet (sheets.js)
+    if (pressed.tab.hasAttribute("data-ge-open") && menu.isOpen) menu.close();
+    else openFor(pressed.tab);
+  }, true);
+  document.addEventListener("pointercancel", () => {
+    press = null;
+    if (drag.active) drag.end(false);
+  }, true);
+  document.addEventListener("click", (event) => {
+    if (!swallow) return;
+    swallow = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, true);
+  document.addEventListener("contextmenu", (event) => {
+    const tab = active() ? tabAt(event.target) : null;
+    if (!tab) return;
+    event.preventDefault();
+    if (tab.getAttribute("aria-selected") !== "true") tab.click();
+    openFor(tab);
+  }, true);
+
+  // Its menu below it, the tab drawn as Notion's while it is open.
+  function openFor(tab) {
+    const rect = tab.getBoundingClientRect();
+    hideAdd();
+    openMenu(tab, { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom }, null, {
+      onClose: () => tab.removeAttribute("data-ge-open"),
+    });
+    tab.setAttribute("data-ge-open", "");
+  }
+
+  // ---------- + ----------
+
+  const add = element("div", { class: "ge-tab-add", role: "button", "aria-label": t("添加选项卡") });
+  add.innerHTML = ICONS.plus;
+  tooltip(add, t("添加选项卡"));
+  add.addEventListener("pointerdown", (event) => event.preventDefault()); // the focus stays where it is
+  add.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (row?.isConnected) addTab(row);
+  });
+
+  // After the last tab of the row, or at the row's right end while its tabs run past it.
+  function place() {
+    const last = row?.isConnected && active() ? [...row.querySelectorAll(SHEETS.tabsOfRow)].at(-1) : null;
+    const shape = last && shapeOf(row);
+    if (!shape) return hideAdd();
+    const tab = last.getBoundingClientRect();
+    const right = row.getBoundingClientRect().right;
+    const shown = row;
+    own(add, "tab add", { owner: row, alive: () => row === shown && shown.isConnected });
+    drawAt(add, shape.layer, Math.min(tab.right + 4, right - 28) - shape.origin.left, (tab.top + tab.bottom) / 2 - 14 - shape.origin.top);
+  }
+  function hideAdd() {
+    row = null;
+    add.remove();
+  }
+  document.addEventListener("mousemove", (event) => {
+    if (add.contains(event.target)) return;
+    const over = active() && !openTab() && !keptByComponent(event.target) ? event.target.closest?.("main " + SHEETS.rowAt) ?? null : null;
+    if (over === row) return;
+    row = over;
+    if (row) place();
+    else hideAdd();
+  }, { passive: true, capture: true });
+  addEventListener("scroll", (event) => { if (row && event.target === row) place(); }, { passive: true, capture: true });
+  document.documentElement.addEventListener("mouseleave", hideAdd);
+
+  // A new tab at the end of the row: shown, its name selected to type over (one undo step).
+  function addTab(at) {
+    const area = at.parentElement;
+    const tabs = [...at.querySelectorAll(SHEETS.tabsOfRow)];
+    const last = tabs.at(-1);
+    const after = last && panelFor(last);
+    if (!after) return;
+    const { tab, panel, key } = newTab(area, t("选项卡 {0}", tabs.length + 1));
+    menu.close();
+    struct([at, area], [], () => {
+      last.after(tab);
+      after.after(panel);
+      return { touched: [], focus: null };
+    });
+    restart(area, key);
+    at.scrollTo?.({ left: at.scrollWidth, behavior: "smooth" });
+    place();
+    rename(tab);
+    say(t("已添加选项卡 · 输入名称后按 Enter · Ctrl+Z 撤销"));
+  }
+
+  // ---------- the areas follow their tabs ----------
+
+  const mounted = new WeakMap(); // area -> the keys of its tabs when it last started here
+  function restart(area, show = null) {
+    mounted.set(area, keysOf(area));
+    const kit = globalThis.DocKit;
+    if (!kit) return;
+    kit.destroy(area);
+    kit.mount(area);
+    if (show) globalThis.DocSheets?.get(area)?.set(show);
+  }
+  new MutationObserver((records) => {
+    const areas = new Set(records.map((record) => record.target).filter((node) => node.nodeType === 1 && node.matches(SHEETS.row)).map((node) => node.parentElement));
+    for (const area of areas) if (area?.isConnected && area.matches(SHEETS.match) && mounted.get(area) !== keysOf(area)) restart(area);
+    if (row) place();
+  }).observe(document.querySelector("main") ?? document.body, { childList: true, subtree: true });
+  // A tab's emoji, set or taken away: its picture (the server's image of it, as render/emoji.mjs
+  // gives it when the page is served).
+  new MutationObserver((records) => {
+    for (const { target: tab } of records) {
+      if (!tab.getAttribute?.(SHEETS.tabKey)) continue;
+      const icon = tab.getAttribute("data-tab-icon");
+      if (iconKind(icon) === "emoji") tab.style.setProperty(TAB_ICON, tabIconValue(iconUrl(icon)));
+      else tab.style.removeProperty(TAB_ICON);
+      if (tab.getAttribute("style") === "") tab.removeAttribute("style");
+    }
+  }).observe(document.querySelector("main") ?? document.body, { attributes: true, attributeFilter: ["data-tab-icon"], subtree: true });
+
+  return {
+    /** Whether a node is a tab of a row or +: a press there is theirs. */
+    holds: (node) => Boolean(tabAt(node)) || add.contains(node),
+    /** The editing stops (or the block tools go). */
+    hide() {
+      press = null;
+      hideAdd();
+    },
+    get nodes() { return [add]; },
+  };
+}

package/browser/editor/components/table/grid.mjs

@@ -0,0 +1,73 @@
+// A table's rows and cells on the page (docs/editor.md, "Tables"), as the commits compare them: the
+// table unit's grid when the file has it written as the kit writes one (its thead's rows, then its tbody's,
+// each of cells, merged ones tiling a rectangle with the others), else null (only its cells' text is
+// edited). Whether it is, the server judged once (source/table.mjs plainTable) and marked on the unit
+// (index.mjs GRID); this reads the mark, it judges nothing. What a commit sends of a table whose grid
+// changed is its rows anew (source/table.mjs): each row and cell by where it was when the page last
+// committed, or new; a cell's text where it changed, its spans where they changed.
+
+import { GRID, lookOf, widthOf } from "./index.mjs";
+// An element's identity (core.mjs ELEMENT_ID): a cell retagged (td and th) stays the same cell, as
+// its new element takes the old one's identity (page.mjs retagCell).
+const ID = "data-ge-id";
+const PREFIX = `${Math.random().toString(36).slice(2, 6)}t`;
+let count = 0;
+const idOf = (element) => element.getAttribute(ID) ?? (element.setAttribute(ID, `${PREFIX}${(count++).toString(36)}`), element.getAttribute(ID));
+
+/** The table element of a table unit (its frame's, or the table itself). */
+export const tableOf = (unit) => (unit?.localName === "table" ? unit : unit?.querySelector?.(":scope > table") ?? null);
+
+/** A table unit's grid: { table, rows: [{ el, head, cells: [{ el, tag, scope, look, width, rowspan, colspan }] }] }, or null when the unit has none (GRID). */
+export function gridOf(unit) {
+  const table = unit?.hasAttribute?.(GRID) ? tableOf(unit) : null;
+  if (!table) return null;
+  return {
+    table,
+    rows: [...table.querySelectorAll(":scope > thead > tr, :scope > tbody > tr")].map((row) => ({
+      el: row,
+      id: idOf(row),
+      head: row.parentElement.localName === "thead",
+      cells: [...row.children].map((cell) => ({ el: cell, id: idOf(cell), tag: cell.localName, scope: cell.localName === "th" ? cell.getAttribute("scope") : null, look: lookOf(cell), width: widthOf(cell), rowspan: cell.rowSpan, colspan: cell.colSpan })),
+    })),
+  };
+}
+
+const sameGrid = (a, b) => a.rows.length === b.rows.length && a.rows.every((row, r) => {
+  const other = b.rows[r];
+  return row.id === other.id && row.head === other.head && row.cells.length === other.cells.length
+    && row.cells.every((cell, c) => cell.id === other.cells[c].id && cell.tag === other.cells[c].tag && cell.scope === other.cells[c].scope && cell.look === other.cells[c].look && cell.width === other.cells[c].width
+      && cell.rowspan === other.cells[c].rowspan && cell.colspan === other.cells[c].colspan);
+});
+
+/**
+ * What a commit sends of a table whose grid changed since `before` (its grid when the page last
+ * committed): { rows } (source/table.mjs), or null when it did not change or is not plain now.
+ * textOf(cell): a cell's text, and whether it changed ({ html, changed }).
+ */
+export function tableChange(before, unit, textOf) {
+  const now = gridOf(unit);
+  if (!before || !now || sameGrid(before, now)) return null;
+  const position = new Map(before.rows.flatMap((row, r) => row.cells.map((cell, c) => [cell.id, [r, c]])));
+  const looks = new Map(before.rows.flatMap((row) => row.cells.map((cell) => [cell.id, cell.look])));
+  const widths = new Map(before.rows.flatMap((row) => row.cells.map((cell) => [cell.id, cell.width])));
+  const spans = new Map(before.rows.flatMap((row) => row.cells.map((cell) => [cell.id, `${cell.rowspan}x${cell.colspan}`])));
+  const rows = now.rows.map((row) => {
+    const from = before.rows.findIndex((other) => other.id === row.id);
+    return {
+      head: row.head,
+      from: from < 0 ? null : from,
+      cells: row.cells.map((cell) => {
+        const at = position.get(cell.id) ?? null;
+        const { html, changed } = textOf(cell.el);
+        // Its look where it changed (a new cell's when it has one).
+        const look = at === null ? (cell.look ? cell.look : undefined) : cell.look !== looks.get(cell.id) ? cell.look : undefined;
+        // Its column's width where it changed (a new cell's when it has one).
+        const width = at === null ? (cell.width ?? undefined) : cell.width !== widths.get(cell.id) ? cell.width : undefined;
+        // Its spans where they changed (a new cell's when it is merged).
+        const spanned = at === null ? cell.rowspan > 1 || cell.colspan > 1 : spans.get(cell.id) !== `${cell.rowspan}x${cell.colspan}`;
+        return { from: at, tag: cell.tag, ...(cell.scope ? { scope: cell.scope } : {}), ...(at === null || changed ? { html } : {}), ...(look !== undefined ? { look } : {}), ...(width !== undefined ? { width } : {}), ...(spanned ? { rowspan: cell.rowspan, colspan: cell.colspan } : {}) };
+      }),
+    };
+  });
+  return { rows };
+}

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

@@ -0,0 +1,306 @@
+import { BLOCK_COLORS } from "../colors.mjs";
+import { svg } from "../icons.mjs";
+import { SPAN } from "../../../shared/media.mjs";
+import { numberValue, rawCellValue } from "../../../shared/number-reading.mjs";
+import { columnWidths, slotsOf, tileSlots, tileSpans } from "../../../shared/table-slots.mjs";
+import { CELL_ALIGN_CLASSES, CELL_BOLD_CLASS, CELL_VALIGN_CLASSES } from "../../../shared/components/table.mjs";
+import { CHART_KEY, CHART_SOURCE } from "../../../shared/table-chart.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+const ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2"/><path d="M3.25 8h13.5M3.25 12.1h13.5M8.25 3.75v12.5"/>');
+
+// 表格: a table in its frame (.doc-table-wrap), with the scope line above it
+// (.doc-table-meta) going along as its lead. One block: its cells are text blocks that may be
+// emptied; rows and columns go in and out only through the table's own operation (page/table/). Its frame's width and scroll height are sizes.
+// The kit lays it out (render/kit/tables.js: column widths, sorting, the frame's scrollbars).
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (a new one from the "/"
+// menu: page.mjs `create`), resize/ (dragging its right and
+// bottom edges: tableWidthAt, heightAt), page/table/ (its block menu rows: 铺满正文宽度, 恢复默认大小),
+// core.mjs (its scope line goes with it: unitElement, withLeads, markFrames), ../source/ (finding its cells
+// and its lead: table(), leadOf; a cell's data-sort-value following its text: apply.mjs sortKey).
+// clipboard/own/ (copied as itself with its data: `clipboard`, and `build` in page.mjs), src/transfer/markdown.mjs (`read`, `grid`).
+// page.mjs: a new one (a paste: clipboard/); file.mjs: a new one in report.html.
+// Its look: the kit's styles/table.css, laid out and sorted by tables/ (src/render/kit/).
+
+/**
+ * 识别数字列 off: the kit reads none of the table's columns as numbers (none centered, none sorted by
+ * its header: tables/cells.js). On its frame (the unit); a table without it has its numeric
+ * columns read (the Agent's). A table made from "/" starts with it; 一键优化 and a table pasted from
+ * elsewhere go without.
+ */
+export const NUMBERS = "data-number-columns";
+export const TABLE_HEIGHT = "--doc-table-height";
+
+/**
+ * The mark of a table unit the table's tools are for (grid.mjs, page/table/): the server marks the
+ * units of the file it judges plain (source/table.mjs plainTable; the page only reads it), and a
+ * table made on the page has it by construction (page.mjs newTable) until the file says.
+ */
+export const GRID = "data-ge-grid";
+
+export default {
+  name: "table",
+  listed: () => t("表格"),
+  units: {
+    table: {
+      name: t("表格"),
+      icon: ICON,
+      match: [
+        { rank: 80, tag: "table" },
+        { rank: 90, class: "doc-table-wrap" },
+      ],
+      boxed: true,
+      resizable: ".doc-table-wrap[data-ge-unit]", // its right and bottom edges, once it is in the file
+      copy: "itself", // within the report a copy keeps all of its markup (its scope line, its frame's size); another report's gets the table's data (tableData) made anew
+      attributes: { [NUMBERS]: (value) => value === "off" },
+      sizes: {
+        [SPAN]: { min: 0.15, max: 3 }, // past 1 the table is wider than the text and scrolls in its frame
+        [TABLE_HEIGHT]: { min: 80, max: 4000, px: true, none: true, height: true },
+      },
+    },
+  },
+  components: ["doc-table-wrap", "doc-table-meta"],
+  hosts: {
+    cell: { name: t("表格单元格"), caps: () => ["empty", "links"] },
+  },
+  types: {
+    // Made by a paste or the "/" menu (三列三行, a header row: page.mjs newTable): no class here, so
+    // that the Agent's tables keep no type. What it is written with: its rows of cells' inline HTML,
+    // whether its first row is a header row and its first column a header column, its cells' looks,
+    // whether its numeric columns are read (file.mjs).
+    table: {
+      menu: ["basic", 14], fresh: 8,
+      tag: "div", kind: "table", bare: true, extras: (element, { serializeInner }) => tableData(element, serializeInner),
+      // Copied as itself, its tools with it (GRID) in the report it comes from, with its data to be
+      // made anew elsewhere; another program's comes as this, as does a grid of cells. Its page.mjs
+      // makes it from that.
+      clipboard: {
+        kind: "table", keeps: [GRID], grid: tableGrid,
+        read: (unit, { withPictures }) => tableData(unit, withPictures),
+        // Its data, its cells' looks always there, so that a header cell the Agent left plain stays
+        // plain, and as much of it as a description can carry (carriableTable: a table an Agent wrote
+        // may say what the page's own never do), so that the copy, which is checked as a whole, is
+        // never refused for its data.
+        data(node, { serializeInner }) {
+          const data = tableData(node, serializeInner);
+          if (data.rows.length === 0 || data.rows.every((row) => row.length === 0)) return null;
+          const carried = carriableTable({ ...data, looks: data.looks ?? data.rows.map((row) => row.map(() => "")) }, (cell) => typeof cell === "string" && cell.length <= MAX_CELL_HTML);
+          return carried && { type: "table", ...carried };
+        },
+        check: (block, { string }) => validTable(block, (cell) => string(cell, MAX_CELL_HTML)) && (block.outside === undefined || block.outside === true),
+        text: (block) => block.rows.flat(),
+      },
+      label: t("表格"), icon: ICON, words: "表格 表 biaoge bg table grid",
+      glance: { row: 9, name: "表格", write: "`<table>`, its title a `<caption>`", after: "`div.doc-table-wrap` › `table.doc-table`, the caption a `p.doc-note` above it", rule: "Tables" },
+    },
+  },
+};
+
+// The classes of a cell's look are the table description's (shared/components/table.mjs), the kit's
+// styles/table.css draws them; here they are named for the menus.
+/** A cell's alignments with their names: its words to the left, the middle, the right. */
+export const CELL_ALIGNS = CELL_ALIGN_CLASSES.map((name, index) => [name, [t("左对齐"), t("居中"), t("右对齐")][index]]);
+/** A cell's vertical alignments with their names: its words at its top (the kit's own), middle, bottom. */
+export const CELL_VALIGNS = CELL_VALIGN_CLASSES.map((name, index) => [name, [t("顶端对齐"), t("垂直居中"), t("底端对齐")][index]]);
+
+/** A cell's words bold, all of them (the kit's class): the words typed in it later too. */
+export const CELL_BOLD = CELL_BOLD_CLASS;
+
+/**
+ * The classes that are a cell's look (the table's tools set them, its operation writes them): its
+ * color (notion-lite's: one per cell, a text color or a fill, as a block's: components/colors.mjs),
+ * its alignment, its vertical alignment and its bold. A cell's other classes are the file's.
+ */
+export const CELL_LOOKS = [...BLOCK_COLORS, ...CELL_ALIGNS.map(([name]) => name), ...CELL_VALIGNS.map(([name]) => name), CELL_BOLD];
+
+/**
+ * The look a cell takes when it becomes a header cell (a th: the header row's or column's toggle, a
+ * row or column moved there, a cell made there: page.mjs) and loses when it stops being one: bold,
+ * and the gray fill unless it has a color of its own. Nothing else of the kit's sets a header apart.
+ */
+export const HEADER_LOOK = [CELL_BOLD, "doc-highlight-gray"];
+
+/** A look as a cell may have it: classes of CELL_LOOKS, a color, an alignment, a vertical one and bold at most once each. */
+export function validLook(look) {
+  if (typeof look !== "string" || look.length > 200) return false;
+  const names = look.split(" ").filter(Boolean);
+  const one = (group) => names.filter((name) => group.includes(name)).length <= 1;
+  return names.every((name) => CELL_LOOKS.includes(name)) && new Set(names).size === names.length
+    && one(BLOCK_COLORS) && one(CELL_ALIGNS.map(([name]) => name)) && one(CELL_VALIGNS.map(([name]) => name));
+}
+
+/**
+ * Whether the cells of a table's first column (its body rows', top down) hold its rows' names, so
+ * that 一键优化 makes it the header column: two at least, each written, none a number (by the kit's
+ * reading of the cell, src/shared/number-reading.mjs), no two alike.
+ */
+export function rowNames(cells) {
+  const texts = cells.map((cell) => cell.textContent.trim());
+  return cells.length >= 2 && cells.every((cell, index) => texts[index] && numberValue(rawCellValue(cell)) === null) && new Set(texts).size === texts.length;
+}
+
+/**
+ * The width the reader gave a cell's column (the table's tools write it on the first row's cells;
+ * the kit lays the columns out at it: tables/layout.js manualLayout): "160px", or null.
+ */
+export const COLUMN_WIDTH = "--doc-column-width";
+export const widthOf = (cell) => cell.style.getPropertyValue(COLUMN_WIDTH).trim() || null;
+/** The narrowest a column is made (px): by dragging it, and as a cell may have it written. */
+export const MIN_COLUMN_WIDTH = 35;
+/** A width as a cell may have it: whole or fractional pixels, from MIN_COLUMN_WIDTH to 4000. */
+export const validWidth = (width) => width === null || (typeof width === "string" && /^\d{1,4}(\.\d{1,2})?px$/.test(width) && parseFloat(width) >= MIN_COLUMN_WIDTH && parseFloat(width) <= 4000);
+
+/** A cell's look: its classes that are one (CELL_LOOKS), in order, as one string. */
+export const lookOf = (cell) => [...cell.classList].filter((name) => CELL_LOOKS.includes(name)).sort().join(" ");
+
+/**
+ * The height a frame scrolls at without a height of its own: the kit's (styles/table.css, the one
+ * place that number is written), asked of the frame with its own height taken off for a moment
+ * (Infinity where no kit styles it, and for a frame the kit shows whole: a short table or one
+ * mostly of words, data-doc-whole). 一键优化 and the bottom edge's drag (resize/) both ask it.
+ */
+export function scrollHeight(unit) {
+  const own = unit.style.getPropertyValue(TABLE_HEIGHT);
+  unit.style.removeProperty(TABLE_HEIGHT);
+  const height = parseFloat(getComputedStyle(unit).maxHeight);
+  unit.style.setProperty(TABLE_HEIGHT, own);
+  return Number.isFinite(height) ? height : Infinity;
+}
+
+/** The most cells a table has (the server writes no more). */
+export const MAX_TABLE_CELLS = 5000;
+const MAX_SPAN = 1000;
+
+/**
+ * Where a table's cells stand (shared/table-slots.mjs tileSpans), as its slots (matrix, places by "row:index", columns),
+ * or null when they tile no rectangle: `node` is a table as tableData describes it.
+ */
+export const tableTiling = (node) => tileSpans(node.rows.map((row, r) => ({ head: Boolean(node.header) && r === 0, cells: node.spans?.[r] ?? row.map(() => [1, 1]) })));
+
+/**
+ * A table's rows as a grid, each cell as `write` writes it, for a Markdown table, which has no merged
+ * cells: a merged cell's other slots empty. `columns`: the columns of one whose cells tile no rectangle.
+ */
+export function tableGrid(node, columns, write) {
+  const tiling = tableTiling(node);
+  return node.rows.map((row, r) => {
+    const cells = Array(tiling?.columns ?? columns).fill("");
+    row.forEach((cell, index) => {
+      cells[tiling?.places.get(`${r}:${index}`)?.c ?? index] = write(cell);
+    });
+    return cells;
+  });
+}
+
+/**
+ * Whether `node` is a table as tableData describes it: its rows of cells (`validCell(html)`: what a cell
+ * may hold is the one who asks's to say, the server's allowlist of inline HTML and lists, the
+ * clipboard's string that is made again), its flags, its cells' looks, spans and the columns' widths
+ * (a row has as many cells as it has, the cells tile a rectangle), and the key a chart reads it by.
+ */
+export function validTable(node, validCell) {
+  if (node.chart !== undefined && !(typeof node.chart === "string" && CHART_KEY.test(node.chart))) return false;
+  if (!Array.isArray(node.rows) || node.rows.length < 1 || node.rows.length > MAX_TABLE_CELLS) return false;
+  if (!node.rows.every((row) => Array.isArray(row) && row.length <= MAX_TABLE_CELLS && row.every(validCell))) return false;
+  if ((node.header !== undefined && node.header !== true) || (node.column !== undefined && node.column !== true) || (node.numbers !== undefined && node.numbers !== false)) return false;
+  if (node.spans !== undefined && !(Array.isArray(node.spans) && node.spans.length === node.rows.length && node.spans.every((row, r) => Array.isArray(row) && row.length === node.rows[r].length
+    && row.every((span) => Array.isArray(span) && span.length === 2 && span.every((value) => Number.isInteger(value) && value >= 1 && value <= MAX_SPAN))))) return false;
+  const places = tableTiling(node);
+  // A row may hold no cell: a merged cell above covers all of it.
+  if (!places || places.columns < 1 || node.rows.length * places.columns > MAX_TABLE_CELLS) return false;
+  return (node.looks === undefined || (Array.isArray(node.looks) && node.looks.length === node.rows.length
+    && node.looks.every((row, r) => Array.isArray(row) && row.length === node.rows[r].length && row.every(validLook))))
+    && (node.widths === undefined || (Array.isArray(node.widths) && node.widths.length === places.columns && node.widths.every(validWidth)));
+}
+
+/** The most a cell's inline HTML is as a description of a table has it (the clipboard's and the server's). */
+export const MAX_CELL_HTML = 20000;
+
+/**
+ * The clipboard type of cells copied from a table of the page (page/table/cells.mjs: { v: 1, cells },
+ * their inline HTML row by row), which a paste into cells reads first, and one elsewhere as the page's
+ * own (page/clipboard/: one cell its text, more a table of them).
+ */
+export const CELLS_MIME = "application/x-gallery-cells";
+/** Its name before 2026-10-26: written beside it and read when it is not there (a page of the old version in another tab). */
+export const OLD_CELLS_MIME = "application/x-report-studio-cells";
+/** The cells copied in `data` (a DataTransfer): under CELLS_MIME, else OLD_CELLS_MIME; "" when neither. */
+export const cellsData = (data) => data.getData(CELLS_MIME) || data.getData(OLD_CELLS_MIME);
+
+/**
+ * A look with what a cell may have of it: the first of the classes of each kind (a color, an
+ * alignment, a vertical one) and bold. A table an Agent wrote by hand may give a cell a text color and
+ * a fill, which the page's tables never have (notion-lite's: one color a cell).
+ */
+function carriedLook(look) {
+  const taken = new Set();
+  const kinds = [BLOCK_COLORS, CELL_ALIGNS.map(([name]) => name), CELL_VALIGNS.map(([name]) => name)];
+  return look.split(" ").filter((name) => {
+    const group = kinds.findIndex((names) => names.includes(name));
+    if (group >= 0 && taken.has(group)) return false;
+    taken.add(group);
+    return true;
+  }).join(" ");
+}
+
+/**
+ * What of a table as tableData describes it a description can carry: the table itself when validTable
+ * accepts it; else one cell with a color, an alignment, a vertical one and bold at most, a column's
+ * width that is one of validWidth's or none; else (a merged cell crossing the header, which the
+ * description's single header row cannot say) the table taken apart into its slots, each merged cell's
+ * words in the slot it begins at, its look in all of them. Null when nothing of it can be carried.
+ */
+export function carriableTable(node, validCell) {
+  if (validTable(node, validCell)) return node;
+  const { spans, looks, widths, ...rest } = node;
+  const own = {
+    ...rest,
+    ...(looks ? { looks: looks.map((row) => row.map((look) => (validLook(look) ? look : carriedLook(look)))) } : {}),
+    ...(widths?.some((width) => validWidth(width) && width) ? { widths: widths.map((width) => (validWidth(width) ? width : null)) } : {}),
+  };
+  if (validTable({ ...own, ...(spans ? { spans } : {}) }, validCell)) return { ...own, ...(spans ? { spans } : {}) };
+  const slots = tileSlots(node.rows.map((row, r) => ({ section: 0, cells: row.map((_, index) => ({ ref: [r, index], rowspan: spans?.[r][index][0] ?? 1, colspan: spans?.[r][index][1] ?? 1 })) })));
+  if (!slots) return null;
+  const home = (ref) => slots.places.get(ref);
+  const from = (grid, r, c, empty) => grid ? grid[slots.matrix[r][c][0]][slots.matrix[r][c][1]] : empty;
+  const flat = {
+    ...own,
+    rows: slots.matrix.map((cells, r) => cells.map((ref, c) => (home(ref).r === r && home(ref).c === c ? from(node.rows, r, c) : ""))),
+    ...(own.looks ? { looks: slots.matrix.map((cells, r) => cells.map((_, c) => from(own.looks, r, c))) } : {}),
+  };
+  return validTable(flat, validCell) ? flat : null;
+}
+
+/**
+ * A table as it is now, as the page describes it to the server (a new one is written from it:
+ * file.mjs) and to the clipboard (another report's copy is made from it: clipboard/own/): its rows of
+ * its cells' inline HTML (a cell's lists with it), its header row (a thead) and header column (each
+ * body row's cell in the first column a th), its cells' looks when one has one, its columns' widths
+ * when one has one, its cells' spans when one is merged (the table's tools may have changed any of
+ * them before it is first written), whether its numeric columns are read and the key a chart drawn
+ * from it reads it by (`chart`: its frame's data-doc-chart-source, src/shared/table-chart.mjs; a
+ * table pasted anew in the report it was copied from keeps it, clipboard/own/chart-keys.mjs). `element`:
+ * the table's frame, or the table.
+ */
+export function tableData(element, serializeInner) {
+  const table = element.localName === "table" ? element : element.querySelector("table");
+  const rows = [...(table?.rows ?? [])];
+  const slots = rows.length ? slotsOf(rows) : null;
+  const heads = table?.tHead?.rows.length ?? 0;
+  const header = heads > 0;
+  const column = rows.length > heads && Boolean(slots) && rows.slice(heads).every((row, index) => slots.matrix[heads + index][0].localName === "th");
+  const looks = rows.map((row) => [...row.cells].map(lookOf));
+  const widths = slots ? columnWidths(slots, widthOf) : [];
+  const spans = rows.map((row) => [...row.cells].map((cell) => [cell.rowSpan, cell.colSpan]));
+  const chart = (element.localName === "table" ? element.closest(".doc-table-wrap") : element)?.getAttribute(CHART_SOURCE);
+  return {
+    rows: rows.map((row) => [...row.cells].map((cell) => serializeInner(cell))),
+    ...(header ? { header: true } : {}), ...(column ? { column: true } : {}),
+    ...(looks.some((row) => row.some(Boolean)) ? { looks } : {}),
+    ...(widths.some(Boolean) ? { widths } : {}),
+    ...(spans.some((row) => row.some(([down, across]) => down > 1 || across > 1)) ? { spans } : {}),
+    ...(element.getAttribute(NUMBERS) === "off" ? { numbers: false } : {}),
+    ...(chart && CHART_KEY.test(chart) ? { chart } : {}),
+  };
+}