@heycys/gallery 0.1.1 → 0.1.2

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();
+      },
+    };
+  },
+});

package/packs/gallery/heatmap/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="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" 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"/></g><rect x="50" y="28" width="46" height="6" rx="3" fill="#3b3a37"/><rect x="150" y="29" width="60" height="5" rx="2.5" fill="#c4c2bd"/><rect x="36" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="85" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="85" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="92" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="99" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="99" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="120" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="120" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="134" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="141" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="148" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="155" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="90" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="162" y="55" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="69" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="169" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="62" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="76" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="90" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="176" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="76" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="176" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="183" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="83" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="183" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="190" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="190" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="197" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="62" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="204" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/></svg>

package/packs/gallery/heatmap/style.css

@@ -0,0 +1,201 @@
+/* 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, 编辑热力图, its line, the quiet note at its end (how many
+   edits, or since when it is kept; the period where the figures show), its end clear of the card's grip); the
+   weekdays down the left, the months over the weeks, the squares a column a week, Monday at the top. The
+   squares' side and gaps are the script's (--gallery-heatmap-cell, --gallery-heatmap-gap, and
+   --gallery-heatmap-across between the weeks, wider on a card far wider than high: as big as the card
+   lets them be), their corners a quarter of their side, the grid hung from the left under the head
+   and the room left over at its right; the weekdays' column left out where a square is under 6px
+   (data-small: its words would run into each other). A day drawn by its level, 0 to 4, the accent's
+   shades on the card's fill (a quarter, a half, three quarters of it, and the accent itself; in dark two
+   fifths, three fifths, four fifths, so that the first stands off the track), a day of none the track's
+   gray (a step stronger than the track, so that a year of none still reads as a grid), a day before the
+   record only outlined in that gray, an empty slot rather than a day of nothing, so that a record just
+   begun reads as starting now; a day to come none. A wide card with something counted (data-figures)
+   shows its figures beside the squares: what they count, the edits (or words) in all, large (the cards'
+   hero size), the days that had any and today's, a hairline at their right; under 150px high, today's
+   left out, under 124px what they count too. Less to more (the script places it) under the squares at their left where the room
+   under them holds it, else at the head's end, where a card too narrow for it beside the line leaves it out. */
+[data-doc-component="gallery/heatmap"] {
+  --gallery-heatmap-0: light-dark(rgb(33 27 23 / 10%), rgb(255 255 255 / 11%));
+  --gallery-heatmap-1: light-dark(color-mix(in oklab, var(--gallery-accent) 26%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 42%, var(--gallery-card-fill)));
+  --gallery-heatmap-2: light-dark(color-mix(in oklab, var(--gallery-accent) 50%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 62%, var(--gallery-card-fill)));
+  --gallery-heatmap-3: light-dark(color-mix(in oklab, var(--gallery-accent) 75%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 81%, var(--gallery-card-fill)));
+  --gallery-heatmap-4: var(--gallery-accent);
+  height: 12em;
+  container-type: size;
+  > .gallery-heatmap-face {
+    --gallery-heatmap-cell: 10px;
+    --gallery-heatmap-gap: 3px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-face-gap);
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+    font-size: 12px;
+    line-height: 1.3;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-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-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-title { flex: none; font-size: var(--gallery-title-size); font-weight: 600; line-height: var(--gallery-title-line); color: var(--gallery-text-strong); }
+  /* The head's last piece (its line, or less to more where the script put it there) at the content's edge, faded while the card's grip shows. */
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line:last-child,
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-inline-start: 4px;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    text-align: end;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+  /* The figures beside the squares (a wide card's, where something is counted): what they count, small and
+     muted, over the edits (or words) in all, large, their unit after them, and a muted line of the days
+     that had any and today's; a hairline at their right. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside {
+    display: none;
+    flex: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    align-self: stretch;
+    width: clamp(120px, 18cqi, 190px);
+    box-sizing: border-box;
+    margin-inline-end: 6px;
+    padding-inline-end: 16px;
+    border-inline-end: 1px solid var(--doc-grid);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { font-size: var(--gallery-meta-size); line-height: 16px; color: var(--doc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { display: flex; align-items: baseline; flex-wrap: wrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number {
+    font-size: var(--gallery-hero-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;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-inline-start: var(--gallery-unit-gap); font-size: max(12px, calc(var(--gallery-hero-size) * .4)); font-weight: 500; color: var(--doc-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more { display: flex; flex-direction: column; font-size: var(--gallery-meta-size); line-height: 1.5; color: var(--doc-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece { white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows {
+    display: grid;
+    flex: none;
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
+    gap: var(--gallery-heatmap-gap);
+    margin-top: 18px;
+    color: var(--doc-muted);
+    font-size: 10px;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows > .gallery-heatmap-row { display: flex; align-items: center; line-height: 1; }
+  > .gallery-heatmap-face[data-small] > .gallery-heatmap-body > .gallery-heatmap-rows { display: none; }
+  /* Less to more under the squares: the weekdays as much shorter at the bottom, so that they stay beside their rows. */
+  > .gallery-heatmap-face > .gallery-heatmap-body:has(> .gallery-heatmap-area > .gallery-heatmap-legend) > .gallery-heatmap-rows { margin-bottom: 18px; }
+  /* As wide as its weeks, hung from the left beside the weekdays. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area { flex: none; width: calc(var(--gallery-heatmap-weeks, 53) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))) - var(--gallery-heatmap-across, var(--gallery-heatmap-gap))); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months {
+    position: relative;
+    height: 14px;
+    margin-bottom: 4px;
+    color: var(--doc-muted);
+    font-size: 10px;
+    line-height: 14px;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months > .gallery-heatmap-month {
+    position: absolute;
+    top: 0;
+    left: calc(var(--gallery-heatmap-week) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))));
+    white-space: nowrap;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
+    grid-auto-columns: var(--gallery-heatmap-cell);
+    gap: var(--gallery-heatmap-gap) var(--gallery-heatmap-across, var(--gallery-heatmap-gap));
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day {
+    box-sizing: border-box;
+    border-radius: max(2px, calc(var(--gallery-heatmap-cell) / 4));
+    background: var(--gallery-heatmap-0);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="1"] { background: var(--gallery-heatmap-1); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="2"] { background: var(--gallery-heatmap-2); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="3"] { background: var(--gallery-heatmap-3); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-before { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-future { visibility: hidden; }
+  /* Less to more, wherever the script put it: under the squares or at the head's end. */
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend,
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 3px;
+    flex: none;
+    color: var(--doc-muted);
+    font-size: 10px;
+    line-height: 1;
+    > .gallery-heatmap-less { margin-inline-end: 3px; }
+    > .gallery-heatmap-more { margin-inline-start: 3px; }
+    > .gallery-heatmap-square { width: 10px; height: 10px; border-radius: 3px; background: var(--gallery-heatmap-0); }
+    > .gallery-heatmap-square[data-level="1"] { background: var(--gallery-heatmap-1); }
+    > .gallery-heatmap-square[data-level="2"] { background: var(--gallery-heatmap-2); }
+    > .gallery-heatmap-square[data-level="3"] { background: var(--gallery-heatmap-3); }
+    > .gallery-heatmap-square[data-level="4"] { background: var(--gallery-heatmap-4); }
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend { align-self: flex-start; margin-top: 8px; }
+}
+/* A wide card (8 cells and more) with something counted: the figures beside the squares. */
+@container (min-width: 560px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face[data-figures] > .gallery-heatmap-body > .gallery-heatmap-aside { display: flex; }
+}
+/* Not so high (a 2-high card from a window 1440px wide): today's left out of the figures, which would not fit with the rest. */
+@container (max-height: 150px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece + .gallery-heatmap-piece { display: none; }
+}
+/* Low (a 2-high card from a window under 1440px wide): what the figures count left out too, the number the figure size. */
+@container (max-height: 124px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { display: none; }
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-size: var(--gallery-figure-size); }
+}
+/* A card too narrow for less to more beside the line: the line alone. */
+@container (max-width: 440px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { display: none; }
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+}
+/* 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/heatmap"] { height: 100%; }

package/packs/gallery/heatmap/template.html

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

package/packs/gallery/heatmap/writing.md

@@ -0,0 +1,21 @@
+# 编辑热力图 (gallery/heatmap)
+
+A card for a custom page (its places are `page`, its needs `workspace`): how much the workspace was edited each day of the past year, as GitHub draws a year of contributions, a column a week, a square a day, darker for a day of more. What it counts is Gallery's own record of edits (the reader's saves and the Agent's writes, by day, since the workspace's first start of a Gallery that keeps it): the edits of a day, or with its setting the words it added. Use it on the home page.
+
+## Settings
+
+Its one setting is the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `words` | 按字数显示 | switch | each day by the words it added, not by how many edits it had |
+
+It is kept in its data part `settings`, a `<script type="application/json">`: `{}` (template.html, what a menu adds) counts edits. Write `{"words":true}` when the user asks for the words written. The block reads it and writes nothing.
+
+## 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 heatmap`, the instance as template.html has it. Sizes: 8 × 3 (the default: most of a year, its weekdays and less to more under the squares), 12 × 3 (a year) and 4 × 3 (the last weeks alone): as many weeks as the card holds are drawn, the last ending today.
+
+## How it looks
+
+编辑热力图 beside a calendar's chip, how many edits there were at the top line's end, the weekdays down the left (Monday first), the months over the weeks, the squares in the accent's shades, darker for a day of more; 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. Less to more stands under the squares where the card has the room, else at the top line's end. On a wide card (8 cells and more), once anything is counted, the figures stand at the left of the squares: 期间编辑, the edits (or words) in all, large, how many days had any and today's, the top line then saying since when. A day before the record began is an outlined square, an empty slot. Each square says its day and its count where the pointer rests on it. Until anything is counted the line says since when the record is kept (从 11月8日 开始记录). It follows by itself: a document saved, or written by the Agent, shows on today's square at once, and what was written while Gallery did not run is counted on its day when it starts. In an exported file, which has no workspace to read, the line says 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.