@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/heatmap/kit.js

@@ -2,84 +2,109 @@
 // 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).
+// 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. It asks for every day 53 weeks draw (the record keeps as many); a day before the
+// record started is a small gray dot, never an empty square, and a day to come is not drawn. 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 (`layout`, and its own ResizeObserver on the room
+// the squares have) or its settings change (`source`). Where the workspace cannot be read (an exported
+// file, where it has no server; a server that does not answer) the squares are empty and a line over them
+// says why. The words are the page's language (the UI's where Gallery says it, else the page's lang).
+//
+// Its face (the pack's design B, in the kit's card tokens): a head of the chip (a calendar), 编辑热力图
+// and its quiet meta; the squares the hero, five shades of the accent by how a day stands among the days
+// recorded (`levelsOf`: the quarter of them with least, and so on, never by a straight line to the most,
+// so that a busy day does not make every other pale); today's square ringed; the months' names over the
+// weeks they begin in and 一 三 五 beside the rows; under them, less to more. Laid out by the card's cells
+// (`data-layout`, by context.size): "full" (8 × 4, the default, and 12 × 4) squares of 23px, 4px apart,
+// as many weeks as fit (14, 26), and at their left the figures (`summaryOf`): what the weeks are (近 14 周),
+// the edits (or words) in them, large, the average a day, the days with any, the longest run of days in
+// a row and today's, and a bar of how they split between the reader and the Agent; "compact" (4 × 4) squares
+// of 21px over a line of the total and the days with any; "strip" (12 × 3, a card three cells high or
+// less) squares of 14px (smaller where the card is lower), a year of them, the total and the days in the
+// head's meta, and the day the record began said by the legend's dot. A record begun within the week is
+// said so (从 11月11日 开始记录), and an export's figures say the time they are of (截至 …). A pointer on a
+// square shows its day: its edits (or words), and the reader's and the Agent's.
 
 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} 字`,
+    weeks: (/** @type {number} */ count) => `近 ${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: "次",
+    added: "新增",
+    editsUnit: "次编辑",
     wordsUnit: "字",
-    active: (/** @type {number} */ count) => `${count} 天有编辑`,
-    todayEdits: (/** @type {number} */ count) => `今天 ${count} 次`,
-    todayWords: (/** @type {string} */ count) => `今天 ${count} 字`,
+    tenThousand: "万字",
+    average: (/** @type {string} */ value, /** @type {boolean} */ words) => ["平均每天 ", value, words ? " 字" : " 次"],
+    active: "有编辑的天数",
+    run: "最长连续",
+    today: "今天",
+    days: "天",
+    times: "次",
+    you: "你",
+    agent: "Agent",
+    activeDays: (/** @type {number} */ count) => `${count} 天有编辑`,
+    stripMeta: (/** @type {string} */ period, /** @type {string} */ total, /** @type {number} */ days) => [`${period} ${total}`, `${days} 天`],
+    totalEdits: (/** @type {string} */ count) => `${count} 次编辑`,
+    byWords: "按字数",
+    fresh: "刚开始记录",
+    freshSince: (/** @type {string} */ date) => `从 ${date} 开始记录`,
+    freshSaid: ["以后每天写了多少，", "都会在右边亮起一格"],
+    before: "开始记录之前",
+    beforeSince: (/** @type {string} */ date) => `${date} 开始记录之前`,
+    upTo: (/** @type {string} */ when) => `截至 ${when}`,
     less: "少",
     more: "多",
+    tip: (/** @type {string} */ date, /** @type {number} */ edits, /** @type {number} */ words, /** @type {boolean} */ byWords) => `${date} · ${byWords ? `${words >= 0 ? "+" : "−"}${Math.abs(words).toLocaleString("zh-CN")} 字` : `${edits} 次编辑`}`,
+    split: (/** @type {number} */ you, /** @type {number} */ agent) => `你 ${you} 次 · Agent ${agent} 次`,
+    unrecorded: "还没开始记录",
     offline: "在 Gallery 里打开时显示",
     failed: "读不到工作区的编辑记录",
+    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: ["一", "", "三", "", "五", "", ""],
     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",
+    weeks: (/** @type {number} */ count) => `Last ${count} weeks`,
+    year: "Past year",
+    added: " added",
     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`,
+    tenThousand: "",
+    average: (/** @type {string} */ value, /** @type {boolean} */ words) => ["", value, words ? " words a day" : " a day"],
+    active: "Days with edits",
+    run: "Longest run",
+    today: "Today",
+    days: "d",
+    times: "",
+    you: "You",
+    agent: "Agent",
+    activeDays: (/** @type {number} */ count) => `${count} ${count === 1 ? "day" : "days"} with edits`,
+    stripMeta: (/** @type {string} */ period, /** @type {string} */ total, /** @type {number} */ days) => [`${period}: ${total}`, `${days} ${days === 1 ? "day" : "days"}`],
+    totalEdits: (/** @type {string} */ count) => `${count} edits`,
+    byWords: "by words",
+    fresh: "Just started",
+    freshSince: (/** @type {string} */ date) => `Recording since ${date}`,
+    freshSaid: ["Each day you write lights a square on the right"],
+    before: "Before recording",
+    beforeSince: (/** @type {string} */ date) => `Before ${date}`,
+    upTo: (/** @type {string} */ when) => `As of ${when}`,
     less: "Less",
     more: "More",
+    tip: (/** @type {string} */ date, /** @type {number} */ edits, /** @type {number} */ words, /** @type {boolean} */ byWords) => `${date} · ${byWords ? `${words >= 0 ? "+" : "−"}${Math.abs(words).toLocaleString("en")} words` : `${edits} ${edits === 1 ? "edit" : "edits"}`}`,
+    split: (/** @type {number} */ you, /** @type {number} */ agent) => `You ${you} · Agent ${agent}`,
+    unrecorded: "Not recorded yet",
     offline: "Shown when opened in Gallery",
     failed: "The workspace's record of edits could not be read",
+    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", "", ""],
     locale: "en",
   },
 };
@@ -93,6 +118,9 @@ function languageOf(/** @type {HTMLElement} */ root) {
 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;
+/** The weekdays' column and the months' row, in px. */
+const LABELS = 20;
+const MONTHS = 18;
 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())}`;
@@ -100,27 +128,38 @@ const dayOf = (date) => `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two
 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.
+ * How a card of `size` (context.size: its cells, or null where no card holds it, a document) lays its face
+ * out: "grid" two cells high or less (8 × 2: the squares alone, the user's word of 2026-11-09), "strip" three
+ * cells high, "compact" four wide or less, else "full".
+ * @param {{ w: number, h: number } | null | undefined} size
+ * @returns {"full" | "compact" | "strip" | "grid"}
+ */
+function layoutOf(size) {
+  if (!size) return "full";
+  if (size.h <= 2) return "grid";
+  if (size.h <= 3) return "strip";
+  return size.w <= 4 ? "compact" : "full";
+}
+
+/**
+ * The squares of a layout in a room of `width` x `height` px (the field's: the weekdays' column and the
+ * months' row inside it): { pitch (from one square to the next), cell (a square's side), gap, weeks }.
+ * "full" 23px squares 4px apart, "compact" 21px; "strip" and "grid" 14px, 3px apart, smaller where the room is
+ * lower (seven of them and the months' row in its height, 4px at the least, 2px apart under 10px); as many
+ * weeks as the width holds, 1 to 53.
+ * @param {"full" | "compact" | "strip" | "grid"} layout
  * @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 };
+function fitOf(layout, width, height) {
+  let pitch = layout === "full" ? 27 : layout === "compact" ? 25 : 17;
+  let gap = pitch === 17 ? 3 : 4;
+  if ((layout === "strip" || layout === "grid") && Number.isFinite(height)) {
+    pitch = Math.max(6, Math.min(17, Math.floor((height - MONTHS + gap) / 7)));
+    gap = pitch < 12 ? 2 : 3;
+  }
+  const weeks = Math.max(1, Math.min(MOST_WEEKS, Math.floor((width - LABELS + gap) / pitch)));
+  return { pitch, cell: pitch - gap, gap, weeks };
 }
 
 /**
@@ -143,50 +182,65 @@ function weeksOf(today, weeks) {
 }
 
 /**
- * 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`.
+ * The bounds of the levels of `values` (a day's edits, or the words it added, of every day recorded): the
+ * values at 38%, 68% and 90% of the days with any, so that each shade holds a share of the days; for fewer
+ * than five such days, a quarter, a half and three quarters of the most.
+ * @param {number[]} values
+ */
+function levelsOf(values) {
+  const some = values.filter((value) => value > 0).sort((a, b) => a - b);
+  if (some.length < 5) {
+    const most = some[some.length - 1] ?? 0;
+    return [most / 4, most / 2, (3 * most) / 4];
+  }
+  return [some[Math.floor(some.length * 0.38)], some[Math.floor(some.length * 0.68)], some[Math.floor(some.length * 0.9)]];
+}
+
+/**
+ * The level of a day's square, 0 (none) to 4 (the most), of `value` by the bounds `levels` (levelsOf's).
  * @param {number} value
- * @param {number} most
+ * @param {number[]} levels
  */
-function levelOf(value, most) {
-  if (!(value > 0) || !(most > 0)) return 0;
-  return Math.min(4, Math.max(1, Math.ceil((4 * value) / most)));
+function levelOf(value, levels) {
+  if (!(value > 0)) return 0;
+  if (value <= levels[0]) return 1;
+  if (value <= levels[1]) return 2;
+  return value <= levels[2] ? 3 : 4;
 }
 
 /**
- * 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
+ * What the card says of the record `days` (workspace.query("activity")'s data: [{ date, edits, words,
+ * reader, agent }], from the day it started or 53 weeks back to today) over the `weeks` it draws (`today`,
+ * a Date), counting `words` (the setting) or edits: `values` (each day's, by its date), `levels`, `since`
+ * (the first day recorded), and the figures: `total` (in the weeks drawn), `average` (a day, of the days
+ * recorded in them), `active` (days with any edit), `run` (the longest run of them), `today` (its value),
+ * `you` and `agent` (the edits of each), and `fresh` (the record began within the week).
+ * @param {Array<{ date: string, edits: number, words: number, reader?: { edits: number }, agent?: { edits: number } }>} days
  * @param {boolean} words
- * @param {"zh" | "en"} language
+ * @param {number} weeks
+ * @param {Date} today
  */
-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]));
+function summaryOf(days, words, weeks, today) {
+  const valueOf = (/** @type {{ edits: number, words: number }} */ day) => (words ? Math.max(0, day.words) : day.edits);
+  const values = new Map(days.map((day) => [day.date, valueOf(day)]));
   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)] : [])],
