@heycys/gallery 0.1.1 → 0.1.2

package/packs/gallery/kanban/style.css

@@ -0,0 +1,212 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The board: a muted line saying what it groups by, the settings (⚙)
+   at its right while the page edits, then the groups side by side, each a column of cards on a soft
+   fill, its name, its count and 新建 at its foot; past the width of the page the groups scroll sideways
+   in the board, never the page. A card is the kit's surface, its title, the other cells' words in small
+   muted print, its links as chips; its ✎ and 🗑 show as the pointer is on it, where the table takes a
+   change. Notion-flat, in the kit's colors, light and dark. */
+[data-doc-component="gallery/kanban"] {
+  margin: var(--doc-component-gap) 0;
+  > .gallery-kanban-face {
+    position: relative;
+    color: var(--doc-text);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+  > .gallery-kanban-face > .gallery-kanban-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 28px;
+    margin: 0 0 6px;
+    > .gallery-kanban-caption { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--doc-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    > .gallery-kanban-gear {
+      display: none;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--doc-muted);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity .12s;
+    }
+    > .gallery-kanban-gear > svg { width: 16px; height: 16px; }
+    > .gallery-kanban-gear:hover { background: var(--doc-hover); color: var(--doc-text); }
+    > .gallery-kanban-gear[aria-expanded="true"] { background: var(--doc-press); color: var(--doc-text); opacity: 1; }
+  }
+  > .gallery-kanban-face > .gallery-kanban-head[hidden] { display: none; }
+  > .gallery-kanban-face[data-writes] > .gallery-kanban-head > .gallery-kanban-gear { display: inline-flex; }
+  > .gallery-kanban-face[data-writes]:hover > .gallery-kanban-head > .gallery-kanban-gear,
+  > .gallery-kanban-face[data-writes]:focus-within > .gallery-kanban-head > .gallery-kanban-gear { opacity: 1; }
+  > .gallery-kanban-face > .gallery-kanban-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin: 0 0 8px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--doc-hover);
+    font-size: 12px;
+    > .gallery-kanban-setting { display: inline-flex; align-items: center; gap: 6px; color: var(--doc-muted); }
+    /* A select is a button that opens the kit's menu (DocKit's choices): no line, as every button. */
+    > .gallery-kanban-setting > select {
+      max-width: 180px;
+      box-sizing: border-box;
+      height: 24px;
+      padding: 2px 6px;
+      border: 0;
+      cursor: pointer;
+      border-radius: 6px;
+      background: var(--doc-surface);
+      color: var(--doc-text);
+      font: inherit;
+    }
+  }
+  > .gallery-kanban-face > .gallery-kanban-strip[hidden] { display: none; }
+  > .gallery-kanban-face > .gallery-kanban-line { margin: 0 0 8px; font-size: 13px; color: var(--doc-muted); }
+  > .gallery-kanban-face > .gallery-kanban-line[hidden] { display: none; }
+  > .gallery-kanban-face > .gallery-kanban-groups {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(200px, 1fr);
+    align-items: start;
+    gap: 10px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    scrollbar-width: thin;
+  }
+  > .gallery-kanban-face > .gallery-kanban-groups > .gallery-kanban-group {
+    min-width: 0;
+    padding: 8px;
+    border-radius: 10px;
+    background: var(--doc-hover);
+    > .gallery-kanban-group-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 2px 8px;
+      font-size: 13px;
+      > .gallery-kanban-name {
+        min-width: 0;
+        padding: 1px 8px;
+        border-radius: 999px;
+        background: var(--doc-surface);
+        border: 1px solid var(--doc-border);
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      > .gallery-kanban-count { color: var(--doc-muted); font-variant-numeric: tabular-nums; }
+    }
+    > .gallery-kanban-cards {
+      display: grid;
+      gap: 6px;
+      min-height: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    > .gallery-kanban-add {
+      display: none;
+      align-items: center;
+      gap: 4px;
+      width: 100%;
+      margin: 6px 0 0;
+      padding: 4px 6px;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--doc-muted);
+      font: inherit;
+      font-size: 13px;
+      text-align: start;
+      cursor: pointer;
+    }
+    > .gallery-kanban-add > svg { flex: none; width: 14px; height: 14px; }
+    > .gallery-kanban-add:hover { background: var(--doc-press); color: var(--doc-text); }
+  }
+  > .gallery-kanban-face > .gallery-kanban-groups[data-writes] > .gallery-kanban-group > .gallery-kanban-add { display: flex; }
+  > .gallery-kanban-face > .gallery-kanban-groups > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-card {
+    position: relative;
+    /* A card off the screen is not laid out (its size kept as it was last drawn): a board of 500 cards
+       costs a keystroke in its table what the cards in sight cost. */
+    content-visibility: auto;
+    contain-intrinsic-size: auto 64px;
+    border: 1px solid var(--doc-border);
+    border-radius: 8px;
+    background: var(--doc-surface);
+    box-shadow: 0 1px 2px rgb(15 15 15 / .04);
+    overflow-wrap: anywhere;
+    > .gallery-kanban-hold { padding: 8px 10px; }
+    > .gallery-kanban-hold > .gallery-kanban-title { display: block; font-weight: 500; }
+    > .gallery-kanban-hold > .gallery-kanban-title.gallery-kanban-untitled { color: var(--doc-muted); font-weight: 400; }
+    > .gallery-kanban-hold > .gallery-kanban-props { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 12px; color: var(--doc-muted); }
+    > .gallery-kanban-links { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; margin-top: -2px; }
+    > .gallery-kanban-links > .gallery-kanban-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      max-width: 100%;
+      padding: 1px 6px;
+      border-radius: 4px;
+      background: var(--doc-hover);
+      color: var(--doc-link);
+      font-size: 12px;
+      text-decoration: none;
+    }
+    > .gallery-kanban-links > .gallery-kanban-link > svg { flex: none; width: 13px; height: 13px; }
+    > .gallery-kanban-links > .gallery-kanban-link > .gallery-kanban-words { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    > .gallery-kanban-links > .gallery-kanban-link:hover { background: var(--doc-press); }
+    > .gallery-kanban-field {
+      display: block;
+      box-sizing: border-box;
+      width: calc(100% - 12px);
+      margin: 6px 6px 0;
+      padding: 3px 6px;
+      border: 1px solid var(--doc-accent);
+      border-radius: 6px;
+      background: var(--doc-surface);
+      color: var(--doc-text);
+      font: inherit;
+      font-weight: 500;
+    }
+    > .gallery-kanban-tools {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      display: none;
+      gap: 2px;
+      padding: 1px;
+      border: 1px solid var(--doc-border);
+      border-radius: 6px;
+      background: var(--doc-surface);
+    }
+    > .gallery-kanban-tools > button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border: 0;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--doc-muted);
+      cursor: pointer;
+    }
+    > .gallery-kanban-tools > button > svg { width: 14px; height: 14px; }
+    > .gallery-kanban-tools > button:hover { background: var(--doc-hover); color: var(--doc-text); }
+  }
+  > .gallery-kanban-face > .gallery-kanban-groups[data-writes] > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-card:hover:not([data-editing]) > .gallery-kanban-tools { display: inline-flex; }
+  > .gallery-kanban-face > .gallery-kanban-groups[data-writes] > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-card > .gallery-kanban-hold { cursor: grab; touch-action: none; user-select: none; }
+  > .gallery-kanban-face > .gallery-kanban-groups > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-card[data-editing] > .gallery-kanban-hold > .gallery-kanban-title { display: none; }
+  > .gallery-kanban-face > .gallery-kanban-groups > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-card.doc-dragging { opacity: .45; }
+  > .gallery-kanban-face > .gallery-kanban-groups > .gallery-kanban-group > .gallery-kanban-cards > .gallery-kanban-drop { height: 3px; border-radius: 2px; background: var(--doc-accent); }
+}

