@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/note/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery/note",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "便签", "en": "Note" },
+  "description": { "zh": "几行随手记，在卡片上直接写，存在页面里", "en": "A few lines jotted down, typed on the card and kept in the page" },
+  "words": "bianqian note memo sticky 便签 笔记 随手记 记事",
+  "parts": {
+    "note": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-note-head", ":scope > .gallery-note-field"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true }
+}

package/packs/gallery/note/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/note">
+  <script type="application/json">{"text":"周五前把季度报告发给王经理\n买牛奶、鸡蛋\n下周二下午三点 牙医"}</script>
+</div>

package/packs/gallery/note/kit.js

@@ -0,0 +1,102 @@
+// gallery/note (便签): a few lines of free text, kept in the instance's data part, a script of JSON,
+// { "text": "…" }, and typed on the card itself, in a <textarea> the block draws over the whole card.
+// The field is the kit's (DocKit.input): what the reader typed goes to the file once they are done with
+// it, as they leave the field or press Ctrl+Enter (⌘Enter on a Mac; Enter alone is a new line), never
+// while an input method composes, and never a value it holds already; Esc puts back what the file holds.
+// Each of those is one context.editJSON, one undo step, the JSON written back on one line as it was. It
+// draws from the part on every `source` (an Agent's write, an undo), the words the reader is typing kept
+// where they are. Where nothing takes its writes (an export, a page that has not come to edit yet:
+// context.canEdit() false) the field is read-only, and shows the same words. An empty note says 写点什么.
+// Above the field its head, as the cards' heads are (the kit's card tokens): the chip, a note's picture,
+// and its name, 便签, and its quiet meta, how many characters the field holds (its blanks not counted,
+// said again as the reader types); nothing of it is written.
+
+const WORDS = {
+  zh: { empty: "写点什么", label: "便签", count: (/** @type {number} */ count) => `${count} 字` },
+  en: { empty: "Write something", label: "Note", count: (/** @type {number} */ count) => `${count} ${count === 1 ? "character" : "characters"}` },
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * The words a note's data holds (context.readJSON's): its `text`, "" where it has none yet; throws
+ * saying why for data that is no note, which the block does not draw over.
+ * @param {any} data
+ * @returns {string}
+ */
+function textOf(data) {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) throw new Error("its data is no object: a note holds { \"text\": \"…\" }");
+  if (data.text === undefined) return "";
+  if (typeof data.text !== "string") throw new Error("its text is no string");
+  return data.text;
+}
+
+/**
+ * The note made to hold `text`, one write (context.editJSON): what a reader's words, once they are done
+ * with the field, call, and the example too. Whether it was taken.
+ * @param {DocComponentContext} context
+ * @param {string} text
+ */
+function writeNote(context, text) {
+  return context.editJSON("note", (data) => {
+    textOf(data);
+    data.text = text;
+  });
+}
+
+DocKit.component({
+  id: "gallery/note",
+  on: ["source", "editable"],
+  mount(host, context) {
+    const words = WORDS[languageOf(document.documentElement)];
+    const head = document.createElement("div");
+    head.className = "gallery-note-head";
+    head.setAttribute("aria-hidden", "true");
+    const chip = document.createElement("span");
+    chip.className = "gallery-note-chip";
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 20l7-7M13 20v-6a1 1 0 0 1 1-1h6V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"/></svg>';
+    const title = document.createElement("span");
+    title.className = "gallery-note-title";
+    title.textContent = words.label;
+    // Its quiet meta at the head's end: how many characters the field holds (its blanks not counted), as the reader types too.
+    const meta = document.createElement("span");
+    meta.className = "gallery-note-meta";
+    head.append(chip, title, meta);
+    const field = document.createElement("textarea");
+    field.className = "gallery-note-field";
+    field.placeholder = words.empty;
+    field.spellcheck = false;
+    field.setAttribute("aria-label", words.label);
+    host.append(head, field);
+    const typed = DocKit.input(field, { signal: context.signal, commit: (value) => writeNote(context, value) });
+    const recount = () => {
+      const count = [...field.value.replace(/s+/g, "")].length;
+      const said = count > 0 ? words.count(count) : "";
+      if (meta.textContent !== said) meta.textContent = said;
+    };
+    field.addEventListener("input", recount);
+    context.signal?.addEventListener("abort", () => field.removeEventListener("input", recount), { once: true });
+    const draw = () => {
+      const data = context.readJSON("note");
+      if (data === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      let text;
+      try {
+        text = textOf(data);
+      } catch (error) {
+        return context.fail(error);
+      }
+      field.readOnly = !context.canEdit();
+      typed.set(text);
+      recount();
+    };
+    draw();
+    return { update: draw };
+  },
+  example(host, context) {
+    writeNote(context, `${textOf(context.readJSON("note"))}\n再加一行`);
+  },
+});

package/packs/gallery/note/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="M13 20l7-7M13 20v-6a1 1 0 0 1 1-1h6V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"/></g><rect x="50" y="28" width="24" height="6" rx="3" fill="#3b3a37"/><rect x="30" y="50" width="150" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="62" width="118" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="74" width="168" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="86" width="92" height="6" rx="3" fill="#7b7a76"/><rect x="125" y="84" width="1.5" height="10" fill="#3b3a37"/></svg>

package/packs/gallery/note/style.css

@@ -0,0 +1,76 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. In the kit's card tokens: its head (the chip and 便签, how many characters
+   it holds its quiet meta at the end), its end clear of the card's grip, and under it the field the script draws, the rest of the note's face: no border, no
+   fill and no ring of its own, its words in the page's font, its placeholder (写点什么) muted. On a custom
+   page it fills the card the board frames; where no card is around it (a document, as gallery block
+   check shows it) the instance frames itself, a few lines high. Light and dark. */
+[data-doc-component="gallery/note"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gallery-face-gap);
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border: 1px solid var(--doc-border);
+  border-radius: var(--gallery-card-radius);
+  > .gallery-note-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-note-head > .gallery-note-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-note-head > .gallery-note-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-note-head > .gallery-note-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-note-head > .gallery-note-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-note-field {
+    display: block;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 7.5em;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    resize: none;
+    background: transparent;
+    font: inherit;
+    font-size: 14px;
+    line-height: 1.65;
+    color: var(--gallery-text);
+    overflow-wrap: break-word;
+    scrollbar-width: thin;
+  }
+  > .gallery-note-field::placeholder { color: var(--doc-muted); opacity: .7; }
+  > .gallery-note-field:read-only { cursor: default; }
+}
+/* On a custom page the board draws the frame: the note is as high as what the card holds inside it. */
+.gallery-card > [data-doc-component="gallery/note"] {
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  > .gallery-note-field { min-height: 0; }
+}

