@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/shared/components/list.mjs

@@ -0,0 +1,146 @@
+// A bulleted, numbered or to-do list or a flowchart, and its items (an item may hold lists of its own): a basic
+// block. An item holds blocks after its text (HELD_TAGS); one of a list the kit draws the markers of
+// with no text of its own over them keeps a line of its own, its marker on it and they under it: a line
+// break ahead of them (ITEM_LINE), which the page editor and the kit put there by one rule (keepsLine),
+// the file staying as written.
+// Its markers are the kit's (Feishu's, blue): bullets a dot, a ring, a square by depth;
+// numbers 1., a., i. by depth. A numbered list counts from its start, or on from the numbered list
+// before it in the same flow (data-continue: the editor keeps its start in step). A to-do list
+// (Notion's) has a box before each item, filled and checked for an item carrying data-checked.
+// A flowchart (流程图, ol.doc-flow) draws its items as the steps of a process: each a node, a
+// container as a highlight block is, drawn as a card with its number (or its icon, a lead
+// div.doc-icon, in the number's place), arrows between them. A node holds blocks: its first a
+// paragraph, its title (<p><strong>…</strong></p>: bold by default, the <strong> the reader's to
+// take off), the blocks after it its content (a list there any list, its markers from the first
+// depth). The kit lays the nodes out in rows that fill their width (the list's data-direction and
+// each node's, and what the kit measures where neither says), a node's --doc-flow-ratio its
+// weight in its row, and turns the arrow from a row's last node to the next row's first. A step
+// written the short way, its own words first (<li>收集数据<p>…</p></li>), is drawn the same, its words
+// its bold title (the editor rewrites it as a node: natural.mjs).
+
+/** A flowchart's class (流程图), on an ol. */
+export const FLOW = "doc-flow";
+/** A to-do list's class (待办事项), on a ul: a box before each item where a bullet would be. */
+export const TODO = "doc-todo";
+/** The tags of the blocks a list item may hold after its text (the file's and the page's alike). */
+export const HELD_TAGS = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "div", "figure", "blockquote", "details", "hr", "table", "pre"]);
+/**
+ * The class of the line break ahead of the blocks an item holds where it keeps a line of its own
+ * (keepsLine), so that its marker stands on that line: the kit's (runtime/spacing.js) and the page
+ * editor's (keepLine) alike, never written by an author, taken off a copy.
+ */
+export const ITEM_LINE = "doc-item-line";
+
+// Whether `node` is a list whose items' markers the kit draws (styles/flow.css, todo.css): a bulleted
+// or numbered list with no class of its own, or a to-do list (a flowchart holds them in its steps). A
+// function, so that a kit script reading only other names of this module leaves it out.
+const kitList = (node) => Boolean(node?.matches(`ul:not([class]), ol:not([class]), ul.${TODO}`));
+// No text: white space and format characters (the zero-width space the page editor keeps after a mark).
+const BLANK = /^[\s\p{Cf}]*$/u;
+// What shows with no text in it: a picture, a control, a line break.
+const SHOWS = "img, picture, svg, video, audio, canvas, iframe, object, input, br";
+const isHeld = (node) => node.nodeType === 1 && HELD_TAGS.has(node.localName);
+// A node standing for none of an item's text: white space or a comment; ahead of the blocks it
+// holds, an element with no text in it and nothing that shows too (an empty bold or link, which the
+// page editor writes as nothing).
+const blank = (node) => (node.nodeType === 3 ? BLANK.test(node.data) : node.nodeType !== 1);
+const textless = (node) => blank(node) || (node.nodeType === 1 && BLANK.test(node.textContent) && !node.matches(SHOWS) && !node.querySelector(SHOWS));
+
+// Whether `list` is one whose items' markers the kit draws in a flow (`flows`): straight in it, in a
+// flowchart's step standing in one, or held by an item of such a list.
+function drawnList(list, flows) {
+  for (let at = list; kitList(at) || (at !== list && at?.matches(`ol.${FLOW}`));) {
+    const holder = at.parentElement;
+    if (holder?.localName !== "li") return Boolean(holder?.matches(flows));
+    at = holder.parentElement;
+  }
+  return false;
+}
+
+/**
+ * Whether the list item `item` keeps a line of its own ahead of the blocks it holds, its marker on it
+ * and they under it, as notion-lite's item keeps its title line however empty: the one rule the page
+ * editor (keepLine, editor core.mjs) and the kit (runtime/spacing.js) give an item that line by. It is an
+ * item of a list whose markers the kit draws (drawnList; `flows`: the selector of the elements blocks
+ * stand straight in, FLOW_BLOCKS of index.mjs), holding blocks (HELD_TAGS) and nothing but blocks and
+ * white space after the first, with no text of its own ahead of them (textless: no line break there
+ * either, which is that line). An item of a list with a class of its own, or of one in a whole block, a
+ * card or a table's cell, never does: its look is the document's, a widget's grid or flex item laid
+ * out by its children.
+ */
+export function keepsLine(item, flows) {
+  const nodes = [...item.childNodes];
+  const first = nodes.findIndex(isHeld);
+  return first >= 0 && nodes.slice(0, first).every(textless) && nodes.slice(first).every((node) => isHeld(node) || blank(node)) && drawnList(item.parentElement, flows);
+}
+
+/** Gives the list item `item` its line where it keeps one (keepsLine): a line break of the class ITEM_LINE ahead of the blocks it holds. Returns whether it did. */
+export function giveLine(item, flows) {
+  if (!keepsLine(item, flows)) return false;
+  const line = item.ownerDocument.createElement("br");
+  line.className = ITEM_LINE;
+  [...item.childNodes].find(isHeld).before(line);
+  return true;
+}
+/** The attribute an author lays a flowchart out with, on the list and on a step: row or column (none: the kit measures, or the list's). */
+export const FLOW_DIRECTION = "data-direction";
+/** A node's weight in its row (a share: the row's nodes laid out in proportion), in its style attribute. */
+export const FLOW_RATIO = "--doc-flow-ratio";
+/** What the kit names a flowchart by in the stylesheet it lays it out with (runtime/flowchart.js): never written by an author, taken off a copy. */
+export const FLOW_KEY = "data-doc-flow-key";
+/** Set by the kit for a moment as items move, so that the browser draws the steps' numbers again (runtime/flowchart.js recount): never left on the page. */
+export const FLOW_RECOUNT = "data-doc-flow-recount";
+/**
+ * What a screen reader calls a flowchart the author gave no name (aria-label) of its own: the kit's name
+ * for it, in the language the kit speaks on the page (src/render/kit/words.js "flowchart"); either one is
+ * the kit's, never the author's.
+ */
+export const FLOW_LABEL = { zh: "流程图", en: "Flowchart" };
+/** Whether an aria-label is the name the kit gave a flowchart (in either language). */
+export const isFlowLabel = (value) => Object.values(FLOW_LABEL).includes(value);
+
+/**
+ * What a flowchart's rows go by (the kit lays them out by it, src/render/kit/runtime/flowchart.js;
+ * the page editor's gaps keep a node's card no narrower than the kit would, page/columns/): at most
+ * `most` nodes a row the kit fills (自动), each card `least` wide at least (px), `gap` between two in
+ * a row (px; styles/flowchart.css spells the same gap and the one between rows), a row of the kit's
+ * in a flowchart `narrow` wide at least (px), each node's title on `title` lines at most. Pure, so
+ * that a kit script reading only other names of this module leaves it out.
+ */
+export const FLOW_ROW = /* @__PURE__ */ Object.freeze({ most: 5, least: 116, narrow: 520, gap: 28, title: 2 });
+
+/**
+ * The shares of their row's width the nodes of a row take (adding up to 1), from their weights
+ * (--doc-flow-ratio: a positive number, or null for none): each its weight among the row's, a node
+ * with none weighing as the row's weighted ones do on the whole (equal where none has one); one
+ * alone in its row all of it. The kit lays a row out by it, and the page editor's gaps start from it.
+ */
+export function flowShares(weights) {
+  if (weights.length === 1) return [1];
+  const given = weights.filter((weight) => weight > 0);
+  const fill = given.length ? given.reduce((sum, weight) => sum + weight, 0) / given.length : 1;
+  const each = weights.map((weight) => (weight > 0 ? weight : fill));
+  const all = each.reduce((sum, weight) => sum + weight, 0);
+  return each.map((weight) => weight / all);
+}
+
+// The description's keys are written out (FLOW_DIRECTION, FLOW): a computed key would keep it in the
+// kit's runtime, which imports the names above alone (esbuild drops an unused object of literal keys only).
+export default {
+  id: "list",
+  category: "block",
+  match: "ul, ol",
+  classes: [TODO, FLOW],
+  attrs: {
+    start: "an ol's first number (from 1)",
+    "data-continue": "an ol that counts on from the numbered list before it in the same flow (its start the next number)",
+    "data-checked": "a checked item of a to-do list (ul.doc-todo)",
+    "data-direction": "a flowchart's layout (ol.doc-flow), on the list and on a step: row, the next step beside this one (on the list: every step in one row, wrapping only where a card would be narrower than 116px or than its longest word), or column, the row ending here (on the list: one step a row); none on the list, the kit fills rows with as many steps as read well and wraps the rest; none on a step, the list's",
+  },
+  runtime: {
+    // The stylesheet the kit lays a flowchart out with is keyed by it; the numbers drawn again (src/render/kit/runtime/flowchart.js).
+    attrs: { "ol.doc-flow": [FLOW_KEY, FLOW_RECOUNT] },
+    // The line of an item with no text of its own over the blocks it holds (src/render/kit/runtime/spacing.js).
+    generated: ["br.doc-item-line"],
+  },
+};

