@heycys/gallery 0.1.1 → 0.1.2

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 a table's menu, 视图 › 图表, which writes the key on both; it is not in "/", as a chart needs its table. Its ⚙ (where the page edits) changes its settings.
+
+## 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": "1.3.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,156 @@
+// 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. A
+// date it cannot read, or none, asks for one; the words are the page's language (the UI's where Gallery
+// says it, else the page's lang). Its head is the cards' (the kit's card tokens): the chip, an hourglass,
+// before the day's name alone (春节, or 倒计时 where it has none), on one line; under it the count's label
+// (还有, 已经过去) over the count, large, and its unit, the family's label over a number; 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: "右上角手柄 › 设置…",
+    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    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 date",
+    where: "The grip at the top right › Settings…",
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][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, and
+ * its foot, a list of words a line breaks between and never inside (the date, its weekday).
+ * @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: words.pick, foot: [words.where] };
+  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 };
+  return { head, label: count.kind === "left" ? words.left : words.since, count: words.days(count.days), unit: words.unit(count.days), big: "", foot };
+}
+
+/**
+ * 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"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const face = made("div", "face");
+    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 7h11M6.5 17h11M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zM6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/></svg>';
+    const named = made("span", "name");
+    head.append(chip, named);
+    const label = made("p", "label");
+    const middle = made("p", "count");
+    const foot = made("p", "foot");
+    face.append(head, label, middle, foot);
+    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);
+      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 unit = made("span", "unit");
+        unit.textContent = now.unit;
+        middle.replaceChildren(now.count, unit);
+      }
+      foot.replaceChildren(...now.foot.flatMap((words, index) => {
+        const piece = made("span", "piece");
+        piece.textContent = words;
+        return index === 0 ? [piece] : [" ", piece];
+      }));
+    };
+    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="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 7h11M6.5 17h11M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zM6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/></g><rect x="50" y="28" width="24" height="6" rx="3" fill="#3b3a37"/><rect x="30" y="49" width="16" height="5" rx="2.5" fill="#c4c2bd"/><text x="28" y="84" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="34" font-weight="600" letter-spacing="-.5" fill="#3b3a37">89</text><rect x="72" y="74" width="11" height="9" rx="2.5" fill="#c4c2bd"/><rect x="30" y="93" width="82" height="5" rx="2.5" fill="#c4c2bd"/></svg>

package/packs/gallery/countdown/style.css

@@ -0,0 +1,130 @@
+/* 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 face fills its card on a custom page (the board draws the frame), in
+   the kit's card tokens: its head at the top (the chip, then the day's name on one line, cut with an
+   ellipsis, its end clear of the card's grip), the count's label small and muted over the count, large
+   (the cards' hero size), its unit small and muted after it, the two in the middle of the room between the
+   head and the date, which is muted at the bottom. On the day itself the words stand in the accent. With
+   no date yet, the cards' empty face: a quiet picture (a calendar) in a soft disc over a muted line, where
+   to set one under it, in the middle of the room under the head. Light and dark. */
+[data-doc-component="gallery/countdown"] {
+  container-type: inline-size;
+  > .gallery-countdown-face {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 6px;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+  }
+  > .gallery-countdown-face > p { margin: 0; }
+  > .gallery-countdown-face > .gallery-countdown-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-countdown-face > .gallery-countdown-head > .gallery-countdown-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent);
+  }
+  > .gallery-countdown-face > .gallery-countdown-head > .gallery-countdown-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-countdown-face > .gallery-countdown-head > .gallery-countdown-name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* The count's label over it, the two in the middle of the room between the head and the date. */
+  > .gallery-countdown-face > .gallery-countdown-label {
+    margin-top: auto;
+    font-size: var(--gallery-meta-size);
+    line-height: 16px;
+    color: var(--doc-muted);
+  }
+  > .gallery-countdown-face > .gallery-countdown-label:empty { display: none; }
+  > .gallery-countdown-face > .gallery-countdown-label:empty + .gallery-countdown-count { margin-top: auto; }
+  > .gallery-countdown-face > .gallery-countdown-count {
+    margin-top: -4px;
+    font-size: var(--gallery-hero-size);
+    line-height: 1.1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  > .gallery-countdown-face > .gallery-countdown-count > .gallery-countdown-unit {
+    margin-inline-start: var(--gallery-unit-gap);
+    font-size: max(12px, var(--gallery-unit-size));
+    font-weight: 500;
+    letter-spacing: 0;
+    color: var(--doc-muted);
+  }
+  /* Today, or no date yet: words where the count stands, smaller; the day itself in the accent. */
+  > .gallery-countdown-face > .gallery-countdown-count.gallery-countdown-words {
+    font-size: min(var(--gallery-figure-size), 13cqi);
+    line-height: 1.2;
+    letter-spacing: -.01em;
+    white-space: normal;
+  }
+  > .gallery-countdown-face[data-kind="today"] > .gallery-countdown-count { color: var(--gallery-accent); }
+  /* No date yet: the cards' empty face (as todos' and recent's), the line and where to set it in the middle. */
+  > .gallery-countdown-face[data-kind="none"] { justify-content: flex-start; }
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    font-size: 13px;
+    line-height: 1.45;
+    font-weight: 400;
+    letter-spacing: 0;
+    color: var(--doc-muted);
+    text-align: center;
+  }
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count::before {
+    content: "";
+    flex: none;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 2px;
+    background: currentColor;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-foot { margin-top: 0; margin-bottom: auto; text-align: center; opacity: .8; }
+  > .gallery-countdown-face > .gallery-countdown-foot {
+    margin-top: auto;
+    font-size: var(--gallery-meta-size);
+    line-height: 1.45;
+    color: var(--doc-muted);
+  }
+  /* The date and its weekday break between them, never inside either. */
+  > .gallery-countdown-face > .gallery-countdown-foot > .gallery-countdown-piece { display: inline-block; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding, and a
+   container of that height too. A narrow card (two cells wide) shows the date alone, its weekday left
+   out, which would take a second line its two rows of cells have no room for; a low card's empty face
+   says where to set a date in its words alone, the picture over them left out. */
+.gallery-card > [data-doc-component="gallery/countdown"] { height: 100%; container-type: size; }
+@container (max-width: 180px) {
+  [data-doc-component="gallery/countdown"] > .gallery-countdown-face:not([data-kind="none"]) > .gallery-countdown-foot > .gallery-countdown-piece ~ .gallery-countdown-piece { display: none; }
+}
+@container (max-height: 150px) {
+  [data-doc-component="gallery/countdown"] > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count::before { display: none; }
+}

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.
+
+## How it looks
+
+The day's name at the top beside an hourglass's chip, on one line (春节; 倒计时 where it has none), under it 还有 (or 已经过去) over the count of days, large, and the date with its weekday at the bottom, muted; on the day itself 就是今天 in the accent; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark. The count moves by itself at midnight (it hears the kit's clock). The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/habit/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery/habit",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "习惯打卡", "en": "Habit tracker" },
+  "description": { "zh": "每天打一次卡，显示连续了几天和最近一周，名字在卡片上直接改", "en": "A check-in a day, the streak and the last seven days; 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]], "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>