package/packs/gallery/note/template.html

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

package/packs/gallery/note/writing.md

@@ -0,0 +1,18 @@
+# 便签 (gallery/note)
+
+A card for a custom page (its places are `page`): a few lines the user types on the card itself, kept in the page. Use it where the user wants to jot something down beside the rest of a page (a reminder, a list for today).
+
+## 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 note`, the instance as template.html has it: its data part, a `<script type="application/json">` holding `{"text":"…"}` (on one line and compact, as the block writes it back), the note's words, lines apart with `\n`; `{"text":""}` for an empty one, which shows 写点什么.
+
+- Leave the words of a note that is there alone: they are the user's. To start one with words of yours (a list the user asked for), write them in `text`, as example.html does.
+- Sizes: 4 × 2 (the default), 2 × 2 and 4 × 4. Words that do not fit scroll inside the card.
+
+## What the user does
+
+They click the card and type. What they typed is written to the page once they leave the card, or press Ctrl+Enter (⌘Enter on a Mac); Enter alone starts a new line, and Esc puts back what was there. Each write is one step of the page's undo. Nothing is written while a Chinese input method is composing.
+
+## How it looks
+
+Its head (a chip and 便签, how many characters it holds at its end) at the top, the words filling the rest of the card, in the page's font, with no frame of their own (the board draws the card's), 写点什么 muted where there are none; 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. Where nothing can be written (an export) it shows the same words, read-only. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/pack.json