package/packs/gallery/kanban/template.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/kanban">
+  <script type="application/json">{}</script>
+</div>

package/packs/gallery/kanban/writing.md

@@ -0,0 +1,20 @@
+# 看板 (gallery/kanban)
+
+A board of a table of the document: each row a card, grouped by a column (a task's status, a deal's stage). The table holds the data and stays an ordinary table the reader can edit; the board is a view of it. Use it for tasks, a pipeline, anything whose rows move through a few states. A task that needs more than a line: link its first cell to a document of its own, and the card opens it.
+
+## How to write it
+
+Write a table, then the board after it, as example.html does (`gallery block show gallery/kanban` prints it):
+
+- the table: an ordinary table of the document whose `<table>` carries `data-doc-chart-source="<key>"`, a key of the document's own (a letter, then letters, digits, `_` or `-`; 32 at most): its header row names the columns, its first column is each card's title, the other columns its words under the title, a link in any cell a chip on the card. No merged cells, no `<tfoot>`, every row as long as the header: the board reads such a table and cannot change it.
+- the board: `<div data-doc-component="gallery/kanban" data-doc-from="<key>">`, the same key, holding its settings, one `<script type="application/json">` on one line:
+  - `group`: the name of the column it groups by. Left out, it finds one: a column named like a status (状态, 进度, 阶段, status, stage), else the one whose values repeat most.
+  - `order`: the groups first, in this order, comma-separated (`"待办,进行中,已完成"`), each shown even with no card; any other value the rows hold comes after them.
+
+  Write `{}` for no settings. One table may have several views (another board, a 指标, a 图表), each with the same key.
+
+The reader adds a board in Gallery from a table's menu, 视图 › 看板, which writes the key on both; it is not in "/", as a board needs its table.
+
+## How it looks
+
+A muted line saying what it groups by, then the groups side by side (scrolling sideways past the width of the page), each with its name, its count and its cards. Where the page edits: a card dragged to another group changes its cell of that column and puts its row there in the table, dragged within its group puts its row before the card it is dropped on; 新建 at a group's foot adds a row to the table; a card's ✎ renames it (its first cell), its 🗑 takes its row out; the ⚙ at the board's right picks the column it groups by. Each is one undo step of the document's. In an exported file, 演示视图, and for a table it cannot change, it only shows. Where the block is not, a reader has the table.