+  const first = dayOf(after(today, -((today.getDay() + 6) % 7) - 7 * (weeks - 1)));
+  const shown = days.filter((day) => day.date >= first && day.date <= dayOf(today));
+  let run = 0;
+  let longest = 0;
+  for (const day of shown) {
+    run = day.edits > 0 ? run + 1 : 0;
+    longest = Math.max(longest, run);
+  }
+  const total = shown.reduce((sum, day) => sum + valueOf(day), 0);
+  const agent = shown.reduce((sum, day) => sum + (day.agent?.edits ?? 0), 0);
+  const you = shown.reduce((sum, day) => sum + (day.reader?.edits ?? 0), 0);
+  const now = days.find((day) => day.date === dayOf(today));
+  return {
+    values, since, levels: levelsOf([...values.values()]),
+    total, average: shown.length > 0 ? total / shown.length : 0, active: shown.filter((day) => day.edits > 0).length, run: longest,
+    today: now ? valueOf(now) : 0, you, agent, fresh: since !== null && since > dayOf(after(today, -7)),
   };
-  return { line, values, since, figures };
 }
 
 /**
@@ -205,87 +259,160 @@ function made(tag, kind, text) {
 
 DocKit.component({
   id: "gallery/heatmap",
-  on: ["data", "source", "resize", "layout", "clock"],
+  on: ["data", "source", "layout", "clock"],
   mount(host, context) {
     const language = languageOf(document.documentElement);
     const words = WORDS[language];
+    const format = (/** @type {number} */ value) => new Intl.NumberFormat(words.locale, { maximumFractionDigits: 0 }).format(value);
     const face = made("div", "face");
     const head = made("div", "head");
