@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery-soft/countdown/kit.js

@@ -0,0 +1,206 @@
+// gallery-soft/countdown (倒计时, 柔光风格): Gallery 风格's gallery/countdown in the soft look, the same logic.
+// The days between today, by the reader's clock, and the date its settings name: how many are left before
+// it, 就是今天 on the day itself, how many have gone since after it. Its two settings, `title` (the name of the
+// day) and `date` (YYYY-MM-DD), are the card's form (on a custom page the grip at the card's top right ›
+// 设置…), kept in the data part `settings`, a script of JSON, which the board writes and this block only
+// reads: it writes nothing. Drawn from that part on every `source` (the form, an Agent's write, an undo)
+// and again as a day begins (the kit's `clock`, "day"), so that the count moves at midnight. A date it
+// cannot read, or none, shows the cards' empty face, a calendar in a soft disc over 还没有设日期 and where
+// to set one; the words are the page's language (the UI's where Gallery says it, else the page's lang).
+//
+// Its face, laid out by its card's size (`context.size`, read again on `layout`; data-w, data-h, data-pad):
+// a head of an hourglass's chip and the day's name (春节, or 倒计时 where it has none); the count the hero,
+// large, 还有 (or 已过) before it and 天 after it, muted; on the day 就是今天 in the accent; under it the date
+// (2月6日 周六 on a 2 × 2 card, 2027年2月6日 星期六 on a wider one, which sets a small page of a calendar
+// beside the count, the month on a band of the accent over the day). The face says by `data-kind` which of
+// left, today, since or none it shows.
+
+const WORDS = {
+  zh: {
+    left: "还有",
+    since: "已过",
+    today: "就是今天",
+    unit: () => "天",
+    countdown: "倒计时",
+    pick: "还没有设日期",
+    where: "右上角手柄 › 设置…",
+    whereShort: "手柄 › 设置…",
+    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    short: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${year}年${month}月${day}日`, weekday],
+    dateShort: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${month}月${day}日`, weekday],
+    month: (/** @type {number} */ month) => `${month}月`,
+  },
+  en: {
+    left: "In",
+    since: "",
+    today: "Today",
+    unit: (/** @type {number} */ count, /** @type {boolean} */ since = false) => `${count === 1 ? "day" : "days"}${since ? " ago" : ""}`,
+    countdown: "Countdown",
+    pick: "No date yet",
+    where: "The grip at the top right › Settings…",
+    whereShort: "Grip › Settings…",
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month - 1]} ${day}, ${year}`],
+    dateShort: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day}`],
+    month: (/** @type {number} */ month) => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1],
+  },
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * A date written YYYY-MM-DD as { year, month, day }, or null for anything else (no such day too:
+ * 2027-02-30).
+ * @param {unknown} written
+ */
+function dateOf(written) {
+  const found = typeof written === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(written) : null;
+  if (!found) return null;
+  const [year, month, day] = found.slice(1).map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? { year, month, day } : null;
+}
+
+/**
+ * Where `now` (the reader's clock) stands to the date `written` (YYYY-MM-DD): { kind: "left", days }
+ * before it, { kind: "today", days: 0 } on it, { kind: "since", days } after it, by whole days of the
+ * calendar (counted in UTC from each day's date, so that a change of the clocks in between changes
+ * nothing); { kind: "none" } for a date it cannot read.
+ * @param {unknown} written
+ * @param {Date} now
+ * @returns {{ kind: "left" | "since" | "today", days: number } | { kind: "none" }}
+ */
+function countdownOf(written, now) {
+  const date = dateOf(written);
+  if (!date) return { kind: "none" };
+  const days = Math.round((Date.UTC(date.year, date.month - 1, date.day) - Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
+  if (days === 0) return { kind: "today", days: 0 };
+  return days > 0 ? { kind: "left", days } : { kind: "since", days: -days };
+}
+
+/**
+ * What the card says, in `language`, of its `settings` (context.readJSON's, {} where none is set yet)
+ * at `now`: its head (the day's name, or 倒计时), the words before the count (还有, 已过) and its unit after it
+ * ("" with no count), its count (null on the day and with no date), the words standing there instead
+ * (`big`: 就是今天, or with no date 还没有设日期), the date (a list of words a line breaks between and never
+ * inside: the date and its weekday) long and short, or with no date where to set one (`where`, `whereShort`),
+ * and the calendar's page (its month and day; null with no date).
+ * @param {any} settings
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function faceOf(settings, now, language) {
+  const words = WORDS[language];
+  const date = dateOf(settings?.date);
+  const named = typeof settings?.title === "string" ? settings.title.trim() : "";
+  const count = countdownOf(settings?.date, now);
+  const head = named || words.countdown;
+  if (!date || count.kind === "none") return { head, label: "", count: null, unit: "", big: words.pick, foot: [words.where], footShort: [words.whereShort], page: null };
+  const weekday = new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay();
+  const foot = words.date(date.year, date.month, date.day, words.weekdays[weekday]);
+  const footShort = words.dateShort(date.month, date.day, words.short[weekday]);
+  const page = { month: words.month(date.month), day: String(date.day) };
+  if (count.kind === "today") return { head, label: "", count: null, unit: "", big: words.today, foot, footShort, page };
+  return { head, label: count.kind === "left" ? words.left : words.since, count: String(count.days), unit: words.unit(count.days, count.kind === "since"), big: "", foot, footShort, page };
+}
+
+/**
+ * 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-countdown-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+/** Words as pieces a line breaks between and never inside. @param {string[]} pieces */
+const piecesOf = (pieces) => pieces.flatMap((words, index) => {
+  const piece = made("span", "piece", words);
+  return index === 0 ? [piece] : [" ", piece];
+});
+
+DocKit.component({
+  id: "gallery-soft/countdown",
+  on: ["source", "clock", "layout"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const face = made("div", "face");
+    host.append(face);
+    const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
+      if (reason === "clock" && detail !== "day") return; // a minute moves no count
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      if (settings === null || typeof settings !== "object" || Array.isArray(settings)) return context.fail(new Error("its settings are no object: { \"title\": \"…\", \"date\": \"YYYY-MM-DD\" }"));
+      const { w, h, pad } = sizeOf(context.size, [2, 2]);
+      const small = w <= 2;
+      const at = new Date();
+      const now = faceOf(settings, at, language);
+      const kind = countdownOf(settings.date, at).kind;
+      Object.assign(face.dataset, { kind, w: String(w), h: String(h), pad });
+      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="M7 3.5h10M7 20.5h10"/><path d="M8 3.5v2.4c0 1.4.7 2.6 1.8 3.4L12 11l2.2-1.7A4.2 4.2 0 0 0 16 5.9V3.5"/><path d="M8 20.5v-2.4c0-1.4.7-2.6 1.8-3.4L12 13l2.2 1.7a4.2 4.2 0 0 1 1.8 3.4v2.4"/></svg>';
+      const named = made("span", "name", now.head);
+      named.title = now.head;
+      head.append(chip, named);
+      if (kind === "none") {
+        // The cards' empty face: a calendar in a soft disc, what is missing, where to set it.
+        const empty = made("div", "empty");
+        const disc = made("span", "disc");
+        disc.setAttribute("aria-hidden", "true");
+        disc.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5.5" width="16" height="14.5" rx="2.4"/><path d="M8 3.5v4M16 3.5v4M4 10.5h16"/></svg>';
+        empty.append(disc, made("p", "line", now.big), made("p", "how", (small ? now.footShort : now.foot).join(" ")));
+        face.replaceChildren(head, empty);
+        return;
+      }
+      // The count: 还有 before it, 天 after it; on the day, its words.
+      const figure = made("p", "count");
+      if (now.count === null) {
+        figure.classList.add("gallery-soft-countdown-words");
+        figure.textContent = now.big;
+      } else {
+        figure.append(...(now.label ? [made("span", "label", now.label)] : []), made("span", "number", now.count), made("span", "unit", now.unit));
+      }
+      const date = made("p", "date");
+      date.append(...piecesOf(small ? now.footShort : now.foot));
+      const body = made("div", "body");
+      const grow = made("div", "grow");
+      grow.append(figure, date);
+      body.append(grow);
+      if (!small && now.page) {
+        const page = made("div", "page");
+        page.setAttribute("aria-hidden", "true");
+        page.append(made("span", "month", now.page.month), made("span", "day", now.page.day));
+        body.append(page);
+      }
+      face.replaceChildren(head, body);
+    };
+    draw();
+    return { update: draw };
+  },
+});

package/packs/gallery-soft/countdown/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="#ecf3fb"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="50" y="28" width="26" height="6" rx="3" fill="#37352f"/><rect x="30" y="58" width="18" height="7" rx="3.5" fill="#8d8c88"/><rect x="52" y="50" width="44" height="22" rx="11" fill="#1f1f1f"/><rect x="100" y="64" width="10" height="7" rx="3.5" fill="#8d8c88"/><rect x="30" y="82" width="70" height="5" rx="2.5" fill="#c4c2bd"/><rect x="168" y="46" width="38" height="44" rx="8" fill="#fff" stroke="#e6e5e2"/><path d="M168 54a8 8 0 0 1 8-8h22a8 8 0 0 1 8 8v4h-38z" fill="#3e7ac6"/><rect x="178" y="67" width="18" height="14" rx="7" fill="#1f1f1f"/></svg>

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>