package/packs/gallery/metric/component.json

@@ -0,0 +1,22 @@
+{
+  "id": "gallery/metric",
+  "apiVersion": 1,
+  "version": "1.0.1",
+  "name": { "zh": "指标", "en": "Metric" },
+  "description": { "zh": "表格的视图：一列的计数、合计或平均，表格一改就跟着变", "en": "A view of a table: a count, sum or average of a column, following each edit of the table" },
+  "words": "zhibiao shuzi metric number kpi count sum average total 指标 数字 合计 平均 计数 统计 视图 view",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-metric-face"] },
+  "places": ["document"],
+  "settings": [
+    { "key": "op", "label": { "zh": "计算", "en": "Calculate" }, "type": "select", "options": ["count", "sum", "average"], "default": "count" },
+    { "key": "column", "label": { "zh": "列", "en": "Column" }, "type": "text", "default": "" },
+    { "key": "where", "label": { "zh": "只算这一列", "en": "Only where column" }, "type": "text", "default": "" },
+    { "key": "is", "label": { "zh": "等于", "en": "is" }, "type": "text", "default": "" },
+    { "key": "title", "label": { "zh": "名称", "en": "Name" }, "type": "text", "default": "" },
+    { "key": "unit", "label": { "zh": "单位", "en": "Unit" }, "type": "text", "default": "" }
+  ],
+  "needs": ["tables"]
+}

