@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery-soft/recent/kit.js

@@ -0,0 +1,335 @@
+// gallery-soft/recent (最近编辑, 柔光风格): Gallery 风格's gallery/recent in the soft look, the same logic. 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 on the cards' empty face. The words are the page's language (the UI's where Gallery says it, else
+// the page's lang).
+//
+// Its face, laid out by its card's size (`context.size`, read again on `layout`; data-w, data-h, data-pad): a
+// head of a clock's chip and 最近编辑, how many of those listed were edited today at its end (今天 3 篇); the
+// documents as rows like the sidebar's, the latest's time in the accent; a card 6 cells high and more says
+// over them which of today, yesterday, this week and earlier each is in (`sectionOf`). The list shows whole
+// rows only: as many as fit what the card has under its head (`fit`, its height the bottom of the last row
+// none is cut at), 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 card 2
+// cells high shows its rows at the bottom, no such line.
+//
+// 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 as it is, 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 on a soft gray square.
+
+const WORDS = {
+  zh: {
+    title: "最近编辑",
+    empty: "还没有文档",
+    emptyHow: "新建一篇，或者让 Agent 写一篇",
+    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()}日`),
+    sections: { today: "今天", yesterday: "昨天", week: "本周", earlier: "更早" },
+  },
+  en: {
+    title: "Recently edited",
+    empty: "No documents yet",
+    emptyHow: "Make one, or ask your Agent to write one",
+    offline: "Shown when opened in Gallery",
+    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()}`}`,
+    sections: { today: "Today", yesterday: "Yesterday", week: "This week", earlier: "Earlier" },
+  },
+};
+
+/** 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());
+}
+
+/**
+ * Which part of the time `edited` (an ISO time) falls in from `now`, as a tall card's labels say it: today,
+ * yesterday, this week (since Monday), or earlier.
+ * @param {string} edited
+ * @param {Date} now
+ * @returns {"today" | "yesterday" | "week" | "earlier"}
+ */
+function sectionOf(edited, now) {
+  const then = new Date(edited);
+  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) || days === 0) return "today";
+  if (days === 1) return "yesterday";
+  return days <= (now.getDay() + 6) % 7 ? "week" : "earlier";
+}
+
+/** 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";
+}
+
+/**
+ * The size the face is laid out by: its card's cells (`context.size`), or `fallback` (the manifest's first
+ * size) where no card is; and the frame's padding for it, as the soft cards pad theirs: "xs" on a card one
+ * cell high, "s" on a small one (2 × 2 and less), "l" on one 3 cells high or more, else "m".
+ * @param {DocComponentSize | null | undefined} size
+ * @param {[number, number]} fallback
+ */
+function sizeOf(size, fallback) {
+  const w = size?.w ?? fallback[0];
+  const h = size?.h ?? fallback[1];
+  return { w, h, pad: h === 1 ? "xs" : w <= 2 && h <= 2 ? "s" : h >= 3 ? "l" : "m" };
+}
+
+/**
+ * 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-soft-recent-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+const line = (/** @type {string} */ paths) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+const PAGE = '<path d="M7 3.5h10a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z"/><path d="M9 8.5h6M9 12h6M9 15.5h3.5"/>';
+
+// A document's icon: its emoji, its picture from the server's icon route, a glyph masked, or a page on a gray square.
+function iconFor(/** @type {string} */ slug, /** @type {string | null} */ value) {
+  const kind = iconKindOf(value);
+  const icon = made("span", "icon");
+  if (!kind || value === null) {
+    icon.classList.add("gallery-soft-recent-plain");
+    icon.innerHTML = line(PAGE);
+    return icon;
+  }
+  if (kind === "emoji") {
+    icon.classList.add("gallery-soft-recent-emoji");
+    icon.textContent = value;
+    return icon;
+  }
+  const address = `/__gallery/edit/icon?value=${encodeURIComponent(value)}&slug=${encodeURIComponent(slug)}`;
+  if (kind === "glyph") {
+    icon.classList.add("gallery-soft-recent-glyph");
+    icon.style.setProperty("--gallery-soft-recent-icon", `url("${address}")`);
+    return icon;
+  }
+  const picture = document.createElement("img");
+  picture.alt = "";
+  picture.src = address;
+  picture.decoding = "async";
+  icon.classList.add("gallery-soft-recent-picture");
+  icon.append(picture);
+  return icon;
+}
+
+DocKit.component({
+  id: "gallery-soft/recent",
+  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 head = made("div", "head");
+    const chip = made("span", "chip");
+    chip.setAttribute("aria-hidden", "true");
+    chip.innerHTML = line('<circle cx="12" cy="12" r="8.6"/><path d="M12 7.6V12l2.9 1.9"/>');
+    // 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");
+    const arrow = made("span", "arrow");
+    arrow.innerHTML = line('<path d="M12 5v14M6.5 13.5L12 19l5.5-5.5"/>');
+    const moreWords = made("span", "more-words");
+    more.append(arrow, moreWords);
+    more.hidden = true;
+    const empty = made("div", "empty");
+    face.append(head, list, more, empty);
+    host.append(face);
+    let high = 4; // the card's cells high, as last laid out
+    // 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 {NodeListOf<HTMLElement>} */ (list.querySelectorAll(".gallery-soft-recent-item"))) if (row.offsetTop + row.offsetHeight > bottom + 1) below++;
+      const said = below > 0 && high > 2 ? words.more(below) : "";
+      if (moreWords.textContent !== said) moreWords.textContent = said;
+      more.hidden = said === "";
+    };
+    // 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, but on a card 2 cells high), so that no row is cut at the card's bottom.
+    const fit = () => {
+      list.style.maxHeight = "";
+      more.hidden = true;
+      if (list.clientHeight === 0 || list.scrollHeight <= list.clientHeight + 1) return void recount();
+      if (high > 2) {
+        moreWords.textContent = words.more(0);
+        more.hidden = false;
+      }
+      const room = list.clientHeight;
+      const rows = /** @type {HTMLElement[]} */ ([...list.children]);
+      const bottoms = rows.filter((row) => row.classList.contains("gallery-soft-recent-item")).map((row) => row.offsetTop + row.offsetHeight).filter((bottom) => bottom <= room + 0.5).sort((a, b) => b - a);
+      const whole = bottoms.find((bottom) => rows.every((row) => !(row.offsetTop < bottom - 0.5 && row.offsetTop + row.offsetHeight > bottom + 0.5)));
+      if (whole !== undefined) list.style.maxHeight = `${whole}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 = [];
+    /** @type {Array<{ slug: string, title: string, icon: string | null, edited: string }> | null} */
+    let documents = null;
+    let failure = "";
+    const lay = () => {
+      const { w, h, pad } = sizeOf(context.size, [4, 4]);
+      high = h;
+      Object.assign(face.dataset, { w: String(w), h: String(h), pad });
+    };
+    // The cards' empty face: a soft disc, a line, what to do.
+    const say = (/** @type {string | null} */ said, /** @type {string} */ how = "", /** @type {string} */ picture = PAGE) => {
+      face.toggleAttribute("data-empty", said !== null);
+      if (said === null) return void empty.replaceChildren();
+      const disc = made("span", "disc");
+      disc.innerHTML = line(picture);
+      empty.replaceChildren(disc, made("p", "line", said), ...(how ? [made("p", "how", how)] : []));
+    };
+    // 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;
+        node.classList.toggle("gallery-soft-recent-now", said === words.now);
+        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 = () => {
+      lay();
+      times = [];
+      if (documents === null) {
+        meta.textContent = "";
+        list.replaceChildren();
+        if (failure === "offline") say(words.offline, "", '<circle cx="12" cy="12" r="8.6"/><path d="M12 7.6V12l2.9 1.9"/>');
+        else if (failure) say(words.failed);
+        else say(null);
+        return fit();
+      }
+      const now = new Date();
+      /** @type {string} */
+      let section = "";
+      /** @type {HTMLElement[]} */
+      const rows = [];
+      for (const entry of documents) {
+        if (high >= 6) {
+          const part = sectionOf(entry.edited, now);
+          if (part !== section) {
+            section = part;
+            const label = made("li", "section", words.sections[part]);
+            label.setAttribute("aria-hidden", "true");
+            rows.push(label);
+          }
+        }
+        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);
+        rows.push(item);
+      }
+      list.replaceChildren(...rows);
+      retime();
+      say(documents.length === 0 ? words.empty : null, words.emptyHow);
+      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) return;
+        documents = data;
+        failure = "";
+        draw();
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        documents = null;
+        failure = error?.code === "offline" ? "offline" : "failed";
+        draw();
+      });
+    };
+    lay();
+    read();
+    return {
+      update(reason, detail) {
+        if (reason === "data" && detail === "recent") read();
+        else if (reason === "clock") retime();
+        else if (reason === "layout") draw();
+      },
+    };
+  },
+});

