@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/recent/kit.js

@@ -1,17 +1,22 @@
 // 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.
+// context.workspace.query("recent") (its manifest's needs hold "workspace"; and "stats", for how many
+// there are in all): each its page icon, its title and when it was edited. 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), and
+// says the times again each minute (the kit's clock). 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. 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 clock), 最近编辑 and how
+// many of them were edited today, its quiet meta (今天 3 篇); then rows like the sidebar's, grouped by
+// when (今天, 昨天, 本周, 更早: `groupOf`), each its icon, its title and its time at its end, said by its
+// group (`whenOf`: today's 12 分钟前, or the hour once an hour has gone, 08:05; yesterday's its hour; this
+// week's its weekday, 周二; earlier ones the date, 11月7日); under them, faint, how many more there are (还有
+// 20 篇). The card shows whole rows only, as many as the room under its head holds with their groups'
+// titles (`fit`, measured again as the card changes size: its own ResizeObserver on the face). A card two
+// cells high (`data-layout` "short", by context.size) lists the last three, no groups, their times as a
+// person says them (昨天, 周二). No document yet: the cards' empty face.
 //
 // 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
@@ -21,35 +26,40 @@
 const WORDS = {
   zh: {
     title: "最近编辑",
-    empty: "还没有文档",
-    offline: "在 Gallery 里打开时，这里列出最近改过的文档",
-    failed: "读不到工作区的文档",
+    empty: ["还没有文档", "新建一篇，或者让 Agent 写一篇"],
+    offline: ["在 Gallery 里打开时显示", "这里会列出最近改过的文档"],
+    failed: ["读不到工作区的文档", "过一会儿会再读"],
     more: (/** @type {number} */ count) => `还有 ${count} 篇`,
     today: (/** @type {number} */ count) => `今天 ${count} 篇`,
     open: (/** @type {string} */ title) => `打开「${title}」`,
+    groups: { today: "今天", yesterday: "昨天", week: "本周", earlier: "更早" },
     now: "刚刚",
     minutes: (/** @type {number} */ count) => `${count} 分钟前`,
-    hours: (/** @type {number} */ count) => `${count} 小时前`,
     yesterday: "昨天",
-    days: (/** @type {number} */ count) => `${count} 天前`,
+    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
     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",
+    empty: ["No documents yet", "Make one, or ask your Agent to write one"],
+    offline: ["Shown when opened in Gallery", "The documents edited last show here"],
+    failed: ["The workspace's documents could not be read", "It reads them again in a while"],
     more: (/** @type {number} */ count) => `${count} more`,
     today: (/** @type {number} */ count) => `${count} today`,
     open: (/** @type {string} */ title) => `Open “${title}”`,
+    groups: { today: "Today", yesterday: "Yesterday", week: "This week", earlier: "Earlier" },
     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`,
+    yesterday: "Yesterday",
+    weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     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 documents it asks for: as many as the tallest card shows, and more. */
+const LIMIT = 50;
+/** A group's title and a row, in px (style.css). */
+const GROUP_HEIGHT = 26;
+const ROW_HEIGHT = 30;
 
 /** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
 function languageOf(/** @type {HTMLElement} */ root) {
@@ -57,26 +67,43 @@ function languageOf(/** @type {HTMLElement} */ root) {
   return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
 }
 
+/** A local day, as a number of days. @param {Date} date */
+const dayNumber = (date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86_400_000;
+
+/**
+ * Which group a document edited at `edited` (an ISO time) is in, from `now` (the reader's clock): "today",
+ * "yesterday", "week" (earlier this week, from its Monday) or "earlier".
+ * @param {string} edited
+ * @param {Date} now
+ */
+function groupOf(edited, now) {
+  const then = new Date(edited);
+  const days = dayNumber(now) - dayNumber(then);
+  if (days <= 0) return "today";
+  if (days === 1) return "yesterday";
+  return days <= (now.getDay() + 6) % 7 ? "week" : "earlier";
+}
+
 /**
- * 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).
+ * When `edited` (an ISO time) was, from `now` (the reader's clock), in `language`: within the hour 刚刚
+ * and N 分钟前, then today's hour (08:05); yesterday's hour where its group says yesterday (`grouped`),
+ * else 昨天; a day earlier this week its weekday (周二); else its date, the year said when it is another.
  * @param {string} edited
  * @param {Date} now
  * @param {"zh" | "en"} language
+ * @param {boolean} [grouped]
  */
-function whenOf(edited, now, language) {
+function whenOf(edited, now, language, grouped = true) {
   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);
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  const hour = `${two(then.getHours())}:${two(then.getMinutes())}`;
+  const group = groupOf(edited, now);
+  if (group === "today") return minutes < 1 ? words.now : minutes < 60 ? words.minutes(minutes) : hour;
+  if (group === "yesterday") return grouped ? hour : words.yesterday;
+  if (group === "week") return words.weekdays[then.getDay()];
   return words.date(then, then.getFullYear() === now.getFullYear());
 }
 
@@ -124,79 +151,94 @@ function iconFor(/** @type {string} */ slug, /** @type {string | null} */ value)
 
 DocKit.component({
   id: "gallery/recent",
-  on: ["data", "clock"],
+  on: ["data", "clock", "layout"],
   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.
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 1.8"/></svg>';
+    // Its quiet meta after the title: how many of the documents 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);
+    // No document, or no workspace: the cards' empty face.
+    const empty = made("div", "empty");
+    const emptyPicture = made("span", "empty-picture");
+    emptyPicture.setAttribute("aria-hidden", "true");
+    emptyPicture.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z"/><path d="M13.5 3.5V8H18"/></svg>';
+    const line = made("p", "line");
+    const hint = made("p", "hint");
+    empty.append(emptyPicture, line, hint);
+    empty.hidden = true;
+    face.append(head, list, more, empty);
     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<{ slug: string, title: string, icon: string | null, edited: string }> | null} */
+    let documents = null;
+    let total = 0;
     /** @type {Array<{ node: HTMLElement, edited: string }>} */
     let times = [];
-    const say = (/** @type {string | null} */ words) => {
-      line.hidden = words === null;
-      line.textContent = words ?? "";
+    let shown = -1;
+    const short = () => Boolean(context.size && context.size.h <= 2);
+    const say = (/** @type {string[] | null} */ said) => {
+      empty.hidden = said === null;
+      list.hidden = said !== null;
+      if (said === null) return;
+      line.textContent = said[0];
+      hint.textContent = said[1] ?? "";
     };
     // 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);
+        const said = whenOf(edited, now, language, !short());
         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 today = (documents ?? []).filter(({ edited }) => groupOf(edited, now) === "today").length;
       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) => {
+    // The rows the room under the head holds, whole, with their groups' titles (none on a short card), and
+    // a line of how many more there are: drawn again only when that is another number.
+    const fit = (/** @type {boolean} */ again = false) => {
+      if (!documents) return;
+      const layout = short() ? "short" : "full";
+      face.dataset.layout = layout;
+      const now = new Date();
+      // The room: the face's height under the head and the line of more (none measured where nothing lays it out: every row).
+      const room = face.clientHeight > 0 ? face.clientHeight - head.offsetHeight - (layout === "short" ? 4 : 6) - (layout === "short" ? 0 : 24) : Infinity;
+      let count = 0;
+      if (layout === "short") count = Math.min(3, documents.length);
+      else {
+        let used = 0;
+        let group = "";
+        for (const entry of documents) {
+          const next = groupOf(entry.edited, now);
+          const cost = (next !== group ? GROUP_HEIGHT : 0) + ROW_HEIGHT;
+          if (used + cost > room) break;
+          used += cost;
+          group = next;
+          count++;
+        }
+      }
+      const key = `${layout}:${count}`;
+      if (!again && String(shown) === key) return;
+      shown = /** @type {any} */ (key);
       times = [];
-      list.replaceChildren(...documents.map((entry) => {
+      let group = "";
+      list.replaceChildren(...documents.slice(0, count).flatMap((entry) => {
+        const rows = [];
+        const next = groupOf(entry.edited, now);
+        if (layout === "full" && next !== group) {
+          rows.push(made("li", "group", words.groups[/** @type {keyof typeof words.groups} */ (next)]));
+          group = next;
+        }
         const item = made("li", "item");
         const button = made("button", "document");
         button.type = "button";
@@ -207,24 +249,36 @@ DocKit.component({
         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;
+        rows.push(item);
+        return rows;
       }));
+      const below = Math.max(0, total - count);
+      more.hidden = below === 0 || layout === "short";
+      more.textContent = below > 0 ? words.more(below) : "";
       retime();
-      say(documents.length === 0 ? words.empty : null);
-      fit();
     };
+    const watch = typeof ResizeObserver === "function" ? new ResizeObserver(() => fit()) : null;
+    watch?.observe(face);
+    context.signal?.addEventListener("abort", () => watch?.disconnect(), { 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("recent", { limit: 20 }).then(({ data }) => {
-        if (ticket === asking && !context.signal.aborted) draw(data);
+      const counted = workspace.query("stats").then(({ data }) => data?.documents ?? null, () => null);
+      workspace.query("recent", { limit: LIMIT }).then(async ({ data }) => {
+        const all = await counted;
+        if (ticket !== asking || context.signal.aborted) return;
+        documents = data;
+        total = typeof all === "number" ? Math.max(all, data.length) : data.length;
+        say(data.length === 0 ? words.empty : null);
+        fit(true);
       }, (/** @type {any} */ error) => {
         if (ticket !== asking || context.signal.aborted) return;
+        documents = null;
         times = [];
         meta.textContent = "";
         list.replaceChildren();
+        more.hidden = true;
         say(error?.code === "offline" ? words.offline : words.failed);
-        fit();
       });
     };
     read();
@@ -232,6 +286,7 @@ DocKit.component({
       update(reason, detail) {
         if (reason === "data" && detail === "recent") read();
         else if (reason === "clock") retime();
+        else if (reason === "layout") fit();
       },
     };
   },

package/packs/gallery/recent/preview.svg

@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="60.5" y="6.5" width="119" height="107" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="70" y="14" width="10" height="10" rx="3" fill="#efefed"/><rect x="84" y="16.5" width="30" height="5" rx="2.5" fill="#37352f"/><rect x="118" y="16.5" width="16" height="5" rx="2.5" fill="#d4d3cf"/><rect x="70" y="32" width="12" height="4" rx="2" fill="#a6a5a1"/><rect x="70" y="41" width="7" height="7" rx="2" fill="#f6c264"/><rect x="81" y="42" width="52" height="5" rx="2.5" fill="#37352f"/><rect x="158" y="42.5" width="12" height="4" rx="2" fill="#d4d3cf"/><rect x="70" y="54" width="7" height="7" rx="2" fill="#e8a3a3"/><rect x="81" y="55" width="44" height="5" rx="2.5" fill="#37352f"/><rect x="158" y="55.5" width="12" height="4" rx="2" fill="#d4d3cf"/><rect x="70" y="67" width="7" height="7" rx="2" fill="#9fc3ef"/><rect x="81" y="68" width="38" height="5" rx="2.5" fill="#37352f"/><rect x="158" y="68.5" width="12" height="4" rx="2" fill="#d4d3cf"/><rect x="70" y="88" width="7" height="7" rx="2" fill="#b8d79a"/><rect x="81" y="89" width="48" height="5" rx="2.5" fill="#37352f"/><rect x="158" y="89.5" width="12" height="4" rx="2" fill="#d4d3cf"/><rect x="70" y="101" width="7" height="7" rx="2" fill="#c9b3ec"/><rect x="81" y="102" width="36" height="5" rx="2.5" fill="#37352f"/><rect x="158" y="102.5" width="12" height="4" rx="2" fill="#d4d3cf"/><rect x="70" y="79" width="12" height="4" rx="2" fill="#a6a5a1"/></svg>

package/packs/gallery/recent/style.css

@@ -1,158 +1,85 @@
 /* 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 and 最近编辑, how many were edited today its quiet meta at the
-   end, clear of the card's grip), then the
-   documents, as many whole rows as fit (the script sets the list's height; they scroll inside it), a row each as the sidebar draws one (its icon, its title, and
-   when it was edited at its end, muted), a hover fill a press away from opening it; where more are below
-   what it shows, a muted line under the list says how many (the script's); none, the cards' empty face (a
-   page in a soft disc over a muted line). Light and dark. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: the head (the chip, a
+   clock, 最近编辑 and how many were edited today, faint), its end clear of the card's grip; rows like the
+   sidebar's (30px, out to the face's edges by 6px so that a row's hover fill has room), each its icon, its
+   title and its time at its end, faint; the groups' titles (今天, 昨天, 本周, 更早) small, faint and 600; and
+   under them how many more there are, faint. A short card (data-layout "short") lists three, no groups.
+   No document: the cards' empty face in the middle. A document's icon as the sidebar draws it (a picture,
+   a glyph masked in the faint color, or a page drawn here). Light and dark. */
 [data-doc-component="gallery/recent"] {
-  height: 16em;
-  > .gallery-recent-face {
-    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: 14px;
-    line-height: 1.45;
-  }
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-recent-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
   > .gallery-recent-face > .gallery-recent-head {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: none;
+    height: 20px;
     min-width: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
   }
   > .gallery-recent-face > .gallery-recent-head > .gallery-recent-chip {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: 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-recent-face > .gallery-recent-head > .gallery-recent-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
-  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-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-recent-face > .gallery-recent-head > .gallery-recent-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-recent-face > .gallery-recent-list {
-    flex: 1 1 auto;
-    min-height: 0;
-    margin: -2px -6px 0;
-    padding: 0;
-    list-style: none;
-    position: relative;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
   }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-title { 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); }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-recent-face > .gallery-recent-list { flex: 1 1 auto; min-height: 0; margin: 6px -6px 0; padding: 0; overflow: hidden; list-style: none; }
+  > .gallery-recent-face[data-layout="short"] > .gallery-recent-list { margin-top: 4px; }
+  > .gallery-recent-face > .gallery-recent-list[hidden] { display: none; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-group { padding: 8px 6px 2px; font-size: 11.5px; line-height: 16px; font-weight: 600; color: var(--gallery-faint); }
   > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     box-sizing: border-box;
     width: 100%;
-    margin: 0;
-    padding: 6px;
+    height: 30px;
+    padding: 0 6px;
     border: 0;
     border-radius: 6px;
-    background: transparent;
+    background: none;
     font: inherit;
     color: inherit;
     text-align: start;
     cursor: pointer;
   }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:hover { background: var(--doc-hover); }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    color: var(--doc-muted);
-  }
-  /* A document with no icon: a page, drawn as the sidebar's (a folded corner), in the muted color. */
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon:empty:not(.gallery-recent-glyph)::before {
-    content: "";
-    display: block;
-    width: 13px;
-    height: 16px;
-    background: currentColor;
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M2 .75h6.2l4.05 4.05V14A1.25 1.25 0 0 1 11 15.25H2A1.25 1.25 0 0 1 .75 14V2A1.25 1.25 0 0 1 2 .75z M8 1v3.5a.75.75 0 0 0 .75.75H12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M2 .75h6.2l4.05 4.05V14A1.25 1.25 0 0 1 11 15.25H2A1.25 1.25 0 0 1 .75 14V2A1.25 1.25 0 0 1 2 .75z M8 1v3.5a.75.75 0 0 0 .75.75H12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-glyph {
-    background: currentColor;
-    -webkit-mask: var(--gallery-recent-icon) center / 16px no-repeat;
-    mask: var(--gallery-recent-icon) center / 16px no-repeat;
-  }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-picture > img { display: block; width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-name {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-when { flex: none; font-size: var(--gallery-meta-size); color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
-  /* What it says where it lists nothing: in the middle of what the card has left, muted, a quiet
-     picture of a page over it. */
-  > .gallery-recent-face > .gallery-recent-line {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin: 0;
-    padding: 8px 12px;
-    font-size: 13px;
-    color: var(--doc-muted);
-    text-align: center;
-  }
-  > .gallery-recent-face > .gallery-recent-line::before {
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:hover { background: var(--gallery-hover); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:focus-visible { outline: 2px solid var(--gallery-accent-wash); outline-offset: -2px; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-picture > img { display: block; width: 15px; height: 15px; object-fit: contain; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-glyph::before { content: ""; width: 15px; height: 15px; background: var(--gallery-faint); -webkit-mask: var(--gallery-recent-icon) center / contain no-repeat; mask: var(--gallery-recent-icon) center / contain no-repeat; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon:empty::before {
     content: "";
-    flex: none;
-    width: 44px;
-    height: 44px;
-    margin-bottom: 2px;
-    background: currentColor;
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  > .gallery-recent-face > .gallery-recent-line[hidden] { display: none; }
-  /* How many more are below what the list shows. */
-  > .gallery-recent-face > .gallery-recent-more {
-    flex: none;
-    margin: -2px 0 0;
-    font-size: var(--gallery-meta-size);
-    line-height: 16px;
-    color: var(--doc-muted);
+    width: 15px;
+    height: 15px;
+    background: var(--gallery-faint);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
   }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--gallery-text); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-when { flex: none; font-size: 12px; color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-recent-face > .gallery-recent-more { flex: none; margin: 0; padding-top: 6px; font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
   > .gallery-recent-face > .gallery-recent-more[hidden] { display: none; }
+  /* No document, or no workspace: the cards' empty face in the middle. */
+  > .gallery-recent-face > .gallery-recent-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; text-align: center; }
+  > .gallery-recent-face > .gallery-recent-empty[hidden] { display: none; }
+  > .gallery-recent-face > .gallery-recent-empty > p { margin: 0; }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-empty-picture { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 8px; background: var(--gallery-fill); color: var(--gallery-faint); }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-empty-picture > svg { width: 16px; height: 16px; }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-line { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-hint { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding, and a
-   container of that height, so that a low card (two rows of cells) says it lists nothing in its words
-   alone, the picture over them left out (it would not fit under the head). */
-.gallery-card > [data-doc-component="gallery/recent"] { height: 100%; container-type: size; }
-@container (max-height: 150px) {
-  [data-doc-component="gallery/recent"] > .gallery-recent-face > .gallery-recent-line { padding-block: 0; }
-  [data-doc-component="gallery/recent"] > .gallery-recent-face > .gallery-recent-line::before { display: none; }
-}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/recent"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/recent"] > .gallery-recent-face { height: 100%; }

package/packs/gallery/recent/writing.md

@@ -4,7 +4,7 @@ A card for a custom page (its places are `page`, its needs `workspace`): the doc
 
 ## 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 recent`: the instance is empty, `<div data-doc-component="gallery/recent"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes. Sizes: 4 × 5 (the default), 4 × 2, 4 × 4 and 4 × 6; the list scrolls inside the card.
+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 recent`: the instance is empty, `<div data-doc-component="gallery/recent"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes. Sizes: 4 × 4 (the default), 4 × 2 (the last three, no groups) and 4 × 6 are the ones its menu lists; it is 4 wide and any height from 2 to 8 cells. As many whole rows as the card holds, and how many more there are under them.
 
 ## What the user does
 
@@ -12,4 +12,4 @@ Clicks a document: it opens. The list follows by itself: a document written, ren
 
 ## How it looks
 
-最近编辑 beside a clock's chip on the top line, how many were edited today at its end (今天 3 篇), then a row a document as the sidebar draws one, its time muted at its end, as many whole rows as the card holds, a muted line under them saying how many more are below (还有 3 篇); 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. With no document it says 还没有文档. In an exported file, which has no workspace to read, it says the list 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.
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a clock's chip, 最近编辑 and how many were edited today; then rows like the sidebar's, grouped as 今天, 昨天, 本周 and 更早, each the document's icon, its title and its time at its end (12 分钟前, then the hour; yesterday's hour; this week's weekday, 周二; earlier ones the date). A row under the pointer takes the hover's gray. No document yet: it says so in the middle.

package/packs/gallery/static/component.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery/static",
   "apiVersion": 1,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "name": { "zh": "静态卡片", "en": "Static card" },
   "description": { "zh": "放一段任意的 HTML，只展示，不能在页面上改", "en": "Any HTML, shown as it is: nothing on it changes in the page" },
   "words": "jingtaikapian jingtai kapian static html card 静态 卡片 展示 内容",
@@ -9,5 +9,5 @@
     "content": { "at": ":scope > div", "edit": "none" }
   },
   "places": ["page"],
-  "card": { "sizes": [[4, 2], [2, 1], [2, 2], [4, 1], [4, 3], [4, 4], [6, 2], [6, 4], [8, 4], [12, 2], [12, 4]], "min": { "w": 1, "h": 1 }, "max": { "w": 12, "h": 24 }, "resize": true }
+  "card": { "sizes": [[4, 4], [4, 2], [8, 2], [2, 2], [4, 1], [2, 1]], "min": { "w": 1, "h": 1 }, "max": { "w": 12, "h": 24 }, "resize": true }
 }