package/browser/shared/components/math.mjs

@@ -0,0 +1,49 @@
+/**
+ * The elements whose text is never a formula: code samples, scripts, styles and the text of form
+ * fields. The kit's math.js has KaTeX leave them as they are, and delimiters in them (or in a comment)
+ * keep no KaTeX in a report (render/assets.mjs usedAssets; those in a script of JavaScript still do,
+ * as it may write formulas into the page).
+ */
+export const MATH_IGNORED_TAGS = Object.freeze(["script", "noscript", "style", "textarea", "pre", "code", "option"]);
+
+// A macro that drops its arguments (KaTeX's macro context).
+const gobble = (count) => (context) => {
+  context.consumeArgs(count);
+  return "";
+};
+/**
+ * Commands of LaTeX packages KaTeX lacks that AI answers use (notion-lite's set; Notion has none of
+ * them), as KaTeX macros: the indicator 1 (\mathbbm, \mathds), \mbox, \textsc, \label, \require and
+ * \vspace (ignored), physics' \abs \norm \dv \pdv \dd, operators \tr \Tr \diag \sgn \rank, \C \Q,
+ * \celsius, siunitx's \SI \si \num \unit (simple forms), \DeclareMathOperator. The kit's math.js
+ * draws a report's formulas with them, the editor and the import theirs (page/tex.mjs
+ * renderTex). Give KaTeX a copy: \gdef and \DeclareMathOperator write into it.
+ */
+export const MATH_MACROS = Object.freeze({
+  "\\mathbbm": "\\mathbb{#1}", "\\mathds": "\\mathbb{#1}", "\\mbox": "\\text{#1}", "\\textsc": "\\text{#1}",
+  "\\label": gobble(1), "\\require": gobble(1), "\\vspace": gobble(1),
+  "\\abs": "\\left\\lvert #1\\right\\rvert", "\\norm": "\\left\\lVert #1\\right\\rVert",
+  "\\dv": "\\frac{\\mathrm{d}#1}{\\mathrm{d}#2}", "\\pdv": "\\frac{\\partial #1}{\\partial #2}", "\\dd": "\\mathop{}\\!\\mathrm{d}",
+  "\\tr": "\\operatorname{tr}", "\\Tr": "\\operatorname{Tr}", "\\diag": "\\operatorname{diag}", "\\sgn": "\\operatorname{sgn}", "\\rank": "\\operatorname{rank}",
+  "\\C": "\\mathbb{C}", "\\Q": "\\mathbb{Q}", "\\celsius": "{}^{\\circ}\\mathrm{C}",
+  "\\SI": "#1\\,\\mathrm{#2}", "\\si": "\\mathrm{#1}", "\\num": "#1", "\\unit": "\\mathrm{#1}",
+  "\\DeclareMathOperator": "\\gdef#1{\\operatorname{#2}}",
+});
+
+// Formulas: TeX between \( \) or \[ \] (and $$), rendered by KaTeX through math.js; a formula
+// block of its own is .doc-math-block: a basic block.
+export default {
+  id: "math",
+  category: "block",
+  match: ".doc-math-inline, .doc-math-block",
+  assets: ["katex-styles", "katex", "katex-auto-render", "math"],
+  uses: [/\\\(|\\\[|\$\$|data-doc-math/],
+  attrs: {
+    "data-doc-math": "formulas in this element are rendered too",
+    "data-doc-math-dollar": "a single $ delimits formulas in this element",
+  },
+  classes: ["doc-math-inline", "doc-math-block"],
+  // A formula and the closing punctuation right after it, held on one line, the places its drawing
+  // may wrap at in between and the word joiner before the marks (runtime/spacing.js).
+  runtime: { generated: [".doc-math-break", ".doc-math-joiner"], classes: { ".doc-math-tie": ["doc-math-tie"], ".doc-math-skip": ["doc-math-skip"] } },
+};

package/browser/shared/components/mention.mjs

@@ -0,0 +1,33 @@
+// A whole in a block's text, a link shown with its icon and title: inline, one element whose address
+// says what it is. <a class="doc-link-mention" href="…"> holds its icon first, then its title, text only.
+//
+//   to a web page (图标视图, as Notion's link mention)  href="https://…", its icon an
+//     <img class="doc-link-mention-icon" src="assets/<file>" alt=""> (the page's icon, kept in the
+//     report's folder: render/images.mjs shows it in the preview and embeds it in an export) or an
+//     empty <span class="doc-link-mention-icon"></span> (the kit draws a globe)
+//   to a document of the workspace (页面块)  href="../<slug>/doc.html", with #<block id> for a block,
+//     or #<block id> within a page (the one form a file writes: shared/page-address.mjs), its icon an
+//     empty span, the title as it was when the block was made: what is shown is the document's title
+//     and icon now (render/page-chips.mjs), and the kit draws a page for one with no icon
+//
+// The page editor makes one from a link and keeps it whole, as a formula (page/links/). One left empty
+// is <a class="doc-link-mention"></a> (the editor's "/" menu's 链接 given no address) or, of a page
+// block, <a class="doc-link-mention" data-doc-page></a>: no reader sees it (mention.css), the editor
+// shows it as a gray 链接 or 页面 to be filled.
+
+export const MENTION = "doc-link-mention";
+export const MENTION_ICON = "doc-link-mention-icon";
+/** What marks a page block left empty, which has no address to say so. */
+export const MENTION_PAGE = "data-doc-page";
+
+// Inline, as the format bar's marks (text.mjs): no block, no match of its own.
+export default {
+  id: "mention",
+  attrs: {
+    [MENTION_PAGE]: "a page block left empty, which has no address to say it is one",
+  },
+  classes: [MENTION, MENTION_ICON],
+  runtime: {
+    attrs: { "a.doc-link-mention": ["data-doc-gone"] }, // a page block whose document is not there (render/page-chips.mjs)
+  },
+};

package/browser/shared/components/page.mjs

@@ -0,0 +1,37 @@
+// The page: the report's main, its header (the page's icon above the title is a component of its
+// own: icon.mjs), the asset tags, and the display settings the kit puts at the top right (ui.js: theme,
+// width, an export of the current view).
+
+/**
+ * The language a report's file is written in, by its <html lang>: "en" for en or en-…, else "zh", the
+ * rule the kit's own words follow in a file of its own (src/render/kit/words.js kitLanguage). The
+ * kit's markup the editor writes into a file (a detail card's close button, a Sheet area's name: their
+ * aria-label) is said in it.
+ */
+export function pageLanguage(html) {
+  const tag = /<html\b[^>]*>/i.exec(String(html ?? ""))?.[0] ?? "";
+  return /\slang\s*=\s*["']?en(?:-[^"'\s>]*)?(?=["'\s>]|$)/i.test(tag) ? "en" : "zh";
+}
+
+export default {
+  id: "page",
+  match: "main.doc-page",
+  flow: ".doc-page",
+  groups: false,
+  header: "header.doc-header", // the title and the lines under it
+  title: ".doc-title", // the document's title, the h1 of the header: its text, mirrored in <title> and report.json
+  attrs: {
+    "data-doc-id": "the document's slug: its reading state is kept under it",
+    "data-doc-kit": "a kit asset's tag (the render puts in those a report needs; an older source writes them)",
+    "data-doc-vendor": "a vendor library's tag",
+    "data-doc-placeholder": "the starter's content, which the checks want replaced",
+    "data-doc-transient-view": "its hidden or open shows transient reading state, reset in an export of the view",
+  },
+  classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
+  runtime: {
+    generated: [".doc-display", "script[data-doc-state]"],
+    root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] },
+    state: { html: ["data-doc-theme", "data-doc-width"] },
+    internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"],
+  },
+};

