@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/stats/style.css

@@ -0,0 +1,151 @@
+/* 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 face fills its card on a custom page (the board draws the frame), in
+   the kit's card tokens: its head (the chip and 工作区统计, its end clear of the card's grip), then four
+   cells in the middle of the room under it, each its label small and muted (after a small picture of
+   what it counts) over its number, large (the cards' figure size), its
+   unit small and muted after it, the to-dos done with a bar under their count, as wide as the cell, the
+   share done in the accent on the track; two by two on a card 4 cells wide, the room the card has spread
+   evenly above, between and under the rows (the face's gap between them at the least), all four in a row
+   past 560px (the instance is a container), the hero size, a hairline between them and each cell's bar
+   ending short of the next one's line, and on a card too low for two rows with their air (under 160px: a
+   4 x 2 one from a window 1440px wide and narrower) in a row too, smaller; a line under them where the
+   workspace cannot be read. Light and dark. */
+[data-doc-component="gallery/stats"] {
+  container-type: size;
+  height: 9em;
+  > .gallery-stats-face {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-face-gap);
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+  }
+  > .gallery-stats-face > .gallery-stats-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-stats-face > .gallery-stats-head > .gallery-stats-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent);
+  }
+  > .gallery-stats-face > .gallery-stats-head > .gallery-stats-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-stats-face > .gallery-stats-head > .gallery-stats-title {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-stats-face > .gallery-stats-grid {
+    display: grid;
+    flex: 1 1 auto;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-content: space-evenly;
+    gap: var(--gallery-face-gap) 16px;
+    min-height: 0;
+    margin: 0;
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell { min-width: 0; }
+  /* Each label after a small picture of what it counts, in its muted color. */
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: var(--gallery-meta-size);
+    line-height: 16px;
+    color: var(--doc-muted);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label::before {
+    content: "";
+    flex: none;
+    width: 13px;
+    height: 13px;
+    background: currentColor;
+    opacity: .85;
+    -webkit-mask: var(--gallery-stats-icon) center / contain no-repeat;
+    mask: var(--gallery-stats-icon) center / contain no-repeat;
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="documents"] { --gallery-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/svg%3E"); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="todos"] { --gallery-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="words"] { --gallery-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7V5h14v2'/%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M9 19h6'/%3E%3C/svg%3E"); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="week"] { --gallery-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.83 2.83 0 1 0-4-4L4 16v4'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    margin: 3px 0 0;
+    font-size: var(--gallery-figure-size);
+    line-height: 1.1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit {
+    margin-inline-start: var(--gallery-unit-gap);
+    font-size: max(12px, var(--gallery-unit-size));
+    font-weight: 500;
+    letter-spacing: 0;
+    color: var(--doc-muted);
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit:empty { display: none; }
+  /* The share of the to-dos done: a bar of the accent on the track under the count, as wide as the cell. */
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar {
+    flex: 0 0 100%;
+    height: 4px;
+    margin-top: 6px;
+    border-radius: 2px;
+    background: var(--gallery-track);
+    overflow: hidden;
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar > .gallery-stats-fill {
+    display: block;
+    width: calc(var(--share, 0) * 100%);
+    height: 100%;
+    border-radius: 2px;
+    background: var(--gallery-accent);
+  }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar[hidden] { display: none; }
+  > .gallery-stats-face > .gallery-stats-line { margin: 0; font-size: var(--gallery-meta-size); line-height: 1.4; color: var(--doc-muted); }
+  > .gallery-stats-face > .gallery-stats-line[hidden] { display: none; }
+}
+/* Wide (8 cells and more): the four in one row, a hairline between them, each cell's bar ending short of the
+   next line, the hero size. */
+@container (min-width: 560px) {
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { padding-inline-start: 20px; border-inline-start: 1px solid var(--doc-grid); }
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell:not(:last-child) { padding-inline-end: 16px; }
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { font-size: var(--gallery-hero-size); }
+}
+/* Low (under 160px: a 4 x 2 card from a window 1440px wide and narrower, where two rows under the head would
+   leave the second at the card's bottom edge): the four in one row, their numbers smaller, their labels with
+   no picture. */
+@container (max-height: 160px) and (max-width: 559px) {
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; align-content: center; }
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label::before { display: none; }
+  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { font-size: clamp(16px, 6.4cqi, 22px); }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no card
+   is around it (a document, as gallery block check shows it) it is as high as a 4 x 2 card's face, for the
+   instance is a container of its height too and would otherwise have none. */
+.gallery-card > [data-doc-component="gallery/stats"] { height: 100%; }

package/packs/gallery/stats/template.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/stats"></div>

package/packs/gallery/stats/writing.md

@@ -0,0 +1,11 @@
+# 工作区统计 (gallery/stats)
+
+A card for a custom page (its places are `page`, its needs `workspace`): four numbers of the workspace, its documents (文档), its to-dos done of all (待办完成, 3/12), the words of all its documents (总字数) and how many documents were edited this week, since Monday (本周编辑). Use it on the home page.
+
+## 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 stats`: the instance is empty, `<div data-doc-component="gallery/stats"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes. Sizes: 4 × 2 (the default: two by two) and 8 × 2 (the four in a row).
+
+## How it looks
+
+工作区统计 beside a chart's chip on the top line, then each number large under its label, muted, after a small picture of what it counts (two by two, or four in a row on a wide card or a low one), the to-dos done with a bar under them, the share done in the accent; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark; a workspace with no document shows each 0. The numbers follow by themselves: a document written, a to-do checked, a document made or taken away shows at once. A big count of words is said short (12.3万). In an exported file, which has no workspace to read, each is a dash, with a line saying it shows when the page is opened in Gallery. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/today/component.json

@@ -0,0 +1,12 @@
+{
+  "id": "gallery/today",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "问候与日期", "en": "Greeting and date" },
+  "description": { "zh": "按时间问候，显示今天的日期和星期，到点自己更新", "en": "A greeting by the time of day, today's date and weekday, kept up to date by the clock" },
+  "words": "wenhouyuriqi wenhou riqi xingqi jintian today greeting date 问候 日期 星期 今天 时间",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-today-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2]], "resize": true }
+}

