@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/habit/style.css

@@ -0,0 +1,246 @@
+/* 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: its head (the chip, the name, the days in all as its quiet
+   meta at the right, its end clear of the card's grip); the streak, its label small and muted over its
+   count, large, its unit after it, with the button at its right; the last seven days at the bottom, each
+   a dot over its weekday (today's 今), a day done filled with the accent and ticked, an open one the
+   track's gray, today ringed in the accent. Where the card has the room (past 300px wide and 130px high:
+   a 4 x 2 card from a window 1440px wide) the last 30 days as a ring at the left of the streak and the week, the
+   days done of them in its middle. The button is a primary one, pale blue with no line ("打卡"); once
+   today is done a pale green "✓ 已打卡" that a press takes back; where nothing is written, a plain muted
+   line. Low (under 124px), the streak's label goes; a narrow card (2 x 2) leaves the week out and puts
+   the button under the streak, as wide as its words. Never checked in (data-fresh): no streak and no
+   ring, a muted line where the streak stands. Light and dark. */
+[data-doc-component="gallery/habit"] {
+  container-type: size;
+  height: 10em;
+  > .gallery-habit-face {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: "head head" "streak press" "week week";
+    align-items: center;
+    gap: 8px 12px;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+    font-size: 14px;
+    line-height: 1.4;
+  }
+  > .gallery-habit-face > .gallery-habit-head {
+    grid-area: head;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-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-habit-face > .gallery-habit-head > .gallery-habit-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    width: 0;
+    margin: 0 0 0 -6px;
+    padding: 3px 6px;
+    border: 0;
+    border-radius: 6px;
+    outline: 0;
+    background: transparent;
+    font: inherit;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+    text-overflow: ellipsis;
+  }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name::placeholder { color: var(--doc-muted); font-weight: 500; opacity: .8; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):hover,
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus { background: var(--doc-hover); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:read-only { cursor: default; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total {
+    flex: none;
+    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
+    font-size: var(--gallery-meta-size);
+    line-height: var(--gallery-title-line);
+    color: var(--doc-muted);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-habit-face > .gallery-habit-check {
+    grid-area: press;
+    justify-self: end;
+    align-self: center;
+    padding: 5px 14px;
+    border: 0;
+    border-radius: 8px;
+    background: var(--gallery-accent-soft);
+    font: inherit;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 500;
+    color: var(--gallery-accent);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  > .gallery-habit-face > .gallery-habit-check:hover { background: color-mix(in srgb, var(--gallery-accent) 15%, transparent); }
+  > .gallery-habit-face > .gallery-habit-check:active { background: color-mix(in srgb, var(--gallery-accent) 21%, transparent); }
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done { background: var(--gallery-good-soft); color: var(--gallery-good); }
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:hover { background: color-mix(in srgb, var(--gallery-good) 16%, transparent); }
+  /* Nothing to press (an export, a page that takes no edits): a line saying how today stands. */
+  > .gallery-habit-face > .gallery-habit-check:disabled,
+  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:disabled {
+    padding-inline: 0;
+    background: transparent;
+    font-weight: 400;
+    color: var(--doc-muted);
+    cursor: default;
+  }
+  /* The streak: its label over its count, the count large, its unit small and muted after it. */
+  > .gallery-habit-face > .gallery-habit-streak {
+    grid-area: streak;
+    align-self: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    min-width: 0;
+    margin: 0;
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label {
+    flex: 0 0 100%;
+    margin-bottom: 2px;
+    font-size: var(--gallery-meta-size);
+    line-height: 16px;
+    color: var(--doc-muted);
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-count {
+    font-size: clamp(28px, 100cqh - 100px, var(--gallery-hero-size)); /* the hero, a little less on a card too low for it beside the week */
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-unit {
+    margin-inline-start: var(--gallery-unit-gap);
+    font-size: max(12px, calc(var(--gallery-hero-size) * .4)); /* the hero's unit (--gallery-unit-size of it) */
+    font-weight: 500;
+    color: var(--doc-muted);
+  }
+  /* Never checked in: a muted line where the streak stands. */
+  > .gallery-habit-face > .gallery-habit-fresh { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-streak { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-fresh {
+    grid-area: streak;
+    align-self: center;
+    display: block;
+    min-width: 0;
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--doc-muted);
+  }
+  /* The last 30 days: a ring of the accent on the track, the days done in its middle over its label. */
+  > .gallery-habit-face > .gallery-habit-ring {
+    grid-area: ring;
+    display: none;
+    position: relative;
+    width: clamp(76px, calc(100cqh - 52px), 128px);
+    aspect-ratio: 1;
+    align-self: center;
+  }
+  > .gallery-habit-face > .gallery-habit-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+  > .gallery-habit-face > .gallery-habit-ring > svg > circle { fill: none; stroke-width: 9; }
+  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-track { stroke: var(--gallery-track); }
+  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-arc {
+    stroke: var(--gallery-accent);
+    stroke-linecap: round;
+    stroke-dasharray: calc(var(--gallery-habit-share, 0) * 100) 100;
+  }
+  > .gallery-habit-face > .gallery-habit-ring[data-none] > svg > .gallery-habit-arc { display: none; }
+  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate {
+    position: relative;
+    font-size: clamp(20px, 7cqi, 28px);
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate-label {
+    position: relative;
+    margin-top: 4px;
+    font-size: 11px;
+    line-height: 14px;
+    color: var(--doc-muted);
+    text-align: center;
+  }
+  > .gallery-habit-face > .gallery-habit-week {
+    grid-area: week;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--doc-muted);
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day > .gallery-habit-dot {
+    box-sizing: border-box;
+    width: clamp(18px, 6.4cqi, 26px);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--gallery-track);
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-kept > .gallery-habit-dot {
+    background: var(--gallery-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
+  }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today { color: var(--gallery-accent); font-weight: 600; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today:not(.gallery-habit-kept) > .gallery-habit-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); }
+}
+/* Room for the ring: at the left of the streak and the week, the dots no wider than they need. */
+@container (min-width: 300px) and (min-height: 130px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas: "head head head" "ring streak press" "ring week week";
+    column-gap: 20px;
+  }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week { align-self: end; }
+  /* Never checked in: no ring, the line and the week from the card's left. */
+  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "streak press" "week week"; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] > .gallery-habit-ring { display: none; }
+}
+/* Low: the count alone, no label over it. */
+@container (max-height: 124px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label { display: none; }
+}
+/* A narrow card: the head, the streak, the button under it at its start, as wide as its words, the two in the middle of the room under the head; no week, no days in all. */
+@container (max-width: 220px) {
+  [data-doc-component="gallery/habit"] > .gallery-habit-face { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto 1fr; grid-template-areas: "head" "." "streak" "press" "."; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-check { justify-self: start; }
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week,
+  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total { display: none; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. */
+.gallery-card > [data-doc-component="gallery/habit"] { height: 100%; }

package/packs/gallery/habit/template.html

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

package/packs/gallery/habit/writing.md

@@ -0,0 +1,21 @@
+# 习惯打卡 (gallery/habit)
+
+A card for a custom page (its places are `page`): one habit, checked in once a day. It shows the habit's name, how many days in a row it was done (up to today, or up to yesterday while today is not checked yet), how many days in all, and the last seven days as dots. Use it for something the user means to do every day. For a habit counted otherwise (glasses of water in a day, minutes, a goal a week), start a block of your own from it: `gallery block new <scope>/<name> --recipe habit` copies its files, which are written to be read and changed.
+
+## 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 habit`, the instance as template.html has it: its data part `habit`, a `<script type="application/json">`, holding `{"name":"…","days":[]}` (on one line and compact, as the block writes it back):
+
+- `name`: the habit, a few words (每天读书半小时); `""` shows 给习惯起个名字, and the user names it on the card.
+- `days`: the days it was done, each `YYYY-MM-DD` by the user's clock, in order, each once. Leave the days of a card that is there alone: they are the user's record.
+
+Sizes: 4 × 2 (the default: the name, the streak and the button, the week, and where the window is wide enough the last 30 days as a ring) and 2 × 2 (the name, the streak, the button under it).
+
+## What the user does
+
+- presses 打卡: today goes in `days`; pressed again (✓ 已打卡), today comes out. Each press is one write, one step of the page's undo.
+- clicks the name and types another: written as they press Enter or leave the field (never while a Chinese input method composes); Esc puts back the name there was.
+
+## How it looks
+
+The name beside a flame's chip on the top line, the days in all at its end; the streak under it, 连续打卡 over its count, large, with the button at its right (打卡, pale blue; once done a pale green ✓ 已打卡 that a press takes back), the week at the bottom, a day done a dot filled with the accent and ticked, today ringed and named 今; on a card with the room for it, the last 30 days as a ring at the left, the days done of them in its middle; 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 moves to the next day by itself at midnight (it hears the kit's clock). A habit never checked in shows neither the streak nor the ring but a muted line, 还没打过卡，今天开始第 1 天, until its first check-in. Where nothing can be written (an export) the button is a line saying whether today is done. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/heatmap/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/heatmap",
+  "apiVersion": 1,
+  "version": "1.3.0",
+  "name": { "zh": "编辑热力图", "en": "Editing heatmap" },
+  "description": { "zh": "过去一年每天编辑了几次或写了多少字，像 GitHub 的贡献图", "en": "How often, or how many words, the workspace was edited each day of the past year, like GitHub's contribution graph" },
+  "words": "bianjireilitu reilitu heatmap activity contributions calendar 热力图 编辑 贡献 日历 字数 每天",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-heatmap-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[8, 3], [12, 3], [4, 3]], "resize": true },
+  "settings": [
+    { "key": "words", "label": { "zh": "按字数显示", "en": "Show words, not edits" }, "type": "switch", "default": false }
+  ],
+  "needs": ["workspace"]
+}

package/packs/gallery/heatmap/example.html

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

package/packs/gallery/heatmap/kit.js

@@ -0,0 +1,351 @@
+// gallery/heatmap (编辑热力图): the workspace's record of edits by day, as GitHub draws a year of
+// contributions: a column a week (Monday at the top, as a Chinese calendar starts it), a square a day,
+// darker for a day of more, read through context.workspace.query("activity") (its manifest's needs hold
+// "workspace": the server's record, .gallery/state/activity.json, a reader's commits and the Agent's
+// writes, by day). Its one setting, `words` (按字数显示, the card's form: the grip at its top right › 设置…, kept in its data part
+// `settings`, which the board writes and this block only reads), draws the words a day added (its net
+// change, a day that took more away than it added drawn as none) instead of how many edits it had. As
+// many weeks as the card holds are drawn, the last ending today, at most a year's 53: the squares as big as
+// the card's height lets seven of them be (3px apart, 2px where the card is low), at most so big that 53
+// weeks fit its width (but 8px, or three fifths of what the height lets, at least, where the height has room
+// for it: fewer weeks then); never more than the card holds, so that no day is cut off. It asks for every
+// day 53 weeks draw (the record keeps as many), so that a day drawn apart (none counted then) is one before
+// the record started, never one of a record older than what it asked; and the line at the top says since
+// when it was kept while nothing is counted yet (从 11月8日 开始记录). It reads again whenever the
+// workspace says its record changed (the `data` signal, "activity") and as a day begins (the kit's
+// clock), and draws again as its card changes size (`resize`, `layout`, and its own ResizeObserver on
+// the room the squares have, which hears a change of height too, as a card that got its height after the
+// first draw has) or its settings change (`source`). Each square says its day and its count (its title). Where the workspace cannot be read
+// (an exported file, where it has no server; a server that does not answer) the line says so. The 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 calendar, before its title; its squares the accent's shades, the
+// grid hung from the card's left edge under the head, the weekdays' column left out where the squares are
+// too small for its words, the months' names no closer than their own width. A wide card with something
+// counted shows the figures beside the squares (`summaryOf`'s `figures`, the face's `data-figures`): what
+// they count (期间编辑), the edits (or words) in all, large, how many days had any and today's, the period
+// then the head's quiet note at its end; the room the squares have is what the figures leave. Less to more
+// stands under the squares at their left where the card has the room for it, else at the head's end (left
+// out on a card too narrow for it beside the line: style.css).
+
+const WORDS = {
+  zh: {
+    title: "编辑热力图",
+    since: (/** @type {string} */ date) => `从 ${date} 开始记录`,
+    edits: (/** @type {string} */ period, /** @type {number} */ count) => `${period} ${count} 次编辑`,
+    words: (/** @type {string} */ period, /** @type {string} */ count) => `${period}写了 ${count} 字`,
+    year: "过去一年",
+    after: (/** @type {string} */ date) => `${date}以来`,
+    day: (/** @type {string} */ date, /** @type {number} */ edits, /** @type {number} */ words) => (edits === 0 ? `${date}：没有编辑` : `${date}：${edits} 次编辑，${words >= 0 ? "+" : "−"}${Math.abs(words)} 字`),
+    before: (/** @type {string} */ date) => `${date}：还没开始记录`,
+    date: (/** @type {Date} */ date) => `${date.getMonth() + 1}月${date.getDate()}日`,
+    weekday: (/** @type {Date} */ date) => `${date.getMonth() + 1}月${date.getDate()}日 ${["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][date.getDay()]}`,
+    month: (/** @type {number} */ month) => `${month + 1}月`,
+    rows: ["一", "", "三", "", "五", "", ""],
+    yearLabel: "过去一年",
+    editsLabel: "期间编辑",
+    wordsLabel: "期间写作",
+    editsUnit: "次",
+    wordsUnit: "字",
+    active: (/** @type {number} */ count) => `${count} 天有编辑`,
+    todayEdits: (/** @type {number} */ count) => `今天 ${count} 次`,
+    todayWords: (/** @type {string} */ count) => `今天 ${count} 字`,
+    less: "少",
+    more: "多",
+    offline: "在 Gallery 里打开时显示",
+    failed: "读不到工作区的编辑记录",
+    locale: "zh-CN",
+  },
+  en: {
+    title: "Editing heatmap",
+    since: (/** @type {string} */ date) => `Recording since ${date}`,
+    edits: (/** @type {string} */ period, /** @type {number} */ count) => `${count} ${count === 1 ? "edit" : "edits"} ${period}`,
+    words: (/** @type {string} */ period, /** @type {string} */ count) => `${count} words ${period}`,
+    year: "in the past year",
+    after: (/** @type {string} */ date) => `since ${date}`,
+    day: (/** @type {string} */ date, /** @type {number} */ edits, /** @type {number} */ words) => (edits === 0 ? `${date}: no edits` : `${date}: ${edits} ${edits === 1 ? "edit" : "edits"}, ${words >= 0 ? "+" : "−"}${Math.abs(words)} words`),
+    before: (/** @type {string} */ date) => `${date}: not recorded yet`,
+    date: (/** @type {Date} */ date) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()]} ${date.getDate()}`,
+    weekday: (/** @type {Date} */ date) => `${["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][date.getDay()]}, ${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()]} ${date.getDate()}`,
+    month: (/** @type {number} */ month) => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month],
+    rows: ["Mon", "", "Wed", "", "Fri", "", ""],
+    yearLabel: "The past year",
+    editsLabel: "Edits",
+    wordsLabel: "Words written",
+    editsUnit: "edits",
+    wordsUnit: "words",
+    active: (/** @type {number} */ count) => `${count} ${count === 1 ? "day" : "days"} with edits`,
+    todayEdits: (/** @type {number} */ count) => `${count} today`,
+    todayWords: (/** @type {string} */ count) => `${count} today`,
+    less: "Less",
+    more: "More",
+    offline: "Shown when opened in Gallery",
+    failed: "The workspace's record of edits could not be read",
+    locale: "en",
+  },
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+const MOST_WEEKS = 53;
+/** The days of the record it reads: as many as 53 weeks draw at the most (on a Sunday, its first square 370 days back). */
+const DAYS = MOST_WEEKS * 7;
+const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+/** A local day as the record writes it, YYYY-MM-DD. @param {Date} date */
+const dayOf = (date) => `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())}`;
+/** The day `count` days after `date` (before, negative), at noon. @param {Date} date @param {number} count */
+const after = (date, count) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + count, 12);
+
+/**
+ * How the squares fit a grid of `width` x `height` px (what the face has for it, its labels' room taken
+ * off): { cell, gap, weeks, across }. The gap is 3px, or 2px where seven squares of 9px and their gaps would not
+ * fit the height. The side is no more than seven of them fit the height (never cut off), at most 18px, and
+ * no bigger than 53 weeks across the width lets, but 8px where the height has room for that, and three
+ * fifths of what the height lets where that is more (a card far higher than a year's squares need, as on a
+ * narrow window: fewer weeks, bigger squares), 4px at the least; then as many weeks as fit across, at
+ * most 53, at least 1. `across` is the gap between the weeks: the gap, but where a year's 53 leave room
+ * across (a card far wider than high), that room shared between them, at most half a square more, so that
+ * a wide card's year reaches across it rather than leaving its right side empty.
+ * @param {number} width
+ * @param {number} height
+ */
+function fitOf(width, height) {
+  const gap = Math.floor((height - 18) / 7) >= 9 ? 3 : 2;
+  const byHeight = Math.floor((height - 6 * gap) / 7);
+  const byWidth = Math.floor((width - (MOST_WEEKS - 1) * gap) / MOST_WEEKS);
+  const cell = Math.max(4, Math.min(18, byHeight, Math.max(byWidth, 8, Math.floor(byHeight * 0.6))));
+  const weeks = Math.max(1, Math.min(MOST_WEEKS, Math.floor((width + gap) / (cell + gap))));
+  const room = weeks === MOST_WEEKS ? Math.floor((width - MOST_WEEKS * cell) / (MOST_WEEKS - 1)) : gap;
+  const across = Math.max(gap, Math.min(room, gap + Math.floor(cell / 2)));
+  return { cell, gap, weeks, across };
+}
+
+/**
+ * The weeks drawn, the last the one of `today` (a Date), `weeks` of them: [[{ date, day, future }…7]…],
+ * each a column, Monday first; `future` a day after today, which is not drawn.
+ * @param {Date} today
+ * @param {number} weeks
+ */
+function weeksOf(today, weeks) {
+  const monday = after(today, -((today.getDay() + 6) % 7));
+  const columns = [];
+  for (let week = weeks - 1; week >= 0; week--) {
+    const start = after(monday, -7 * week);
+    columns.push(Array.from({ length: 7 }, (_, row) => {
+      const date = after(start, row);
+      return { date, day: dayOf(date), future: dayOf(date) > dayOf(today) };
+    }));
+  }
+  return columns;
+}
+
+/**
+ * The level of a day's square, 0 (none) to 4 (the most), of `value` (its edits, or the words it added,
+ * none for a day that took more away) against the most of any day drawn, `most`.
+ * @param {number} value
+ * @param {number} most
+ */
+function levelOf(value, most) {
+  if (!(value > 0) || !(most > 0)) return 0;
+  return Math.min(4, Math.max(1, Math.ceil((4 * value) / most)));
+}
+
+/**
+ * What the card says of the record `days` (workspace.query("activity")'s data: [{ date, edits, words }],
+ * from the day it started or 53 weeks back to today), in `language`, counting `words` (the setting) or
+ * edits: the line at the top, and the value of each day by its date (a Map), and since which day (the
+ * first of them: before it nothing was kept).
+ * @param {Array<{ date: string, edits: number, words: number }>} days
+ * @param {boolean} words
+ * @param {"zh" | "en"} language
+ */
+function summaryOf(days, words, language) {
+  const said = WORDS[language];
+  const values = new Map(days.map((day) => [day.date, words ? Math.max(0, day.words) : day.edits]));
+  const since = days[0]?.date ?? null;
+  const edits = days.reduce((sum, day) => sum + day.edits, 0);
+  const sinceDate = since ? new Date(`${since}T12:00:00`) : null;
+  const period = days.length >= 365 || !sinceDate ? said.year : said.after(said.date(sinceDate));
+  let line;
+  if (edits === 0) line = sinceDate ? said.since(said.date(sinceDate)) : "";
+  else if (words) line = said.words(period, new Intl.NumberFormat(said.locale, { notation: "compact", maximumFractionDigits: 1 }).format(days.reduce((sum, day) => sum + day.words, 0)));
+  else line = said.edits(period, edits);
+  // The figures a wide card shows beside its squares: the edits (or the words) in all, how many days had
+  // any, and today's.
+  const format = (/** @type {number} */ value) => new Intl.NumberFormat(said.locale, Math.abs(value) >= 100_000 ? { notation: "compact", maximumFractionDigits: 1 } : { maximumFractionDigits: 0 }).format(value);
+  const written = days.reduce((sum, day) => sum + day.words, 0);
+  const today = days.find((day) => day.date === dayOf(new Date()));
+  const signed = (/** @type {number} */ value) => `${value > 0 ? "+" : value < 0 ? "−" : ""}${format(Math.abs(value))}`;
+  const figures = edits === 0 ? null : {
+    period: period === said.year ? said.yearLabel : period.replace(/^since /, "Since "),
+    label: words ? said.wordsLabel : said.editsLabel,
+    total: words ? format(Math.max(0, written)) : format(edits),
+    unit: words ? said.wordsUnit : said.editsUnit,
+    more: [said.active(days.filter((day) => day.edits > 0).length), ...(today && today.edits > 0 ? [words ? said.todayWords(signed(today.words)) : said.todayEdits(today.edits)] : [])],
+  };
+  return { line, values, since, figures };
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-heatmap-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/heatmap",
+  on: ["data", "source", "resize", "layout", "clock"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const head = made("div", "head");
+    const line = made("span", "line");
+    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="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><path d="M16 3v4M8 3v4M4 11h16"/></svg>';
+    head.append(chip, made("span", "title", words.title), line);
+    const body = made("div", "body");
+    const months = made("div", "months");
+    const rows = made("div", "rows");
+    for (const label of words.rows) rows.append(made("span", "row", label));
+    const grid = made("div", "grid");
+    const area = made("div", "area");
+    area.append(months, grid);
+    // Beside the squares on a wide card: what they count, its edits (or words) large, and a muted line of the days with any and today's.
+    const aside = made("div", "aside");
+    const period = made("span", "label");
+    const total = made("span", "total");
+    const totalNumber = made("span", "number");
+    const totalUnit = made("span", "unit");
+    total.append(totalNumber, totalUnit);
+    const asideMore = made("span", "more");
+    aside.append(period, total, asideMore);
+    body.append(aside, rows, area);
+    const legend = made("div", "legend");
+    legend.append(made("span", "less", words.less), ...[0, 1, 2, 3, 4].map((level) => {
+      const square = made("span", "square");
+      square.dataset.level = String(level);
+      return square;
+    }), made("span", "more", words.more));
+    face.append(head, body);
+    host.append(face);
+    const workspace = context.workspace;
+    if (!workspace) return void context.fail(new Error("its manifest's needs hold \"workspace\": context.workspace is not there"));
+
+    /** @type {Array<{ date: string, edits: number, words: number }> | null} */
+    let days = null;
+    let failure = "";
+    let drawn = "";
+    const draw = () => {
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      const byWords = settings !== null && typeof settings === "object" && settings.words === true;
+      // The room the grid has: the face's, its labels' and its lines' taken off.
+      const today = new Date();
+      const summary = summaryOf(days ?? [], byWords, language);
+      // The figures, where there are some (the aside shows them on a card wide enough: style.css).
+      const figures = failure ? null : summary.figures;
+      face.toggleAttribute("data-figures", figures !== null);
+      if (figures) {
+        period.textContent = figures.label;
+        totalNumber.textContent = figures.total;
+        totalUnit.textContent = figures.unit;
+        asideMore.replaceChildren(...figures.more.map((piece) => made("span", "piece", piece)));
+      }
+      // The room the grid has: the face's, its labels' and its lines' taken off (the weekdays' column and the gap after it; the aside, where it shows,
+      // its margin and the gap after it: a wide card's squares had run 3px past its edge where its weeks filled the room).
+      const width = body.clientWidth - rows.offsetWidth - 6 - (aside.offsetWidth > 0 ? aside.offsetWidth + 6 + 6 : 0);
+      const height = body.clientHeight - months.offsetHeight - 4;
+      const { cell, gap, weeks, across } = fitOf(width, height);
+      // Less to more: under the squares where the room left under them holds it, else at the head's end.
+      const shownAside = aside.offsetWidth > 0;
+      const under = height - (7 * cell + 6 * gap) >= 22;
+      const place = under ? area : head;
+      if (legend.parentElement !== place) place.append(legend);
+      // The head's quiet note: the line, or, where the figures say the rest beside the squares, their period.
+      line.textContent = failure || (shownAside && figures ? figures.period : summary.line);
+      const key = JSON.stringify([cell, gap, weeks, across, dayOf(today), byWords, days, failure, language, aside.offsetWidth, under]);
+      if (key === drawn) return;
+      drawn = key;
+      face.style.setProperty("--gallery-heatmap-cell", `${cell}px`);
+      face.style.setProperty("--gallery-heatmap-gap", `${gap}px`);
+      face.style.setProperty("--gallery-heatmap-across", `${across}px`);
+      face.style.setProperty("--gallery-heatmap-weeks", String(weeks));
+      face.toggleAttribute("data-small", cell < 6);
+      const columns = weeksOf(today, weeks);
+      const most = Math.max(0, ...[...summary.values.values()]);
+      const byDate = new Map((days ?? []).map((item) => [item.date, item]));
+      grid.replaceChildren(...columns.flatMap((column) => column.map(({ date, day, future }) => {
+        const square = made("span", "day");
+        if (future) {
+          square.classList.add("gallery-heatmap-future");
+          return square;
+        }
+        const recorded = days !== null && summary.since !== null && day >= summary.since;
+        if (!recorded) {
+          square.classList.add("gallery-heatmap-before");
+          square.title = days === null ? words.weekday(date) : words.before(words.weekday(date));
+          return square;
+        }
+        const entry = byDate.get(day);
+        square.dataset.level = String(levelOf(summary.values.get(day) ?? 0, most));
+        square.title = words.day(words.weekday(date), entry?.edits ?? 0, entry?.words ?? 0);
+        return square;
+      })));
+      // A month's name over the week its first day falls in, none closer to the one before than its own
+      // width (about 26px: "12月", "Sep") and three weeks.
+      const apart = Math.max(3, Math.ceil(28 / (cell + across)));
+      let last = -apart;
+      months.replaceChildren(...columns.flatMap((column, index) => {
+        const first = column.find(({ date }) => date.getDate() === 1);
+        if (!first || index - last < apart) return [];
+        last = index;
+        const label = made("span", "month", words.month(first.date.getMonth()));
+        label.style.setProperty("--gallery-heatmap-week", String(index));
+        return [label];
+      }));
+    };
+    let asking = 0; // the last read asked: an older answer that comes after it is dropped
+    const read = () => {
+      const ticket = ++asking;
+      workspace.query("activity", { days: DAYS }).then(({ data }) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        days = data;
+        failure = "";
+        draw();
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        days = null;
+        failure = error?.code === "offline" ? words.offline : words.failed;
+        draw();
+      });
+    };
+    draw();
+    read();
+    // The room the squares have, its height too (the kit's `resize` hears its width alone): a card given its
+    // height after the first draw (a board laid out late) is drawn again as it gets it.
+    if (typeof ResizeObserver === "function") {
+      const watch = new ResizeObserver(() => draw());
+      watch.observe(body);
+      context.signal?.addEventListener("abort", () => watch.disconnect(), { once: true });
+    }
+    return {
+      update(reason, detail) {
+        if ((reason === "data" && detail === "activity") || (reason === "clock" && detail === "day")) read();
+        else if (reason !== "data" && reason !== "clock") draw();
+      },
+    };
+  },
+});