@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/habit/kit.js

@@ -3,21 +3,32 @@
 // { "name": "喝八杯水", "days": ["2026-11-05", "2026-11-06"] }. The card draws the name in a field of its
 // own (DocKit.input: written as the reader presses Enter or leaves it, never while an input method
 // composes), the streak (the days in a row up to today, or up to yesterday while today is not checked
-// yet, so that a streak lasts the day it is to be kept), how many days in all, the last seven days as
-// dots, where the card has room the last 30 days as a ring (`rateOf`: the days done of them in its
-// middle), and a button that checks today in, or takes today's check-in back when it is there. Each press
-// and each name is one context.editJSON, one undo step, the JSON written back on one line as it was:
-// what the reader does is in the file, and nothing else is (the streak and the dots are worked out as
-// it draws). It draws from the part on every `source` (an undo, an Agent's write) and again as a day
-// begins (the kit's `clock`, "day"), so that "today" moves at midnight. Where nothing takes its writes
-// (an export, a page that has not come to edit yet: context.canEdit() false) the name is read-only and
-// the button a plain line saying whether today is done. Its words are the page's language (the UI's
-// where Gallery says it, else the page's lang). Its head is the cards' (the kit's card tokens): the chip,
-// a flame for the streak, before the name, the days in all its quiet meta at the end; the streak is its
-// label (连续打卡) over its count, large, and its unit. A habit never checked in (no days at all) shows
-// neither the streak nor the ring, two zeros, but a muted line inviting the first (the face's data-fresh),
-// the week and the button as ever; they come back with the first check-in. Start a block of your own from
-// it with gallery block new <id> --recipe habit.
+// yet, so that a streak lasts the day it is to be kept), how many days in all, and a button that checks
+// today in, or takes today's check-in back when it is there. Each press and each name is one
+// context.editJSON, one undo step, the JSON written back on one line as it was: what the reader does is
+// in the file, and nothing else is (the streak and the days are worked out as it draws). It draws from
+// the part on every `source` (an undo, an Agent's write) and again as a day begins (the kit's `clock`,
+// "day"), so that "today" moves at midnight. Where nothing takes its writes (an export, a page that has
+// not come to edit yet: context.canEdit() false) the name is read-only and the button a plain line saying
+// whether today is done. Its words are the page's language (the UI's where Gallery says it, else the
+// page's lang).
+//
+// Its face (the pack's design B, in the kit's card tokens), laid out by the card's cells (`data-layout`,
+// by context.size, read again on `layout`): "wide" (4 × 2, the default) a head of the chip, a flame in
+// its warm color, the name (the field) and the days in all after it (共 41 天), the streak, the hero, and
+// 天连续 after it, the button at its right (a pale blue 打卡, a pale green ✓ 已打卡 a press takes back),
+// and this week at the bottom, Monday to Sunday, seven circles (`weekOf`): a day done filled with the
+// accent and ticked, one not done a soft gray with its initial, today ringed in the accent (今), filled
+// and ringed twice once done, the days to come an outline; "narrow" (2 wide) the name alone at the top,
+// a flame and the streak, and the button as wide as the card at the bottom (the name shown as words of
+// up to two lines, the field over them unseen until a press or Tab brings it, so that a long name is
+// never cut to a few characters); "tall" (4 high) the head, the streak and the button, and the last five
+// weeks as a month (`monthOf`), Monday first, the days of the streak the accent's, the days done before
+// it its pale tint, the others bare, today ringed, the days to come an outline, with 最近五周 and how
+// many of them were done (打了 27 天) over it. A habit never
+// checked in (no days at all) says 还没打过卡 where the streak stands (the face's data-fresh), the chip
+// gray and no count of days, until the first check-in. Start a block of your own from it with gallery
+// block new <id> --recipe habit.
 
 const WORDS = {
   zh: {
@@ -27,14 +38,14 @@ const WORDS = {
     undo: "再按一下，撤回今天的打卡",
     todayDone: "今天已打卡",
     todayOpen: "今天还没打卡",
-    streak: "连续打卡",
+    streak: "天连续",
     unit: () => "天",
     total: (/** @type {number} */ days) => `共 ${days} 天`,
-    rate: "近 30 天",
-    fresh: "还没打过卡，今天开始第 1 天",
-    rateSaid: (/** @type {number} */ done) => `近 30 天打卡 ${done} 天`,
-    week: "最近七天",
-    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+    fresh: ["还没打过卡", "今天开始第 1 天"],
+    weeks: "最近五周",
+    got: (/** @type {number} */ days) => ["打了 ", String(days), " 天"],
+    week: "这一周",
+    initials: ["日", "一", "二", "三", "四", "五", "六"],
     today: "今",
     day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {boolean} */ done) => `${month}月${day}日${done ? "，已打卡" : "，没打卡"}`,
   },
@@ -45,15 +56,15 @@ const WORDS = {
     undo: "Press again to take today's check-in back",
     todayDone: "Done today",
     todayOpen: "Not done today",
-    streak: "Streak",
+    streak: "in a row",
     unit: (/** @type {number} */ days) => (days === 1 ? "day" : "days"),
     total: (/** @type {number} */ days) => `${days} ${days === 1 ? "day" : "days"} in all`,
-    rate: "30 days",
-    fresh: "No check-ins yet: today can be day 1",
-    rateSaid: (/** @type {number} */ done) => `Done ${done} of the last 30 days`,
-    week: "The last seven days",
-    weekdays: ["S", "M", "T", "W", "T", "F", "S"],
-    today: "Today",
+    fresh: ["No check-ins yet", "today can be day 1"],
+    weeks: "Last five weeks",
+    got: (/** @type {number} */ days) => ["", String(days), ` ${days === 1 ? "day" : "days"} done`],
+    week: "This week",
+    initials: ["S", "M", "T", "W", "T", "F", "S"],
+    today: "", // a week's circle is too small for "Today": its initial, ringed as today
     day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {boolean} */ done) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day}${done ? ", done" : ", not done"}`,
   },
 };
@@ -88,6 +99,12 @@ function dayAfter(day, count) {
   return `${moved.getUTCFullYear()}-${two(moved.getUTCMonth() + 1)}-${two(moved.getUTCDate())}`;
 }
 
+/** The weekday of a day written YYYY-MM-DD, 0 for Sunday. @param {string} day */
+function weekdayOf(day) {
+  const [year, month, date] = day.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, date)).getUTCDay();
+}
+
 /**
  * The habit `data` is (context.readJSON's, or the draft context.editJSON hands a change): its name ("" for
  * none yet) and its days, as they stand; throws saying why it is none, and the block draws nothing over it.
@@ -133,30 +150,30 @@ function toggled(days, today) {
 }
 
 /**
- * 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.
+ * The days of the `weeks` weeks that end with the one `today` is in, Monday first, oldest first: each its
+ * day (YYYY-MM-DD), its weekday (0 for Sunday), whether it was done, whether it is today, one to come
+ * (after today) and one of the streak (`streak`: the days of streakOf, back from today or yesterday).
  * @param {string[]} days
  * @param {string} today
+ * @param {number} [weeks]
  */
-function weekOf(days, today) {
+function monthOf(days, today, weeks = 5) {
   const done = new Set(days);
-  return Array.from({ length: 7 }, (_, index) => {
-    const day = dayAfter(today, index - 6);
-    const [year, month, date] = day.split("-").map(Number);
-    return { day, weekday: new Date(Date.UTC(year, month - 1, date)).getUTCDay(), done: done.has(day) };
+  const streak = streakOf(days, today);
+  const last = done.has(today) ? today : dayAfter(today, -1);
+  const first = dayAfter(today, -((weekdayOf(today) + 6) % 7) - 7 * (weeks - 1));
+  return Array.from({ length: weeks * 7 }, (_, index) => {
+    const day = dayAfter(first, index);
+    return { day, weekday: weekdayOf(day), done: done.has(day), today: day === today, future: day > today, streak: day <= last && day > dayAfter(last, -streak) };
   });
 }
 
 /**
- * How many of the `span` days that end today were done (the ring's count: 30 days by default).
+ * The week `today` is in, Monday to Sunday, as monthOf draws a day.
  * @param {string[]} days
  * @param {string} today
- * @param {number} [span]
  */
-function rateOf(days, today, span = 30) {
-  const first = dayAfter(today, 1 - span);
-  return new Set(days.filter((day) => day >= first && day <= today)).size;
-}
+const weekOf = (days, today) => monthOf(days, today, 1);
 
 /**
  * Today checked in, or taken back: one write (context.editJSON), what a press of the button calls, and
@@ -195,46 +212,52 @@ function made(tag, kind) {
   return node;
 }
 
+const FLAME = '<path d="M12 20.8a6 6 0 0 0 6-6c0-3.6-2.4-5.6-3.6-8.6-.3-.8-1.3-1-1.8-.3-1.4 2-2 3.6-2 5-.9-.6-1.4-1.5-1.6-2.4-.1-.6-.9-.8-1.2-.2C6.9 9.6 6 11.4 6 14.8a6 6 0 0 0 6 6z"/>';
+const CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 12.5l4 4 9-9"/></svg>';
+
 DocKit.component({
   id: "gallery/habit",
-  on: ["source", "editable", "clock"],
+  on: ["source", "editable", "clock", "layout"],
   mount(host, context) {
     const words = WORDS[languageOf(document.documentElement)];
     const face = made("div", "face");
     const head = made("div", "head");
     const chip = made("span", "chip");
     chip.setAttribute("aria-hidden", "true");
-    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10.9c2.3-3.3.2-7.8-1-8.9 0 3.4-2.2 5.3-3.7 6.7C5.9 10.1 5 12.3 5 14.3 5 18 8.1 21 12 21s7-3 7-6.7c0-1.7-1.2-4.4-2.3-5.6-2.1 3.4-3.3 3.4-4.7 2.2"/></svg>';
+    chip.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">${FLAME}</svg>`;
     const name = made("input", "name");
     name.type = "text";
     name.placeholder = words.name;
     name.spellcheck = false;
     name.setAttribute("aria-label", words.name);