package/packs/gallery/today/example.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/today"></div>

package/packs/gallery/today/kit.js

@@ -0,0 +1,185 @@
+// gallery/today (问候与日期): a greeting by the hour of the reader's clock (早上好 from 5 to 11, 下午好
+// from 12 to 17, 晚上好 from 18 to 4), today's date and its weekday, in the page's language and in the
+// order it writes them (11月7日 星期六, Saturday, November 7: as the countdown's foot writes a date): the
+// UI's where Gallery says it (data-ge-language on the root), else English for a page whose lang is en,
+// else Chinese, the kit's own rule. Drawn again by the kit's clock (`clock`): at each whole minute, which
+// moves the greeting on as the hour turns, and as a day begins, which moves the date; one timer for
+// every block on the page, none of its own. It holds no part and writes nothing: all it shows is drawn
+// (the manifest's `runtime`), and a file holds the bare instance. On a custom page it is a card's whole
+// face, laid out by the room it has (style.css, container queries): a 2 x 2 card stacks what a 4 x 2
+// one sets on a line. Its head is the cards' chip (the kit's card tokens): the sun from 5 to 17, the moon
+// from 18 to 4, as the greeting's part of the day, which the face says too (`data-sky`: its glow, the
+// sun's warm color or the accent), and the number of the week (ISO 8601's, `weekNumberOf`) its quiet meta. A card wide enough also shows the week it is in, Monday
+// to Sunday, each day's initial over its date, today's 今 (Today) over its date and marked (`weekOf`):
+// drawn, for the eye alone (the date says it), again as a day begins. The date line's weekday is marked
+// (gallery-today-weekday), which a narrow card leaves out, so that its head stays one line (11月9日).
+
+const WORDS = {
+  zh: {
+    morning: "早上好",
+    afternoon: "下午好",
+    evening: "晚上好",
+    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    initials: ["日", "一", "二", "三", "四", "五", "六"],
+    today: "今",
+    week: (/** @type {number} */ number) => `第 ${number} 周`,
+    /** The date and its weekday as the language writes them, pieces a line breaks between. @param {number} month @param {number} day @param {string} weekday */
+    line: (month, day, weekday) => [`${month}月${day}日`, weekday],
+    /** Which of the line's pieces is the weekday. */
+    weekdayAt: 1,
+  },
+  en: {
+    morning: "Good morning",
+    afternoon: "Good afternoon",
+    evening: "Good evening",
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    initials: ["S", "M", "T", "W", "T", "F", "S"],
+    today: "Today",
+    week: (/** @type {number} */ number) => `Week ${number}`,
+    /** The weekday first: Saturday, November 7. @param {number} month @param {number} day @param {string} weekday */
+    line: (month, day, weekday) => [`${weekday},`, `${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month - 1]} ${day}`],
+    weekdayAt: 0,
+  },
+};
+
+/** 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";
+}
+
+/**
+ * The part of the day an hour (0 to 23) is in, as the greeting says it: morning from 5 to 11,
+ * afternoon from 12 to 17, evening from 18 to 4.
+ * @param {number} hour
+ * @returns {"morning" | "afternoon" | "evening"}
+ */
+function partOfDay(hour) {
+  if (hour >= 5 && hour < 12) return "morning";
+  if (hour >= 12 && hour < 18) return "afternoon";
+  return "evening";
+}
+
+/**
+ * What the card says at `now` (the reader's clock) in `language`: the greeting, the date line (its
+ * month and day and the weekday, in the language's order, a list of words a line breaks between and
+ * never inside), and the date as a <time> names it (YYYY-MM-DD).
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function faceOf(now, language) {
+  const words = WORDS[language];
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  return {
+    greeting: words[partOfDay(now.getHours())],
+    line: words.line(now.getMonth() + 1, now.getDate(), words.weekdays[now.getDay()]),
+    datetime: `${now.getFullYear()}-${two(now.getMonth() + 1)}-${two(now.getDate())}`,
+  };
+}
+
+// The chip's two pictures, 24 x 24 lines in the chip's ink: the sun by day, the moon in the evening.
+const PICTURES = {
+  sun: '<circle cx="12" cy="12" r="4" fill="currentColor" fill-opacity=".28"/><path d="M12 2.6v2.3M12 19.1v2.3M2.6 12h2.3M19.1 12h2.3M5.4 5.4l1.6 1.6M17 17l1.6 1.6M5.4 18.6l1.6-1.6M17 7l1.6-1.6"/>',
+  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"/>',
+};
+
+/**
+ * The week `now` is in, Monday first, as the card's strip draws it in `language`: seven of { initial (the
+ * weekday's, today's 今 or Today), date (the day of the month), today, past (a day before today) }.
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function weekOf(now, language) {
+  const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7), 12);
+  return Array.from({ length: 7 }, (_, index) => {
+    const day = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + index, 12);
+    const today = index === (now.getDay() + 6) % 7;
+    return { initial: today ? WORDS[language].today : WORDS[language].initials[day.getDay()], date: day.getDate(), today, past: index < (now.getDay() + 6) % 7 };
+  });
+}
+
+/**
+ * The number of the week `now` is in, as ISO 8601 counts them (the week a year's first Thursday is in its
+ * first, Monday its first day), 1 to 53.
+ * @param {Date} now
+ */
+function weekNumberOf(now) {
+  const thursday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+  thursday.setUTCDate(thursday.getUTCDate() + 3 - ((thursday.getUTCDay() + 6) % 7)); // the Thursday of its week, which says the year
+  const first = Date.UTC(thursday.getUTCFullYear(), 0, 1);
+  return Math.ceil(((thursday.getTime() - first) / 86_400_000 + 1) / 7);
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ */
+function made(tag, kind) {
+  const node = document.createElement(tag);
+  node.className = `gallery-today-${kind}`;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/today",
+  on: ["clock"],
+  mount(host) {
+    const face = made("div", "face");
+    const chip = made("span", "chip");
+    chip.setAttribute("aria-hidden", "true");
+    const greeting = made("p", "greeting");
+    const date = made("time", "date");
+    const week = made("ol", "week");
+    week.setAttribute("aria-hidden", "true");
+    face.append(chip, greeting, date, week);
+    // The head's quiet meta, at its end: the number of the week.
+    const number = made("span", "meta");
+    number.setAttribute("aria-hidden", "true");
+    face.append(number);
+    host.append(face);
+    // Each word set only when it is another, so that a minute that changes nothing writes nothing.
+    const put = (/** @type {HTMLElement} */ node, /** @type {string} */ words) => {
+      if (node.textContent !== words) node.textContent = words;
+    };
+    const draw = () => {
+      const at = new Date();
+      const language = languageOf(document.documentElement);
+      const now = faceOf(at, language);
+      const sky = partOfDay(at.getHours()) === "evening" ? "moon" : "sun";
+      if (chip.dataset.sky !== sky) {
+        chip.dataset.sky = sky;
+        face.dataset.sky = sky;
+        chip.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">${PICTURES[sky]}</svg>`;
+      }
+      put(greeting, now.greeting);
+      // The date line's pieces, a space between them, made again only when its words are others.
+      if (date.textContent !== now.line.join(" ")) {
+        date.replaceChildren(...now.line.flatMap((words, index) => {
+          const piece = made("span", "piece");
+          piece.classList.toggle("gallery-today-weekday", index === WORDS[language].weekdayAt);
+          piece.textContent = words;
+          return index === 0 ? [piece] : [" ", piece];
+        }));
+      }
+      if (date.dateTime !== now.datetime) {
+        date.dateTime = now.datetime;
+        number.textContent = WORDS[language].week(weekNumberOf(at));
+        week.replaceChildren(...weekOf(at, language).map((day) => {
+          const item = made("li", "day");
+          item.classList.toggle("gallery-today-now", day.today);
+          item.classList.toggle("gallery-today-past", day.past);
+          const initial = made("span", "initial");
+          initial.textContent = day.initial;
+          const number = made("span", "number");
+          number.textContent = String(day.date);
+          item.append(initial, number);
+          return item;
+        }));
+      }
+    };
+    draw();
+    return { update: draw };
+  },
+});

