@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/stats/kit.js

@@ -0,0 +1,347 @@
+// gallery/stats (工作区统计): four numbers of the workspace, each over a small picture of itself, read
+// through context.workspace.query("stats") and query("activity") (its manifest's needs hold "workspace"):
+// its documents (a square a document, those edited this week, since Monday 0:00, in the accent), the
+// words of all its documents (and, from the record of edits, how they grew over the last 30 days: a line
+// of the total at the end of each day, and the words added in all), its to-dos done of all (a bar), and
+// the edits made this week (the record's, the reader's and the Agent's: a bar a day, Monday to Sunday,
+// today's in the accent, the days to come a stub; and against the same days of the week before, 比上周同期
+// +14%). A workspace with none of them shows each 0 and says what each waits for. It reads again whenever
+// the workspace says they changed (the `data` signal, "stats" or "activity": a document written, a to-do
+// checked, a document made or gone) and as a day begins (the kit's clock: a new week starts on a Monday).
+// It holds no part and writes nothing: all it shows is drawn (the manifest's `runtime`). Where the
+// workspace cannot be read (an exported file, where it has no server; a server that does not answer) each
+// number is a dash and a line says why. The words are the page's language (the UI's where Gallery says
+// it, else the page's lang); a big number of words is said short (12.4万, 124K).
+//
+// Its face (the pack's design B, in the kit's card tokens) has no head: the four labels, each after a
+// small picture of what it counts, are its titles; four cells in a row a hairline apart (an 8 × 2 card,
+// the default, and a 12 × 2 one, `data-layout` "row" and "wide", by context.size), or two by two (a 4 × 4
+// card, "square"), each its label, its number (28px, 32px on a wide card), its picture and a faint line
+// under it.
+
+const WORDS = {
+  zh: {
+    documents: "文档",
+    words: "总字数",
+    todos: "待办完成",
+    week: "本周编辑",
+    pieces: "篇",
+    times: "次",
+    wordUnit: "字",
+    tenThousand: "万字",
+    editedWeek: (/** @type {number} */ count) => ["", String(count), " 篇本周改过"],
+    month: (/** @type {string} */ added) => ["近 30 天 ", added, ""],
+    left: (/** @type {number} */ percent, /** @type {number} */ open) => [`${percent}%`, ` · 还剩 ${open} 项`],
+    allDone: "全部完成",
+    against: (/** @type {string} */ delta) => ["比上周同期 ", delta, ""],
+    lastNone: "上周同期没有编辑",
+    zero: { documents: "新建一篇就从这里开始", todos: "还没有待办", week: "这周还没动过" },
+    offline: "在 Gallery 里打开时显示",
+    failed: "读不到工作区的统计",
+    locale: "zh-CN",
+  },
+  en: {
+    documents: "Documents",
+    words: "Words",
+    todos: "To-dos done",
+    week: "Edits this week",
+    pieces: "",
+    times: "",
+    wordUnit: "",
+    tenThousand: "",
+    editedWeek: (/** @type {number} */ count) => ["", String(count), " edited this week"],
+    month: (/** @type {string} */ added) => ["", added, " in 30 days"],
+    left: (/** @type {number} */ percent, /** @type {number} */ open) => [`${percent}%`, ` · ${open} left`],
+    allDone: "All done",
+    against: (/** @type {string} */ delta) => ["", delta, " on last week"],
+    lastNone: "None this time last week",
+    zero: { documents: "Make one to start", todos: "No to-dos yet", week: "Nothing yet this week" },
+    offline: "Shown when opened in Gallery",
+    failed: "The workspace's numbers could not be read",
+    locale: "en",
+  },
+};
+
+/** The days of the record it reads: 30 for the words, and this week and the one before for the edits. */
+const DAYS = 37;
+
+/** 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";
+}
+
+/**
+ * A count as the card writes it, in `language`: whole and grouped up to 99,999 (12,345), shorter past
+ * it (12.3万, 123.5K), as the language writes a big number.
+ * @param {number} value
+ * @param {"zh" | "en"} language
+ */
+function countOf(value, language) {
+  const big = Math.abs(value) >= 100_000;
+  return new Intl.NumberFormat(WORDS[language].locale, big ? { notation: "compact", maximumFractionDigits: 1 } : { maximumFractionDigits: 0 }).format(value);
+}
+
+/**
+ * The words of the workspace as the card's number says them: { value, unit }: in Chinese 万字 from
+ * 10,000 (12.4 万字), else 字; in English 12.4K from 10,000.
+ * @param {number} words
+ * @param {"zh" | "en"} language
+ */
+function wordsOf(words, language) {
+  const said = WORDS[language];
+  if (Math.abs(words) < 10_000) return { value: countOf(words, language), unit: said.wordUnit };
+  if (language === "zh") return { value: (words / 10_000).toFixed(1), unit: said.tenThousand };
+  return { value: `${(words / 1000).toFixed(1)}K`, unit: "" };
+}
+
+/** A change of words, signed and short (+6万, +5,432, −120). @param {number} value @param {"zh" | "en"} language */
+function addedOf(value, language) {
+  const sign = value > 0 ? "+" : value < 0 ? "−" : "+";
+  const size = Math.abs(value);
+  if (size < 10_000) return `${sign}${countOf(size, language)}`;
+  const short = (Math.round(size / 1000) / 10).toFixed(1).replace(/\.0$/, "");
+  return `${sign}${language === "zh" ? `${short}万` : `${(Math.round(size / 100) / 10).toFixed(1).replace(/\.0$/, "")}K`}`;
+}
+
+const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+/** A local day as the record writes it, YYYY-MM-DD. @param {Date} date */
+const dayOf = (date) => `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())}`;
+/** The day `count` days after `date` (before, negative), at noon. @param {Date} date @param {number} count */
+const after = (date, count) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + count, 12);
+
+/**
+ * What the record of edits says for the card (`days`: query("activity")'s data, [{ date, edits, words }];
+ * `total`: the words of the workspace now; `today`: a Date): `curve`, the words in all at the end of each
+ * of the last 30 days, oldest first (a day before the record started taken as no change), none below 0;
+ * `added`, the words those days added, never more than the total (the record counts each edit's change,
+ * and a document deleted takes its words out of the total and none out of the record, so that the days
+ * before it would read as fewer words than none); `week`, the edits of each day Monday to Sunday (null for a day to come); `edits`,
+ * this week's; `last`, those of the week before up to the same weekday; `delta`, their change in percent
+ * (null where the week before had none).
+ * @param {Array<{ date: string, edits: number, words: number }>} days
+ * @param {number} total
+ * @param {Date} today
+ */
+function trendOf(days, total, today) {
+  const by = new Map(days.map((day) => [day.date, day]));
+  const curve = [];
+  let words = total;
+  for (let back = 0; back < 30; back++) {
+    curve.unshift(Math.max(0, words));
+    words -= by.get(dayOf(after(today, -back)))?.words ?? 0;
+  }
+  const added = total - Math.max(0, words);
+  const weekday = (today.getDay() + 6) % 7;
+  /** @type {Array<number | null>} */
+  const week = Array.from({ length: 7 }, (_, index) => (index > weekday ? null : by.get(dayOf(after(today, index - weekday)))?.edits ?? 0));
+  let edits = 0;
+  for (const value of week) edits += value ?? 0;
+  let last = 0;
+  for (let index = 0; index <= weekday; index++) last += by.get(dayOf(after(today, index - weekday - 7)))?.edits ?? 0;
+  return { curve, added, week, edits, last, delta: last > 0 ? Math.round((edits / last - 1) * 100) : null };
+}
+
+/**
+ * The four cells the card shows of `stats` (workspace.query("stats")'s data), or of none (null: a dash
+ * each), and of the record's `trend` (trendOf's, or null), in `language`: [{ key, label, value, unit, of,
+ * caption: [before, bold, after] }].
+ * @param {{ documents: number, todos: { done: number, total: number }, words: number, editedThisWeek: number } | null} stats
+ * @param {ReturnType<typeof trendOf> | null} trend
+ * @param {"zh" | "en"} language
+ */
+function cellsOf(stats, trend, language) {
+  const said = WORDS[language];
+  const dash = "—";
+  if (!stats) return ["documents", "words", "todos", "week"].map((key) => ({ key, label: said[/** @type {"documents"} */ (key)], value: dash, unit: "", of: "", caption: ["", "", ""] }));
+  const open = stats.todos.total - stats.todos.done;
+  const percent = stats.todos.total > 0 ? Math.round((100 * stats.todos.done) / stats.todos.total) : 0;
+  const words = wordsOf(stats.words, language);
+  const edits = trend?.edits ?? 0;
+  const delta = trend?.delta;
+  return [
+    { key: "documents", label: said.documents, value: countOf(stats.documents, language), unit: said.pieces, of: "", caption: stats.documents === 0 ? ["", "", said.zero.documents] : said.editedWeek(stats.editedThisWeek) },
+    { key: "words", label: said.words, value: words.value, unit: words.unit, of: "", caption: said.month(addedOf(trend?.added ?? 0, language)) },
+    { key: "todos", label: said.todos, value: countOf(stats.todos.done, language), unit: "", of: `/ ${countOf(stats.todos.total, language)}`, caption: stats.todos.total === 0 ? ["", "", said.zero.todos] : open === 0 ? ["", "100%", ` · ${said.allDone}`] : ["", ...said.left(percent, open)] },
+    { key: "week", label: said.week, value: countOf(edits, language), unit: said.times, of: "", caption: edits === 0 ? ["", "", said.zero.week] : delta === null || delta === undefined ? ["", "", said.lastNone] : said.against(`${delta > 0 ? "+" : delta < 0 ? "−" : ""}${Math.abs(delta)}%`) },
+  ];
+}
+
+// The cells' small pictures, of lines, 24 x 24.
+const ICONS = {
+  documents: '<path d="M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z"/><path d="M13.5 3.5V8H18"/>',
+  words: '<path d="M5 6.5h14M5 12h14M5 17.5h9"/>',
+  todos: '<rect x="3.5" y="4" width="6.5" height="6.5" rx="1.8"/><path d="M5.2 7.3l1.3 1.3 2-2.1"/><rect x="3.5" y="13.5" width="6.5" height="6.5" rx="1.8"/><path d="M13.5 7.2h7M13.5 16.8h7"/>',
+  week: '<path d="M5 19.5v-6M10 19.5v-13M15 19.5v-9M20 19.5v-4"/>',
+};
+
+/** The pictures' sizes by the card's layout: the line's and the bars' width and height, and the squares' columns, side and gap. */
+const SIZES = {
+  row: { width: 112, height: 24, columns: 11, side: 6, gap: 2 },
+  wide: { width: 190, height: 24, columns: 16, side: 8, gap: 3 },
+  square: { width: 104, height: 40, columns: 8, side: 8, gap: 3 },
+};
+
+let made_ = 0; // the gradients' ids, one each
+
+/**
+ * The documents as squares, `lit` of them (those edited this week) in the accent: at most three rows of
+ * `columns`, a square standing for more than one document past that; the rows as even as they can be
+ * (12 in two rows of 6, 23 in 8, 8 and 7), so that no square is left alone on a row of its own.
+ * @param {number} count @param {number} lit @param {{ columns: number, side: number, gap: number }} size
+ */
+function squares(count, lit, { columns, side, gap }) {
+  const most = columns * 3;
+  const shown = Math.min(count, most);
+  const on = count > most ? Math.round((lit / count) * shown) : Math.min(lit, shown);
+  const rows = Math.max(1, Math.ceil(shown / columns));
+  const across = Math.max(1, Math.ceil(shown / rows));
+  let drawn = "";
+  for (let index = 0; index < shown; index++) {
+    drawn += `<rect x="${(index % across) * (side + gap)}" y="${Math.floor(index / across) * (side + gap)}" width="${side}" height="${side}" rx="${side > 6 ? 2 : 1.6}" class="gallery-stats-${index < on ? "on" : "off"}"/>`;
+  }
+  if (shown === 0) drawn = `<rect width="${columns * (side + gap) - gap}" height="6" rx="3" class="gallery-stats-empty"/>`;
+  const height = shown === 0 ? 6 : rows * (side + gap) - gap;
+  return `<svg width="${columns * (side + gap) - gap}" height="${height}" aria-hidden="true">${drawn}</svg>`;
+}
+
+/** The words over 30 days as a line, its area fading under it and a dot at its end. @param {number[]} values @param {{ width: number, height: number }} size */
+function curveOf(values, { width, height }) {
+  const low = Math.min(...values);
+  const high = Math.max(...values);
+  if (high === low) return `<svg width="${width}" height="${height}" aria-hidden="true"><line x1="0" x2="${width}" y1="${height - 2}" y2="${height - 2}" class="gallery-stats-flat" stroke-width="1.8" stroke-linecap="round"/></svg>`;
+  const step = width / (values.length - 1);
+  const y = (/** @type {number} */ value) => height - 3 - ((value - low) / (high - low)) * (height - 7);
+  const points = values.map((value, index) => [index * step, y(value)]);
+  const line = points.map(([x, at], index) => `${index ? "L" : "M"}${x.toFixed(1)} ${at.toFixed(1)}`).join("");
+  const [endX, endY] = points[points.length - 1];
+  const id = `gallery-stats-fade-${++made_}`;
+  return `<svg width="${width}" height="${height}" aria-hidden="true"><defs><linearGradient id="${id}" x1="0" x2="0" y1="0" y2="1"><stop offset="0" class="gallery-stats-stop" stop-opacity=".22"/><stop offset="1" class="gallery-stats-stop" stop-opacity="0"/></linearGradient></defs><path d="${line}L${width} ${height}L0 ${height}Z" fill="url(#${id})"/><path d="${line}" fill="none" class="gallery-stats-line" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/><circle cx="${endX}" cy="${endY}" r="3.2" class="gallery-stats-end" stroke-width="2"/></svg>`;
+}
+
+/** This week's edits, a bar a day, today's in the accent, a day to come a stub. @param {Array<number | null>} values @param {number} today @param {{ width: number, height: number }} size */
+function barsOf(values, today, { width, height }) {
+  const most = Math.max(1, ...values.filter((value) => value !== null));
+  const bar = Math.min(12, (width - 30) / 7);
+  const gap = (width - 7 * bar) / 6;
+  const none = values.every((value) => !value);
+  let drawn = "";
+  values.forEach((value, index) => {
+    const x = index * (bar + gap);
+    if (value === null || none) return void (drawn += `<rect x="${x}" y="${height - 2}" width="${bar}" height="2" rx="1" class="gallery-stats-stub"/>`);
+    const tall = Math.max(3, (value / most) * height);
+    drawn += `<path d="M${x} ${height}V${height - tall + 3}a3 3 0 0 1 3-3h${bar - 6}a3 3 0 0 1 3 3V${height}Z" class="gallery-stats-${index === today ? "today" : "day"}"/>`;
+  });
+  return `<svg width="${width}" height="${height}" aria-hidden="true">${drawn}</svg>`;
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @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-stats-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/stats",
+  on: ["data", "clock", "layout"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const grid = made("dl", "grid");
+    const line = made("p", "line");
+    line.hidden = true;
+    face.append(grid, line);
+    host.append(face);
+    const workspace = context.workspace;
+    if (!workspace) return void context.fail(new Error("its manifest's needs hold \"workspace\": context.workspace is not there"));
+    /** @type {Parameters<typeof cellsOf>[0]} */
+    let stats = null;
+    /** @type {Array<{ date: string, edits: number, words: number }>} */
+    let days = [];
+    let drawnKey = "";
+    // The cells, each its label over its number, its picture and its line, drawn again only when what they say is another.
+    const draw = () => {
+      const size = context.size;
+      const layout = !size ? "row" : size.w >= 12 ? "wide" : size.w <= 4 ? "square" : "row";
+      face.dataset.layout = layout;
+      face.toggleAttribute("data-unread", !stats);
+      const now = new Date();
+      const trend = stats ? trendOf(days, stats.words, now) : null;
+      const cells = cellsOf(stats, trend, language);
+      const key = JSON.stringify([layout, cells, trend, dayOf(now)]);
+      if (key === drawnKey) return;
+      drawnKey = key;
+      const sizes = SIZES[/** @type {keyof typeof SIZES} */ (layout)];
+      grid.replaceChildren(...cells.map(({ key: kind, label, value, unit, of, caption }) => {
+        const cell = made("div", "cell");
+        cell.dataset.stat = kind;
+        const name = made("dt", "label");
+        name.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[/** @type {keyof typeof ICONS} */ (kind)]}</svg>`;
+        name.append(made("span", "label-words", label));
+        const number = made("dd", "value");
+        number.append(made("span", "number", value));
+        if (unit) number.append(made("span", "unit", unit));
+        if (of) number.append(made("span", "of", of));
+        const picture = made("dd", "picture");
+        if (stats && trend) {
+          if (kind === "documents") picture.innerHTML = squares(stats.documents, stats.editedThisWeek, sizes);
+          if (kind === "words") picture.innerHTML = curveOf(trend.curve, sizes);
+          if (kind === "todos") {
+            const bar = made("span", "bar");
+            const fill = made("span", "fill");
+            fill.style.width = `${stats.todos.total > 0 ? (100 * stats.todos.done) / stats.todos.total : 0}%`;
+            bar.append(fill);
+            picture.append(bar);
+          }
+          if (kind === "week") picture.innerHTML = barsOf(trend.week, (now.getDay() + 6) % 7, sizes);
+        }
+        const foot = made("dd", "caption");
+        if (kind === "documents" && stats && stats.documents > 0) foot.append(made("i", "mark"));
+        const [before, bold, after_] = caption;
+        if (before) foot.append(before);
+        if (bold) foot.append(made("b", "strong", bold));
+        if (after_) foot.append(after_);
+        if (!stats) foot.textContent = " ";
+        cell.append(name, number, picture, foot);
+        return cell;
+      }));
+    };
+    let asking = 0; // the last read asked: an older answer that comes after it is dropped
+    const read = () => {
+      const ticket = ++asking;
+      const record = workspace.query("activity", { days: DAYS }).then(({ data }) => data, () => []);
+      workspace.query("stats").then(async ({ data }) => {
+        const kept = await record;
+        if (ticket !== asking || context.signal.aborted) return;
+        line.hidden = true;
+        stats = data;
+        days = Array.isArray(kept) ? kept : [];
+        draw();
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        stats = null;
+        days = [];
+        draw();
+        line.hidden = false;
+        line.textContent = error?.code === "offline" ? words.offline : words.failed;
+      });
+    };
+    draw();
+    read();
+    return {
+      update(reason, detail) {
+        if ((reason === "data" && (detail === "stats" || detail === "activity")) || (reason === "clock" && detail === "day")) read();
+        else if (reason === "layout") draw();
+      },
+    };
+  },
+});

package/packs/gallery/stats/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="#f3f3f1"/><rect x="10.5" y="30.5" width="219" height="59" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="18" y="38" width="22" height="4" rx="2" fill="#a6a5a1"/><rect x="18" y="46" width="18" height="11" rx="3" fill="#1d1d1b"/><line x1="68" x2="68" y1="38" y2="82" stroke="#efefed"/><rect x="72" y="38" width="22" height="4" rx="2" fill="#a6a5a1"/><rect x="72" y="46" width="18" height="11" rx="3" fill="#1d1d1b"/><line x1="122" x2="122" y1="38" y2="82" stroke="#efefed"/><rect x="126" y="38" width="22" height="4" rx="2" fill="#a6a5a1"/><rect x="126" y="46" width="18" height="11" rx="3" fill="#1d1d1b"/><line x1="176" x2="176" y1="38" y2="82" stroke="#efefed"/><rect x="180" y="38" width="22" height="4" rx="2" fill="#a6a5a1"/><rect x="180" y="46" width="18" height="11" rx="3" fill="#1d1d1b"/><rect x="18" y="66" width="4" height="4" rx="1" fill="#4084cf"/><rect x="24" y="66" width="4" height="4" rx="1" fill="#4084cf"/><rect x="30" y="66" width="4" height="4" rx="1" fill="#4084cf"/><rect x="36" y="66" width="4" height="4" rx="1" fill="#4084cf"/><rect x="42" y="66" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="48" y="66" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="18" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="24" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="30" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="36" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="42" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><rect x="48" y="72" width="4" height="4" rx="1" fill="#e7e7e5"/><path d="M72 80l8-3 8 1 8-4 8-1 8-5" fill="none" stroke="#4084cf" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="126" y="74" width="40" height="4" rx="2" fill="#e7e7e5"/><rect x="126" y="74" width="28" height="4" rx="2" fill="#4084cf"/><rect x="180" y="72" width="6" height="10" rx="3" fill="#b0cbeb"/><rect x="189" y="76" width="6" height="6" rx="3" fill="#b0cbeb"/><rect x="198" y="73" width="6" height="9" rx="3" fill="#b0cbeb"/><rect x="207" y="79" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="214" y="81" width="5" height="1.5" rx="0.75" fill="#e7e7e5"/><rect x="221" y="81" width="5" height="1.5" rx="0.75" fill="#e7e7e5"/><rect x="228" y="81" width="5" height="1.5" rx="0.75" fill="#e7e7e5"/></svg>

package/packs/gallery/stats/style.css

@@ -0,0 +1,73 @@
+/* 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 pack's design B, in the kit's card tokens: no head, four cells, each
+   its label after a small picture of what it counts (12px, muted; the picture faint), its number (28px,
+   32px on a wide card) with its unit or its whole after it, its picture at the bottom (the documents'
+   squares, the words' line and the area fading under it, the to-dos' bar, the week's bars: the accent and
+   its middle shade, on the track) and a faint line under it, its key words 600. In a row (8 × 2, 12 × 2)
+   the cells stand a hairline apart, the face out over the card's padding at its sides so that each cell has
+   the card's own 16px; two by two (4 × 4) the face fills the card, each cell padded 16px, lined between
+   them. Unread (no workspace) a faint dash each and a line at the bottom left. Light and dark. */
+[data-doc-component="gallery/stats"] {
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-stats-face { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
+  > .gallery-stats-face > .gallery-stats-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 0; margin: 0; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell { display: flex; flex-direction: column; min-width: 0; padding: 0 16px; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-unread] > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left-color: transparent; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > dd { margin: 0; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label { display: flex; align-items: center; gap: 6px; padding-inline-end: 0; font-size: 12px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label > svg { flex: none; width: 13px; height: 13px; color: var(--gallery-faint); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label > .gallery-stats-label-words { overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { display: flex; align-items: baseline; margin-top: 7px; white-space: nowrap; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number {
+    font-size: 28px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-stats-face[data-unread] > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number { font-weight: 300; color: var(--gallery-faintest); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-of { margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--gallery-faint); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-picture { margin-top: auto; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-picture > svg { display: block; overflow: visible; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption > .gallery-stats-mark { flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--gallery-accent); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption > .gallery-stats-strong { font-weight: 600; color: var(--gallery-muted); }
+  /* The pictures' colors. */
+  > .gallery-stats-face .gallery-stats-on { fill: var(--gallery-accent); }
+  > .gallery-stats-face :is(.gallery-stats-off, .gallery-stats-stub) { fill: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-empty { fill: var(--gallery-fill); }
+  > .gallery-stats-face .gallery-stats-flat { stroke: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-line { stroke: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-stop { stop-color: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-end { fill: var(--gallery-accent); stroke: var(--gallery-card-fill); }
+  > .gallery-stats-face .gallery-stats-today { fill: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-day { fill: var(--gallery-accent-mid); }
+  > .gallery-stats-face .gallery-stats-bar { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-bar > .gallery-stats-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gallery-accent); }
+  /* Unread: a line at the bottom left. */
+  > .gallery-stats-face > .gallery-stats-line { position: absolute; left: 16px; bottom: 0; margin: 0; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); }
+  > .gallery-stats-face > .gallery-stats-line[hidden] { display: none; }
+  /* A wide card: the numbers larger. */
+  > .gallery-stats-face[data-layout="wide"] > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number { font-size: 32px; }
+  /* A square card: two by two. */
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell { padding: 16px; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left: 0; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell:nth-child(2n) { border-left: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell:nth-child(n + 3) { border-top: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-layout="square"][data-unread] > .gallery-stats-grid > .gallery-stats-cell { border-color: transparent; }
+  > .gallery-stats-face[data-layout="square"] .gallery-stats-bar { height: 8px; border-radius: 4px; }
+  > .gallery-stats-face[data-layout="square"] .gallery-stats-bar > .gallery-stats-fill { border-radius: 4px; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-line { bottom: 16px; }
+}
+/* On a custom page the face is the card's: out over its padding at its sides (all round when square), so
+   that each cell has the card's own room. */
+.gallery-card > [data-doc-component="gallery/stats"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/stats"] > .gallery-stats-face { height: 100%; margin: 0 calc(-1 * var(--gallery-card-pad)); }
+.gallery-card > [data-doc-component="gallery/stats"] > .gallery-stats-face[data-layout="square"] { height: calc(100% + 2 * var(--gallery-card-pad)); margin: calc(-1 * var(--gallery-card-pad)); }

package/packs/gallery/stats/template.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/stats"></div>

package/packs/gallery/stats/writing.md

@@ -0,0 +1,11 @@
+# 工作区统计 (gallery/stats)
+
+A card for a custom page (its places are `page`, its needs `workspace`): four numbers of the workspace, its documents (文档), its to-dos done of all (待办完成, 3/12), the words of all its documents (总字数) and how many documents were edited this week, since Monday (本周编辑). Use it on the home page.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add stats`: the instance is empty, `<div data-doc-component="gallery/stats"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes. Sizes: 8 × 2 (the default: the four in a row), 12 × 2 (the same, larger) and 4 × 4 (two by two).
+
+## How it looks
+
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. It has no head: the four labels are its titles, each after a small picture of what it counts, four cells a hairline apart (two by two on a 4 × 4 card), each a number (28px) and a small chart of its own: the documents a square each, those edited this week in the accent; the words a line of their total over the last 30 days and what those days added (近 30 天 +6万); the to-dos done a bar (70% · 还剩 8 项); the edits this week a bar a day, today's in the accent, against the same days of the week before (比上周同期 +14%). An empty workspace says 0 and what each waits for; where the workspace cannot be read, a dash each.

package/packs/gallery/today/component.json

@@ -0,0 +1,12 @@
+{
+  "id": "gallery/today",
+  "apiVersion": 1,
+  "version": "2.0.0",
+  "name": { "zh": "问候与日期", "en": "Greeting and date" },
+  "description": { "zh": "按时间问候，显示今天的日期和星期，到点自己更新", "en": "A greeting by the time of day, today's date and weekday, kept up to date by the clock" },
+  "words": "wenhouyuriqi wenhou riqi xingqi jintian today greeting date 问候 日期 星期 今天 时间",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-today-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 1]], "resize": true }
+}

package/packs/gallery/today/example.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/today"></div>