+    // A narrow card's name as words of up to two lines over the field, which stays the one a press or Tab reaches (style.css).
+    const label = made("span", "label");
+    label.setAttribute("aria-hidden", "true");
     const total = made("span", "total");
-    head.append(chip, name, total);
-    const press = made("button", "check");
-    press.type = "button";
-    // The streak: its label over its count, the count large and its unit after it.
+    head.append(chip, name, label, total);
+    // The streak: its count large and its unit after it (a narrow card a flame before it), or, never
+    // checked in, a line inviting the first.
+    const row = made("div", "row");
     const streak = made("p", "streak");
-    const label = made("span", "label");
-    label.textContent = words.streak;
+    const flame = made("span", "flame");
+    flame.setAttribute("aria-hidden", "true");
+    flame.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${FLAME}</svg>`;
     const count = made("strong", "count");
     const unit = made("span", "unit");
-    streak.append(label, " ", count, " ", unit);
-    // The last 30 days as a ring, its count in the middle (shown where the card has room for it).
-    const ring = made("div", "ring");
-    ring.setAttribute("role", "img");
-    ring.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><circle class="gallery-habit-track" cx="50" cy="50" r="43"/><circle class="gallery-habit-arc" cx="50" cy="50" r="43" pathLength="100" transform="rotate(-90 50 50)"/></svg>';
-    const rate = made("span", "rate");
-    const rateLabel = made("span", "rate-label");
-    rateLabel.textContent = words.rate;
-    ring.append(rate, rateLabel);
+    streak.append(flame, count, unit);
+    const fresh = made("p", "fresh");
+    const press = made("button", "check");
+    press.type = "button";
+    row.append(streak, fresh, press);
+    // A tall card's five weeks: what they are and how many were done, over the month.
+    const caption = made("div", "caption");
+    const captionName = made("span", "caption-name");
+    captionName.textContent = words.weeks;
+    const captionCount = made("span", "caption-count");
+    caption.append(captionName, captionCount);
     const week = made("ol", "week");
     week.setAttribute("aria-label", words.week);
-    // Never checked in: this line where the streak stands, no ring.
-    const fresh = made("p", "fresh");
-    fresh.textContent = words.fresh;
-    face.append(head, ring, streak, fresh, press, week);
+    face.append(head, row, caption, week);
     host.append(face);
     const named = DocKit.input(name, { signal: context.signal, commit: (value) => rename(context, value) });
     press.addEventListener("click", () => {
@@ -243,6 +266,9 @@ DocKit.component({
 
     const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
       if (reason === "clock" && detail !== "day") return; // a minute moves no day
+      const size = context.size;
+      const layout = !size ? "wide" : size.w <= 2 ? "narrow" : size.h >= 4 ? "tall" : "wide";
+      if (face.dataset.layout !== layout) face.dataset.layout = layout;
       const data = context.readJSON("habit");
       if (data === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
       let habit;
@@ -256,33 +282,46 @@ DocKit.component({
       const done = habit.days.includes(today);
       name.readOnly = !writes;
       named.set(habit.name);
+      label.textContent = habit.name || words.name;
+      label.toggleAttribute("data-empty", !habit.name);
       // Where nothing is written, the button is a line saying how today stands: nothing to press.
       press.disabled = !writes;
       press.classList.toggle("gallery-habit-done", done);
-      press.textContent = writes ? (done ? `✓ ${words.checked}` : words.check) : (done ? words.todayDone : words.todayOpen);
+      if (writes && done) press.innerHTML = `${CHECK}<span>${words.checked}</span>`;
+      else press.textContent = writes ? words.check : (done ? words.todayDone : words.todayOpen);
       press.title = writes && done ? words.undo : "";
       press.setAttribute("aria-pressed", String(done));
       face.toggleAttribute("data-fresh", habit.days.length === 0);
       const days = streakOf(habit.days, today);
       count.textContent = String(days);
-      unit.textContent = words.unit(days);
+      unit.textContent = layout === "narrow" ? words.unit(days) : words.streak;
+      fresh.replaceChildren(...(layout === "narrow" ? [words.fresh[0]] : [words.fresh[0], document.createElement("br"), words.fresh[1]]));
       total.textContent = habit.days.length > 0 ? words.total(new Set(habit.days).size) : "";
-      const lately = rateOf(habit.days, today);
-      rate.textContent = String(lately);
-      ring.setAttribute("aria-label", words.rateSaid(lately));
-      ring.style.setProperty("--gallery-habit-share", String(lately / 30));
-      ring.toggleAttribute("data-none", lately === 0);
-      week.replaceChildren(...weekOf(habit.days, today).map(({ day, weekday, done: kept }) => {
+      const span = layout === "tall" ? 5 : 1;
+      const shown = monthOf(habit.days, today, span);
+      week.dataset.weeks = String(span);
+      const [before, got, after] = words.got(shown.filter((day) => day.done && !day.future).length);
+      const bold = document.createElement("b");
+      bold.textContent = got;
+      captionCount.replaceChildren(before, bold, after);
+      const initials = span === 5 ? [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
+        const item = made("li", "initial");
+        item.setAttribute("aria-hidden", "true");
+        item.textContent = words.initials[weekday];
+        return item;
+      }) : [];
+      week.replaceChildren(...initials, ...shown.map(({ day, weekday, done: kept, today: now, future, streak: inStreak }) => {
         const item = made("li", "day");
         item.classList.toggle("gallery-habit-kept", kept);
-        item.classList.toggle("gallery-habit-today", day === today);
+        item.classList.toggle("gallery-habit-today", now);
+        item.classList.toggle("gallery-habit-future", future);
+        item.classList.toggle("gallery-habit-streak-day", inStreak);
         const [, month, date] = day.split("-").map(Number);
         item.setAttribute("aria-label", words.day(month, date, kept));
         item.title = words.day(month, date, kept);
-        const dot = made("span", "dot");
-        const label = made("span", "weekday");
-        label.textContent = day === today ? words.today : words.weekdays[weekday];
-        item.append(dot, label);
+        // A week's circle says its day by its initial (今 for today), a month's by its date; a day done of a week, a tick.
+        if (span === 1 && kept && !future) item.innerHTML = CHECK;
+        else item.textContent = span === 5 ? String(date) : now && words.today ? words.today : words.initials[weekday];
         return item;
       }));
     };

package/packs/gallery/habit/preview.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10.9c2.3-3.3.2-7.8-1-8.9 0 3.4-2.2 5.3-3.7 6.7C5.9 10.1 5 12.3 5 14.3 5 18 8.1 21 12 21s7-3 7-6.7c0-1.7-1.2-4.4-2.3-5.6-2.1 3.4-3.3 3.4-4.7 2.2"/></g><rect x="50" y="28" width="52" height="6" rx="3" fill="#3b3a37"/><rect x="180" y="29" width="26" height="4" rx="2" fill="#c4c2bd"/><circle cx="51" cy="76" r="19" fill="none" stroke="#ecebe8" stroke-width="4.5"/><circle cx="51" cy="76" r="19" fill="none" stroke="#2e7cd1" stroke-width="4.5" stroke-linecap="round" stroke-dasharray="95.5 119.4" transform="rotate(-90 51 76)"/><text x="51" y="79" text-anchor="middle" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#3b3a37">24</text><rect x="45" y="84" width="12" height="2.5" rx="1.25" fill="#c4c2bd"/><rect x="84" y="47" width="24" height="4" rx="2" fill="#c4c2bd"/><text x="83" y="69" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="18" font-weight="600" letter-spacing="-.5" fill="#3b3a37">6</text><rect x="96" y="63" width="9" height="4" rx="2" fill="#c4c2bd"/><rect x="172" y="51" width="38" height="15" rx="5" fill="#ebf2fa"/><rect x="183" y="56" width="16" height="5" rx="2.5" fill="#2e7cd1"/><circle cx="89" cy="86" r="5.5" fill="#2e7cd1"/><path d="M86.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="86.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="108" cy="86" r="5.5" fill="#ecebe8"/><rect x="105.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="127" cy="86" r="5.5" fill="#2e7cd1"/><path d="M124.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="124.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="146" cy="86" r="5.5" fill="#2e7cd1"/><path d="M143.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="143.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="165" cy="86" r="5.5" fill="#2e7cd1"/><path d="M162.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="162.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="184" cy="86" r="5.5" fill="#2e7cd1"/><path d="M181.44 86.16l1.76 1.76 3.52-3.68" fill="none" stroke="#fff" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/><rect x="181.5" y="95" width="5" height="2.5" rx="1.25" fill="#c4c2bd"/><circle cx="203" cy="86" r="4.9" fill="none" stroke="#2e7cd1" stroke-width="1.2"/><rect x="200.5" y="95" width="5" height="2.5" rx="1.25" fill="#2e7cd1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#fdf1dd"/><rect x="42" y="24.5" width="54" height="5" rx="2.5" fill="#37352f"/><rect x="100" y="24.5" width="20" height="5" rx="2.5" fill="#d4d3cf"/><rect x="28" y="42" width="24" height="20" rx="3" fill="#1d1d1b"/><rect x="56" y="56" width="22" height="5" rx="2.5" fill="#a6a5a1"/><rect x="176" y="42" width="36" height="18" rx="5" fill="#ebf2fa"/><rect x="186" y="48.5" width="16" height="5" rx="2.5" fill="#4084cf"/><circle cx="37" cy="88" r="9" fill="#4084cf"/><path d="M33.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="66" cy="88" r="9" fill="#4084cf"/><path d="M62.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="95" cy="88" r="9" fill="#4084cf"/><path d="M91.5 88l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="124" cy="88" r="8.4" fill="none" stroke="#4084cf" stroke-width="1.3"/><circle cx="153" cy="88" r="8.6" fill="none" stroke="#ebebe9"/><circle cx="182" cy="88" r="8.6" fill="none" stroke="#ebebe9"/><circle cx="211" cy="88" r="8.6" fill="none" stroke="#ebebe9"/></svg>