-    const line = made("span", "line");
+    const meta = 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);
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4"/></svg>';
+    head.append(chip, made("span", "title", words.title), meta);
     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.
+    // The figures beside the squares (a full card), or the line over them (a compact one).
     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 average = made("span", "average");
+    const facts = made("dl", "facts");
+    const who = made("div", "who");
+    const split = made("span", "split");
+    const youBar = made("i", "you-bar");
+    const agentBar = made("i", "agent-bar");
+    split.append(youBar, agentBar);
+    const whoWords = made("span", "who-words");
+    who.append(split, whoWords);
+    aside.append(period, total, average, facts, who);
+    const field = made("div", "field");
+    const area = made("div", "area");
+    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");
+    // The tip stands over the card, in the page's top layer (a popover; where a browser has none, fixed to the
+    // window), never inside the card, whose overflow a tip near its edge would widen into a scrollbar.
+    const tip = made("div", "tip");
+    const popover = typeof tip.showPopover === "function";
+    if (popover) tip.popover = "manual";
+    else tip.hidden = true;
+    tip.setAttribute("aria-hidden", "true");
+    area.append(months, rows, grid, tip);
     const legend = made("div", "legend");
+    const note = made("span", "note");
     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);
+    }), made("span", "more", words.more), note);
+    const overlay = made("p", "overlay");
+    overlay.hidden = true;
+    field.append(area, legend, overlay);
+    body.append(aside, field);
+    // As wide as the corner a board's grip takes of the content's top right (--gallery-grip-room, a custom
+    // property CSS alone resolves), measured where the months' row is the face's first (the squares alone).
+    const gripRoom = made("i", "grip-room");
+    gripRoom.setAttribute("aria-hidden", "true");
+    face.append(head, body, gripRoom);
     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} */