package/browser/shared/components/paragraph.mjs

@@ -0,0 +1,9 @@
+// A paragraph (文本), or small text (小字, p.doc-note): a basic block. Small text may end in a part at
+// the line's right end (span.doc-tab: the page editor's Tab).
+export default {
+  id: "paragraph",
+  category: "block",
+  match: "p",
+  tail: ".doc-tab", // small text's end part, a span at the line's right end
+  classes: ["doc-note", "doc-tab"],
+};

package/browser/shared/components/quote.mjs

@@ -0,0 +1,6 @@
+// A quote: a basic block.
+export default {
+  id: "quote",
+  category: "block",
+  match: "blockquote",
+};

package/browser/shared/components/section.mjs

@@ -0,0 +1,8 @@
+// A section (分区): a container of blocks under a heading, standing in the page or a Sheet panel.
+export default {
+  id: "section",
+  category: "container",
+  match: "section.doc-section",
+  flow: ".doc-section",
+  classes: ["doc-section"],
+};

package/browser/shared/components/sheets.mjs

@@ -0,0 +1,80 @@
+// A Sheet area (选项卡区块, Notion's tabs): a row of tabs and one panel per tab, paired by key; each
+// panel a flow like the page; framed, or plain (doc-sheet-shell--plain: no frame, nothing in
+// from the flow's edge). sheets.js switches them.
+
+import { attr, elementsOf } from "../html-tree.mjs";
+
+/** What a Sheet area and its row of tabs are called (aria-label) as the editor writes one in a file, in the file's language (page.mjs pageLanguage). */
+export const SHEETS_LABEL = { zh: "选项卡", en: "Tabs" };
+
+// The headings that name a tab written the short way.
+const TAB_HEADINGS = new Set(["h2", "h3", "h4"]);
+const closed = (node) => Boolean(node.sourceCodeLocation?.startTag && node.sourceCodeLocation.endTag);
+const line = (node) => (node.sourceCodeLocation?.startLine ? ` (line ${node.sourceCodeLocation.startLine})` : "");
+const words = (node) => (node.nodeName === "#text" ? /\S/.test(node.value) : (node.childNodes ?? []).some(words));
+
+/**
+ * A Sheet area written the short way (parse5's tree, with its places in the file), which the intake
+ * makes the kit's (src/editor/source/natural.mjs): an element of data-doc-sheets (its name, or none)
+ * holding nothing but <section>s (blanks and comments between them), one a tab, each of no attribute
+ * and closed in the file, starting with its heading (h2–h4, with words; no element or words before
+ * it), the tab's name, the rest its panel. { tabs: [{ section, heading }] }; { why } for an area in
+ * neither form (no row of tabs, no panel), what keeps it from being one; null for an area of the
+ * kit's (a row of tabs, or a panel).
+ */
+export function shortSheets(node) {
+  const children = elementsOf(node);
+  if (children.some((child) => attr(child, "data-doc-sheet") !== undefined || (attr(child, "class") ?? "").split(/\s+/).includes("doc-sheet-tabs"))) return null;
+  const loose = (node.childNodes ?? []).find((child) => child.nodeName === "#text" && /\S/.test(child.value));
+  if (loose) return { why: "words straight in it" };
+  const other = children.find((child) => child.tagName !== "section");
+  if (other) return { why: `a <${other.tagName}>${line(other)} beside its sections` };
+  if (!children.length) return { why: "no <section> in it" };
+  const tabs = [];
+  for (const section of children) {
+    if (!closed(section)) return { why: `its <section>${line(section)} is not closed in the file` };
+    if (section.attrs.length) return { why: `its <section>${line(section)} has an attribute of its own (${section.attrs.map((entry) => entry.name).join(", ")})` };
+    const heading = elementsOf(section).find((child) => TAB_HEADINGS.has(child.tagName));
+    if (!heading) return { why: `its <section>${line(section)} has no heading (<h2>–<h4>)` };
+    // Its heading first: what stood before it would be the panel's while the heading names the tab.
+    const before = section.childNodes.slice(0, section.childNodes.indexOf(heading));
+    if (before.some((child) => child.tagName || words(child))) return { why: `its <section>${line(section)} does not start with its heading` };
+    if (!closed(heading) || !words(heading)) return { why: `the heading of its <section>${line(section)} ${closed(heading) ? "has no words" : "is not closed in the file"}` };
+    tabs.push({ section, heading });
+  }
+  return { tabs };
+}
+
+export default {
+  id: "sheets",
+  category: "container",
+  match: "[data-doc-sheets]",
+  assets: ["sheets"],
+  uses: [/data-doc-sheets/],
+  parts: {
+    row: { at: ":scope > .doc-sheet-tabs", edit: "none", max: 1 },
+    tabs: { at: ":scope > .doc-sheet-tabs > .doc-sheet-tab", edit: "text" },
+    panels: { at: ":scope > [data-doc-sheet]", edit: "flow", groups: false },
+  },
+  pairs: [{ a: "tabs", attrA: "data-sheet-tab", b: "panels", attrB: "data-doc-sheet" }],
+  attrs: {
+    "data-doc-sheets": "a Sheet area",
+    "data-sheet-tab": "a tab's key",
+    "data-doc-sheet": "a panel's key, its tab's",
+    "data-tab-icon": "a tab's emoji, shown before its name",
+  },
+  classes: ["doc-sheet-shell", "doc-sheet-shell--plain", "doc-sheet-tabs", "doc-sheet-tab"],
+  fills: {
+    ".doc-sheet-tabs": ["role"],
+    "[data-sheet-tab]": ["id", "role", "aria-controls"],
+    "[data-doc-sheet]": ["id", "role", "aria-labelledby"],
+  },
+  runtime: {
+    state: {
+      "[data-doc-sheets]": ["data-active-sheet"],
+      "[data-sheet-tab]": ["aria-selected", "tabindex", "is-active"],
+      "[data-doc-sheet]": ["hidden", "aria-hidden"],
+    },
+    internal: ["doc-sheets"], // ids it gives: doc-sheets-<n>-tab-<i>
+  },
+};