package/packs/gallery/metric/example.html

@@ -0,0 +1,15 @@
+<table data-doc-chart-source="sales">
+  <thead><tr><th>客户</th><th>区域</th><th>金额</th><th>状态</th></tr></thead>
+  <tbody>
+    <tr><td>华东物流</td><td>华东</td><td>12,800</td><td>已成交</td></tr>
+    <tr><td>北方食品</td><td>华北</td><td>8,600</td><td>洽谈中</td></tr>
+    <tr><td>南方家居</td><td>华南</td><td>15,200</td><td>已成交</td></tr>
+    <tr><td>西部能源</td><td>西部</td><td>6,400</td><td>洽谈中</td></tr>
+  </tbody>
+</table>
+<div data-doc-component="gallery/metric" data-doc-from="sales">
+  <script type="application/json">{"op":"sum","column":"金额","unit":"元"}</script>
+</div>
+<div data-doc-component="gallery/metric" data-doc-from="sales">
+  <script type="application/json">{"where":"状态","is":"已成交","title":"已成交的单数"}</script>
+</div>

package/packs/gallery/metric/kit.js

@@ -0,0 +1,248 @@
+// gallery/metric (指标): a view of a table of the document (its manifest's needs hold "tables"; the table's
+// frame carries the key its data-doc-from names, which the table's 视图 › puts on both): one number of
+// the table, large, under its name. Its settings (its data part `settings`, JSON) say which: `op`
+// "count" (the rows: the default), "sum" or "average" of the numbers of a `column` (the first column
+// holding numbers where it names none; a cell holding no number is left out, as a chart leaves it out),
+// over every row or those whose cell of `where` is `is`; `title` its name (one made of the rest where it
+// gives none), `unit` the words after the number. It reads the table each time its rows change (the
+// `data` signal: a cell typed in, a row added or taken out), and draws only what changed, so that it
+// follows the reader's typing at once. Its ⚙, at its head while the page edits, opens its settings,
+// each change one undo step of the document's (context.editJSON); it writes nothing else. The words
+// are the page's language.
+
+const WORDS = {
+  zh: {
+    settings: "设置",
+    op: "计算",
+    ops: { count: "计数", sum: "合计", average: "平均" },
+    column: "列",
+    where: "只算",
+    every: "所有行",
+    is: "等于",
+    title: "名称",
+    unit: "单位",
+    rows: "行数",
+    named: (/** @type {string} */ where, /** @type {string} */ is) => `${where}为“${is}”`,
+    sum: (/** @type {string} */ column) => `${column}合计`,
+    average: (/** @type {string} */ column) => `${column}平均`,
+    of: (/** @type {string} */ label, /** @type {string} */ where) => `${label}（${where}）`,
+    counted: (/** @type {number} */ count) => `按 ${count} 行算`,
+    outOf: (/** @type {number} */ count) => `共 ${count} 行`,
+    unbound: "这个指标还没有接到表格上：在表格的菜单里选“视图 › 指标”。",
+    unread: "读不到这个指标的表格：它不在页面上了，或者有合并的单元格。",
+    missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
+    noNumbers: "表格里没有写数的列：合计和平均要一列数。",
+  },
+  en: {
+    settings: "Settings",
+    op: "Calculate",
+    ops: { count: "Count", sum: "Sum", average: "Average" },
+    column: "Column",
+    where: "Only where",
+    every: "Every row",
+    is: "is",
+    title: "Name",
+    unit: "Unit",
+    rows: "Rows",
+    named: (/** @type {string} */ where, /** @type {string} */ is) => `${where}: ${is}`,
+    sum: (/** @type {string} */ column) => `Total ${column}`,
+    average: (/** @type {string} */ column) => `Average ${column}`,
+    of: (/** @type {string} */ label, /** @type {string} */ where) => `${label} (${where})`,
+    counted: (/** @type {number} */ count) => `Of ${count} rows`,
+    outOf: (/** @type {number} */ count) => `${count} rows in all`,
+    unbound: "This metric reads no table yet: pick View › Metric in a table's menu.",
+    unread: "This metric's table cannot be read: it is not on the page, or it has merged cells.",
+    missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
+    noNumbers: "The table has no column of numbers: a sum and an average need one.",
+  },
+};
+
+const GEAR = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 4.5h6M12 4.5h1M3 11.5h1M7 11.5h6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><circle cx="10.5" cy="4.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="11.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>';
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * What its settings ask (context.readJSON's; {} where none is set).
+ * @param {any} settings
+ * @returns {{ op: "count" | "sum" | "average", column: string, where: string, is: string, title: string, unit: string }}
+ */
+function askedOf(settings) {
+  const table = settings !== null && typeof settings === "object" && !Array.isArray(settings) ? settings : {};
+  const text = (/** @type {string} */ key) => (typeof table[key] === "string" ? table[key].trim() : typeof table[key] === "number" ? String(table[key]) : "");
+  const op = table.op === "sum" || table.op === "average" ? table.op : "count";
+  return { op, column: text("column"), where: text("where"), is: text("is"), title: text("title"), unit: text("unit") };
+}
+
+/** The columns of `table` holding numbers: a number in a cell at least, and no words. */
+const numberColumns = (/** @type {DocTableView} */ table) => table.columns.filter((name) => table.rows.some((row) => typeof row.values[name] === "number") && table.rows.every((row) => row.values[name] === null || typeof row.values[name] === "number"));
+
+/** Whether a row's value is what `is` says: its words, or the same number. */
+function matches(/** @type {string | number | null | undefined} */ value, /** @type {string} */ is) {
+  if (value === null || value === undefined) return is === "";
+  if (typeof value === "number") {
+    const plain = Number(is.replace(/[\s,，]/g, ""));
+    if (is.trim() !== "" && Number.isFinite(plain)) return plain === value;
+  }
+  return String(value).trim() === is;
+}
+
+/**
+ * The metric of `table` as `asked` says: { value, label, foot } or { line } where there is none to say.
+ * @param {DocTableView} table
+ * @param {ReturnType<typeof askedOf>} asked
+ * @param {typeof WORDS.zh} words
+ */
+function metricOf(table, asked, words) {
+  if (asked.where && !table.columns.includes(asked.where)) return { line: words.missing(asked.where) };
+  const rows = asked.where ? table.rows.filter((row) => matches(row.values[asked.where], asked.is)) : [...table.rows];
+  const where = asked.where ? words.named(asked.where, asked.is) : "";
+  if (asked.op === "count") {
+    return { value: rows.length, label: asked.title || where || words.rows, foot: asked.where ? words.outOf(table.rows.length) : null };
+  }
+  const column = asked.column || numberColumns(table)[0] || "";
+  if (!column) return { line: words.noNumbers };
+  if (!table.columns.includes(column)) return { line: words.missing(column) };
+  const numbers = rows.map((row) => row.values[column]).filter((value) => typeof value === "number");
+  const sum = numbers.reduce((total, value) => total + /** @type {number} */ (value), 0);
+  const value = asked.op === "sum" ? sum : numbers.length > 0 ? sum / numbers.length : null;
+  const named = asked.op === "sum" ? words.sum(column) : words.average(column);
+  return { value, label: asked.title || (where ? words.of(named, where) : named), foot: words.counted(numbers.length) };
+}
+
+/**
+ * An element of the face, of `kind` (its class gallery-metric-<kind>).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-metric-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+/**
+ * The settings strip: a field a setting, a select of its choices (`options()`, [value, words]) or a
+ * text, shown while `shown()` says so, each committed (DocKit.input: Enter, the field left, a choice
+ * made) as one write of the settings part, a key set or, for "", taken off.
+ * @param {DocComponentContext} context
+ * @param {{ key: string, label: string, options?: () => [string, string][], shown?: () => boolean, value: () => string }[]} fields
+ */
+function settingsStrip(context, fields) {
+  const strip = made("div", "strip");
+  strip.hidden = true;
+  const write = (/** @type {string} */ key, /** @type {string} */ value) => context.editJSON("settings", (draft) => {
+    const settings = draft !== null && typeof draft === "object" && !Array.isArray(draft) ? draft : {};
+    if (value.trim() === "") delete settings[key];
+    else settings[key] = value.trim();
+    return settings;
+  });
+  const controls = fields.map((field) => {
+    const label = made("label", "setting");
+    const control = field.options ? document.createElement("select") : document.createElement("input");
+    if (control instanceof HTMLInputElement) control.type = "text";
+    label.append(made("span", "setting-name", field.label), control);
+    strip.append(label);
+    const handle = DocKit.input(control, { commit: (value) => void write(field.key, value), signal: context.signal });
+    return { field, label, control, handle, signed: "" };
+  });
+  return {
+    strip,
+    /** The fields as the settings and the table say now: their choices, which show, their values. */
+    update() {
+      for (const each of controls) {
+        each.label.hidden = each.field.shown ? !each.field.shown() : false;
+        const { control, field } = each;
+        if (field.options && control instanceof HTMLSelectElement) {
+          const options = field.options();
+          const signed = JSON.stringify(options);
+          if (signed !== each.signed) {
+            each.signed = signed;
+            control.replaceChildren(...options.map(([value, words]) => new Option(words, value)));
+          }
+        }
+        each.handle.set(field.value());
+      }
+    },
+  };
+}
+
+DocKit.component({
+  id: "gallery/metric",
+  on: ["source", "data", "editable"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const format = new Intl.NumberFormat(language === "en" ? "en-US" : "zh-CN", { maximumFractionDigits: 2 });
+    const face = made("div", "face");
+    const head = made("div", "head");
+    const label = made("span", "label");
+    const gear = made("button", "gear");
+    gear.type = "button";
+    gear.title = words.settings;
+    gear.setAttribute("aria-label", words.settings);
+    gear.setAttribute("aria-expanded", "false");
+    gear.innerHTML = GEAR;
+    head.append(label, gear);
+    const value = made("p", "value");
+    const number = made("span", "number");
+    const unit = made("span", "unit");
+    value.append(number, unit);
+    const foot = made("p", "foot");
+    const line = made("p", "line");
+
+    /** @type {DocTableView | null} */
+    let table = null;
+    let asked = askedOf({});
+    const columnsOf = () => (table ? table.columns.map((name) => /** @type {[string, string]} */ ([name, name])) : []);
+    const { strip, update: updateStrip } = settingsStrip(context, [
+      { key: "op", label: words.op, options: () => [["count", words.ops.count], ["sum", words.ops.sum], ["average", words.ops.average]], value: () => asked.op },
+      { key: "column", label: words.column, options: () => (table ? numberColumns(table).map((name) => /** @type {[string, string]} */ ([name, name])) : []), shown: () => asked.op !== "count", value: () => asked.column || (table ? numberColumns(table)[0] ?? "" : "") },
+      { key: "where", label: words.where, options: () => [["", words.every], ...columnsOf()], value: () => asked.where },
+      { key: "is", label: words.is, shown: () => asked.where !== "", value: () => asked.is },
+      { key: "title", label: words.title, value: () => asked.title },
+      { key: "unit", label: words.unit, value: () => asked.unit },
+    ]);
+    face.append(head, strip, value, foot, line);
+    host.append(face);
+    gear.addEventListener("click", () => {
+      strip.hidden = !strip.hidden;
+      gear.setAttribute("aria-expanded", String(!strip.hidden));
+    }, { signal: context.signal });
+
+    const show = (/** @type {HTMLElement} */ node, /** @type {string | null} */ text) => {
+      node.hidden = text === null;
+      if (node.textContent !== (text ?? "")) node.textContent = text ?? "";
+    };
+    const drawNow = () => {
+      table = context.table();
+      asked = askedOf(context.readJSON("settings"));
+      face.toggleAttribute("data-writes", context.canEdit());
+      head.hidden = !table;
+      updateStrip();
+      const metric = table ? metricOf(table, asked, words) : { line: host.hasAttribute("data-doc-from") ? words.unread : words.unbound };
+      if (metric.line !== undefined) {
+        show(label, asked.title || null);
+        value.hidden = true;
+        show(foot, null);
+        show(line, metric.line);
+        return;
+      }
+      show(label, metric.label);
+      value.hidden = false;
+      const said = metric.value === null ? "—" : format.format(metric.value);
+      if (number.textContent !== said) number.textContent = said;
+      show(unit, asked.unit || null);
+      show(foot, metric.foot);
+      show(line, null);
+    };
+    drawNow();
+    return { update: () => context.frame(drawNow) };
+  },
+});

package/packs/gallery/metric/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f2f4f7"/><rect x="16" y="20" width="98" height="80" rx="8" fill="#ffffff" stroke="#d0d5dd"/><rect x="28" y="32" width="44" height="6" rx="3" fill="#98a2b3"/><rect x="28" y="48" width="64" height="18" rx="4" fill="#344054"/><rect x="28" y="78" width="34" height="5" rx="2.5" fill="#d0d5dd"/><rect x="126" y="20" width="98" height="80" rx="8" fill="#ffffff" stroke="#d0d5dd"/><rect x="138" y="32" width="52" height="6" rx="3" fill="#98a2b3"/><rect x="138" y="48" width="30" height="18" rx="4" fill="#2678d8"/><rect x="172" y="58" width="14" height="8" rx="2" fill="#98a2b3"/><rect x="138" y="78" width="40" height="5" rx="2.5" fill="#d0d5dd"/></svg>

package/packs/gallery/metric/style.css

@@ -0,0 +1,92 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. A framed card of the kit's (its border, its radius, its surface): its
+   name small and muted, the number large under it with its unit in smaller muted print, a muted line
+   of what it was counted of (the number's weight, tracking and unit the kit's card tokens, as a page's
+   cards draw theirs); the settings (⚙) at the right of its head while the page edits, the strip
+   they open under it. Side by side in a document's columns they read as a row of tiles. The instance
+   is a container, so that the number fits a narrow column. Notion-flat, light and dark. */
+[data-doc-component="gallery/metric"] {
+  container-type: inline-size;
+  margin: var(--doc-component-gap) 0;
+  padding: 14px 18px 14px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-surface);
+  > .gallery-metric-face { color: var(--doc-text); }
+  > .gallery-metric-face > .gallery-metric-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 24px;
+    > .gallery-metric-label { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--doc-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    > .gallery-metric-label[hidden] { display: block; visibility: hidden; }
+    > .gallery-metric-gear {
+      display: none;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      margin: -2px -6px -2px 0;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--doc-muted);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity .12s;
+    }
+    > .gallery-metric-gear > svg { width: 16px; height: 16px; }
+    > .gallery-metric-gear:hover { background: var(--doc-hover); color: var(--doc-text); }
+    > .gallery-metric-gear[aria-expanded="true"] { background: var(--doc-press); color: var(--doc-text); opacity: 1; }
+  }
+  > .gallery-metric-face > .gallery-metric-head[hidden] { display: none; }
+  > .gallery-metric-face[data-writes] > .gallery-metric-head > .gallery-metric-gear { display: inline-flex; }
+  > .gallery-metric-face[data-writes]:hover > .gallery-metric-head > .gallery-metric-gear,
+  > .gallery-metric-face[data-writes]:focus-within > .gallery-metric-head > .gallery-metric-gear { opacity: 1; }
+  > .gallery-metric-face > .gallery-metric-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 14px;
+    margin: 6px 0 4px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--doc-hover);
+    font-size: 12px;
+    > .gallery-metric-setting { display: inline-flex; align-items: center; gap: 6px; color: var(--doc-muted); }
+    > .gallery-metric-setting[hidden] { display: none; }
+    > .gallery-metric-setting > select,
+    > .gallery-metric-setting > input {
+      box-sizing: border-box;
+      max-width: 160px;
+      height: 24px;
+      padding: 2px 6px;
+      border: 1px solid var(--doc-border);
+      border-radius: 6px;
+      background: var(--doc-surface);
+      color: var(--doc-text);
+      font: inherit;
+    }
+    /* A select is a button that opens the kit's menu (DocKit's choices): no line, as every button. */
+    > .gallery-metric-setting > select { border: 0; cursor: pointer; }
+    > .gallery-metric-setting > input { width: 110px; }
+  }
+  > .gallery-metric-face > .gallery-metric-strip[hidden] { display: none; }
+  > .gallery-metric-face > .gallery-metric-value {
+    margin: 2px 0 0;
+    font-size: clamp(24px, 9cqi, 34px);
+    line-height: 1.2;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+    > .gallery-metric-unit { margin-inline-start: .25em; font-size: max(12px, var(--gallery-unit-size)); font-weight: 500; letter-spacing: 0; color: var(--doc-muted); }
+    > .gallery-metric-unit[hidden] { display: none; }
+  }
+  > .gallery-metric-face > .gallery-metric-value[hidden] { display: none; }
+  > .gallery-metric-face > .gallery-metric-foot { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--doc-muted); }
+  > .gallery-metric-face > .gallery-metric-foot[hidden] { display: none; }
+  > .gallery-metric-face > .gallery-metric-line { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--doc-muted); }
+  > .gallery-metric-face > .gallery-metric-line[hidden] { display: none; }
+}