+    /** @type {Array<{ date: string, edits: number, words: number, reader?: { edits: number, words: number }, agent?: { edits: number, words: number } }> | null} */
     let days = null;
+    let at = "";
     let failure = "";
     let drawn = "";
+    const kv = (/** @type {string} */ name, /** @type {string} */ value, /** @type {string} */ unit) => {
+      const row = made("div", "fact");
+      const said = made("dd", "fact-value", value);
+      if (unit) said.append(made("small", "fact-unit", unit));
+      row.append(made("dt", "fact-name", name), said);
+      return row;
+    };
+    const bigOf = (/** @type {number} */ value, /** @type {boolean} */ byWords) => {
+      if (!byWords) return [format(value), language === "zh" ? words.editsUnit : ` ${words.editsUnit}`];
+      if (language === "zh" && value >= 10_000) return [(value / 10_000).toFixed(1), words.tenThousand];
+      return [format(value), language === "zh" ? words.wordsUnit : ` ${words.wordsUnit}`];
+    };
     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 layout = layoutOf(context.size);
+      face.dataset.layout = layout;
       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]);
+      // The room the squares have: the field's, the legend's taken off (a strip's height says how large they are).
+      const room = { width: field.clientWidth || 600, height: field.clientHeight > 0 ? field.clientHeight - legend.offsetHeight : Infinity };
+      const { pitch, cell, gap, weeks } = fitOf(layout, room.width, room.height);
+      const summary = summaryOf(days ?? [], byWords, weeks, today);
+      const exported = context.place === "export" && at;
+      const fresh = days !== null && summary.fresh;
+      face.toggleAttribute("data-fresh", fresh);
+      face.toggleAttribute("data-unread", Boolean(failure));
+      const key = JSON.stringify([layout, pitch, weeks, dayOf(today), byWords, days, failure, at]);
       if (key === drawn) return;
       drawn = key;