package/packs/gallery-soft/recent/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><defs><linearGradient id="w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3e7ac6" stop-opacity=".07"/><stop offset=".52" stop-color="#3e7ac6" stop-opacity="0"/></linearGradient></defs><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="14" fill="#ffffff" stroke="#e8e7e4"/><rect x="17" y="13" width="206" height="94" rx="13.5" fill="url(#w)"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ecf3fb"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="50" y="28" width="40" height="6" rx="3" fill="#37352f"/><rect x="178" y="28" width="26" height="6" rx="3" fill="#c4c2bd"/><rect x="30" y="44" width="11" height="11" rx="3.5" fill="#f4e1c4"/><rect x="48" y="47" width="56" height="6" rx="3" fill="#4a4843"/><rect x="180" y="48" width="24" height="5" rx="2.5" fill="#3e7ac6"/><rect x="30" y="59" width="11" height="11" rx="3.5" fill="#f3d0d4"/><rect x="48" y="62" width="74" height="6" rx="3" fill="#4a4843"/><rect x="180" y="63" width="24" height="5" rx="2.5" fill="#c4c2bd"/><rect x="30" y="74" width="11" height="11" rx="3.5" fill="#efeff0"/><rect x="48" y="77" width="50" height="6" rx="3" fill="#4a4843"/><rect x="180" y="78" width="24" height="5" rx="2.5" fill="#c4c2bd"/><rect x="30" y="89" width="11" height="11" rx="3.5" fill="#d6e6c8"/><rect x="48" y="92" width="88" height="6" rx="3" fill="#4a4843"/><rect x="180" y="93" width="24" height="5" rx="2.5" fill="#c4c2bd"/></svg>