package/packs/gallery/today/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#fbf0df"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#d98a1c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.6"/><path d="M12 2.6v2.3M12 19.1v2.3M2.6 12h2.3M19.1 12h2.3M5.4 5.4l1.6 1.6M17 17l1.6 1.6M5.4 18.6l1.6-1.6M17 7l1.6-1.6"/></g><rect x="50" y="28" width="30" height="6" rx="3" fill="#3b3a37"/><rect x="84" y="28" width="22" height="6" rx="3" fill="#c4c2bd"/><rect x="30" y="50" width="74" height="17" rx="5" fill="#3b3a37"/><rect x="35.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="34" y="89" width="10" height="5" rx="2.5" fill="#e9e8e5"/><rect x="61" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="59.5" y="89" width="10" height="5" rx="2.5" fill="#e9e8e5"/><rect x="80" y="78" width="20" height="20" rx="5" fill="#efeeec"/><rect x="86.5" y="82" width="7" height="3" rx="1.5" fill="#2e7cd1"/><rect x="85" y="89" width="10" height="5" rx="2.5" fill="#2e7cd1"/><rect x="112" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="110.5" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="137.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="136" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="163" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="161.5" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="188.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="187" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/></svg>

package/packs/gallery/today/style.css

@@ -0,0 +1,120 @@
+/* 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 face fills its card on a custom page (the board draws the frame), in
+   the kit's card tokens, laid out as a grid: the chip (the sun by day in its warm color, the moon in the
+   evening in the accent) and the date beside it, the date in the text's color and the weekday muted, its
+   end clear of the card's grip; the greeting large in the middle of the room under them; on a card wide
+   enough (past 260px) the week at the bottom, each day's initial over its date, muted, the days gone
+   fainter still, today's 今 over its date on a quiet gray in the accent; the number of the week its head's
+   quiet meta at the end; a glow at the card's top left, the sun's warm color by day, the accent's in the
+   evening, as the hero of a home page (the face's data-sky), fainter in dark, where a warm wash on the
+   card's gray reads as haze. The greeting grows with the card's width (the instance is a container: cqi),
+   between a least and a most, so that a 2 x 2 card and a 4 x 2 one at 1920 both read as a widget. A narrow
+   card's head is the date alone, its weekday left out, on one line. Light and dark. */
+[data-doc-component="gallery/today"] {
+  container-type: inline-size;
+  --gallery-today-sun: light-dark(#d98a1c, #f0b44f);
+  --gallery-today-sun-soft: light-dark(rgb(217 138 28 / 11%), rgb(240 180 79 / 14%));
+  /* The glow at the card's top left: the sun's warm color by day, the accent's in the evening. */
+  --gallery-today-glow: light-dark(rgb(240 160 60 / 12%), rgb(240 180 79 / 3.5%));
+  --gallery-today-glow-evening: light-dark(rgb(46 124 209 / 8%), rgb(92 154 217 / 6%));
+  > .gallery-today-face {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: "chip date meta" "greeting greeting greeting" "week week week";
+    align-items: center;
+    gap: 8px 10px;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+  }
+  > .gallery-today-face > .gallery-today-chip {
+    grid-area: chip;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent);
+  }
+  > .gallery-today-face > .gallery-today-chip[data-sky="sun"] { background: var(--gallery-today-sun-soft); color: var(--gallery-today-sun); }
+  > .gallery-today-face > .gallery-today-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-today-face > .gallery-today-date {
+    grid-area: date;
+    display: block;
+    min-width: 0;
+    font-size: var(--gallery-title-size);
+    line-height: 18px;
+    color: var(--doc-muted);
+  }
+  /* The number of the week, the head's quiet meta at its end, at the content's edge, faded while the card's grip shows. */
+  > .gallery-today-face > .gallery-today-meta {
+    grid-area: meta;
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+    font-size: var(--gallery-meta-size);
+    line-height: 18px;
+    color: var(--doc-muted);
+    white-space: nowrap;
+  }
+  /* The date in the text's color, its weekday muted; they break between them, never inside either. */
+  > .gallery-today-face > .gallery-today-date > span { display: inline-block; }
+  > .gallery-today-face > .gallery-today-date > span:not(.gallery-today-weekday) { color: var(--gallery-text-strong); font-weight: 600; }
+  > .gallery-today-face > .gallery-today-greeting {
+    grid-area: greeting;
+    align-self: center;
+    margin: 0;
+    font-size: clamp(24px, 10.5cqi, 48px);
+    line-height: 1.15;
+    font-weight: 600;
+    letter-spacing: -.02em;
+    color: var(--gallery-text-strong);
+    overflow-wrap: anywhere;
+  }
+  > .gallery-today-face > .gallery-today-week {
+    grid-area: week;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 2px;
+    margin: 8px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    padding: 4px 0;
+    border-radius: 8px;
+    line-height: 1;
+  }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-initial { font-size: 11px; color: var(--doc-muted); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-number { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--doc-muted); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-past { opacity: .55; }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now { background: var(--gallery-neutral-soft); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-initial,
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-number { color: var(--gallery-accent); font-weight: 600; }
+}
+/* A narrow card (2 wide): no week, no week's number; the greeting in the middle of the room under the date. */
+@container (max-width: 260px) {
+  [data-doc-component="gallery/today"] > .gallery-today-face { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "chip date" "greeting greeting"; }
+  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-date { padding-inline-end: var(--gallery-grip-room, 0px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-date > .gallery-today-weekday { display: none; }
+  [data-doc-component="gallery/today"] > .gallery-today-face > :is(.gallery-today-week, .gallery-today-meta) { display: none; }
+  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-greeting { font-size: clamp(24px, 15cqi, 44px); }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding, and its
+   glow the whole card's, from its edges (the face taken out over the card's padding and given it back). */
+.gallery-card > [data-doc-component="gallery/today"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face {
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  padding: var(--gallery-card-pad);
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  background: linear-gradient(160deg, var(--gallery-today-glow) 0%, transparent 62%);
+}
+.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face[data-sky="moon"] { background: linear-gradient(160deg, var(--gallery-today-glow-evening) 0%, transparent 62%); }

package/packs/gallery/today/template.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/today"></div>

package/packs/gallery/today/writing.md

@@ -0,0 +1,14 @@
+# 问候与日期 (gallery/today)
+
+A card for a custom page (its places are `page`): a greeting by the time of day (早上好, 下午好, 晚上好), today's date and its weekday, in the language Gallery's UI speaks. Use it at the top of a home page or of any page the user opens every day.
+
+## 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 today`: the instance is empty, `<div data-doc-component="gallery/today"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes.
+
+- Sizes: 4 × 2 (the default: the date at the top, the greeting in the middle, the week at the bottom) and 2 × 2 (the date and the greeting, no week). The user may switch between them.
+- Its places hold no document: no document's menu offers it. In a document it would show the same words, framed by nothing.
+
+## How it looks
+
+The date beside a chip of the sun (by day) or the moon (in the evening) at the top, the number of the week (第 46 周) at its end, the greeting large in the middle, a soft glow at the card's top left (warm by day, the accent's blue in the evening), and on a card wide enough the week it is in at the bottom, Monday to Sunday, today's 今 over its date and marked (a 2 × 2 card's top line the date alone, no weekday); in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark. It changes by itself: the greeting as the hour turns (it hears the kit's clock each minute), the date at midnight. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/todos/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery/todos",
+  "apiVersion": 1,
+  "version": "1.3.0",
+  "name": { "zh": "我的待办", "en": "My to-dos" },
+  "description": { "zh": "所有文档里没完成的待办：勾选就写回那篇文档，点文字打开它", "en": "The to-dos of every document not done yet: check one in its document, or click it to open it there" },
+  "words": "wodedaiban daiban renwu todo todos tasks checklist 待办 任务 清单 我的待办 没完成",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-todos-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 4], [4, 6], [8, 4]], "resize": true },
+  "settings": [
+    { "key": "document", "label": { "zh": "只看这篇文档", "en": "Only this document" }, "type": "document" },
+    { "key": "done", "label": { "zh": "也显示已完成的", "en": "Show done ones too" }, "type": "switch", "default": false }
+  ],
+  "needs": ["workspace"]
+}

package/packs/gallery/todos/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/todos">
+  <script type="application/json">{"done":false}</script>
+</div>