@heycys/gallery 0.1.2 → 0.2.1

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

@@ -0,0 +1,119 @@
+/* 柔光风格's workspace numbers. Every selector starts at the instance and goes down from it, 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, and no head: four cells, each its small chip and name over its number, large, its
+   unit muted, and under it a small thing of its own (the words a document holds on average; the words'
+   line, washed under it and its end ringed; the to-dos' bar and share; this week's bars, today's in the
+   accent, the days to come a stub). By the card's size (data-layout, from the script): a row of four on a
+   wide card, a hairline between them, each like a small card; two by two on a 4 × 4 card, hairlines between;
+   on a 4 × 2 card two by two with no feet, each its name after a small picture in the accent. Where nothing
+   could be read, a muted line at the bottom right says why. On a custom page the face is the card's whole
+   room, taken out over the card's padding, the board's line around it; where no card is (a document, as
+   gallery block check shows it) the face frames itself at an 8 × 2 card's size. */
+[data-doc-component="gallery-soft/stats"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-card: light-dark(#ffffff, #1f1f20);
+  --soft-card-line: light-dark(rgb(28 28 32 / 6.5%), rgb(255 255 255 / 7.5%));
+  --soft-card-shadow: 0 0 0 1px var(--soft-card-line), 0 1px 2px light-dark(rgb(28 28 32 / 3.5%), rgb(0 0 0 / 0%)), 0 8px 24px -14px light-dark(rgb(28 28 32 / 12%), rgb(0 0 0 / 60%));
+  --soft-wash: linear-gradient(180deg, light-dark(rgb(62 122 198 / 6%), rgb(126 173 226 / 7%)) 0%, transparent 52%);
+  --soft-text: light-dark(#37352f, #d9d9dc);
+  --soft-strong: light-dark(#1f1f1f, #f1f1f2);
+  --soft-muted: light-dark(#7a7a7f, #9d9da3);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-ink: light-dark(#356cb3, #98bee9);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-accent-mid: light-dark(#afcaea, #4a6f9b);
+  --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-bad: light-dark(#c9473d, #f08a80);
+  --soft-bad-soft: light-dark(#fcecea, rgb(240 138 128 / 14%));
+  > .gallery-soft-stats-face {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 624px;
+    max-width: 100%;
+    height: 144px;
+    padding: 0;
+    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-stats-face > .gallery-soft-stats-grid { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; min-height: 0; }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
+  > .gallery-soft-stats-face[data-layout="compact"] { padding: calc(20px - var(--soft-edge, 0px)); }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 12px; align-content: center; }
+  /* A cell: its chip and name, its number, its foot. */
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: calc(18px - var(--soft-edge, 0px)) calc(20px - var(--soft-edge, 0px)); }
+  > .gallery-soft-stats-face[data-layout="row"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell + .gallery-soft-stats-cell { box-shadow: -1px 0 0 var(--soft-track); }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell { padding: calc(16px - var(--soft-edge, 0px)) calc(18px - var(--soft-edge, 0px)); }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(2) { box-shadow: -1px 0 0 var(--soft-track); }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(3) { box-shadow: 0 -1px 0 var(--soft-track); }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(4) { box-shadow: -1px 0 0 var(--soft-track), 0 -1px 0 var(--soft-track); }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell { gap: 4px; padding: 0; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label { display: flex; align-items: center; gap: 8px; height: 22px; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label > .gallery-soft-stats-chip { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--soft-accent-soft); color: var(--soft-accent); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label > .gallery-soft-stats-chip > svg { display: block; width: 13px; height: 13px; }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label { gap: 6px; height: 18px; font-size: 12px; }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label > .gallery-soft-stats-chip { width: 14px; height: 14px; border-radius: 0; background: none; }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-label > .gallery-soft-stats-chip > svg { width: 14px; height: 14px; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure {
+    margin: 8px 0 0;
+    white-space: nowrap;
+    font: 700 30px/1 var(--soft-num);
+    letter-spacing: -.025em;
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-stats-face[data-layout="row"][data-w="12"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure { font-size: 40px; }
+  > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure { margin-top: 12px; }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure { margin: 0; font-size: 24px; letter-spacing: -.015em; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure > .gallery-soft-stats-unit { margin-left: 4px; font: 500 13px var(--soft-font); letter-spacing: 0; color: var(--soft-muted); }
+  > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-figure > .gallery-soft-stats-unit { margin-left: 3px; font-size: 12px; }
+  /* Its foot: what the number has under it. */
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: auto 0 0; font-size: 11.5px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-said > .gallery-soft-stats-average { font: 600 11.5px var(--soft-num); color: var(--soft-text); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft-track); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bar > .gallery-soft-stats-fill { display: block; height: 100%; border-radius: 3px; background: var(--soft-accent); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-share { font: 600 11.5px var(--soft-num); color: var(--soft-accent-ink); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bars { display: flex; align-items: flex-end; gap: 4px; height: 24px; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bars > .gallery-soft-stats-day { width: 9px; border-radius: 2.5px; background: var(--soft-accent-mid); }
+  > .gallery-soft-stats-face[data-w="12"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bars > .gallery-soft-stats-day { width: 12px; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bars > .gallery-soft-stats-today { background: var(--soft-accent); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-bars > .gallery-soft-stats-future { height: 3px; background: var(--soft-track); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > :is(.gallery-soft-stats-grew, .gallery-soft-stats-fell) { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 20px; padding: 0 7px; border-radius: 6px; font: 600 11.5px var(--soft-num); background: var(--soft-good-soft); color: var(--soft-good); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-fell { background: var(--soft-bad-soft); color: var(--soft-bad); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > :is(.gallery-soft-stats-grew, .gallery-soft-stats-fell) > svg { display: block; width: 12px; height: 12px; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-room { flex: 1; min-width: 40px; }
+  > .gallery-soft-stats-face > .gallery-soft-stats-grid > .gallery-soft-stats-cell > .gallery-soft-stats-foot > .gallery-soft-stats-room > .gallery-soft-stats-spark > svg { display: block; overflow: visible; }
+  > .gallery-soft-stats-face .gallery-soft-stats-wash-top { stop-color: var(--soft-accent); stop-opacity: .22; }
+  > .gallery-soft-stats-face .gallery-soft-stats-wash-end { stop-color: var(--soft-accent); stop-opacity: 0; }
+  > .gallery-soft-stats-face .gallery-soft-stats-spark-line { fill: none; stroke: var(--soft-accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
+  > .gallery-soft-stats-face .gallery-soft-stats-end { fill: var(--soft-card); stroke: var(--soft-accent); stroke-width: 1.8; }
+  /* Nothing read: the line saying why, at the bottom right. */
+  > .gallery-soft-stats-face > .gallery-soft-stats-line { position: absolute; right: 20px; bottom: 10px; margin: 0; font-size: 11.5px; color: var(--soft-muted); }
+  > .gallery-soft-stats-face > .gallery-soft-stats-line[hidden] { display: none; }
+}
+/* On a custom page: the face over the card's whole room, the board's line around it. */
+.gallery-card > [data-doc-component="gallery-soft/stats"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/stats"] > .gallery-soft-stats-face {
+  --soft-edge: 1px;
+  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;
+}
+/* The cell at the card's top right keeps its name clear of the grip's corner. */
+.gallery-card > [data-doc-component="gallery-soft/stats"] > .gallery-soft-stats-face[data-layout="row"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(4) > .gallery-soft-stats-label { padding-inline-end: 20px; }
+.gallery-card > [data-doc-component="gallery-soft/stats"] > .gallery-soft-stats-face[data-layout="quad"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(2) > .gallery-soft-stats-label { padding-inline-end: 22px; }
+.gallery-card > [data-doc-component="gallery-soft/stats"] > .gallery-soft-stats-face[data-layout="compact"] > .gallery-soft-stats-grid > .gallery-soft-stats-cell:nth-child(2) > .gallery-soft-stats-label { padding-inline-end: 20px; }

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

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

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

@@ -0,0 +1,13 @@
+# 工作区统计 (gallery-soft/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.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/stats`, its settings, its data and what the user does on it the same, in the soft look of design A (a faint wash of blue from the card's top, rounded chips, big numbers). Write it only where the user asked for 柔光风格 or the page already holds its cards.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add gallery-soft/stats`: the instance is empty, `<div data-doc-component="gallery-soft/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: 8 × 2 (the default: the four in a row), 12 × 2 (the same, larger, the words added this week beside their line), 4 × 2 (two by two, the numbers alone) and 4 × 4 (two by two, each with the small thing under it).
+
+## How it looks
+
+No head: four cells, each its small chip and name (文档, 总字数, 待办完成, 本周编辑) over its number, large, its unit muted (38 篇, 12.6 万字, 18 / 27, 11 篇), and under each a small thing of its own: the words a document holds on average; how the words grew over the last 30 days, a line washed under it (on a 12 × 2 card the words this week added in a green pill and the last 14 days); the share of the to-dos done as a bar; this week's edits day by day as small bars, today's in the accent, the days to come a stub. It reads the workspace's record of edits for the line and the bars (the plan's activity); in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded tinted chip and a title, its end clear of the card's grip), light and dark. Where the workspace cannot be read (an export) each number is a dash and a line says it shows when opened in Gallery. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery-soft/today/component.json

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

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

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

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

@@ -0,0 +1,222 @@
+// gallery-soft/today (问候与日期, 柔光风格): Gallery 风格's gallery/today in the soft look, the same logic. 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): 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.
+//
+// Its face is laid out by its card's size (`context.size`, read again on `layout`; the manifest's first size
+// where no card is): on a 4 × 2 card the greeting is the hero, large, after the sun by day (from 5 to 17)
+// or the moon in the evening, the date under it with the number of the week (ISO 8601's, `weekNumberOf`) at
+// its end, and the week it is in at the bottom, Monday to Sunday, each day's initial over its date, today's
+// 今 over its date on a disc of the accent (`weekOf`); a 2 × 2 card says the month and the weekday at the
+// top beside the sun, the day of the month large, and the greeting at the bottom. A glow at the card's top
+// left, the sun's warm color by day, the accent's in the evening (the face's data-sky). The face says its
+// size as data-w and data-h, and the frame's padding as data-pad (style.css).
+
+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,
+    /** A small card's top line: the month and the weekday. @param {number} month @param {string} weekday */
+    month: (month, weekday) => `${month}月 · ${weekday}`,
+  },
+  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,
+    /** @param {number} month @param {string} weekday */
+    month: (month, weekday) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} · ${weekday.slice(0, 3)}`,
+  },
+};
+
+/** 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 two pictures, 24 x 24 lines in the face's ink: the sun by day, the moon in the evening.
+const PICTURES = {
+  sun: '<circle cx="12" cy="12" r="4.2"/><path d="M12 2.8v2.1M12 19.1v2.1M2.8 12h2.1M19.1 12h2.1M5.5 5.5l1.5 1.5M17 17l1.5 1.5M5.5 18.5L7 17M17 7l1.5-1.5"/>',
+  moon: '<path d="M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z"/>',
+};
+
+/**
+ * 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);
+}
+
+/**
+ * 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
+ */
+function made(tag, kind) {
+  const node = document.createElement(tag);
+  node.className = `gallery-soft-today-${kind}`;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery-soft/today",
+  on: ["clock", "layout"],
+  mount(host, context) {
+    const face = made("div", "face");
+    const sun = made("span", "sun");
+    sun.setAttribute("aria-hidden", "true");
+    const greeting = made("p", "greeting");
+    const date = made("time", "date");
+    // The line's end: the number of the week.
+    const number = made("span", "meta");
+    number.setAttribute("aria-hidden", "true");
+    const week = made("ol", "week");
+    week.setAttribute("aria-hidden", "true");
+    // A small card's: the month and the weekday at the top, the day of the month large.
+    const month = made("span", "month");
+    month.setAttribute("aria-hidden", "true");
+    const day = made("span", "day");
+    day.setAttribute("aria-hidden", "true");
+    face.append(sun, greeting, month, day, date, number, week);
+    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 lay = () => {
+      const { w, h, pad } = sizeOf(context?.size, [4, 2]);
+      if (face.dataset.w !== String(w)) face.dataset.w = String(w);
+      if (face.dataset.h !== String(h)) face.dataset.h = String(h);
+      if (face.dataset.pad !== pad) face.dataset.pad = pad;
+    };
+    const draw = () => {
+      const at = new Date();
+      const language = languageOf(document.documentElement);
+      const words = WORDS[language];
+      const now = faceOf(at, language);
+      const sky = partOfDay(at.getHours()) === "evening" ? "moon" : "sun";
+      if (face.dataset.sky !== sky) {
+        face.dataset.sky = sky;
+        sun.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${PICTURES[sky]}</svg>`;
+      }
+      put(greeting, now.greeting);
+      put(month, words.month(at.getMonth() + 1, words.weekdays[at.getDay()]));
+      put(day, String(at.getDate()));
+      // 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((piece, index) => {
+          const node = made("span", "piece");
+          node.classList.toggle("gallery-soft-today-weekday", index === words.weekdayAt);
+          node.textContent = piece;
+          return index === 0 ? [node] : [" ", node];
+        }));
+      }
+      if (date.dateTime !== now.datetime) {
+        date.dateTime = now.datetime;
+        number.textContent = words.week(weekNumberOf(at));
+        week.replaceChildren(...weekOf(at, language).map((one) => {
+          const item = made("li", "date-of");
+          item.classList.toggle("gallery-soft-today-now", one.today);
+          item.classList.toggle("gallery-soft-today-past", one.past);
+          const initial = made("span", "initial");
+          initial.textContent = one.initial;
+          const figure = made("span", "number");
+          figure.textContent = String(one.date);
+          item.append(initial, figure);
+          return item;
+        }));
+      }
+    };
+    lay();
+    draw();
+    return {
+      update(reason) {
+        if (reason === "layout") lay();
+        else draw();
+      },
+    };
+  },
+});

package/packs/gallery-soft/today/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"/><circle cx="36" cy="33" r="5" fill="#f6b23c"/><rect x="48" y="26" width="52" height="14" rx="7" fill="#1f1f1f"/><rect x="30" y="46" width="46" height="5" rx="2.5" fill="#c4c2bd"/><rect x="178" y="46" width="26" height="5" rx="2.5" fill="#c4c2bd"/><rect x="36" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="35" y="83" width="10" height="5" rx="2.5" fill="#d9d8d4"/><rect x="61.5" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="60.5" y="83" width="10" height="5" rx="2.5" fill="#d9d8d4"/><rect x="87" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="86" y="83" width="10" height="5" rx="2.5" fill="#d9d8d4"/><rect x="112.5" y="70" width="8" height="3" rx="1.5" fill="#3e7ac6"/><circle cx="116.5" cy="86" r="7.5" fill="#3e7ac6"/><rect x="138" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="137" y="83" width="10" height="5" rx="2.5" fill="#8d8c88"/><rect x="163.5" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="162.5" y="83" width="10" height="5" rx="2.5" fill="#8d8c88"/><rect x="189" y="70" width="8" height="3" rx="1.5" fill="#c4c2bd"/><rect x="188" y="83" width="10" height="5" rx="2.5" fill="#8d8c88"/></svg>

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

@@ -0,0 +1,178 @@
+/* 柔光风格's greeting card. 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. On a custom page the face is the
+   card's whole room: it is taken out over the card's padding and given its own (the soft frame's: 20px, 18px
+   on a 2 × 2 card, by the face's data-pad), painted with the soft card's fill under a glow at its top left,
+   the sun's warm color by day, the accent's in the evening (data-sky); the board's line and radius stay
+   around it. Where no card is (a document, as gallery block check shows it) the face frames itself, at the
+   size of a 4 × 2 card. The script says the card's size (data-w, data-h): a 4 × 2 card sets the greeting
+   large after the sun, the date and the week's number under it, the week at the bottom, today on a disc
+   of the accent; a 2 × 2 card the month and the weekday at the top, the day of the month large, the
+   greeting at the bottom. */
+[data-doc-component="gallery-soft/today"] {
+  --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-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-on-accent: light-dark(#ffffff, #152436);
+  --soft-sun: light-dark(#f6b23c, #f2b046);
+  --soft-glow-day: light-dark(rgb(255 183 77 / 22%), rgb(255 196 92 / 5.5%));
+  --soft-glow-night: light-dark(rgb(62 122 198 / 16%), rgb(126 173 226 / 12%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-today-face {
+    position: relative;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-rows: 32px auto 1fr;
+    grid-template-areas: "sun greeting greeting" "date date meta" "week week week";
+    column-gap: 10px;
+    width: 304px;
+    max-width: 100%;
+    height: 144px;
+    --soft-pad: 20px;
+    padding: calc(var(--soft-pad) - var(--soft-edge, 0px));
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: var(--soft-card-shadow);
+    background: radial-gradient(120% 120% at 0% 0%, var(--soft-glow-day), transparent 58%), var(--soft-card);
+    color: var(--soft-text);
+    font: 13px/1.5 var(--soft-font);
+    -webkit-font-smoothing: antialiased;
+  }
+  > .gallery-soft-today-face[data-sky="moon"] { background: radial-gradient(120% 120% at 0% 0%, var(--soft-glow-night), transparent 58%), var(--soft-card); }
+  > .gallery-soft-today-face[data-pad="s"] { --soft-pad: 18px; }
+  > .gallery-soft-today-face[data-pad="l"] { --soft-pad: 24px; }
+  > .gallery-soft-today-face > .gallery-soft-today-sun {
+    grid-area: sun;
+    align-self: center;
+    display: block;
+    width: 28px;
+    height: 28px;
+    color: var(--soft-sun);
+  }
+  > .gallery-soft-today-face[data-sky="moon"] > .gallery-soft-today-sun { color: var(--soft-accent); }
+  > .gallery-soft-today-face > .gallery-soft-today-sun > svg { display: block; width: 100%; height: 100%; }
+  > .gallery-soft-today-face > .gallery-soft-today-greeting {
+    grid-area: greeting;
+    align-self: center;
+    margin: 0;
+    padding-inline-end: var(--soft-grip-room);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 700;
+    letter-spacing: .02em;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-date {
+    grid-area: date;
+    display: block;
+    min-width: 0;
+    margin-top: 4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-meta {
+    grid-area: meta;
+    align-self: center;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-week {
+    grid-area: week;
+    align-self: end;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-date-of {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-date-of > .gallery-soft-today-initial { font-size: 11px; line-height: 14px; color: var(--soft-muted); }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-date-of > .gallery-soft-today-number {
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    font: 400 13px/1 var(--soft-num);
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-text);
+  }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-past > .gallery-soft-today-number { color: var(--soft-faint); }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-now > .gallery-soft-today-initial { color: var(--soft-accent-ink); font-weight: 600; }
+  > .gallery-soft-today-face > .gallery-soft-today-week > .gallery-soft-today-now > .gallery-soft-today-number { background: var(--soft-accent); color: var(--soft-on-accent); font-weight: 600; }
+  > .gallery-soft-today-face > :is(.gallery-soft-today-month, .gallery-soft-today-day) { display: none; }
+  /* A 2 × 2 card: the month and the weekday beside the sun, the day of the month large, the greeting at the bottom. */
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) {
+    grid-template-columns: 20px minmax(0, 1fr);
+    grid-template-rows: 24px auto 1fr;
+    grid-template-areas: "sun month" "day day" "greeting greeting";
+    column-gap: 6px;
+  }
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) > :is(.gallery-soft-today-date, .gallery-soft-today-meta, .gallery-soft-today-week) { display: none; }
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) > .gallery-soft-today-sun { width: 20px; height: 20px; }
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) > .gallery-soft-today-month {
+    grid-area: month;
+    align-self: center;
+    display: block;
+    min-width: 0;
+    /* a quiet line: it may reach into the grip's corner, faded while the grip shows */
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 12.5px;
+    color: var(--soft-muted);
+  }
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) > .gallery-soft-today-day {
+    grid-area: day;
+    display: block;
+    margin-top: 10px;
+    font: 700 52px/1 var(--soft-num);
+    letter-spacing: -.03em;
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-today-face:is([data-w="1"], [data-w="2"]) > .gallery-soft-today-greeting {
+    align-self: end;
+    font-size: 13px;
+    line-height: 1.5;
+    font-weight: 600;
+    letter-spacing: 0;
+    color: var(--soft-text);
+  }
+}
+/* On a custom page: the face over the card's whole room, its padding the soft frame's, the board's line around it. */
+.gallery-card > [data-doc-component="gallery-soft/today"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/today"] > .gallery-soft-today-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/today/template.html

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

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

@@ -0,0 +1,16 @@
+# 问候与日期 (gallery-soft/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.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/today`, its settings, its data and what the user does on it the same, in the soft look of design A (a faint wash of blue from the card's top, rounded chips, big numbers). Write it only where the user asked for 柔光风格 or the page already holds its cards.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add gallery-soft/today`: the instance is empty, `<div data-doc-component="gallery-soft/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 greeting large, the date and the week's number under it, the week at the bottom) and 2 × 2 (the month and the weekday at the top, the day of the month large, the greeting at the bottom). 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 greeting large after the sun (by day) or the moon (in the evening), the date under it with the number of the week (第 46 周) at its end, and the week it is in at the bottom, Monday to Sunday, each day's initial over its date, the days gone faint, today's 今 over its date on a disc of the accent; a 2 × 2 card says 11月 · 星期一 at the top beside the sun, the day of the month large, the greeting under it; a glow at the card's top left, warm by day, the accent's blue in the evening; in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded tinted chip and a title, its end clear of the card's grip), light and dark. 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-soft/todos/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery-soft/todos",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "我的待办", "en": "My to-dos" },
+  "description": { "zh": "所有文档里没完成的待办，按文档分组：勾选就写回那篇文档，点文字打开它", "en": "The to-dos of every document not done yet, by document: 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-soft-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-soft/todos/example.html

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