package/packs/gallery-soft/recent/style.css

@@ -0,0 +1,160 @@
+/* 柔光风格's recently edited. Every selector starts at the instance and goes down from it, so that nothing
+   here reaches the rest of the page. The soft look's tokens first, light and dark (light-dark(): the page's
+   color scheme, which follows its theme), then the face: a faint wash of the accent from the card's top over
+   the soft card's fill; a head of a clock's chip and 最近编辑, today's count at its end (fading while the grip
+   shows); the documents as rows like the sidebar's (a page icon on a soft gray square, an emoji on none, the
+   title, when at the end, the latest's 刚刚 in the accent), a row under the pointer a soft gray; on a tall card
+   faint labels of today, yesterday, this week and earlier between them; a muted line of how many more under
+   them at the card's bottom; on a card 2 cells high its rows at the bottom. Nothing to list: the cards' empty
+   face. On a custom page the face is the card's whole room, taken out over the card's padding and given the
+   soft frame's (data-pad), the board's line around it; where no card is (a document, as gallery block check
+   shows it) the face frames itself at a 4 × 4 card's size. */
+[data-doc-component="gallery-soft/recent"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-card: light-dark(#ffffff, #1f1f20);
+  --soft-card-line: light-dark(rgb(28 28 32 / 6.5%), rgb(255 255 255 / 7.5%));
+  --soft-card-shadow: 0 0 0 1px var(--soft-card-line), 0 1px 2px light-dark(rgb(28 28 32 / 3.5%), rgb(0 0 0 / 0%)), 0 8px 24px -14px light-dark(rgb(28 28 32 / 12%), rgb(0 0 0 / 60%));
+  --soft-wash: linear-gradient(180deg, light-dark(rgb(62 122 198 / 6%), rgb(126 173 226 / 7%)) 0%, transparent 52%);
+  --soft-text: light-dark(#37352f, #d9d9dc);
+  --soft-strong: light-dark(#1f1f1f, #f1f1f2);
+  --soft-muted: light-dark(#7a7a7f, #9d9da3);
+  --soft-faint: light-dark(#ababb0, #66666c);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-ink: light-dark(#356cb3, #98bee9);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-track: light-dark(rgb(28 28 32 / 7%), rgb(255 255 255 / 8%));
+  --soft-hover: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 6%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-recent-face {
+    --soft-pad: 24px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 304px;
+    max-width: 100%;
+    height: 304px;
+    padding: calc(var(--soft-pad) - var(--soft-edge, 0px));
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: var(--soft-card-shadow);
+    background: var(--soft-wash), var(--soft-card);
+    color: var(--soft-text);
+    font: 13px/1.5 var(--soft-font);
+    -webkit-font-smoothing: antialiased;
+  }
+  > .gallery-soft-recent-face[data-pad="m"] { --soft-pad: 20px; }
+  > .gallery-soft-recent-face[data-pad="s"] { --soft-pad: 18px; }
+  /* The head: the clock's chip, 最近编辑, today's count at its end. */
+  > .gallery-soft-recent-face > .gallery-soft-recent-head { display: flex; align-items: center; gap: 10px; flex: none; height: 28px; min-width: 0; padding-inline-end: var(--soft-grip-room); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-head > .gallery-soft-recent-chip { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--soft-accent-soft); color: var(--soft-accent); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-head > .gallery-soft-recent-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-head > .gallery-soft-recent-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: var(--soft-strong); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-head > .gallery-soft-recent-meta {
+    flex: none;
+    margin-left: auto;
+    margin-inline-end: calc(-1 * var(--soft-grip-room));
+    font-size: 12px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+  }
+  /* The rows. */
+  > .gallery-soft-recent-face > .gallery-soft-recent-list {
+    position: relative;
+    flex: 0 1 auto;
+    min-height: 0;
+    margin: 12px 0 0;
+    padding: 0;
+    list-style: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+  > .gallery-soft-recent-face[data-h="1"] > .gallery-soft-recent-list,
+  > .gallery-soft-recent-face[data-h="2"] > .gallery-soft-recent-list { margin-top: auto; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-section { display: flex; align-items: flex-end; height: 22px; padding-bottom: 3px; box-sizing: border-box; font-size: 11.5px; color: var(--soft-faint); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-section:first-child { height: 16px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item { display: block; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    width: calc(100% + 12px);
+    height: 31px;
+    margin: 0 -6px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document:is(:hover, :focus-visible) { outline: none; background: var(--soft-hover); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-icon {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 26px;
+    height: 26px;
+    border-radius: 7px;
+    background: var(--soft-track);
+    color: var(--soft-muted);
+    font-size: 15px;
+    line-height: 1;
+  }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-emoji { background: transparent; font-size: 17px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-icon > svg { display: block; width: 15px; height: 15px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-picture { background: transparent; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-picture > img { display: block; width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-glyph::before { content: ""; width: 15px; height: 15px; background: var(--soft-muted); -webkit-mask: var(--gallery-soft-recent-icon) center / contain no-repeat; mask: var(--gallery-soft-recent-icon) center / contain no-repeat; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--soft-text); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-when { flex: none; margin-left: auto; padding-left: 10px; font: 12px var(--soft-num); color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-list > .gallery-soft-recent-item > .gallery-soft-recent-document > .gallery-soft-recent-now { color: var(--soft-accent-ink); font-weight: 500; }
+  /* How many more are below. */
+  > .gallery-soft-recent-face > .gallery-soft-recent-more { display: flex; align-items: center; gap: 4px; flex: none; margin: auto 0 0; padding-top: 8px; font-size: 12px; color: var(--soft-muted); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-more[hidden] { display: none; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-more > .gallery-soft-recent-arrow { display: block; width: 13px; height: 13px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-more > .gallery-soft-recent-arrow > svg { display: block; width: 100%; height: 100%; }
+  /* Nothing to list: the cards' empty face. */
+  > .gallery-soft-recent-face > .gallery-soft-recent-empty { display: none; }
+  > .gallery-soft-recent-face[data-empty] > .gallery-soft-recent-list { display: none; }
+  > .gallery-soft-recent-face[data-empty] > .gallery-soft-recent-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; min-height: 0; text-align: center; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-empty > .gallery-soft-recent-disc { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--soft-track); color: var(--soft-muted); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-empty > .gallery-soft-recent-disc > svg { display: block; width: 20px; height: 20px; }
+  > .gallery-soft-recent-face > .gallery-soft-recent-empty > .gallery-soft-recent-line { margin: 0; font-size: 13px; color: var(--soft-text); }
+  > .gallery-soft-recent-face > .gallery-soft-recent-empty > .gallery-soft-recent-how { margin: 0; font-size: 12px; color: var(--soft-muted); }
+  /* A 2 × 2 card: a smaller disc, a line each, so that the three stand clear of the head. */
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty { gap: 0; }
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty > .gallery-soft-recent-disc { width: 30px; height: 30px; margin-bottom: 4px; }
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty > .gallery-soft-recent-disc > svg { width: 15px; height: 15px; }
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty > :is(.gallery-soft-recent-line, .gallery-soft-recent-how) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty > .gallery-soft-recent-line { font-size: 12.5px; line-height: 18px; }
+  > .gallery-soft-recent-face[data-pad="s"] > .gallery-soft-recent-empty > .gallery-soft-recent-how { line-height: 16px; }
+  /* A card 2 cells high and wider: the disc beside its line and what to do, which under the head have no room for a column. */
+  > .gallery-soft-recent-face[data-pad="m"][data-empty] > .gallery-soft-recent-empty { display: grid; grid-template-columns: auto minmax(0, max-content); column-gap: 12px; row-gap: 2px; align-content: center; justify-content: center; text-align: left; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > .gallery-soft-recent-disc { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > .gallery-soft-recent-disc > svg { width: 17px; height: 17px; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > :is(.gallery-soft-recent-line, .gallery-soft-recent-how) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > .gallery-soft-recent-line { align-self: end; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > .gallery-soft-recent-how { align-self: start; }
+  > .gallery-soft-recent-face[data-pad="m"] > .gallery-soft-recent-empty > .gallery-soft-recent-line:last-child { grid-row: 1 / span 2; align-self: center; }
+}
+/* On a custom page: the face over the card's whole room, its padding the soft frame's, the board's line around it; the head's end kept clear of the grip's corner. */
+.gallery-card > [data-doc-component="gallery-soft/recent"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/recent"] > .gallery-soft-recent-face {
+  --soft-edge: 1px;
+  --soft-grip-room: max(0px, calc(40px - var(--soft-pad)));
+  width: auto;
+  max-width: none;
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  box-shadow: none;
+}

package/packs/gallery-soft/recent/template.html

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

package/packs/gallery-soft/recent/writing.md

@@ -0,0 +1,17 @@
+# 最近编辑 (gallery-soft/recent)
+
+A card for a custom page (its places are `page`, its needs `workspace`): the documents of the workspace edited last, the last first, each with its page icon, its title and when it was edited (刚刚, 5 分钟前, 昨天, 11月2日). Use it on the home page, for the user to go back to what they were working on.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/recent`, its settings, its data and what the user does on it the same, in the soft look of design A (a faint wash of blue from the card's top, rounded chips, big numbers). Write it only where the user asked for 柔光风格 or the page already holds its cards.
+
+## 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 gallery-soft/recent`: the instance is empty, `<div data-doc-component="gallery-soft/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 and 4 × 6 (labels of today, yesterday, this week and earlier between the rows) are the ones its menu lists; it is 4 wide and any height from 2 to 8 cells; the list shows whole rows and scrolls inside the card, a muted line under it saying how many more.
+
+## What the user does
+
+Clicks a document: it opens. The list follows by itself: a document written, renamed or given another icon, made or taken away shows at once, and the times move on each minute.
+
+## How it looks
+
+最近编辑 beside a clock's chip on the top line, how many were edited today at its end (今天 4 篇); the documents as rows like the sidebar's, each its icon (an emoji as it is, a page on a soft gray square for one with none), its title and when it was edited at the end (刚刚 in the accent, 12 分钟前, 昨天, 11月2日); on a 4 × 6 card faint labels of 今天, 昨天, 本周 and 更早 between them; on a 4 × 2 card two rows at the bottom; under the list 还有 17 篇 where more are below; in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded tinted chip and a title, its end clear of the card's grip), light and dark. The times move on by themselves (it hears the kit's clock). The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery-soft/static/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery-soft/static",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "静态卡片", "en": "Static card" },
+  "description": { "zh": "放一段任意的 HTML，只展示，不能在页面上改；开头的标题画成卡片的标题行", "en": "Any HTML, shown as it is: nothing on it changes in the page; a heading it starts with drawn as the card's head row" },
+  "words": "jingtaikapian jingtai kapian static html card 静态 卡片 展示 内容",
+  "parts": {
+    "content": { "at": ":scope > div", "edit": "none" }
+  },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4], [8, 2], [2, 1], [4, 1]], "min": { "w": 1, "h": 1 }, "max": { "w": 12, "h": 24 }, "resize": true }
+}

package/packs/gallery-soft/static/example.html

@@ -0,0 +1,12 @@
+<div data-doc-component="gallery-soft/static">
+  <div>
+    <h3>本周重点</h3>
+    <p><small>11月10日 — 11月16日</small></p>
+    <ul>
+      <li>周三前定下发布日期</li>
+      <li>和设计一起过一遍首页</li>
+      <li>读完《深度工作》第三章</li>
+    </ul>
+    <p><a href="https://example.com/plan">完整的计划</a></p>
+  </div>
+</div>

package/packs/gallery-soft/static/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><defs><linearGradient id="w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3e7ac6" stop-opacity=".07"/><stop offset=".52" stop-color="#3e7ac6" stop-opacity="0"/></linearGradient></defs><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="14" fill="#ffffff" stroke="#e8e7e4"/><rect x="17" y="13" width="206" height="94" rx="13.5" fill="url(#w)"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ecf3fb"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="50" y="28" width="44" height="6" rx="3" fill="#37352f"/><rect x="30" y="47" width="9" height="9" rx="3" fill="#efeff0"/><rect x="46" y="49" width="62" height="6" rx="3" fill="#4a4843"/><rect x="176" y="50" width="28" height="4" rx="2" fill="#c4c2bd"/><rect x="30" y="62" width="9" height="9" rx="3" fill="#efeff0"/><rect x="46" y="64" width="50" height="6" rx="3" fill="#4a4843"/><rect x="176" y="65" width="28" height="4" rx="2" fill="#c4c2bd"/><rect x="30" y="77" width="9" height="9" rx="3" fill="#efeff0"/><rect x="46" y="79" width="74" height="6" rx="3" fill="#4a4843"/><rect x="176" y="80" width="28" height="4" rx="2" fill="#c4c2bd"/></svg>