package/browser/shared/components/state.mjs

@@ -0,0 +1,20 @@
+// Reading state a report declares (runtime/bindings.js): a control, a table or a details bound to
+// a key (data-doc-bind), elements shown for a key's value (data-doc-show),
+// keys forgotten when the page is left (data-doc-transient); and the kit's styles of such
+// controls (styles/state.css). A filter (.doc-filter) is one block: its row of buttons and what
+// they filter below it (a list, say), together.
+export default {
+  id: "state",
+  match: "[data-doc-bind], [data-doc-show]",
+  attrs: {
+    "data-doc-bind": "the key an element writes and shows",
+    "data-doc-show": "key:value, shown while the key holds this value or nothing",
+    "data-doc-transient": "its key is forgotten when the page is left",
+  },
+  classes: ["doc-state-fields", "doc-state-field", "doc-state-actions", "doc-filter", "doc-filter-row", "doc-filter-button", "doc-state-list"],
+  wholes: ["doc-filter", "doc-filter-row", "doc-state-fields", "doc-state-list"], // the classes above that are a whole block of their own (the others are parts inside one)
+  runtime: {
+    attrs: { "[data-doc-show]": ["hidden"] },
+    state: { "button[data-doc-bind]": ["aria-pressed"] },
+  },
+};

package/browser/shared/components/table.mjs

