@heycys/gallery 0.1.1 → 0.1.2

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>

package/packs/gallery/habit/style.css

@@ -0,0 +1,246 @@
+/* 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, laid out as a grid: its head (the chip, the name, the days in all as its quiet
+   meta at the right, its end clear of the card's grip); the streak, its label small and muted over its
+   count, large, its unit after it, with the button at its right; the last seven days at the bottom, each
+   a dot over its weekday (today's 今), a day done filled with the accent and ticked, an open one the
+   track's gray, today ringed in the accent. Where the card has the room (past 300px wide and 130px high:
+   a 4 x 2 card from a window 1440px wide) the last 30 days as a ring at the left of the streak and the week, the
+   days done of them in its middle. The button is a primary one, pale blue with no line ("打卡"); once
+   today is done a pale green "✓ 已打卡" that a press takes back; where nothing is written, a plain muted
+   line. Low (under 124px), the streak's label goes; a narrow card (2 x 2) leaves the week out and puts
+   the button under the streak, as wide as its words. Never checked in (data-fresh): no streak and no
+   ring, a muted line where the streak stands. Light and dark. */
+[data-doc-component="gallery/habit"] {
+  container-type: size;
+  height: 10em;
+  > .gallery-habit-face {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: "head head" "streak press" "week week";
+    align-items: center;
+    gap: 8px 12px;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+    font-size: 14px;
+    line-height: 1.4;
+  }
+  > .gallery-habit-face > .gallery-habit-head {
+    grid-area: head;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-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-habit-face > .gallery-habit-head > .gallery-habit-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    width: 0;
+    margin: 0 0 0 -6px;
+    padding: 3px 6px;
+    border: 0;
+    border-radius: 6px;
+    outline: 0;
+    background: transparent;
+    font: inherit;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+    text-overflow: ellipsis;
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name::placeholder { color: var(--doc-muted); font-weight: 500; opacity: .8; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):hover,
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus { background: var(--doc-hover); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:read-only { cursor: default; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total {
+    flex: none;
+    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
+    font-size: var(--gallery-meta-size);
+    line-height: var(--gallery-title-line);
+    color: var(--doc-muted);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-habit-face > .gallery-habit-check {
+    grid-area: press;
+    justify-self: end;
+    align-self: center;
+    padding: 5px 14px;
+    border: 0;
+    border-radius: 8px;
+    background: var(--gallery-accent-soft);
+    font: inherit;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 500;
+    color: var(--gallery-accent);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  > .gallery-habit-face > .gallery-habit-check:hover { background: color-mix(in srgb, var(--gallery-accent) 15%, transparent); }
+  > .gallery-habit-face > .gallery-habit-check:active { background: color-mix(in srgb, var(--gallery-accent) 21%, transparent); }
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done { background: var(--gallery-good-soft); color: var(--gallery-good); }
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:hover { background: color-mix(in srgb, var(--gallery-good) 16%, transparent); }
+  /* Nothing to press (an export, a page that takes no edits): a line saying how today stands. */
+  > .gallery-habit-face > .gallery-habit-check:disabled,
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:disabled {
+    padding-inline: 0;
+    background: transparent;
+    font-weight: 400;
+    color: var(--doc-muted);
+    cursor: default;
+  }
+  /* The streak: its label over its count, the count large, its unit small and muted after it. */
+  > .gallery-habit-face > .gallery-habit-streak {
+    grid-area: streak;
+    align-self: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    min-width: 0;
+    margin: 0;
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label {
+    flex: 0 0 100%;
+    margin-bottom: 2px;
+    font-size: var(--gallery-meta-size);
+    line-height: 16px;
+    color: var(--doc-muted);
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-count {
+    font-size: clamp(28px, 100cqh - 100px, var(--gallery-hero-size)); /* the hero, a little less on a card too low for it beside the week */
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-unit {
+    margin-inline-start: var(--gallery-unit-gap);
+    font-size: max(12px, calc(var(--gallery-hero-size) * .4)); /* the hero's unit (--gallery-unit-size of it) */
+    font-weight: 500;
+    color: var(--doc-muted);
+  }
+  /* Never checked in: a muted line where the streak stands. */
+  > .gallery-habit-face > .gallery-habit-fresh { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-streak { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-fresh {
+    grid-area: streak;
+    align-self: center;
+    display: block;
+    min-width: 0;
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--doc-muted);
+  }
+  /* The last 30 days: a ring of the accent on the track, the days done in its middle over its label. */
+  > .gallery-habit-face > .gallery-habit-ring {
+    grid-area: ring;
+    display: none;
+    position: relative;
+    width: clamp(76px, calc(100cqh - 52px), 128px);
+    aspect-ratio: 1;
+    align-self: center;
+  }
+  > .gallery-habit-face > .gallery-habit-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+  > .gallery-habit-face > .gallery-habit-ring > svg > circle { fill: none; stroke-width: 9; }
+  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-track { stroke: var(--gallery-track); }
+  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-arc {
+    stroke: var(--gallery-accent);
+    stroke-linecap: round;
+    stroke-dasharray: calc(var(--gallery-habit-share, 0) * 100) 100;
+  }
+  > .gallery-habit-face > .gallery-habit-ring[data-none] > svg > .gallery-habit-arc { display: none; }
+  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate {
+    position: relative;
+    font-size: clamp(20px, 7cqi, 28px);
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate-label {
+    position: relative;
+    margin-top: 4px;
+    font-size: 11px;
+    line-height: 14px;
+    color: var(--doc-muted);
+    text-align: center;
+  }
+  > .gallery-habit-face > .gallery-habit-week {
+    grid-area: week;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--doc-muted);
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day > .gallery-habit-dot {
+    box-sizing: border-box;
+    width: clamp(18px, 6.4cqi, 26px);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--gallery-track);
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-kept > .gallery-habit-dot {
+    background: var(--gallery-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today { color: var(--gallery-accent); font-weight: 600; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today:not(.gallery-habit-kept) > .gallery-habit-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); }
+}
+/* Room for the ring: at the left of the streak and the week, the dots no wider than they need. */
+@container (min-width: 300px) and (min-height: 130px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas: "head head head" "ring streak press" "ring week week";
+    column-gap: 20px;
+  }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week { align-self: end; }
+  /* Never checked in: no ring, the line and the week from the card's left. */
+  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "streak press" "week week"; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] > .gallery-habit-ring { display: none; }
+}
+/* Low: the count alone, no label over it. */
+@container (max-height: 124px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label { display: none; }
+}
+/* A narrow card: the head, the streak, the button under it at its start, as wide as its words, the two in the middle of the room under the head; no week, no days in all. */
+@container (max-width: 220px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto 1fr; grid-template-areas: "head" "." "streak" "press" "."; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-check { justify-self: start; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week,
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total { display: none; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. */
+.gallery-card > [data-doc-component="gallery/habit"] { height: 100%; }

package/packs/gallery/habit/template.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/habit">
+  <script type="application/json">{"name":"","days":[]}</script>
+</div>

package/packs/gallery/habit/writing.md

@@ -0,0 +1,21 @@
+# 习惯打卡 (gallery/habit)
+
+A card for a custom page (its places are `page`): one habit, checked in once a day. It shows the habit's name, how many days in a row it was done (up to today, or up to yesterday while today is not checked yet), how many days in all, and the last seven days as dots. Use it for something the user means to do every day. For a habit counted otherwise (glasses of water in a day, minutes, a goal a week), start a block of your own from it: `gallery block new <scope>/<name> --recipe habit` copies its files, which are written to be read and changed.
+
+## 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 habit`, the instance as template.html has it: its data part `habit`, a `<script type="application/json">`, holding `{"name":"…","days":[]}` (on one line and compact, as the block writes it back):
+
+- `name`: the habit, a few words (每天读书半小时); `""` shows 给习惯起个名字, and the user names it on the card.
+- `days`: the days it was done, each `YYYY-MM-DD` by the user's clock, in order, each once. Leave the days of a card that is there alone: they are the user's record.
+
+Sizes: 4 × 2 (the default: the name, the streak and the button, the week, and where the window is wide enough the last 30 days as a ring) and 2 × 2 (the name, the streak, the button under it).
+
+## What the user does
+
+- presses 打卡: today goes in `days`; pressed again (✓ 已打卡), today comes out. Each press is one write, one step of the page's undo.
+- clicks the name and types another: written as they press Enter or leave the field (never while a Chinese input method composes); Esc puts back the name there was.
+
+## How it looks
+
+The name beside a flame's chip on the top line, the days in all at its end; the streak under it, 连续打卡 over its count, large, with the button at its right (打卡, pale blue; once done a pale green ✓ 已打卡 that a press takes back), the week at the bottom, a day done a dot filled with the accent and ticked, today ringed and named 今; on a card with the room for it, the last 30 days as a ring at the left, the days done of them in its middle; 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. It moves to the next day by itself at midnight (it hears the kit's clock). A habit never checked in shows neither the streak nor the ring but a muted line, 还没打过卡，今天开始第 1 天, until its first check-in. Where nothing can be written (an export) the button is a line saying whether today is done. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/heatmap/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/heatmap",
+  "apiVersion": 1,
+  "version": "1.3.0",
+  "name": { "zh": "编辑热力图", "en": "Editing heatmap" },
+  "description": { "zh": "过去一年每天编辑了几次或写了多少字，像 GitHub 的贡献图", "en": "How often, or how many words, the workspace was edited each day of the past year, like GitHub's contribution graph" },
+  "words": "bianjireilitu reilitu heatmap activity contributions calendar 热力图 编辑 贡献 日历 字数 每天",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-heatmap-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[8, 3], [12, 3], [4, 3]], "resize": true },
+  "settings": [
+    { "key": "words", "label": { "zh": "按字数显示", "en": "Show words, not edits" }, "type": "switch", "default": false }
+  ],
+  "needs": ["workspace"]
+}

package/packs/gallery/heatmap/example.html

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