@heycys/gallery 0.1.2 → 0.2.1

package/packs/gallery-soft/countdown/style.css

@@ -0,0 +1,211 @@
+/* 柔光风格's countdown. 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 soft look's tokens first, light and dark (light-dark(): the
+   page's color scheme, which follows its theme), then the face: a faint wash of the accent from the card's
+   top over the soft card's fill; a head of an hourglass's chip and the day's name, one line; the count the
+   hero at the bottom, its words before it and its unit after it muted, the date under it; on a card wider
+   than two cells a small page of a calendar beside the count (the month on a band of the accent, the day
+   large), on the day 就是今天 in the accent; with no date the cards' empty face (a calendar in a soft disc,
+   a line, where to set one). On a custom page the face is the card's whole room, taken out over the card's
+   padding and given the soft frame's (data-pad: 18px on a 2 × 2 card, 20px on a 4 × 2), the board's line
+   around it; where no card is (a document, as gallery block check shows it) the face frames itself at the
+   size of a 2 × 2 card. */
+[data-doc-component="gallery-soft/countdown"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-card: light-dark(#ffffff, #1f1f20);
+  --soft-card-line: light-dark(rgb(28 28 32 / 6.5%), rgb(255 255 255 / 7.5%));
+  --soft-card-shadow: 0 0 0 1px var(--soft-card-line), 0 1px 2px light-dark(rgb(28 28 32 / 3.5%), rgb(0 0 0 / 0%)), 0 8px 24px -14px light-dark(rgb(28 28 32 / 12%), rgb(0 0 0 / 60%));
+  --soft-wash: linear-gradient(180deg, light-dark(rgb(62 122 198 / 6%), rgb(126 173 226 / 7%)) 0%, transparent 52%);
+  --soft-text: light-dark(#37352f, #d9d9dc);
+  --soft-strong: light-dark(#1f1f1f, #f1f1f2);
+  --soft-muted: light-dark(#7a7a7f, #9d9da3);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-ink: light-dark(#356cb3, #98bee9);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-on-accent: light-dark(#ffffff, #152436);
+  --soft-track: light-dark(rgb(28 28 32 / 7%), rgb(255 255 255 / 8%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-countdown-face {
+    --soft-pad: 18px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 144px;
+    max-width: 100%;
+    height: 144px;
+    padding: calc(var(--soft-pad) - var(--soft-edge, 0px));
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: var(--soft-card-shadow);
+    background: var(--soft-wash), var(--soft-card);
+    color: var(--soft-text);
+    font: 13px/1.5 var(--soft-font);
+    -webkit-font-smoothing: antialiased;
+  }
+  > .gallery-soft-countdown-face[data-pad="m"] { --soft-pad: 20px; }
+  > .gallery-soft-countdown-face[data-pad="l"] { --soft-pad: 24px; }
+  > .gallery-soft-countdown-face[data-pad="xs"] { padding: 0 calc(16px - var(--soft-edge, 0px)); justify-content: center; }
+  > .gallery-soft-countdown-face:not([data-w="1"], [data-w="2"]) { width: 304px; }
+  /* The head: the hourglass's chip and the day's name. */
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    height: 28px;
+    min-width: 0;
+    padding-inline-end: var(--soft-grip-room);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-head > .gallery-soft-countdown-chip {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: var(--soft-accent-soft);
+    color: var(--soft-accent);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-head > .gallery-soft-countdown-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-head > .gallery-soft-countdown-name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-head { gap: 8px; height: 24px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-head > .gallery-soft-countdown-chip { width: 24px; height: 24px; border-radius: 7px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-head > .gallery-soft-countdown-chip > svg { width: 14px; height: 14px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-head > .gallery-soft-countdown-name { font-size: 13px; }
+  /* The count at the bottom, the calendar's page beside it on a wide card. */
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body {
+    display: flex;
+    align-items: flex-end;
+    gap: 16px;
+    margin-top: auto;
+    min-width: 0;
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow { flex: 1; min-width: 0; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-count {
+    margin: 0;
+    white-space: nowrap;
+    font-family: var(--soft-num);
+    font-size: 44px;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: -.025em;
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-count { font-size: 40px; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-count > :is(.gallery-soft-countdown-label, .gallery-soft-countdown-unit) {
+    font-family: var(--soft-font);
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0;
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-count > .gallery-soft-countdown-label { margin-right: 6px; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-count > .gallery-soft-countdown-unit { margin-left: 4px; }
+  /* On the day: its words in the accent. */
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-words {
+    font-family: var(--soft-font);
+    font-size: 26px;
+    line-height: 1.1;
+    letter-spacing: .02em;
+    color: var(--soft-accent-ink);
+  }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-words { font-size: 24px; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-grow > .gallery-soft-countdown-date {
+    margin: 8px 0 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    width: 62px;
+    height: 70px;
+    overflow: hidden;
+    border-radius: 12px;
+    background: var(--soft-card);
+    box-shadow: 0 0 0 1px var(--soft-card-line), 0 6px 14px -8px rgb(0 0 0 / 25%);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-page > .gallery-soft-countdown-month {
+    height: 22px;
+    background: var(--soft-accent);
+    color: var(--soft-on-accent);
+    font: 600 11.5px/22px var(--soft-font);
+    text-align: center;
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-body > .gallery-soft-countdown-page > .gallery-soft-countdown-day {
+    display: grid;
+    place-items: center;
+    flex: 1;
+    font: 700 28px/1 var(--soft-num);
+    letter-spacing: -.02em;
+    color: var(--soft-strong);
+  }
+  /* No date: the cards' empty face. */
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    flex: 1;
+    min-height: 0;
+    text-align: center;
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 8px;
+    border-radius: 50%;
+    background: var(--soft-track);
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc > svg { display: block; width: 20px; height: 20px; }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-empty > .gallery-soft-countdown-line { margin: 0; font-size: 13px; color: var(--soft-text); }
+  > .gallery-soft-countdown-face > .gallery-soft-countdown-empty > .gallery-soft-countdown-how { margin: 0; font-size: 12px; color: var(--soft-muted); }
+  /* A 2 × 2 card: a smaller disc, a line each, so that the three stand clear of the head. */
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty { gap: 0; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc { width: 30px; height: 30px; margin-bottom: 4px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc > svg { width: 15px; height: 15px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty > :is(.gallery-soft-countdown-line, .gallery-soft-countdown-how) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-line { font-size: 12.5px; line-height: 18px; }
+  > .gallery-soft-countdown-face[data-pad="s"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-how { line-height: 16px; }
+  /* A card 2 cells high and wider: the disc beside its line and what to do, which under the head have no room for a column. */
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty { display: grid; grid-template-columns: auto minmax(0, max-content); column-gap: 12px; row-gap: 2px; align-content: center; justify-content: center; text-align: left; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-disc > svg { width: 17px; height: 17px; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > :is(.gallery-soft-countdown-line, .gallery-soft-countdown-how) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-line { align-self: end; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-how { align-self: start; }
+  > .gallery-soft-countdown-face[data-pad="m"] > .gallery-soft-countdown-empty > .gallery-soft-countdown-line:last-child { grid-row: 1 / span 2; align-self: center; }
+}
+/* On a custom page: the face over the card's whole room, its padding the soft frame's, the board's line around it; the head's end kept clear of the grip's corner. */
+.gallery-card > [data-doc-component="gallery-soft/countdown"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/countdown"] > .gallery-soft-countdown-face {
+  --soft-edge: 1px;
+  --soft-grip-room: max(0px, calc(40px - var(--soft-pad)));
+  width: auto;
+  max-width: none;
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  box-shadow: none;
+}

package/packs/gallery-soft/countdown/template.html

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

package/packs/gallery-soft/countdown/writing.md

@@ -0,0 +1,24 @@
+# 倒计时 (gallery-soft/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).
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/countdown`, its settings, its data and what the user does on it the same, in the soft look of design A (a faint wash of blue from the card's top, rounded chips, big numbers). Write it only where the user asked for 柔光风格 or the page already holds its cards.
+
+## 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-soft/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 gallery-soft/countdown`, the instance as template.html has it, then its settings as above. Sizes: 2 × 2 (the default) and 4 × 2 (a small page of a calendar beside the count).
+
+## How it looks
+
+The day's name beside an hourglass's chip on the top line (春节; 倒计时 where it has none), the count of days large at the bottom, 还有 (or 已过) before it and 天 after it, muted, the date under it (2月6日 周六; on a 4 × 2 card 2027年2月6日 星期六, and a small page of a calendar at the right, the month on a band of the accent over the day); on the day itself 就是今天 in the accent; with no date a calendar in a soft disc over 还没有设日期 and where to set it (右上角手柄 › 设置…); in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded 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-soft/habit/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery-soft/habit",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "习惯打卡", "en": "Habit tracker" },
+  "description": { "zh": "每天打一次卡，显示连续了几天和最近一周，大卡片还有最近四周；名字在卡片上直接改", "en": "A check-in a day, the streak and the last seven days, the last four weeks on a large card; 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-soft-habit-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true }
+}

package/packs/gallery-soft/habit/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery-soft/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-soft/habit/kit.js

@@ -0,0 +1,366 @@
+// gallery-soft/habit (习惯打卡, 柔光风格): Gallery 风格's gallery/habit in the soft look, the same logic and
+// data. 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 in its head (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 way to check today in, or take 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, the days and the
+// calendar 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 nothing can be pressed: the button a plain line saying whether today is done.
+//
+// Its face, laid out by its card's size (`context.size`, read again on `layout`; data-w, data-h, data-pad):
+// a head of a flame's warm chip, the name and the days in all at its end (共 42 天); the streak the hero
+// (连续打卡 over its count). A 4 × 2 card sets the last seven days beside it as a row of dots, a check in
+// each one done, today's the button itself (a ring with a plus that a press fills); a 2 × 2 card the streak
+// over a button as wide as the card (打卡, or 已打卡 in green); a 4 × 4 card the streak, the longest one and
+// the button, over the last four weeks as a calendar, Monday first, each day done tinted, today ringed. A
+// habit never checked in shows, where the streak stands, a line inviting the first (还没打过卡, 从今天开始).
+// Its words are the page's language (the UI's where Gallery says it, else the page's lang).
+
+const WORDS = {
+  zh: {
+    name: "给习惯起个名字",
+    nameShort: "起个名字",
+    check: "打卡",
+    checked: "已打卡",
+    undo: "再按一下，撤回今天的打卡",
+    todayDone: "今天已打卡",
+    todayOpen: "今天还没打卡",
+    streak: "连续打卡",
+    streakShort: "连续",
+    unit: () => "天",
+    total: (/** @type {number} */ days) => `共 ${days} 天`,
+    longest: (/** @type {number} */ days) => `最长 ${days} 天`,
+    fresh: "还没打过卡",
+    freshHow: "从今天开始",
+    week: "最近七天",
+    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+    monday: ["一", "二", "三", "四", "五", "六", "日"],
+    today: "今",
+    day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {boolean} */ done) => `${month}月${day}日${done ? "，已打卡" : "，没打卡"}`,
+  },
+  en: {
+    name: "Name this habit",
+    nameShort: "Name it",
+    check: "Check in",
+    checked: "Done",
+    undo: "Press again to take today's check-in back",
+    todayDone: "Done today",
+    todayOpen: "Not done today",
+    streak: "Streak",
+    streakShort: "Streak",
+    unit: (/** @type {number} */ days) => (days === 1 ? "day" : "days"),
+    total: (/** @type {number} */ days) => `${days} ${days === 1 ? "day" : "days"} in all`,
+    longest: (/** @type {number} */ days) => `Best ${days}`,
+    fresh: "No check-ins yet",
+    freshHow: "Start today",
+    week: "The last seven days",
+    weekdays: ["S", "M", "T", "W", "T", "F", "S"],
+    monday: ["M", "T", "W", "T", "F", "S", "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 weekday of a day (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;
+}
+
+/**
+ * The longest run of days in a row the habit was done, 0 for none (the 4 × 4 card's 最长).
+ * @param {string[]} days
+ */
+function longestOf(days) {
+  const sorted = [...new Set(days)].sort();
+  let longest = 0;
+  let run = 0;
+  sorted.forEach((day, index) => {
+    run = index > 0 && dayAfter(sorted[index - 1], 1) === day ? run + 1 : 1;
+    longest = Math.max(longest, run);
+  });
+  return longest;
+}
+
+/**
+ * `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);
+    return { day, weekday: weekdayOf(day), done: done.has(day) };
+  });
+}
+
+/**
+ * The last `weeks` weeks to the one of `today`, Monday first, as the 4 × 4 card's calendar draws them: each
+ * day its date (YYYY-MM-DD), whether it was done, whether it is today and whether it is still to come.
+ * @param {string[]} days
+ * @param {string} today
+ * @param {number} [weeks]
+ */
+function calendarOf(days, today, weeks = 4) {
+  const done = new Set(days);
+  const first = dayAfter(today, -((weekdayOf(today) + 6) % 7) - 7 * (weeks - 1));
+  return Array.from({ length: 7 * weeks }, (_, index) => {
+    const day = dayAfter(first, index);
+    return { day, done: done.has(day), today: day === today, future: day > today };
+  });
+}
+
+/**
+ * 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();
+  });
+}
+
+/**
+ * The size the face is laid out by: its card's cells (`context.size`), or `fallback` (the manifest's first
+ * size) where no card is; and the frame's padding for it, as the soft cards pad theirs: "xs" on a card one
+ * cell high, "s" on a small one (2 × 2 and less), "l" on one 3 cells high or more, else "m".
+ * @param {DocComponentSize | null | undefined} size
+ * @param {[number, number]} fallback
+ */
+function sizeOf(size, fallback) {
+  const w = size?.w ?? fallback[0];
+  const h = size?.h ?? fallback[1];
+  return { w, h, pad: h === 1 ? "xs" : w <= 2 && h <= 2 ? "s" : h >= 3 ? "l" : "m" };
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-soft-habit-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+const CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.3 4.3L19 7.3"/></svg>';
+const PLUS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>';
+
+DocKit.component({
+  id: "gallery-soft/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.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2c.6 3 4.8 5 4.8 9.8a4.8 4.8 0 0 1-9.6 0c0-2.1.9-3.6 2.1-4.6.2 1.6 1 2.5 2 2.8-.6-2.6-.3-5.2.7-8z"/></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);
+    // The streak: its label over its count, the count large and its unit after it; the longest beside it on a tall card.
+    const streak = made("div", "streak");
+    const label = made("span", "label", words.streak);
+    const figure = made("p", "figure");
+    const before = made("span", "before", words.streakShort);
+    const count = made("strong", "count");
+    const unit = made("span", "unit");
+    figure.append(before, count, unit);
+    const longest = made("span", "longest");
+    const row = made("div", "row");
+    row.append(figure, longest);
+    streak.append(label, row);
+    // Never checked in: this, where the streak stands.
+    const fresh = made("p", "fresh");
+    fresh.append(made("span", "fresh-line", words.fresh), made("span", "fresh-how", words.freshHow));
+    const press = made("button", "check");
+    press.type = "button";
+    const week = made("ol", "week");
+    week.setAttribute("aria-label", words.week);
+    const calendar = made("div", "calendar");
+    calendar.setAttribute("aria-hidden", "true");
+    const top = made("div", "top");
+    top.append(streak, fresh, press);
+    face.append(head, top, week, calendar);
+    host.append(face);
+    const named = DocKit.input(name, { signal: context.signal, commit: (value) => rename(context, value) });
+    const pressed = () => {
+      if (context.canEdit()) pressToday(context, dayOf(new Date()));
+    };
+    press.addEventListener("click", pressed, { 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 { w, h, pad } = sizeOf(context.size, [4, 2]);
+      Object.assign(face.dataset, { w: String(w), h: String(h), pad });
+      name.placeholder = pad === "s" ? words.nameShort : words.name; // a 2 × 2 card's head holds no more
+      const today = dayOf(new Date());
+      const writes = context.canEdit();
+      const done = habit.days.includes(today);
+      name.readOnly = !writes;
+      named.set(habit.name);
+      face.toggleAttribute("data-named", habit.name.trim() !== "");
+      // Where nothing is written, the button is a line saying how today stands: nothing to press.
+      press.disabled = !writes;
+      press.classList.toggle("gallery-soft-habit-done", done);
+      press.innerHTML = writes ? `${done ? CHECK : PLUS}<span></span>` : "<span></span>";
+      /** @type {HTMLElement} */ (press.lastElementChild).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) : "";
+      longest.textContent = habit.days.length > 0 ? words.longest(longestOf(habit.days)) : "";
+      // The last seven days, today's dot the button.
+      week.replaceChildren(...weekOf(habit.days, today).map(({ day, weekday, done: kept }) => {
+        const item = made("li", "day");
+        const now = day === today;
+        item.classList.toggle("gallery-soft-habit-kept", kept);
+        item.classList.toggle("gallery-soft-habit-today", now);
+        const [, month, date] = day.split("-").map(Number);
+        item.title = now && writes && kept ? words.undo : words.day(month, date, kept);
+        const dot = made(now ? "button" : "span", now ? "today-press" : "dot");
+        dot.innerHTML = kept ? CHECK : now ? PLUS : "";
+        if (now) {
+          // Today's dot is the button: pressed, today is checked in or taken back.
+          const button = /** @type {HTMLButtonElement} */ (dot);
+          button.type = "button";
+          button.disabled = !writes;
+          button.setAttribute("aria-pressed", String(kept));
+          button.setAttribute("aria-label", writes ? (kept ? words.checked : words.check) : (kept ? words.todayDone : words.todayOpen));
+          button.addEventListener("click", pressed);
+        } else item.setAttribute("aria-label", words.day(month, date, kept));
+        item.append(dot, made("span", "weekday", now ? words.today : words.weekdays[weekday]));
+        return item;
+      }));
+      // The last four weeks, Monday first, under their weekdays' initials.
+      calendar.replaceChildren(...words.monday.map((initial) => made("span", "initial", initial)), ...calendarOf(habit.days, today).map((one) => {
+        const cell = made("span", "date", String(Number(one.day.slice(8))));
+        cell.classList.toggle("gallery-soft-habit-on", one.done && !one.future);
+        cell.classList.toggle("gallery-soft-habit-now", one.today && !one.done);
+        cell.classList.toggle("gallery-soft-habit-future", one.future);
+        return cell;
+      }));
+    };
+    draw();
+    return { update: draw };
+  },
+  example(host, context) {
+    pressToday(context, dayOf(new Date()));
+  },
+});

package/packs/gallery-soft/habit/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><defs><linearGradient id="w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3e7ac6" stop-opacity=".07"/><stop offset=".52" stop-color="#3e7ac6" stop-opacity="0"/></linearGradient></defs><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="14" fill="#ffffff" stroke="#e8e7e4"/><rect x="17" y="13" width="206" height="94" rx="13.5" fill="url(#w)"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#fdf1df"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#e59a2c"/><rect x="50" y="28" width="60" height="6" rx="3" fill="#37352f"/><rect x="180" y="28" width="24" height="6" rx="3" fill="#c4c2bd"/><rect x="30" y="56" width="32" height="5" rx="2.5" fill="#c4c2bd"/><rect x="30" y="68" width="26" height="22" rx="11" fill="#1f1f1f"/><circle cx="110" cy="74" r="6" fill="#3e7ac6"/><circle cx="125.5" cy="74" r="6" fill="#3e7ac6"/><circle cx="141" cy="74" r="6" fill="#3e7ac6"/><circle cx="156.5" cy="74" r="6" fill="#3e7ac6"/><circle cx="172" cy="74" r="6" fill="#3e7ac6"/><circle cx="187.5" cy="74" r="6" fill="#3e7ac6"/><circle cx="203" cy="74" r="6" fill="none" stroke="#3e7ac6" stroke-width="1.5"/><rect x="108" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="123.5" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="139" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="154.5" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="170" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="185.5" y="86" width="4" height="3" rx="1.5" fill="#c4c2bd"/><rect x="201" y="86" width="4" height="3" rx="1.5" fill="#3e7ac6"/></svg>