@@ -0,0 +1,49 @@
+/** A cell's alignments (styles/table.css): its words to the left, the middle, the right. */
+export const CELL_ALIGN_CLASSES = ["doc-align-left", "doc-align-center", "doc-align-right"];
+/** A cell's vertical alignments (styles/table.css): its words at its top (the kit's own), middle, bottom. */
+export const CELL_VALIGN_CLASSES = ["doc-valign-top", "doc-valign-middle", "doc-valign-bottom"];
+/** A cell's words bold (styles/table.css). */
+export const CELL_BOLD_CLASS = "doc-bold";
+
+// A table, a container of cells: sortable by its headers unless static, its columns sized by
+// tables/ (auto widths, a colgroup it adds), sticky header and first column, scrollbars of its own
+// in a wrapper.
+export default {
+  id: "table",
+  category: "container",
+  match: "table.doc-table",
+  frame: ".doc-table-wrap", // what the table scrolls in, a block with it
+  lead: ".doc-table-meta", // its scope line right above its frame, which goes where the table goes
+  assets: ["tables"],
+  uses: [/<table[\s>]/i, /doc-table/],
+  attrs: {
+    "data-doc-table-static": "its row order means something: readers cannot sort it",
+    "data-sortable-table": "a table not of the kit's class, sortable",
+    "data-sort-status": "shows the current sort",
+    "data-sort-type": "text, number or date",
+    "data-sort-key": "a column's name",
+    "data-sort-default": "asc or desc",
+    "data-sort-ignore": "a column that does not sort",
+    "data-sort-value": "a formatted cell's value to sort by",
+    "data-sort-rank": "a cell numbered again after a sort",
+    "data-column-key": "a column's name for its width",
+    "data-number-columns": "off: no column read as numbers (none centered, none sortable by number), on the table or its frame",
+    "data-doc-chart-source": "on its frame: the key a chart drawn from it reads it by (data-doc-chart-data on the chart's host)",
+  },
+  // A cell may also be given a text color or a fill (doc-text-*, doc-highlight-*: text.mjs), an alignment, a vertical one and bold
+  // (doc-bold); a header cell's look is doc-bold doc-highlight-gray, as the page editor gives it.
+  classes: ["doc-table", "doc-table-wrap", "doc-table-meta", "doc-table--sticky-first", ...CELL_ALIGN_CLASSES, ...CELL_VALIGN_CLASSES, CELL_BOLD_CLASS],
+  fills: { "th": ["data-sort-type"] },
+  runtime: {
+    generated: ["colgroup[data-doc-columns]", ".doc-scrollbars"],
+    attrs: {
+      "table.doc-table": ["data-doc-sortable-ready", "data-doc-filled"],
+      ".doc-table-wrap": ["data-doc-min-width", "data-doc-layout", "data-doc-whole"], // data-doc-layout: the columns or rows it hides (tables/scrollbars.js); data-doc-whole: shown whole (tables/whole.js)
+      "th, td": ["data-column-kind", "data-column-wrap", "data-run-wrap", "data-doc-edge"], // data-run-wrap: a run of its code, or a number range, wider than its column (tables/layout.js); data-doc-edge: on the frame's right or bottom edge, in a table with a cell spanning rows (tables/edges.js)
+    },
+    classes: {
+      "table.doc-table": ["doc-table--auto"],
+    },
+    internal: ["doc-code-run", "doc-table-sort-button", "doc-scrollbar*", "data-doc-sort-arrow", "data-active", "data-drag", "data-x", "data-y", "data-more"],
+  },
+};