@@ -0,0 +1,8 @@
+{
+  "id": "gallery",
+  "name": { "zh": "Gallery 风格", "en": "Gallery style" },
+  "description": { "zh": "Gallery 自己的样子：克制、清楚的首页卡片，以及文档里用的看板、指标、图表、卡片和图表卡。", "en": "Gallery's own look: quiet, clear cards for the home page, and the board, metric, chart, card and chart card for documents." },
+  "version": "1.0.0",
+  "author": "Gallery",
+  "icon": "🗂️"
+}

package/packs/gallery/recent/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery/recent",
+  "apiVersion": 1,
+  "version": "1.3.0",
+  "name": { "zh": "最近编辑", "en": "Recently edited" },
+  "description": { "zh": "最近改过的文档，点一篇就打开它", "en": "The documents edited last: click one to open it" },
+  "words": "zuijinbianji zuijin bianji recent recently edited documents 最近 最近编辑 文档 改过",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-recent-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 5], [4, 2], [4, 4], [4, 6]], "resize": true },
+  "needs": ["workspace"]
+}

package/packs/gallery/recent/example.html

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

package/packs/gallery/recent/kit.js

@@ -0,0 +1,238 @@
+// gallery/recent (最近编辑): the workspace's documents edited last, the last first, read through
+// context.workspace.query("recent") (its manifest's needs hold "workspace"): each its page icon, its title
+// and when it was edited, said as a person says it (刚刚, 5 分钟前, 昨天, 11月2日), which moves on by itself
+// (the kit's clock, each minute). A click opens the document (context.workspace.open: the workbench goes
+// there). It reads again whenever the workspace says the list changed (the `data` signal, "recent": a
+// document written, renamed, given another icon, made or gone). It holds no part and writes nothing: all
+// it shows is drawn (the manifest's `runtime`). Where the workspace cannot be read (an exported file,
+// where it has no server; a server that does not answer) it says so in a line. 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 clock, before its title, how many of those listed were edited today its quiet meta
+// at the end (今天 3 篇, said again with the times). The list shows whole rows only: as many as fit what the
+// card has under its head (`fit`, its height a whole number of rows; the rest of the room under it), a
+// muted line under them saying how many more are below (还有 3 篇), counted again as the list scrolls or the
+// card changes size (its own ResizeObserver on the face) and gone at its end.
+//
+// A document's icon is drawn as Gallery's sidebar draws it, from the server that shows the page (its icon
+// route, /__gallery/edit/icon, one picture of any icon's value): an emoji or a picture of its folder as a
+// picture, one of Gallery's glyphs as a mask in the muted color, which follows the theme; a document with
+// none a page drawn in its line.
+
+const WORDS = {
+  zh: {
+    title: "最近编辑",
+    empty: "还没有文档",
+    offline: "在 Gallery 里打开时，这里列出最近改过的文档",
+    failed: "读不到工作区的文档",
+    more: (/** @type {number} */ count) => `还有 ${count} 篇`,
+    today: (/** @type {number} */ count) => `今天 ${count} 篇`,
+    open: (/** @type {string} */ title) => `打开「${title}」`,
+    now: "刚刚",
+    minutes: (/** @type {number} */ count) => `${count} 分钟前`,
+    hours: (/** @type {number} */ count) => `${count} 小时前`,
+    yesterday: "昨天",
+    days: (/** @type {number} */ count) => `${count} 天前`,
+    date: (/** @type {Date} */ date, /** @type {boolean} */ thisYear) => (thisYear ? `${date.getMonth() + 1}月${date.getDate()}日` : `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`),
+  },
+  en: {
+    title: "Recently edited",
+    empty: "No documents yet",
+    offline: "Opened in Gallery, this lists the documents edited last",
+    failed: "The workspace's documents could not be read",
+    more: (/** @type {number} */ count) => `${count} more`,
+    today: (/** @type {number} */ count) => `${count} today`,
+    open: (/** @type {string} */ title) => `Open “${title}”`,
+    now: "just now",
+    minutes: (/** @type {number} */ count) => `${count} min ago`,
+    hours: (/** @type {number} */ count) => `${count} h ago`,
+    yesterday: "yesterday",
+    days: (/** @type {number} */ count) => `${count} days ago`,
+    date: (/** @type {Date} */ date, /** @type {boolean} */ thisYear) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()]} ${date.getDate()}${thisYear ? "" : `, ${date.getFullYear()}`}`,
+  },
+};
+
+/** 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";
+}
+
+/**
+ * When `edited` (an ISO time) was, from `now` (the reader's clock), as a person says it: within a minute
+ * 刚刚, then minutes, then hours (the same day, or within 6 hours of it), 昨天 for the day before, days
+ * within the week, else the date (the year said when it is another).
+ * @param {string} edited
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function whenOf(edited, now, language) {
+  const words = WORDS[language];
+  const then = new Date(edited);
+  const minutes = Math.floor((now.getTime() - then.getTime()) / 60_000);
+  if (!Number.isFinite(minutes)) return "";
+  if (minutes < 1) return words.now;
+  if (minutes < 60) return words.minutes(minutes);
+  const day = (/** @type {Date} */ date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86_400_000;
+  const days = day(now) - day(then);
+  if (days === 0 || minutes < 360) return words.hours(Math.floor(minutes / 60));
+  if (days === 1) return words.yesterday;
+  if (days < 7) return words.days(days);
+  return words.date(then, then.getFullYear() === now.getFullYear());
+}
+
+/** What a document's icon is, as Gallery writes its value: a glyph (/icons/…), a picture of its folder (assets/…), an emoji, or none. @param {string | null} value */
+function iconKindOf(value) {
+  if (typeof value !== "string" || !value) return null;
+  if (value.startsWith("/icons/")) return "glyph";
+  if (value.startsWith("assets/")) return "image";
+  return "emoji";
+}
+
+/**
+ * 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-recent-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+// A document's icon: its picture from the server's icon route, a glyph masked, or none (the page CSS draws).
+function iconFor(/** @type {string} */ slug, /** @type {string | null} */ value) {
+  const kind = iconKindOf(value);
+  const icon = made("span", "icon");
+  if (!kind || value === null) return icon;
+  const address = `/__gallery/edit/icon?value=${encodeURIComponent(value)}&slug=${encodeURIComponent(slug)}`;
+  if (kind === "glyph") {
+    icon.classList.add("gallery-recent-glyph");
+    icon.style.setProperty("--gallery-recent-icon", `url("${address}")`);
+    return icon;
+  }
+  const picture = document.createElement("img");
+  picture.alt = "";
+  picture.src = address;
+  picture.decoding = "async";
+  icon.classList.add("gallery-recent-picture");
+  icon.append(picture);
+  return icon;
+}
+
+DocKit.component({
+  id: "gallery/recent",
+  on: ["data", "clock"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const list = made("ul", "list");
+    const line = made("p", "line");
+    const head = made("div", "head");
+    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="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0"/><path d="M12 7v5l3 3"/></svg>';
+    // Its quiet meta at the head's end: how many of the documents listed were edited today.
+    const meta = made("span", "meta");
+    head.append(chip, made("span", "title", words.title), meta);
+    const more = made("p", "more");
+    more.hidden = true;
+    face.append(head, list, line, more);
+    host.append(face);
+    // How many rows are below what the list shows (one cut off counted), said under it, or nothing.
+    const recount = () => {
+      const bottom = list.scrollTop + list.clientHeight;
+      let below = 0;
+      for (const row of /** @type {HTMLCollectionOf<HTMLElement>} */ (list.children)) if (row.offsetTop + row.offsetHeight > bottom + 1) below++;
+      const said = below > 0 ? words.more(below) : "";
+      if (more.textContent !== said) more.textContent = said;
+      more.hidden = below === 0;
+    };
+    // The list as high as the whole rows that fit the room under the head (with the line of more under it
+    // where they are not all shown), so that no row is cut at the card's bottom; the rest of the room under it.
+    const fit = () => {
+      list.style.maxHeight = "";
+      const rows = /** @type {HTMLCollectionOf<HTMLElement>} */ (list.children);
+      if (rows.length === 0 || list.clientHeight === 0) return void recount();
+      const pitch = rows[0].getBoundingClientRect().height;
+      more.hidden = true;
+      if (list.scrollHeight <= list.clientHeight + 1 || !(pitch > 0)) return void recount();
+      more.textContent = words.more(rows.length);
+      more.hidden = false;
+      const shown = Math.max(1, Math.floor((list.clientHeight + 0.5) / pitch));
+      list.style.maxHeight = `${shown * pitch}px`;
+      recount();
+    };
+    list.addEventListener("scroll", recount, { passive: true });
+    const watch = typeof ResizeObserver === "function" ? new ResizeObserver(() => fit()) : null;
+    watch?.observe(face);
+    context.signal?.addEventListener("abort", () => {
+      list.removeEventListener("scroll", recount);
+      watch?.disconnect();
+    }, { once: true });
+    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<{ node: HTMLElement, edited: string }>} */
+    let times = [];
+    const say = (/** @type {string | null} */ words) => {
+      line.hidden = words === null;
+      line.textContent = words ?? "";
+    };
+    // Each time said again, only where its words are others; the head's count of today's too.
+    const retime = () => {
+      const now = new Date();
+      let today = 0;
+      for (const { node, edited } of times) {
+        const said = whenOf(edited, now, language);
+        if (node.textContent !== said) node.textContent = said;
+        const then = new Date(edited);
+        if (then.getFullYear() === now.getFullYear() && then.getMonth() === now.getMonth() && then.getDate() === now.getDate()) today++;
+      }
+      const counted = today > 0 ? words.today(today) : "";
+      if (meta.textContent !== counted) meta.textContent = counted;
+    };
+    const draw = (/** @type {Array<{ slug: string, title: string, icon: string | null, edited: string }>} */ documents) => {
+      times = [];
+      list.replaceChildren(...documents.map((entry) => {
+        const item = made("li", "item");
+        const button = made("button", "document");
+        button.type = "button";
+        button.title = words.open(entry.title);
+        const when = made("time", "when");
+        when.dateTime = entry.edited;
+        times.push({ node: when, edited: entry.edited });
+        button.append(iconFor(entry.slug, entry.icon), made("span", "name", entry.title), when);
+        button.addEventListener("click", () => workspace.open({ slug: entry.slug }));
+        item.append(button);
+        return item;
+      }));
+      retime();
+      say(documents.length === 0 ? words.empty : null);
+      fit();
+    };
+    let asking = 0; // the last read asked: an older answer that comes after it is dropped
+    const read = () => {
+      const ticket = ++asking;
+      workspace.query("recent", { limit: 20 }).then(({ data }) => {
+        if (ticket === asking && !context.signal.aborted) draw(data);
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        times = [];
+        meta.textContent = "";
+        list.replaceChildren();
+        say(error?.code === "offline" ? words.offline : words.failed);
+        fit();
+      });
+    };
+    read();
+    return {
+      update(reason, detail) {
+        if (reason === "data" && detail === "recent") read();
+        else if (reason === "clock") retime();
+      },
+    };
+  },
+});

package/packs/gallery/recent/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="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0"/><path d="M12 7v5l3 3"/></g><rect x="50" y="28" width="44" height="6" rx="3" fill="#3b3a37"/><path d="M32.6 50h4.4l3 3v7.4a1 1 0 0 1-1 1h-6.4a1 1 0 0 1-1-1v-9.4a1 1 0 0 1 1-1z" fill="none" stroke="#8f8d88" stroke-width="1.1" stroke-linejoin="round"/><rect x="47" y="53.5" width="70" height="6" rx="3" fill="#3b3a37"/><rect x="180" y="54" width="30" height="5" rx="2.5" fill="#c4c2bd"/><path d="M32.6 68h4.4l3 3v7.4a1 1 0 0 1-1 1h-6.4a1 1 0 0 1-1-1v-9.4a1 1 0 0 1 1-1z" fill="none" stroke="#8f8d88" stroke-width="1.1" stroke-linejoin="round"/><rect x="47" y="71.5" width="56" height="6" rx="3" fill="#3b3a37"/><rect x="194" y="72" width="16" height="5" rx="2.5" fill="#c4c2bd"/><path d="M32.6 86h4.4l3 3v7.4a1 1 0 0 1-1 1h-6.4a1 1 0 0 1-1-1v-9.4a1 1 0 0 1 1-1z" fill="none" stroke="#8f8d88" stroke-width="1.1" stroke-linejoin="round"/><rect x="47" y="89.5" width="84" height="6" rx="3" fill="#3b3a37"/><rect x="186" y="90" width="24" height="5" rx="2.5" fill="#c4c2bd"/></svg>