+      hide(); // the squares drawn anew: the one it stood over is gone
+      // The head's meta.
+      const [bigValue, bigUnit] = bigOf(summary.total, byWords);
+      const atWhen = exported ? (() => { const when = new Date(at); return `${words.date(when)} ${two(when.getHours())}:${two(when.getMinutes())}`; })() : "";
+      if (failure) meta.textContent = "";
+      else if (layout === "strip") {
+        const [first, second] = words.stripMeta(weeks >= 52 ? words.year : words.weeks(weeks), byWords ? `${bigValue} ${bigUnit.trim()}` : words.totalEdits(format(summary.total)), summary.active);
+        const dot = made("span", "dot", "·");
+        meta.replaceChildren(first, dot, second);
+      } else if (layout === "compact") meta.textContent = words.weeks(weeks) + (byWords ? ` · ${words.byWords}` : "");
+      else meta.textContent = fresh ? words.fresh : exported ? words.upTo(atWhen) : byWords ? words.byWords : "";
+      // The figures.
+      totalNumber.textContent = failure ? "—" : bigValue;
+      totalUnit.textContent = failure ? "" : bigUnit;
+      if (fresh && summary.since) {
+        period.textContent = words.freshSince(words.date(new Date(`${summary.since}T12:00:00`)));
+        average.replaceChildren();
+        // Its clauses each whole on a line where one fits (style.css), so that it breaks after the comma.
+        const said = made("p", "fresh");
+        said.append(...words.freshSaid.map((clause) => made("span", "clause", clause)));
+        facts.replaceChildren(said);
+      } else {
+        period.textContent = layout === "compact" ? "" : `${words.weeks(weeks)}${byWords ? words.added : ""}`;
+        const [before, value, afterwards] = words.average(byWords ? format(Math.round(summary.average)) : summary.average.toFixed(1), byWords);
+        average.replaceChildren(before, made("b", "strong", value), afterwards);
+        const todayName = exported ? words.date(new Date(at)) : words.today;
+        facts.replaceChildren(
+          kv(words.active, String(summary.active), words.days),
+          kv(words.run, String(summary.run), words.days),
+          kv(todayName, byWords ? format(summary.today) : String(summary.today), byWords ? words.wordsUnit : words.times),
+        );
+      }
+      if (layout === "compact") average.replaceChildren(words.activeDays(summary.active));
+      const both = summary.you + summary.agent;
+      const youShare = both > 0 ? Math.round((100 * summary.you) / both) : 0;
+      youBar.style.flex = String(summary.you || (both ? 0 : 1));
+      agentBar.style.flex = String(summary.agent);
+      const label = (/** @type {string} */ kind, /** @type {string} */ name, /** @type {number} */ share) => {
+        const piece = made("span", kind);
+        piece.append(made("i", "swatch"), `${name} `, made("b", "strong", `${share}%`));
+        return piece;
+      };
+      whoWords.replaceChildren(label("you", words.you, youShare), label("agent", words.agent, both > 0 ? 100 - youShare : 0));
+      who.hidden = both === 0 || fresh;
+      // The legend's note: since when the record is kept, where days before it are drawn.
+      const columns = weeksOf(today, weeks);
+      const firstDay = columns[0][0].day;
+      const before = days !== null && summary.since !== null && summary.since > firstDay;
+      note.replaceChildren(...(before && layout !== "compact" ? [made("s", "dot-key"), layout === "strip" ? words.beforeSince(words.date(new Date(`${summary.since}T12:00:00`))) : words.before] : []));
+      overlay.hidden = !failure;
+      overlay.textContent = failure;
+      // The squares.
       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");
