@heycys/gallery 0.1.1 → 0.2.0

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>

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

@@ -0,0 +1,251 @@
+/* 柔光风格's habit. 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 a flame's warm chip, the habit's name (a field with no line of its own, its
+   placeholder faint) and the days in all at its end, fading while the card's grip shows; the streak the hero.
+   By the card's size (the face's data-w, data-h and data-pad, from the script): 4 × 2, the streak under its
+   label and the last seven days beside it, a disc each, the accent's with a check where done, today's the
+   button (a ring of the accent with a plus, filled once pressed); 2 × 2, 连续 and the streak over a button as
+   wide as the card; 4 × 4, the streak, the longest in a gray pill and the button over the last four weeks, a
+   small disc a day, tinted where done, today ringed, the days to come faint. Buttons have no line: a primary
+   one pale blue, done pale green, a shade deeper under the pointer. 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, the board's line around it;
+   where no card is (a document, as gallery block check shows it) the face frames itself at a 4 × 2 card's size. */
+[data-doc-component="gallery-soft/habit"] {
+  --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-faint: light-dark(#ababb0, #66666c);
+  --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-accent-tint: light-dark(#d8e6f6, #2b3c52);
+  --soft-on-tint: light-dark(#356cb3, #f1f1f2);
+  --soft-on-accent: light-dark(#ffffff, #152436);
+  --soft-track: light-dark(rgb(28 28 32 / 7%), rgb(255 255 255 / 8%));
+  --soft-good: light-dark(#23874f, #6fcf97);
+  --soft-good-soft: light-dark(#e6f4ec, rgb(111 207 151 / 14%));
+  --soft-warm: light-dark(#e59a2c, #f0b257);
+  --soft-warm-soft: light-dark(#fdf1df, rgb(240 178 87 / 14%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-habit-face {
+    --soft-pad: 20px;
+    position: relative;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: 28px 1fr auto;
+    grid-template-areas: "head head" ". ." "top week";
+    column-gap: 14px;
+    min-width: 0;
+    width: 304px;
+    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-habit-face[data-pad="s"] { --soft-pad: 18px; }
+  > .gallery-soft-habit-face[data-pad="l"] { --soft-pad: 24px; }
+  /* The head: the warm chip, the name's field, the days in all at its end. */
+  > .gallery-soft-habit-face > .gallery-soft-habit-head {
+    grid-area: head;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding-inline-end: var(--soft-grip-room);
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-chip {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: var(--soft-warm-soft);
+    color: var(--soft-warm);
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font: 600 14px/20px var(--soft-font);
+    color: var(--soft-strong);
+    text-overflow: ellipsis;
+  }
+  /* Where the name ends the head (a 2 × 2 card, or no day in all yet), it reaches into the grip's corner as far
+     as the padding, its end faded out under the grip while the grip shows (a mask, so that the name stays). */
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head > .gallery-soft-habit-name,
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-name:has(+ .gallery-soft-habit-total:empty) {
+    margin-inline-end: calc(-1 * var(--soft-grip-room));
+    -webkit-mask-image: linear-gradient(to left, transparent calc(var(--gallery-grip-shown, 0) * var(--soft-grip-room)), #000 calc(var(--gallery-grip-shown, 0) * (var(--soft-grip-room) + 14px)));
+    mask-image: linear-gradient(to left, transparent calc(var(--gallery-grip-shown, 0) * var(--soft-grip-room)), #000 calc(var(--gallery-grip-shown, 0) * (var(--soft-grip-room) + 14px)));
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-name::placeholder { color: var(--soft-faint); font-weight: 500; opacity: 1; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-name:read-only { cursor: default; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-total:empty { display: none; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-head > .gallery-soft-habit-total {
+    flex: none;
+    margin-inline-end: calc(-1 * var(--soft-grip-room));
+    font-size: 12px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+  }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head { gap: 8px; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head > .gallery-soft-habit-chip { width: 24px; height: 24px; border-radius: 7px; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head > .gallery-soft-habit-chip > svg { width: 14px; height: 14px; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head > .gallery-soft-habit-name { font-size: 13px; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-head > .gallery-soft-habit-total { display: none; }
+  /* The streak: its label over the count, the count large, its unit muted. */
+  > .gallery-soft-habit-face > .gallery-soft-habit-top { grid-area: top; align-self: end; min-width: 0; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row { display: flex; align-items: baseline; gap: 10px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure {
+    margin: 0;
+    white-space: nowrap;
+    font: 700 36px/1 var(--soft-num);
+    letter-spacing: -.025em;
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure > .gallery-soft-habit-count { font-weight: inherit; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure > :is(.gallery-soft-habit-before, .gallery-soft-habit-unit) {
+    font: 500 13px/1 var(--soft-font);
+    letter-spacing: 0;
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure > .gallery-soft-habit-before { display: none; margin-right: 6px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure > .gallery-soft-habit-unit { margin-left: 4px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-longest {
+    display: none;
+    align-items: center;
+    height: 20px;
+    padding: 0 7px;
+    border-radius: 6px;
+    background: var(--soft-track);
+    color: var(--soft-muted);
+    font: 600 11.5px/20px var(--soft-num);
+    white-space: nowrap;
+  }
+  /* Never checked in: a line inviting the first, where the streak stands. */
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-fresh { display: none; max-width: 100px; margin: 0; font-size: 12px; line-height: 1.55; color: var(--soft-text); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-fresh > span { display: block; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-fresh > .gallery-soft-habit-fresh-how { color: var(--soft-muted); }
+  > .gallery-soft-habit-face[data-fresh] > .gallery-soft-habit-top > .gallery-soft-habit-streak { display: none; }
+  > .gallery-soft-habit-face[data-fresh] > .gallery-soft-habit-top > .gallery-soft-habit-fresh { display: block; }
+  /* The button: no line, pale; done pale green; read-only a plain line. */
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    flex: none;
+    height: 28px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 8px;
+    background: var(--soft-accent-soft);
+    color: var(--soft-accent-ink);
+    font: 500 12.5px/1 var(--soft-font);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 20ms ease-in;
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check > svg { display: block; width: 14px; height: 14px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check:is(:hover, :focus-visible):not(:disabled) { outline: none; background: color-mix(in srgb, var(--soft-accent) 20%, var(--soft-card)); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check.gallery-soft-habit-done { background: var(--soft-good-soft); color: var(--soft-good); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check.gallery-soft-habit-done:is(:hover, :focus-visible):not(:disabled) { background: color-mix(in srgb, var(--soft-good) 20%, var(--soft-card)); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-top > .gallery-soft-habit-check:disabled { background: transparent; color: var(--soft-muted); cursor: default; }
+  /* The last seven days: a disc each, today's the button; where the words beside them leave less room than
+     the week takes (a long word in English), the discs a little smaller, never past the padding. */
+  > .gallery-soft-habit-face > .gallery-soft-habit-week { grid-area: week; align-self: end; display: flex; justify-content: flex-end; gap: 5px; min-width: 0; margin: 0; padding: 0; list-style: none; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day { display: flex; flex: 0 1 22px; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > :is(.gallery-soft-habit-dot, .gallery-soft-habit-today-press) {
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 22px;
+    height: auto;
+    aspect-ratio: 1;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--soft-track);
+    color: transparent;
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > :is(.gallery-soft-habit-dot, .gallery-soft-habit-today-press) > svg { display: block; width: 12px; height: 12px; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-kept > .gallery-soft-habit-dot { background: var(--soft-accent); color: var(--soft-on-accent); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > .gallery-soft-habit-today-press { background: transparent; box-shadow: inset 0 0 0 1.5px var(--soft-accent); color: var(--soft-accent); cursor: pointer; transition: background-color 20ms ease-in; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > .gallery-soft-habit-today-press:is(:hover, :focus-visible):not(:disabled) { outline: none; background: var(--soft-accent-soft); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-kept > .gallery-soft-habit-today-press,
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-kept > .gallery-soft-habit-today-press:is(:hover, :focus-visible):not(:disabled) { background: var(--soft-accent); box-shadow: none; color: var(--soft-on-accent); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > .gallery-soft-habit-today-press:disabled { cursor: default; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-day > .gallery-soft-habit-weekday { font-size: 10.5px; line-height: 12px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-week > .gallery-soft-habit-today > .gallery-soft-habit-weekday { color: var(--soft-accent-ink); font-weight: 600; }
+  /* The last four weeks (a tall card's). */
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar { grid-area: calendar; display: none; grid-template-columns: repeat(7, 1fr); row-gap: 7px; justify-items: center; align-self: end; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar > .gallery-soft-habit-initial { font-size: 11px; line-height: 14px; color: var(--soft-muted); }
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar > .gallery-soft-habit-date {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--soft-track);
+    color: var(--soft-muted);
+    font: 500 10.5px/1 var(--soft-num);
+  }
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar > .gallery-soft-habit-on { background: var(--soft-accent-tint); color: var(--soft-on-tint); font-weight: 600; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar > .gallery-soft-habit-now { background: transparent; box-shadow: inset 0 0 0 1.5px var(--soft-accent); color: var(--soft-accent-ink); font-weight: 600; }
+  > .gallery-soft-habit-face > .gallery-soft-habit-calendar > .gallery-soft-habit-future { background: transparent; color: var(--soft-faint); }
+  /* 2 × 2: 连续 and the streak over a button as wide as the card. */
+  > .gallery-soft-habit-face[data-pad="s"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px 1fr auto; grid-template-areas: "head" "." "top"; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-week { display: none; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-label { display: none; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure { font-size: 30px; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure > .gallery-soft-habit-before { display: inline; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-top > .gallery-soft-habit-fresh { max-width: none; line-height: 1.5; }
+  > .gallery-soft-habit-face[data-pad="s"] > .gallery-soft-habit-top > .gallery-soft-habit-check { display: flex; width: 100%; margin-top: 10px; }
+  /* 4 × 4: the streak, the longest and the button over the last four weeks. */
+  > .gallery-soft-habit-face[data-pad="l"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px auto 1fr auto; grid-template-areas: "head" "top" "." "calendar"; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-week { display: none; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-figure { font-size: 40px; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-top > .gallery-soft-habit-streak > .gallery-soft-habit-row > .gallery-soft-habit-longest { display: inline-flex; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-top > .gallery-soft-habit-fresh { max-width: none; line-height: 1.6; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-top > .gallery-soft-habit-check { display: flex; }
+  > .gallery-soft-habit-face[data-pad="l"] > .gallery-soft-habit-calendar { display: grid; }
+}
+/* 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/habit"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/habit"] > .gallery-soft-habit-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/habit/template.html

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