@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/chart-view/style.css

@@ -0,0 +1,94 @@
+/* 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 (gallery/chart-card's look): its title, the
+   settings (⚙) at the right of its head while the page edits and the strip they open under it, then
+   horizontal bars from zero, each its name at its left and its value at its end, in the kit's first
+   series color, which follows the theme; laid out in percents of the card's width, so that a width
+   draws nothing again. A muted line where there is nothing to draw or more than it draws. */
+[data-doc-component="gallery/chart-view"] {
+  margin: var(--doc-component-gap) 0;
+  padding: 16px 20px 12px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-surface);
+  > .gallery-chart-view-face { color: var(--doc-text); }
+  > .gallery-chart-view-face > .gallery-chart-view-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 26px;
+    margin: 0 0 10px;
+    > .gallery-chart-view-title { flex: 1 1 auto; min-width: 0; font-size: var(--doc-card-title-font-size); line-height: var(--doc-card-title-line-height); font-weight: 600; letter-spacing: -.025em; }
+    > .gallery-chart-view-gear {
+      display: none;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      margin: 0 -8px 0 0;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--doc-muted);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity .12s;
+    }
+    > .gallery-chart-view-gear > svg { width: 16px; height: 16px; }
+    > .gallery-chart-view-gear:hover { background: var(--doc-hover); color: var(--doc-text); }
+    > .gallery-chart-view-gear[aria-expanded="true"] { background: var(--doc-press); color: var(--doc-text); opacity: 1; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-head.gallery-chart-view-untitled { margin-bottom: 2px; }
+  > .gallery-chart-view-face > .gallery-chart-view-head[hidden] { display: none; }
+  > .gallery-chart-view-face[data-writes] > .gallery-chart-view-head > .gallery-chart-view-gear { display: inline-flex; }
+  > .gallery-chart-view-face[data-writes]:hover > .gallery-chart-view-head > .gallery-chart-view-gear,
+  > .gallery-chart-view-face[data-writes]:focus-within > .gallery-chart-view-head > .gallery-chart-view-gear { opacity: 1; }
+  > .gallery-chart-view-face > .gallery-chart-view-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 14px;
+    margin: -4px 0 12px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--doc-hover);
+    font-size: 12px;
+    > .gallery-chart-view-setting { display: inline-flex; align-items: center; gap: 6px; color: var(--doc-muted); }
+    > .gallery-chart-view-setting[hidden] { display: none; }
+    > .gallery-chart-view-setting > select,
+    > .gallery-chart-view-setting > input {
+      box-sizing: border-box;
+      max-width: 180px;
+      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-chart-view-setting > select { border: 0; cursor: pointer; }
+    > .gallery-chart-view-setting > input { width: 160px; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-strip[hidden] { display: none; }
+  > .gallery-chart-view-face > .gallery-chart-view-bars {
+    display: grid;
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+    gap: 8px 12px;
+    align-items: center;
+    margin: 0 0 4px;
+    font-size: 13px;
+    line-height: 1.4;
+    > .gallery-chart-view-row { display: contents; }
+    > .gallery-chart-view-row > .gallery-chart-view-label { text-align: right; overflow-wrap: anywhere; color: var(--doc-text); }
+    > .gallery-chart-view-row > .gallery-chart-view-lane { position: relative; height: 18px; margin-right: 4.5em; }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-bar { position: absolute; top: 0; bottom: 0; min-width: 1px; border-radius: 3px; background: var(--doc-series-1); }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-bar[hidden] { display: none; }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-value { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+    &.gallery-chart-view-below > .gallery-chart-view-row > .gallery-chart-view-lane { margin-left: 4.5em; background: linear-gradient(var(--doc-grid), var(--doc-grid)) var(--gallery-chart-view-zero) 0 / 1px 100% no-repeat; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-bars[hidden] { display: none; }
+  > .gallery-chart-view-face > .gallery-chart-view-line { margin: 6px 0 2px; font-size: 13px; line-height: 1.5; color: var(--doc-muted); }
+  > .gallery-chart-view-face > .gallery-chart-view-line[hidden] { display: none; }
+}

package/packs/gallery/chart-view/template.html

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

package/packs/gallery/chart-view/writing.md

@@ -0,0 +1,22 @@
+# 图表 (gallery/chart-view)
+
+A bar chart of a table of the document: the rows counted, summed or averaged by a column (tasks by status, sales by region), or a bar for each row's number. It is a view of the table, drawn again as the table is typed in: the table holds the data, the chart never writes it. Use it beside a 看板 or a few 指标 over the same table. For a chart of numbers written for the chart alone, use 表格图表卡片 (gallery/chart-card), whose table is its own; for any other kind of chart, a chart of the document's (references/writing-html.md, "Figures and charts").
+
+## How to write it
+
+Write a table, then the chart, as example.html does (`gallery block show gallery/chart-view` 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, the first column naming each row. No merged cells.
+- the chart: `<div data-doc-component="gallery/chart-view" data-doc-from="<key>">`, the same key, holding its settings, one `<script type="application/json">` on one line, each optional:
+  - `by`: the column whose values are the bars, the rows grouped by it in the order they first say them. Left out, a column named like a status (状态, 阶段, status), else one whose words repeat; with none, a bar for each row (its first cell its name; at most 50);
+  - `op`: `"count"`, `"sum"` or `"average"` of each group's rows. Left out: `"sum"` where the table has a column of numbers, else `"count"`;
+  - `value`: the column of numbers summed, averaged, or drawn a bar a row. Left out: the first column of numbers;
+  - `title`: what it shows, with its unit. Left out, one is made (各状态的行数, 各区域的金额合计).
+
+  One table may have several views (a 看板, 指标, another chart), each with the same key.
+
+The reader adds a chart in Gallery from "/" (图表): it reads the nearest table above it, the key written on both; its menu's 设置… picks another table and changes its settings (so does its ⚙, where the page edits).
+
+## How it looks
+
+A framed card: its title, then horizontal bars from zero, each with its name and its value, in the kit's series color, which follows the theme. The bars are drawn by the block's script and are not in the file: where the block is not, and in a Markdown export, a reader has the table.

package/packs/gallery/countdown/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/countdown",
+  "apiVersion": 1,
+  "version": "2.0.0",
+  "name": { "zh": "倒计时", "en": "Countdown" },
+  "description": { "zh": "离某一天还有几天，到了那天说今天，过了说已经几天", "en": "How many days until a date: today on the day, and the days since after it" },
+  "words": "daojishi daoshu countdown days until 倒计时 倒数日 纪念日 日子",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-countdown-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[2, 2], [4, 2]], "resize": true },
+  "settings": [
+    { "key": "title", "label": { "zh": "名称", "en": "Name" }, "type": "text", "default": "" },
+    { "key": "date", "label": { "zh": "日期", "en": "Date" }, "type": "date", "required": true }
+  ]
+}

package/packs/gallery/countdown/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/countdown">
+  <script type="application/json">{"title":"春节","date":"2027-02-06"}</script>
+</div>

package/packs/gallery/countdown/kit.js

@@ -0,0 +1,216 @@
+// gallery/countdown (倒计时): the days between today, by the reader's clock, and the date its settings
+// name: how many are left before it, 就是今天 on the day itself, how many have gone since after it. Its two
+// settings, `title` (the name of the day) and `date` (YYYY-MM-DD), are the card's form (on a custom page
+// the grip at the card's top right › 设置…), kept in the data part `settings`, a script of JSON, which the
+// board writes and this block only reads: it writes nothing. Drawn from that part on every `source` (the
+// form, an Agent's write, an undo) and again as a day begins (the kit's `clock`, "day"), so that the count
+// moves at midnight. The words are the page's language (the UI's where Gallery says it, else the page's
+// lang). Its face (the pack's design B, in the kit's card tokens): a head of the chip, an hourglass, and
+// the day's name alone (春节, or 倒计时 where it has none), on one line; at the bottom the count's label
+// (还有, 已经过去) over the count, the hero, and its unit, and the date under them, faint (2027年2月6日 周六);
+// on the day, 就是今天 in the accent where the count stands. A card four cells wide (`data-layout` "wide",
+// by context.size, read again on `layout`) sets the month of the date beside it, a small calendar, Monday
+// first, the day itself the one solid square of the accent (`monthOf`). A date it cannot read, or none,
+// is the cards' empty face under the head: 选一个日子, and where to set one. Its face says by `data-kind`
+// which of left, today, since or none it shows.
+
+const WORDS = {
+  zh: {
+    left: "还有",
+    since: "已经过去",
+    today: "就是今天",
+    days: (/** @type {number} */ count) => `${count}`,
+    unit: () => "天",
+    countdown: "倒计时",
+    pick: "选一个日子",
+    where: "在卡片右上角的 设置… 里填日期",
+    whereShort: "在 设置… 里填日期",
+    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+    initials: ["一", "二", "三", "四", "五", "六", "日"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${year}年${month}月${day}日`, weekday],
+  },
+  en: {
+    left: "Days left",
+    since: "Days since",
+    today: "Today",
+    days: (/** @type {number} */ count) => `${count}`,
+    unit: (/** @type {number} */ count) => (count === 1 ? "day" : "days"),
+    countdown: "Countdown",
+    pick: "Pick a day",
+    where: "Set its date in Settings… at the card's top right",
+    whereShort: "Set its date in Settings…",
+    weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    initials: ["M", "T", "W", "T", "F", "S", "S"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day}, ${year}`],
+  },
+};
+
+/** 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 date written YYYY-MM-DD as { year, month, day }, or null for anything else (no such day too:
+ * 2027-02-30).
+ * @param {unknown} written
+ */
+function dateOf(written) {
+  const found = typeof written === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(written) : null;
+  if (!found) return null;
+  const [year, month, day] = found.slice(1).map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? { year, month, day } : null;
+}
+
+/**
+ * Where `now` (the reader's clock) stands to the date `written` (YYYY-MM-DD): { kind: "left", days }
+ * before it, { kind: "today", days: 0 } on it, { kind: "since", days } after it, by whole days of the
+ * calendar (counted in UTC from each day's date, so that a change of the clocks in between changes
+ * nothing); { kind: "none" } for a date it cannot read.
+ * @param {unknown} written
+ * @param {Date} now
+ * @returns {{ kind: "left" | "since" | "today", days: number } | { kind: "none" }}
+ */
+function countdownOf(written, now) {
+  const date = dateOf(written);
+  if (!date) return { kind: "none" };
+  const days = Math.round((Date.UTC(date.year, date.month - 1, date.day) - Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
+  if (days === 0) return { kind: "today", days: 0 };
+  return days > 0 ? { kind: "left", days } : { kind: "since", days: -days };
+}
+
+/**
+ * What the card says, in `language`, of its `settings` (context.readJSON's, {} where none is set yet)
+ * at `now`: its head (the day's name, or 倒计时), the count's label (还有, 已经过去; "" with no count), its
+ * count (null on the day and with no date; `big`, the words standing there instead: 就是今天), the count's
+ * unit, its foot, a list of words a line breaks between and never inside (the date, its weekday), and,
+ * with no date it can read, `empty`: what the empty face says (选一个日子, where to set one on a wide card
+ * and on a narrow one).
+ * @param {any} settings
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function faceOf(settings, now, language) {
+  const words = WORDS[language];
+  const date = dateOf(settings?.date);
+  const named = typeof settings?.title === "string" ? settings.title.trim() : "";
+  const count = countdownOf(settings?.date, now);
+  const head = named || words.countdown;
+  if (!date || count.kind === "none") return { head, label: "", count: null, unit: "", big: "", foot: [], empty: { title: words.pick, where: words.where, whereShort: words.whereShort } };
+  const weekday = words.weekdays[new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay()];
+  const foot = words.date(date.year, date.month, date.day, weekday);
+  if (count.kind === "today") return { head, label: "", count: null, unit: "", big: words.today, foot, empty: null };
+  return { head, label: count.kind === "left" ? words.left : words.since, count: words.days(count.days), unit: words.unit(count.days), big: "", foot, empty: null };
+}
+
+/**
+ * The month of `date` ({ year, month, day }) as the small calendar draws it, Monday first: its weeks, each
+ * seven days of the month (a number) or none before its first and after its last (null).
+ * @param {{ year: number, month: number }} date
+ */
+function monthOf(date) {
+  const first = (new Date(Date.UTC(date.year, date.month - 1, 1)).getUTCDay() + 6) % 7;
+  const length = new Date(Date.UTC(date.year, date.month, 0)).getUTCDate();
+  const cells = [...Array(first).fill(null), ...Array.from({ length }, (_, index) => index + 1)];
+  while (cells.length % 7) cells.push(null);
+  return Array.from({ length: cells.length / 7 }, (_, week) => cells.slice(week * 7, week * 7 + 7));
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ */
+function made(tag, kind) {
+  const node = document.createElement(tag);
+  node.className = `gallery-countdown-${kind}`;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/countdown",
+  on: ["source", "clock", "layout"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const main = made("div", "main");
+    const head = made("p", "head");
+    const chip = made("span", "chip");
+    chip.setAttribute("aria-hidden", "true");
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h11M6.5 20.5h11M7.5 3.5v2.2c0 2 1.3 3.6 3.2 4.4l1.3.6 1.3-.6c1.9-.8 3.2-2.4 3.2-4.4V3.5M7.5 20.5v-2.2c0-2 1.3-3.6 3.2-4.4l1.3-.6 1.3.6c1.9.8 3.2 2.4 3.2 4.4v2.2"/></svg>';
+    const named = made("span", "name");
+    head.append(chip, named);
+    const core = made("div", "core");
+    const label = made("p", "label");
+    const middle = made("p", "count");
+    const foot = made("p", "foot");
+    core.append(label, middle, foot);
+    // No date: the cards' empty face, what to do and where.
+    const empty = made("div", "empty");
+    const emptyTitle = made("p", "empty-title");
+    const emptyWhere = made("p", "empty-where");
+    empty.append(emptyTitle, emptyWhere);
+    main.append(head, core, empty);
+    // A wide card's month, beside the count: the calendar of the date, the day itself marked.
+    const month = made("div", "month");
+    month.setAttribute("aria-hidden", "true");
+    face.append(main, month);
+    host.append(face);
+    const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
+      if (reason === "clock" && detail !== "day") return; // a minute moves no count
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      if (settings === null || typeof settings !== "object" || Array.isArray(settings)) return context.fail(new Error("its settings are no object: { \"title\": \"…\", \"date\": \"YYYY-MM-DD\" }"));
+      const at = new Date();
+      const now = faceOf(settings, at, language);
+      const layout = context.size && context.size.w >= 4 ? "wide" : "narrow";
+      face.dataset.layout = layout;
+      face.dataset.kind = countdownOf(settings.date, at).kind;
+      named.textContent = now.head;
+      named.title = now.head;
+      label.textContent = now.label;
+      if (now.count === null) {
+        middle.classList.add("gallery-countdown-words");
+        middle.textContent = now.big;
+      } else {
+        middle.classList.remove("gallery-countdown-words");
+        const number = made("span", "number");
+        number.textContent = now.count;
+        const unit = made("span", "unit");
+        unit.textContent = now.unit;
+        middle.replaceChildren(number, unit);
+      }
+      foot.replaceChildren(...now.foot.flatMap((piece, index) => {
+        const node = made("span", "piece");
+        node.textContent = piece;
+        return index === 0 ? [node] : [" ", node];
+      }));
+      emptyTitle.textContent = now.empty?.title ?? "";
+      emptyWhere.textContent = now.empty ? (layout === "wide" ? now.empty.where : now.empty.whereShort) : "";
+      const date = dateOf(settings.date);
+      if (!date) return void month.replaceChildren();
+      const head = words.initials.map((initial, index) => {
+        const cell = made("span", "initial");
+        cell.classList.toggle("gallery-countdown-weekend", index >= 5);
+        cell.textContent = initial;
+        return cell;
+      });
+      const weeks = monthOf(date);
+      month.dataset.weeks = String(weeks.length);
+      month.replaceChildren(...head, ...weeks.flatMap((week) => week.map((day, index) => {
+        const cell = made("span", "day");
+        if (day === null) return cell;
+        cell.textContent = String(day);
+        cell.classList.toggle("gallery-countdown-weekend", index >= 5);
+        cell.classList.toggle("gallery-countdown-on", day === date.day);
+        return cell;
+      })));
+    };
+    draw();
+    return { update: draw };
+  },
+});

package/packs/gallery/countdown/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="72.5" y="12.5" width="95" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="82" y="22" width="10" height="10" rx="3" fill="#efefed"/><rect x="96" y="24.5" width="22" height="5" rx="2.5" fill="#37352f"/><rect x="82" y="44" width="14" height="4" rx="2" fill="#a6a5a1"/><rect x="82" y="54" width="30" height="24" rx="3" fill="#1d1d1b"/><rect x="115" y="72" width="7" height="6" rx="3" fill="#a6a5a1"/><rect x="82" y="88" width="52" height="4" rx="2" fill="#d4d3cf"/></svg>

package/packs/gallery/countdown/style.css

@@ -0,0 +1,118 @@
+/* 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: the head (the chip, an
+   hourglass, and the day's name, one line cut with an ellipsis, its end clear of the card's grip); at the
+   bottom the count's label (还有, 已经过去) over the count, the card's hero (44px, 48px on a wide card) and
+   its unit, and the date under them, faint; on the day, 就是今天 in the accent's ink where the count stands.
+   A wide card (data-layout "wide", four cells) sets the month of the date at its right, 126px, seven
+   columns Monday first, the weekend fainter, the day itself the one solid square of the accent (a month of
+   six weeks a little closer, so that it fits the card). No date: the cards' empty face under the head.
+   Light and dark. */
+[data-doc-component="gallery/countdown"] {
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-countdown-face { display: flex; gap: 16px; box-sizing: border-box; min-height: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 20px;
+    min-width: 0;
+    margin: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-chip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
+  }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text);
+  }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core { margin-top: auto; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > p { margin: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-label { font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-label:empty { display: none; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count { display: flex; align-items: baseline; margin: 3px 0 7px; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-number {
+    font-size: 44px;
+    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-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-words {
+    display: block;
+    margin: 2px 0 6px;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--gallery-accent-ink);
+  }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-foot { font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty { display: none; }
+  > .gallery-countdown-face[data-layout="wide"] > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-number { font-size: 48px; }
+
+  /* No date: the cards' empty face, under the head. */
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-main > .gallery-countdown-core,
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-month,
+  > .gallery-countdown-face[data-layout="wide"][data-kind="none"] > .gallery-countdown-month { display: none; }
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-main > .gallery-countdown-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    min-height: 0;
+  }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > p { margin: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > .gallery-countdown-empty-title { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > .gallery-countdown-empty-where { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+
+  /* The month, at a wide card's right. */
+  > .gallery-countdown-face > .gallery-countdown-month { display: none; }
+  > .gallery-countdown-face[data-layout="wide"] > .gallery-countdown-month {
+    display: grid;
+    flex: none;
+    align-self: flex-end;
+    grid-template-columns: repeat(7, 18px);
+    row-gap: 2px;
+    width: 126px;
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-countdown-face > .gallery-countdown-month > span {
+    display: grid;
+    place-items: center;
+    height: 16px;
+    border-radius: 5px;
+    font-size: 10.5px;
+    line-height: 1;
+    color: var(--gallery-muted);
+  }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-initial { font-size: 10px; color: var(--gallery-faint); }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-weekend { color: var(--gallery-faint); }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-on { background: var(--gallery-accent); color: #fff; font-weight: 600; }
+  > .gallery-countdown-face > .gallery-countdown-month[data-weeks="6"] { row-gap: 1px; }
+  > .gallery-countdown-face > .gallery-countdown-month[data-weeks="6"] > span { height: 14px; }
+}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/countdown"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/countdown"] > .gallery-countdown-face { height: 100%; }

package/packs/gallery/countdown/template.html

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

package/packs/gallery/countdown/writing.md

@@ -0,0 +1,22 @@
+# 倒计时 (gallery/countdown)
+
+A card for a custom page (its places are `page`): how many days are left until a date, 就是今天 on the day, and how many days have gone since after it. Use it for a day the user waits for or counts from (a holiday, a deadline, an anniversary).
+
+## Settings
+
+Its two settings are the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `title` | 名称 | text | the name of the day, as 春节 or 项目上线; left empty, the card says 还有 / 已经过去 alone |
+| `date` | 日期 | date | the day, `YYYY-MM-DD` |
+
+They are kept in its data part `settings`, a `<script type="application/json">`, as example.html does: `{"title":"春节","date":"2027-02-06"}` (on one line and compact, as the card's 设置… writes it back). Write them there when the user tells you the day, or `gallery page add <slug> gallery/countdown --set date=2027-02-06 --set title=春节` with the add; the date is the one setting it cannot show anything without (`required` in its manifest): ask the user for it when they did not say which day. `{}` (template.html, what a menu adds) is a card with no date yet, which asks for one (右上角手柄 › 设置…), and `gallery page check` notes it. The block reads them and writes nothing.
+
+## 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 countdown`, the instance as template.html has it, then its settings as above. Sizes: 2 × 2 (the default) and 4 × 2 (the month of the date beside the count, the day marked).
+
+## 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. Its head is an hourglass's chip and the day's name; at the bottom 还有 (or 已经过去) over the count of days, 44px, and the date faint under them (2027年2月6日 周六). On the day itself 就是今天 in the accent stands where the count was. A 4 × 2 card sets the month of the date at its right, Monday first, the day the one solid square of the accent. With no date it says 选一个日子 and where to set one.

package/packs/gallery/habit/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery/habit",
+  "apiVersion": 1,
+  "version": "2.0.0",
+  "name": { "zh": "习惯打卡", "en": "Habit tracker" },
+  "description": { "zh": "每天打一次卡，显示连续了几天和这一周，名字在卡片上直接改", "en": "A check-in a day, the streak and this week; the habit's name is edited on the card" },
+  "words": "xiguandaka xiguan daka habit streak checkin tracker 习惯 打卡 连续 坚持",
+  "parts": {
+    "habit": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-habit-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true }
+}

package/packs/gallery/habit/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/habit">
+  <script type="application/json">{"name":"每天读书半小时","days":["2026-10-30","2026-10-31","2026-11-02","2026-11-03","2026-11-04","2026-11-05","2026-11-06"]}</script>
+</div>