@@ -293,36 +420,71 @@ DocKit.component({
           square.classList.add("gallery-heatmap-future");
           return square;
         }
+        square.dataset.date = day;
+        if (day === dayOf(today)) square.classList.add("gallery-heatmap-today");
         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));
+          square.setAttribute("aria-label", `${words.weekday(date)} · ${days === null ? failure : words.unrecorded}`);
           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);
+        square.dataset.level = String(levelOf(summary.values.get(day) ?? 0, summary.levels));
+        square.setAttribute("aria-label", `${words.tip(words.weekday(date), entry?.edits ?? 0, entry?.words ?? 0, byWords)}（${words.split(entry?.reader?.edits ?? 0, entry?.agent?.edits ?? 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];
+      // A month's name over the week its first day falls in (the first week's too, but where the next is
+      // fewer than three weeks after it).
+      const starts = columns.flatMap((column, index) => (index === 0 || column[0].date.getMonth() !== columns[index - 1][0].date.getMonth() ? [index] : []));
+      if (starts.length > 1 && starts[1] < 3) starts.shift();
+      months.replaceChildren(...starts.map((index) => {
+        const name = made("span", "month", words.month(columns[index][0].date.getMonth()));
+        name.style.setProperty("--gallery-heatmap-week", String(index));
+        return name;
       }));
+      // The squares alone: the months' row is the card's first, and a name that would reach into the grip's corner is left out.
+      if (layout === "grid") {
+        const end = face.getBoundingClientRect().right - gripRoom.offsetWidth;
+        for (const name of [...months.children]) if (name.getBoundingClientRect().right > end) name.remove();
+      }
+    };
+    // A pointer on a square: its day, its count and whose, over it (under it where the window has no room
+    // above), its middle at the square's but held 8px inside the window, the arrow at the square.
+    const hide = () => {
+      if (popover) {
+        if (tip.matches(":popover-open")) tip.hidePopover();
+      } else tip.hidden = true;
+    };
+    const show = (/** @type {Event} */ event) => {
+      const square = /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (event.target).closest?.(".gallery-heatmap-day[data-date]"));
+      if (!square || !grid.contains(square)) return hide();
+      const [first, second] = (square.getAttribute("aria-label") ?? "").replace(/）$/, "").split("（");
+      tip.replaceChildren(first, ...(second ? [made("small", "tip-split", second)] : []));
+      if (popover) {
+        if (!tip.matches(":popover-open")) tip.showPopover();
+      } else tip.hidden = false;
+      const box = square.getBoundingClientRect();
+      const width = tip.offsetWidth;
+      const height = tip.offsetHeight;
+      const left = Math.max(8, Math.min(innerWidth - 8 - width, box.left + box.width / 2 - width / 2));
+      const below = box.top - 8 - height < 8;
+      tip.style.left = `${Math.round(left)}px`;
+      tip.style.top = `${Math.round(below ? box.bottom + 8 : box.top - 8 - height)}px`;
+      tip.style.setProperty("--gallery-heatmap-arrow", `${Math.round(Math.max(10, Math.min(width - 10, box.left + box.width / 2 - left)))}px`);
+      tip.toggleAttribute("data-below", below);
     };
+    context.listen(grid, "pointerover", show);
+    context.listen(grid, "pointerleave", hide);
+    // A scroll (the page's, or a card's) moves the square from under it: gone until the pointer is on one again.
+    context.listen(document, "scroll", hide, { capture: true, passive: true });
+    context.signal?.addEventListener("abort", hide, { once: true });
     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 }) => {
+      workspace.query("activity", { days: DAYS }).then(({ data, at: when }) => {
         if (ticket !== asking || context.signal.aborted) return;
         days = data;
+        at = typeof when === "string" ? when : "";
         failure = "";
         draw();
       }, (/** @type {any} */ error) => {
@@ -334,8 +496,8 @@ DocKit.component({
     };
     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.
+    // The room the squares have, its height too: 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);