package/packs/gallery/metric/template.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/metric">
+  <script type="application/json">{}</script>
+</div>

package/packs/gallery/metric/writing.md

@@ -0,0 +1,23 @@
+# 指标 (gallery/metric)
+
+One number of a table of the document, large under its name: how many rows (all, or those of one status), or the sum or the average of a column of numbers. It is a view of the table, read again as the table is typed in: the table holds the data, the metric never writes it. Use one or a few above a table of sales, tasks, expenses; put two or three side by side in the document's columns for a row of tiles.
+
+## How to write it
+
+Write a table, then the metric, as example.html does (`gallery block show gallery/metric` prints it):
+
+- the table: an ordinary table of the document whose `<table>` carries `data-doc-chart-source="<key>"`, a key of the document's own (a letter, then letters, digits, `_` or `-`; 32 at most), its header row naming the columns. No merged cells.
+- the metric: `<div data-doc-component="gallery/metric" data-doc-from="<key>">`, the same key, holding its settings, one `<script type="application/json">` on one line, each optional:
+  - `op`: `"count"` (the rows; the default), `"sum"` or `"average"`;
+  - `column`: the column summed or averaged (its cells' numbers; a cell with no number is left out). Left out: the first column of numbers;
+  - `where` and `is`: only the rows whose cell of the column `where` is `is` (`{"where":"状态","is":"已成交"}`);
+  - `title`: its name. Left out, one is made (行数, 金额合计, 状态为“已成交”);
+  - `unit`: the words after the number (元, %, 个).
+
+  One table may have several views (a 看板, a 图表, more metrics), each with the same key.
+
+The reader adds a metric in Gallery from a table's menu, 视图 › 指标, which writes the key on both; it is not in "/", as a metric needs its table. Its ⚙ (where the page edits) changes its settings.
+
+## How it looks
+
+A framed card: its name small and muted, the number large with its unit, and a muted line of what it counted (按 4 行算, 共 12 行). Numbers keep two decimals at most and group their thousands. In an exported file it shows the number the table holds there.