@heycys/gallery 0.1.0 → 0.1.2

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>

package/packs/gallery/habit/kit.js

@@ -0,0 +1,295 @@
+// gallery/habit (习惯打卡): one habit, checked in once a day. Its data part, a script of JSON, holds the
+// habit's name and the days it was done, each YYYY-MM-DD by the reader's clock, in order:
+// { "name": "喝八杯水", "days": ["2026-11-05", "2026-11-06"] }. The card draws the name in a field of its
+// own (DocKit.input: written as the reader presses Enter or leaves it, never while an input method
+// composes), the streak (the days in a row up to today, or up to yesterday while today is not checked
+// yet, so that a streak lasts the day it is to be kept), how many days in all, the last seven days as
+// dots, where the card has room the last 30 days as a ring (`rateOf`: the days done of them in its
+// middle), and a button that checks today in, or takes today's check-in back when it is there. Each press
+// and each name is one context.editJSON, one undo step, the JSON written back on one line as it was:
+// what the reader does is in the file, and nothing else is (the streak and the dots are worked out as
+// it draws). It draws from the part on every `source` (an undo, an Agent's write) and again as a day
+// begins (the kit's `clock`, "day"), so that "today" moves at midnight. Where nothing takes its writes
+// (an export, a page that has not come to edit yet: context.canEdit() false) the name is read-only and
+// the button a plain line saying whether today is done. Its 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,
+// a flame for the streak, before the name, the days in all its quiet meta at the end; the streak is its
+// label (连续打卡) over its count, large, and its unit. A habit never checked in (no days at all) shows
+// neither the streak nor the ring, two zeros, but a muted line inviting the first (the face's data-fresh),
+// the week and the button as ever; they come back with the first check-in. Start a block of your own from
+// it with gallery block new <id> --recipe habit.
+
+const WORDS = {
+  zh: {
+    name: "给习惯起个名字",
+    check: "打卡",
+    checked: "已打卡",
+    undo: "再按一下，撤回今天的打卡",
+    todayDone: "今天已打卡",
+    todayOpen: "今天还没打卡",
+    streak: "连续打卡",
+    unit: () => "天",
+    total: (/** @type {number} */ days) => `共 ${days} 天`,
+    rate: "近 30 天",
+    fresh: "还没打过卡，今天开始第 1 天",
+    rateSaid: (/** @type {number} */ done) => `近 30 天打卡 ${done} 天`,
+    week: "最近七天",
+    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+    today: "今",
+    day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {boolean} */ done) => `${month}月${day}日${done ? "，已打卡" : "，没打卡"}`,
+  },
+  en: {
+    name: "Name this habit",
+    check: "Check in",
+    checked: "Done",
+    undo: "Press again to take today's check-in back",
+    todayDone: "Done today",
+    todayOpen: "Not done today",
+    streak: "Streak",
+    unit: (/** @type {number} */ days) => (days === 1 ? "day" : "days"),
+    total: (/** @type {number} */ days) => `${days} ${days === 1 ? "day" : "days"} in all`,
+    rate: "30 days",
+    fresh: "No check-ins yet: today can be day 1",
+    rateSaid: (/** @type {number} */ done) => `Done ${done} of the last 30 days`,
+    week: "The last seven days",
+    weekdays: ["S", "M", "T", "W", "T", "F", "S"],
+    today: "Today",
+    day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {boolean} */ done) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day}${done ? ", done" : ", not done"}`,
+  },
+};
+
+/** 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";
+}
+
+const DAY = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * A day of the reader's clock as the data writes it, YYYY-MM-DD.
+ * @param {Date} date
+ */
+function dayOf(date) {
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())}`;
+}
+
+/**
+ * The day `count` days after `day` (before it for a count below 0), both YYYY-MM-DD, by the calendar
+ * (counted in UTC, so that a change of the clocks changes nothing).
+ * @param {string} day
+ * @param {number} count
+ */
+function dayAfter(day, count) {
+  const [year, month, date] = day.split("-").map(Number);
+  const moved = new Date(Date.UTC(year, month - 1, date + count));
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  return `${moved.getUTCFullYear()}-${two(moved.getUTCMonth() + 1)}-${two(moved.getUTCDate())}`;
+}
+
+/**
+ * The habit `data` is (context.readJSON's, or the draft context.editJSON hands a change): its name ("" for
+ * none yet) and its days, as they stand; throws saying why it is none, and the block draws nothing over it.
+ * @param {any} data
+ * @returns {{ name: string, days: string[] }}
+ */
+function readHabit(data) {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) throw new Error("its data is no object: a habit holds { \"name\": \"…\", \"days\": [\"YYYY-MM-DD\", …] }");
+  const name = data.name ?? "";
+  if (typeof name !== "string") throw new Error("its name is no string");
+  const days = data.days ?? [];
+  if (!Array.isArray(days) || !days.every((day) => typeof day === "string" && DAY.test(day))) throw new Error("its days are no list of dates written YYYY-MM-DD");
+  return { name, days };
+}
+
+/**
+ * The days in a row that end today, or yesterday while today is not checked yet (a streak lasts the day
+ * it is to be kept); 0 when neither was done.
+ * @param {string[]} days
+ * @param {string} today
+ */
+function streakOf(days, today) {
+  const done = new Set(days);
+  let day = done.has(today) ? today : dayAfter(today, -1);
+  let count = 0;
+  while (done.has(day)) {
+    count += 1;
+    day = dayAfter(day, -1);
+  }
+  return count;
+}
+
+/**
+ * `days` with `today` checked in, or taken back where it was: in order, each once.
+ * @param {string[]} days
+ * @param {string} today
+ */
+function toggled(days, today) {
+  const done = new Set(days);
+  if (done.has(today)) done.delete(today);
+  else done.add(today);
+  return [...done].sort();
+}
+
+/**
+ * The seven days that end today, the oldest first: each its day (YYYY-MM-DD), its weekday (0 for
+ * Sunday) and whether it was done.
+ * @param {string[]} days
+ * @param {string} today
+ */
+function weekOf(days, today) {
+  const done = new Set(days);
+  return Array.from({ length: 7 }, (_, index) => {
+    const day = dayAfter(today, index - 6);
+    const [year, month, date] = day.split("-").map(Number);
+    return { day, weekday: new Date(Date.UTC(year, month - 1, date)).getUTCDay(), done: done.has(day) };
+  });
+}
+
+/**
+ * How many of the `span` days that end today were done (the ring's count: 30 days by default).
+ * @param {string[]} days
+ * @param {string} today
+ * @param {number} [span]
+ */
+function rateOf(days, today, span = 30) {
+  const first = dayAfter(today, 1 - span);
+  return new Set(days.filter((day) => day >= first && day <= today)).size;
+}
+
+/**
+ * Today checked in, or taken back: one write (context.editJSON), what a press of the button calls, and
+ * the example too. Whether it was taken.
+ * @param {DocComponentContext} context
+ * @param {string} today
+ */
+function pressToday(context, today) {
+  return context.editJSON("habit", (data) => {
+    data.days = toggled(readHabit(data).days, today);
+  });
+}
+
+/**
+ * The habit named `name`, one write (context.editJSON): what the name's field calls once the reader is
+ * done with it. Whether it was taken.
+ * @param {DocComponentContext} context
+ * @param {string} name
+ */
+function rename(context, name) {
+  return context.editJSON("habit", (data) => {
+    readHabit(data);
+    data.name = name.trim();
+  });
+}
+
+/**
+ * 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-habit-${kind}`;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/habit",
+  on: ["source", "editable", "clock"],
+  mount(host, context) {
+    const words = WORDS[languageOf(document.documentElement)];
+    const face = made("div", "face");
+    const head = made("div", "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="M12 10.9c2.3-3.3.2-7.8-1-8.9 0 3.4-2.2 5.3-3.7 6.7C5.9 10.1 5 12.3 5 14.3 5 18 8.1 21 12 21s7-3 7-6.7c0-1.7-1.2-4.4-2.3-5.6-2.1 3.4-3.3 3.4-4.7 2.2"/></svg>';
+    const name = made("input", "name");
+    name.type = "text";
+    name.placeholder = words.name;
+    name.spellcheck = false;
+    name.setAttribute("aria-label", words.name);
+    const total = made("span", "total");
+    head.append(chip, name, total);
+    const press = made("button", "check");
+    press.type = "button";
+    // The streak: its label over its count, the count large and its unit after it.
+    const streak = made("p", "streak");
+    const label = made("span", "label");
+    label.textContent = words.streak;
+    const count = made("strong", "count");
+    const unit = made("span", "unit");
+    streak.append(label, " ", count, " ", unit);
+    // The last 30 days as a ring, its count in the middle (shown where the card has room for it).
+    const ring = made("div", "ring");
+    ring.setAttribute("role", "img");
+    ring.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><circle class="gallery-habit-track" cx="50" cy="50" r="43"/><circle class="gallery-habit-arc" cx="50" cy="50" r="43" pathLength="100" transform="rotate(-90 50 50)"/></svg>';
+    const rate = made("span", "rate");
+    const rateLabel = made("span", "rate-label");
+    rateLabel.textContent = words.rate;
+    ring.append(rate, rateLabel);
+    const week = made("ol", "week");
+    week.setAttribute("aria-label", words.week);
+    // Never checked in: this line where the streak stands, no ring.
+    const fresh = made("p", "fresh");
+    fresh.textContent = words.fresh;
+    face.append(head, ring, streak, fresh, press, week);
+    host.append(face);
+    const named = DocKit.input(name, { signal: context.signal, commit: (value) => rename(context, value) });
+    press.addEventListener("click", () => {
+      if (context.canEdit()) pressToday(context, dayOf(new Date()));
+    }, { signal: context.signal });
+
+    const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
+      if (reason === "clock" && detail !== "day") return; // a minute moves no day
+      const data = context.readJSON("habit");
+      if (data === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      let habit;
+      try {
+        habit = readHabit(data);
+      } catch (error) {
+        return context.fail(error);
+      }
+      const today = dayOf(new Date());
+      const writes = context.canEdit();
+      const done = habit.days.includes(today);
+      name.readOnly = !writes;
+      named.set(habit.name);
+      // Where nothing is written, the button is a line saying how today stands: nothing to press.
+      press.disabled = !writes;
+      press.classList.toggle("gallery-habit-done", done);
+      press.textContent = writes ? (done ? `✓ ${words.checked}` : words.check) : (done ? words.todayDone : words.todayOpen);
+      press.title = writes && done ? words.undo : "";
+      press.setAttribute("aria-pressed", String(done));
+      face.toggleAttribute("data-fresh", habit.days.length === 0);
+      const days = streakOf(habit.days, today);
+      count.textContent = String(days);
+      unit.textContent = words.unit(days);
+      total.textContent = habit.days.length > 0 ? words.total(new Set(habit.days).size) : "";
+      const lately = rateOf(habit.days, today);
+      rate.textContent = String(lately);
+      ring.setAttribute("aria-label", words.rateSaid(lately));
+      ring.style.setProperty("--gallery-habit-share", String(lately / 30));
+      ring.toggleAttribute("data-none", lately === 0);
+      week.replaceChildren(...weekOf(habit.days, today).map(({ day, weekday, done: kept }) => {
+        const item = made("li", "day");
+        item.classList.toggle("gallery-habit-kept", kept);
+        item.classList.toggle("gallery-habit-today", day === today);
+        const [, month, date] = day.split("-").map(Number);
+        item.setAttribute("aria-label", words.day(month, date, kept));
+        item.title = words.day(month, date, kept);
+        const dot = made("span", "dot");
+        const label = made("span", "weekday");
+        label.textContent = day === today ? words.today : words.weekdays[weekday];
+        item.append(dot, label);
+        return item;
+      }));
+    };
+    draw();
+    return { update: draw };
+  },
+  example(host, context) {
+    pressToday(context, dayOf(new Date()));
+  },
+});

package/packs/gallery/habit/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="M12 10.9c2.3-3.3.2-7.8-1-8.9 0 3.4-2.2 5.3-3.7 6.7C5.9 10.1 5 12.3 5 14.3 5 18 8.1 21 12 21s7-3 7-6.7c0-1.7-1.2-4.4-2.3-5.6-2.1 3.4-3.3 3.4-4.7 2.2"/></g><rect x="50" y="28" width="52" height="6" rx="3" fill="#3b3a37"/><rect x="180" y="29" width="26" height="4" rx="2" fill="#c4c2bd"/><circle cx="51" cy="76" r="19" fill="none" stroke="#ecebe8" stroke-width="4.5"/><circle cx="51" cy="76" r="19" fill="none" stroke="#2e7cd1" stroke-width="4.5" stroke-linecap="round" stroke-dasharray="95.5 119.4" transform="rotate(-90 51 76)"/><text x="51" y="79" text-anchor="middle" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#3b3a37">24</text><rect x="45" y="84" width="12" height="2.5" rx="1.25" fill="#c4c2bd"/><rect x="84" y="47" width="24" height="4" rx="2" fill="#c4c2bd"/><text x="83" y="69" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="18" font-weight="600" letter-spacing="-.5" fill="#3b3a37">6</text><rect x="96" y="63" width="9" height="4" rx="2" fill="#c4c2bd"/><rect x="172" y="51" width="38" height="15" rx="5" fill="#ebf2fa"/><rect x="183" y="56" width="16" height="5" rx="2.5" fill="#2e7cd1"/><circle cx="89" cy="86" r="5.5" fill="#2e7cd1"/><path d="M86.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="86.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="108" cy="86" r="5.5" fill="#ecebe8"/><rect x="105.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="127" cy="86" r="5.5" fill="#2e7cd1"/><path d="M124.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="124.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="146" cy="86" r="5.5" fill="#2e7cd1"/><path d="M143.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="143.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="165" cy="86" r="5.5" fill="#2e7cd1"/><path d="M162.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="162.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="184" cy="86" r="5.5" fill="#2e7cd1"/><path d="M181.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="181.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="203" cy="86" r="4.9" fill="none" stroke="#2e7cd1" stroke-width="1.2"/><rect x="200.5" y="95" width="5" height="2.5" rx="1.25" fill="#2e7cd1"/></svg>