@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/habit/kit.js

@@ -0,0 +1,334 @@
+// 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, 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 days 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 face (the pack's design B, in the kit's card tokens), laid out by the card's cells (`data-layout`,
+// by context.size, read again on `layout`): "wide" (4 × 2, the default) a head of the chip, a flame in
+// its warm color, the name (the field) and the days in all after it (共 41 天), the streak, the hero, and
+// 天连续 after it, the button at its right (a pale blue 打卡, a pale green ✓ 已打卡 a press takes back),
+// and this week at the bottom, Monday to Sunday, seven circles (`weekOf`): a day done filled with the
+// accent and ticked, one not done a soft gray with its initial, today ringed in the accent (今), filled
+// and ringed twice once done, the days to come an outline; "narrow" (2 wide) the name alone at the top,
+// a flame and the streak, and the button as wide as the card at the bottom (the name shown as words of
+// up to two lines, the field over them unseen until a press or Tab brings it, so that a long name is
+// never cut to a few characters); "tall" (4 high) the head, the streak and the button, and the last five
+// weeks as a month (`monthOf`), Monday first, the days of the streak the accent's, the days done before
+// it its pale tint, the others bare, today ringed, the days to come an outline, with 最近五周 and how
+// many of them were done (打了 27 天) over it. A habit never
+// checked in (no days at all) says 还没打过卡 where the streak stands (the face's data-fresh), the chip
+// gray and no count of days, until 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} 天`,
+    fresh: ["还没打过卡", "今天开始第 1 天"],
+    weeks: "最近五周",
+    got: (/** @type {number} */ days) => ["打了 ", String(days), " 天"],
+    week: "这一周",
+    initials: ["日", "一", "二", "三", "四", "五", "六"],
+    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: "in a row",
+    unit: (/** @type {number} */ days) => (days === 1 ? "day" : "days"),
+    total: (/** @type {number} */ days) => `${days} ${days === 1 ? "day" : "days"} in all`,
+    fresh: ["No check-ins yet", "today can be day 1"],
+    weeks: "Last five weeks",
+    got: (/** @type {number} */ days) => ["", String(days), ` ${days === 1 ? "day" : "days"} done`],
+    week: "This week",
+    initials: ["S", "M", "T", "W", "T", "F", "S"],
+    today: "", // a week's circle is too small for "Today": its initial, ringed as 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 weekday of a day written YYYY-MM-DD, 0 for Sunday. @param {string} day */
+function weekdayOf(day) {
+  const [year, month, date] = day.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, date)).getUTCDay();
+}
+
+/**
+ * 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 days of the `weeks` weeks that end with the one `today` is in, Monday first, oldest first: each its
+ * day (YYYY-MM-DD), its weekday (0 for Sunday), whether it was done, whether it is today, one to come
+ * (after today) and one of the streak (`streak`: the days of streakOf, back from today or yesterday).
+ * @param {string[]} days
+ * @param {string} today
+ * @param {number} [weeks]
+ */
+function monthOf(days, today, weeks = 5) {
+  const done = new Set(days);
+  const streak = streakOf(days, today);
+  const last = done.has(today) ? today : dayAfter(today, -1);
+  const first = dayAfter(today, -((weekdayOf(today) + 6) % 7) - 7 * (weeks - 1));
+  return Array.from({ length: weeks * 7 }, (_, index) => {
+    const day = dayAfter(first, index);
+    return { day, weekday: weekdayOf(day), done: done.has(day), today: day === today, future: day > today, streak: day <= last && day > dayAfter(last, -streak) };
+  });
+}
+
+/**
+ * The week `today` is in, Monday to Sunday, as monthOf draws a day.
+ * @param {string[]} days
+ * @param {string} today
+ */
+const weekOf = (days, today) => monthOf(days, today, 1);
+
+/**
+ * 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;
+}
+
+const FLAME = '<path d="M12 20.8a6 6 0 0 0 6-6c0-3.6-2.4-5.6-3.6-8.6-.3-.8-1.3-1-1.8-.3-1.4 2-2 3.6-2 5-.9-.6-1.4-1.5-1.6-2.4-.1-.6-.9-.8-1.2-.2C6.9 9.6 6 11.4 6 14.8a6 6 0 0 0 6 6z"/>';
+const CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 12.5l4 4 9-9"/></svg>';
+
+DocKit.component({
+  id: "gallery/habit",
+  on: ["source", "editable", "clock", "layout"],
+  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">${FLAME}</svg>`;
+    const name = made("input", "name");
+    name.type = "text";
+    name.placeholder = words.name;
+    name.spellcheck = false;
+    name.setAttribute("aria-label", words.name);
+    // A narrow card's name as words of up to two lines over the field, which stays the one a press or Tab reaches (style.css).
+    const label = made("span", "label");
+    label.setAttribute("aria-hidden", "true");
+    const total = made("span", "total");
+    head.append(chip, name, label, total);
+    // The streak: its count large and its unit after it (a narrow card a flame before it), or, never
+    // checked in, a line inviting the first.
+    const row = made("div", "row");
+    const streak = made("p", "streak");
+    const flame = made("span", "flame");
+    flame.setAttribute("aria-hidden", "true");
+    flame.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${FLAME}</svg>`;
+    const count = made("strong", "count");
+    const unit = made("span", "unit");
+    streak.append(flame, count, unit);
+    const fresh = made("p", "fresh");
+    const press = made("button", "check");
+    press.type = "button";
+    row.append(streak, fresh, press);
+    // A tall card's five weeks: what they are and how many were done, over the month.
+    const caption = made("div", "caption");
+    const captionName = made("span", "caption-name");
+    captionName.textContent = words.weeks;
+    const captionCount = made("span", "caption-count");
+    caption.append(captionName, captionCount);
+    const week = made("ol", "week");
+    week.setAttribute("aria-label", words.week);
+    face.append(head, row, caption, 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 size = context.size;
+      const layout = !size ? "wide" : size.w <= 2 ? "narrow" : size.h >= 4 ? "tall" : "wide";
+      if (face.dataset.layout !== layout) face.dataset.layout = layout;
+      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);
+      label.textContent = habit.name || words.name;
+      label.toggleAttribute("data-empty", !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);
+      if (writes && done) press.innerHTML = `${CHECK}<span>${words.checked}</span>`;
+      else press.textContent = writes ? 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 = layout === "narrow" ? words.unit(days) : words.streak;
+      fresh.replaceChildren(...(layout === "narrow" ? [words.fresh[0]] : [words.fresh[0], document.createElement("br"), words.fresh[1]]));
+      total.textContent = habit.days.length > 0 ? words.total(new Set(habit.days).size) : "";
+      const span = layout === "tall" ? 5 : 1;
+      const shown = monthOf(habit.days, today, span);
+      week.dataset.weeks = String(span);
+      const [before, got, after] = words.got(shown.filter((day) => day.done && !day.future).length);
+      const bold = document.createElement("b");
+      bold.textContent = got;
+      captionCount.replaceChildren(before, bold, after);
+      const initials = span === 5 ? [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
+        const item = made("li", "initial");
+        item.setAttribute("aria-hidden", "true");
+        item.textContent = words.initials[weekday];
+        return item;
+      }) : [];
+      week.replaceChildren(...initials, ...shown.map(({ day, weekday, done: kept, today: now, future, streak: inStreak }) => {
+        const item = made("li", "day");
+        item.classList.toggle("gallery-habit-kept", kept);
+        item.classList.toggle("gallery-habit-today", now);
+        item.classList.toggle("gallery-habit-future", future);
+        item.classList.toggle("gallery-habit-streak-day", inStreak);
+        const [, month, date] = day.split("-").map(Number);
+        item.setAttribute("aria-label", words.day(month, date, kept));
+        item.title = words.day(month, date, kept);
+        // A week's circle says its day by its initial (今 for today), a month's by its date; a day done of a week, a tick.
+        if (span === 1 && kept && !future) item.innerHTML = CHECK;
+        else item.textContent = span === 5 ? String(date) : now && words.today ? words.today : words.initials[weekday];
+        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="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#fdf1dd"/><rect x="42" y="24.5" width="54" height="5" rx="2.5" fill="#37352f"/><rect x="100" y="24.5" width="20" height="5" rx="2.5" fill="#d4d3cf"/><rect x="28" y="42" width="24" height="20" rx="3" fill="#1d1d1b"/><rect x="56" y="56" width="22" height="5" rx="2.5" fill="#a6a5a1"/><rect x="176" y="42" width="36" height="18" rx="5" fill="#ebf2fa"/><rect x="186" y="48.5" width="16" height="5" rx="2.5" fill="#4084cf"/><circle cx="37" cy="88" r="9" fill="#4084cf"/><path d="M33.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="66" cy="88" r="9" fill="#4084cf"/><path d="M62.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="95" cy="88" r="9" fill="#4084cf"/><path d="M91.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="124" cy="88" r="8.4" fill="none" stroke="#4084cf" stroke-width="1.3"/><circle cx="153" cy="88" r="8.6" fill="none" stroke="#ebebe9"/><circle cx="182" cy="88" r="8.6" fill="none" stroke="#ebebe9"/><circle cx="211" cy="88" r="8.6" fill="none" stroke="#ebebe9"/></svg>

package/packs/gallery/habit/style.css

@@ -0,0 +1,174 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The pack's design B, in the kit's card tokens, laid out by the card's cells
+   (the face's data-layout): "wide" (4 × 2) the head (a flame's warm chip, the name, a field with no line
+   until it is typed in, the days in all after it, faint), the streak (36px) and 天连续 with the button at
+   its right, and this week's seven circles at the bottom; "narrow" (2 × 2) the name alone (13px, 600, two lines at most), a
+   flame and the streak (40px), and the button as wide as the card; "tall" (4 × 4) the head, the streak and
+   the button, 最近五周 and its count, and five weeks of circles of 26px. A day done the accent, ticked; one
+   done before the streak (a month's) the accent's pale tint; today ringed in the accent; the days to come
+   an outline. The button has no line: a pale blue 打卡, a pale green ✓ 已打卡, a line of words where nothing
+   writes. Never checked in: 还没打过卡 where the streak stands, the chip gray. Light and dark. */
+[data-doc-component="gallery/habit"] {
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-habit-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
+  > .gallery-habit-face > .gallery-habit-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    height: 20px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-chip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-warm-soft);
+    color: var(--gallery-warm);
+  }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-head > .gallery-habit-chip { background: var(--gallery-fill); color: var(--gallery-muted); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  /* The name: a field drawn as the head's title, as wide as its words (field-sizing), a soft fill while typed in. */
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name {
+    field-sizing: content;
+    min-width: 2em;
+    max-width: 100%;
+    flex: 0 1 auto;
+    box-sizing: border-box;
+    height: 20px;
+    margin: 0 -4px;
+    padding: 0 4px;
+    border: 0;
+    border-radius: 4px;
+    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);
+    text-overflow: ellipsis;
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name::placeholder { color: var(--gallery-faint); font-weight: 500; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):is(:hover, :focus) { background: var(--gallery-hover); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:read-only { cursor: default; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-label { display: none; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-habit-face > .gallery-habit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; flex: none; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak { display: flex; align-items: baseline; margin: 0; min-width: 0; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame { display: none; align-self: center; margin-right: 4px; color: var(--gallery-warm); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame > svg { display: block; width: 18px; height: 18px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-count {
+    font-size: 36px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-fresh { display: none; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-row > .gallery-habit-streak { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-row > .gallery-habit-fresh { display: block; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    flex: none;
+    height: 30px;
+    padding: 0 14px;
+    border: 0;
+    border-radius: 8px;
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent-ink);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color .12s ease-out;
+  }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:hover { background: color-mix(in srgb, var(--gallery-accent) 18%, var(--gallery-accent-soft)); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:focus-visible { outline: 2px solid var(--gallery-accent-wash); outline-offset: 1px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check.gallery-habit-done { background: var(--gallery-good-soft); color: var(--gallery-good-ink); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check.gallery-habit-done:hover { background: color-mix(in srgb, var(--gallery-good) 18%, var(--gallery-good-soft)); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check > svg { display: block; width: 13px; height: 13px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:disabled { padding: 0; background: transparent; color: var(--gallery-faint); font-weight: 500; cursor: default; }
+  > .gallery-habit-face > .gallery-habit-caption { display: none; }
+  /* This week: seven circles at the bottom, 4px in from either side, so that today's second ring, done,
+     stays inside the content on a Monday and a Sunday too. */
+  > .gallery-habit-face > .gallery-habit-week { display: flex; justify-content: space-between; margin: auto 0 0; padding: 0 4px; list-style: none; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--gallery-fill);
+    font-size: 11px;
+    line-height: 1;
+    color: var(--gallery-faint);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day > svg { display: block; width: 13px; height: 13px; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-kept { background: var(--gallery-accent); color: #fff; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); color: var(--gallery-accent-ink); font-weight: 600; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today.gallery-habit-kept { background: var(--gallery-accent); color: #fff; box-shadow: 0 0 0 2px var(--gallery-card-fill), 0 0 0 3.5px var(--gallery-accent); }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-future { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-hair); color: var(--gallery-faintest); }
+
+  /* A narrow card: the name, the streak with its flame, the button as wide as the card. */
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > :is(.gallery-habit-chip, .gallery-habit-total) { display: none; }
+  /* Its name: the words, 13px and 600 on 18px lines, two lines at most and then cut (…), 12px clear of the
+     card's edge (the grip's dots end 9px into the content); the field lies over them unseen, the one a
+     press or Tab reaches, and stands in their place, one line, while it has the focus. */
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head { position: relative; display: block; height: auto; padding-inline-end: 0; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-label {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin: 0 -4px;
+    padding: 0 16px 0 4px;
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 600;
+    color: var(--gallery-text);
+    overflow-wrap: anywhere;
+  }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-label[data-empty] { font-weight: 500; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name { position: absolute; inset: 0 auto auto 0; width: calc(100% + 8px); max-width: none; height: 100%; opacity: 0; line-height: 18px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:read-only { pointer-events: none; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):hover + .gallery-habit-label { background: var(--gallery-hover); }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus { width: calc(100% + 8px - var(--gallery-grip-room, 0px) * var(--gallery-grip-shown, 0)); height: 18px; opacity: 1; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus + .gallery-habit-label { visibility: hidden; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row { display: contents; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > :is(.gallery-habit-streak, .gallery-habit-fresh) { margin: auto 0 10px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame { display: block; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-count { font-size: 40px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-check { width: 100%; margin-top: auto; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-week { display: none; }
+  /* A tall card: five weeks of circles under 最近五周. */
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-caption { display: flex; justify-content: space-between; margin: auto 0 8px; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-caption b { font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5px; justify-items: center; margin: 0; padding: 0; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-initial { height: 14px; font-size: 10.5px; line-height: 14px; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-day { width: 26px; height: 26px; font-size: 10.5px; background: transparent; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-kept { background: var(--gallery-accent-soft); color: var(--gallery-accent-ink); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-kept.gallery-habit-streak-day { background: var(--gallery-accent); color: #fff; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); color: var(--gallery-accent-ink); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-today.gallery-habit-kept { background: var(--gallery-accent); color: #fff; box-shadow: 0 0 0 2px var(--gallery-card-fill), 0 0 0 3.5px var(--gallery-accent); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-future { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-hair); color: var(--gallery-faintest); }
+}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/habit"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/habit"] > .gallery-habit-face { 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, this week's seven days), 2 × 2 (the name, the streak, the button as wide as the card) and 4 × 4 (the last five weeks as a month).
+
+## 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
+
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a flame's warm chip, the habit's name (a field: click to rename) and the days in all (共 41 天); the streak is the hero (36px, 天连续 after it), the button at its right a pale blue 打卡, a pale green ✓ 已打卡 once pressed (a press takes it back). A 4 × 2 card's foot is this week, seven circles Monday to Sunday: a day done the accent with a tick, one missed a soft gray, today ringed in the accent (今), the days to come an outline. A 4 × 4 card shows the last five weeks as a month instead, the days of the streak in the accent, those done before it its pale tint, with how many were done. Never checked in, it says 还没打过卡 where the streak stands. It changes by itself at midnight.

package/packs/gallery/heatmap/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/heatmap",
+  "apiVersion": 1,
+  "version": "2.0.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, 4], [12, 4], [4, 4], [12, 3], [8, 3], [8, 2]], "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>