package/browser/shared/components/text.mjs

@@ -0,0 +1,14 @@
+// Inline marks of the format bar in body text: colors, highlights, underlines (the kit's
+// styles/base.css). Inline, no block.
+const COLORS = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+
+export default {
+  id: "text",
+  classes: [
+    ...COLORS.map((color) => `doc-text-${color}`),
+    ...COLORS.map((color) => `doc-highlight-${color}`),
+    ...["orange", "blue", "purple", "plain", "thin", "thick"].map((kind) => `doc-underline-${kind}`),
+  ],
+  // A number range in the text (3–13, 1–3B), held on one line (runtime/spacing.js).
+  runtime: { classes: { ".doc-range": ["doc-range"] } },
+};

package/browser/shared/components/widget.mjs

@@ -0,0 +1,10 @@
+// A whole block (整体块): an element of the report's own (a class of its own, no kit component), or
+// one the kit draws whole (a diff: diff.mjs): it moves and goes as a whole. Its inside is free: the
+// report's markup, styles and script, or the kit's; its words are edited in place, words only (its
+// paragraphs, headings and items never split, joined or taken out on their own: src/editor/source/
+// blocks.mjs), an inline element of the report's own in them kept whole (src/editor/page/own.mjs).
+export default {
+  id: "widget",
+  category: "whole",
+  pending: "the text of a document's own element is still edited in place; a whole block is to be moved alone",
+};

package/browser/shared/copy-ids.mjs

@@ -0,0 +1,72 @@
+// The ids an element names, and a copy's own (docs/editor.md, "Copying blocks"): an SVG's marker,
+// gradient, clip path, mask, pattern or filter named by url(#id) in an attribute (its style too:
+// style="fill: url(#g)"), anything named by #id in an attribute's words (href="#id", xlink:href as
+// older SVG writes it) and by an attribute that holds ids (a label's `for`, ARIA's: ID_ATTRIBUTES).
+// A copy of a card, an instance of a component package or a row of columns holding one keeps those
+// of its ids that it names itself, each given a prefix no id of the page starts with, every reference
+// in it written to match, so that its arrows and gradients still draw and its label is its own
+// field's (an id names one element: the original's would be read); its other ids are taken out, as
+// ever. The page (page/clipboard/own/ids.mjs) and the server (source/text.mjs copiedSource) each give
+// the copy a prefix from what they hold; and a unit's own references keep no unit from being deleted,
+// while another block's do (source/units.mjs keepReferenced reads the same names: `idsNamed`).
+
+const URL_REF = /url\(\s*(['"]?)#([^)'"\s]+)\1\s*\)/g;
+
+// The attributes that hold ids, besides values like href="#id".
+const ID_ATTRIBUTES = new Set([
+  "aria-labelledby", "aria-describedby", "aria-controls", "aria-owns", "aria-details", "aria-flowto",
+  "aria-activedescendant", "aria-errormessage", "for", "headers", "list", "form", "popovertarget", "commandfor", "anchor", "itemref",
+]);
+
+// The id a word of an attribute's value names, or null: #id anywhere, the word itself where the attribute holds ids.
+const wordId = (name, word) => (word.startsWith("#") ? word.slice(1) || null : ID_ATTRIBUTES.has(name) ? word : null);
+
+// Whether an attribute's words can name anything: an id and a class are names, a style holds url(#id) alone.
+const hasWords = (name) => name !== "id" && name !== "class" && name !== "style";
+
+/** The ids `value` (an attribute's) names by url(#id). */
+export const urlIds = (value) => [...String(value).matchAll(URL_REF)].map((match) => match[2]);
+
+/** The ids the attribute `name` names with `value`: by url(#id), by #id, and by the id itself in an attribute that holds ids. */
+export function idsNamed(name, value) {
+  if (name === "id" || name === "class") return [];
+  const words = hasWords(name) ? String(value).split(/\s+/).map((word) => wordId(name, word)).filter(Boolean) : [];
+  return [...urlIds(value), ...words];
+}
+
+/** The ids `attributes` ([{ name, value }]: an element's, every element's of a copy) name (`idsNamed`). */
+export function referencedIds(attributes) {
+  return new Set(attributes.flatMap(({ name, value }) => idsNamed(name, value)));
+}
+
+/** A prefix for a copy's ids: c1-, c2- …, the first no id of `ids` (the page's or the file's, and those given already) starts with. */
+export function freshPrefix(ids) {
+  const all = [...ids];
+  for (let n = 1; ; n++) {
+    const prefix = `c${n}-`;
+    if (!all.some((id) => id.startsWith(prefix))) return prefix;
+  }
+}
+
+/**
+ * `value`, the attribute `name`'s, with the ids `renamed` (a Map: old → new) names written new
+ * (`idsNamed`); null when it names none of them (the attribute as it is).
+ */
+export function rewrite(name, value, renamed) {
+  if (name === "id" || name === "class") return null;
+  let changed = false;
+  let next = String(value).replace(URL_REF, (whole, quote, id) => {
+    if (!renamed.has(id)) return whole;
+    changed = true;
+    return `url(${quote}#${renamed.get(id)}${quote})`;
+  });
+  if (hasWords(name)) {
+    next = next.replace(/\S+/g, (word) => {
+      const id = wordId(name, word);
+      if (!renamed.has(id)) return word;
+      changed = true;
+      return word.startsWith("#") ? `#${renamed.get(id)}` : renamed.get(id);
+    });
+  }
+  return changed ? next : null;
+}