@heycys/gallery 0.1.1 → 0.2.0

package/kit/state.js

@@ -117,7 +117,15 @@
     const storageKey = options.storageKey || `gallery:${key}${scopeSuffix}`;
     const storage = storageFor(storageKey);
     if (!options.storageKey) carryOldState(storage, storageFor(`html-report-studio:${key}${scopeSuffix}`), matches, version);
-    const restored = parseStored(storage.read(), matches, version) || embeddedState(matches, version) || {};
+    // What it was kept under before (`formerId`: a component's instance, by its markup until it had a
+    // block id), read when nothing is kept under its own name, and carried to it at once, so that the
+    // reader's choice outlives the name, and the carry is done once.
+    const former = typeof options.formerId === "string" && options.formerId && !options.storageKey && scoped(options.formerId) !== key ? scoped(options.formerId) : null;
+    const formerMatches = (other) => typeof other === "string" && scoped(other) === former;
+    const own = parseStored(storage.read(), matches, version);
+    const carried = own || !former ? null : parseStored(storageFor(`gallery:${former}${scopeSuffix}`).read(), formerMatches, version);
+    const embedded = own || carried ? null : embeddedState(matches, version) || (former ? embeddedState(formerMatches, version) : null);
+    const restored = own || carried || embedded || {};
     const state = Object.assign(Object.create(null), defaults);
     for (const [key, value] of Object.entries(restored)) {
       if (!transientKeys.has(key)) state[key] = clone(value);
@@ -140,6 +148,7 @@
       const snapshot = clone(state);
       for (const listener of listeners) listener(clone(snapshot), change);
     }
+    if (carried) persist();
 
     const api = {
       id,

package/kit/tables.js

@@ -385,7 +385,7 @@
   }
 
   // src/shared/components/page.mjs
-  var LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure" });
+  var LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure", full: "data-doc-width" });
   var page_default = {
     id: "page",
     match: "main.doc-page",
@@ -405,11 +405,34 @@
     classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
     runtime: {
       generated: [".doc-display", "script[data-doc-state]"],
-      root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] },
-      // The reader's theme and width (ui.js), and the document's look (字体与布局: its doc.json's, put on by
-      // the render, src/shared/document-look.mjs), which a copy of the view keeps; never written in doc.html.
-      state: { html: ["data-doc-theme", "data-doc-width", ...Object.values(LOOK_ATTRIBUTES)] },
-      internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"]
+      // data-doc-effective-theme: the theme the page shows now (ui.js), "light" or "dark", which a custom page's own colors go by.
+      // data-doc-platform: "mac" on an Apple platform (runtime/index.js sets it as the page opens), the text's color and smoothing go by it; a copy of the view lets it go, its reader's machine judges anew.
+      root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls", "data-doc-effective-theme", "data-doc-platform"] },
+      // The reader's theme (ui.js) and the document's look (字体与布局 and 全宽: its doc.json's, put on by
+      // the render, src/shared/document-look.mjs; the reader's own 全宽显示 is the same data-doc-width), which
+      // a copy of the view keeps; never written in doc.html.
+      state: { html: ["data-doc-theme", ...Object.values(LOOK_ATTRIBUTES)] },
+      internal: [
+        "doc-display*",
+        "data-doc-export-copy",
+        "data-theme",
+        "doc-export-id",
+        "doc-reveal",
+        "doc-kit-error",
+        "doc-net-consent*",
+        "data-doc-snapshot",
+        // A consent bar on a card under 240px of content (runtime/net.js), its line over its button.
+        "data-doc-net-narrow",
+        // The time an export's snapshot was made (its data-doc-snapshot tag's: render/net-snapshot.mjs), which context.workspace.query answers as `at`.
+        "data-at",
+        // A custom page's (no document's: src/render/page-html.mjs, the kit's board/): its cards' cells, the Agent's
+        // (data-x, data-y, data-w, data-h), and its boards' columns now (data-columns, board.js's).
+        "data-x",
+        "data-y",
+        "data-w",
+        "data-h",
+        "data-columns"
+      ]
     }
   };
 
@@ -421,8 +444,11 @@
     // 字体大小: 小号, 默认, 大号
     spacing: Object.freeze(["default", "compact", "loose"]),
     // 正文间距: 紧凑, 默认, 宽松
-    width: Object.freeze(["default", "narrow", "wide"])
+    width: Object.freeze(["default", "narrow", "wide"]),
     // 正文宽度: 偏窄, 默认, 偏宽
+    // 全宽 (the 更多 menu's switch under 目录): the page at the full width of its area, whatever its 正文宽度 is; its attribute is
+    // the kit's own data-doc-width="full", the reader's display menu's 全宽显示 too (components/page.mjs LOOK_ATTRIBUTES)
+    full: Object.freeze(["default", "full"])
   });
   var SIZE_FACTOR = Object.freeze({ default: 1, small: 15 / 16, large: 18 / 16 });
   var SPACING = Object.freeze({
@@ -546,6 +572,7 @@
       frame.className = "doc-scrollbars-frame";
       node.prepend(frame);
     }
+    frame.style.removeProperty("width");
     const bars = { node, table, frame, y: node.querySelector(".doc-scrollbar--y"), x: node.querySelector(".doc-scrollbar--x"), timer: 0, axes: {}, noted: "", reach: 0 };
     scrollbars.set(wrapper, bars);
     wrapper.addEventListener("scroll", () => {
@@ -563,10 +590,10 @@
     const bars = scrollbars.get(wrapper);
     if (!bars) return;
     const { table } = bars;
-    const { clientWidth: width, clientHeight: height, offsetWidth, offsetHeight } = wrapper;
+    const { clientWidth: width, clientHeight: height } = wrapper;
+    const style = getComputedStyle(wrapper);
     const content = { width: Math.max(width, table.offsetWidth), height: Math.max(height, table.offsetHeight) };
-    setStyle(bars.frame, "width", `${offsetWidth}px`);
-    setStyle(bars.frame, "height", `${offsetHeight}px`);
+    setStyle(bars.frame, "height", `${outerHeight(wrapper, style)}px`);
     const x = content.width - width > 1, y = content.height - height > 1;
     const sizes = `${width}x${height}:${content.width}x${content.height}`;
     if (width > 0 && (renote || sizes !== bars.noted)) {
@@ -574,7 +601,6 @@
       bars.reach = noteHidden(wrapper, table);
     }
     bars.node.toggleAttribute("data-more", x && wrapper.scrollLeft + width < bars.reach - 1);
-    const style = getComputedStyle(wrapper);
     const corner = (radius, border) => Math.max(0, (parseFloat(style[radius]) || 0) - (parseFloat(style[border]) || 0));
     const header = table.tHead?.getBoundingClientRect().height || 0;
     const first = fixedFirstCell(table)?.getBoundingClientRect().width || 0;
@@ -604,6 +630,12 @@
       bars.axes.x = place(bars.x, start, end, first, width, content.width, wrapper.scrollLeft);
     }
   }
+  function outerHeight(element, style) {
+    const height = parseFloat(style.height);
+    if (!Number.isFinite(height)) return element.offsetHeight;
+    if (style.boxSizing === "border-box") return height;
+    return height + ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"].reduce((sum, name) => sum + (parseFloat(style[name]) || 0), 0);
+  }
   function noteHidden(wrapper, table) {
     const notes = [];
     const hides = tableHides(wrapper, table);
@@ -671,6 +703,7 @@
   var CODE_RUN_MAX = 320;
   var WIDE = "\u2014\u3000-\u30FF\u3400-\u9FFF\uAC00-\uD7AF\uF900-\uFAFF\uFF00-\uFFEF";
   var NATIVE_BREAKS = new RegExp(`(?<=-)|(?<=[${WIDE}])|(?=[${WIDE}])`, "u");
+  var SUBPIXEL = 0.5;
   var layouts = /* @__PURE__ */ new WeakMap();
   var layoutObservers = /* @__PURE__ */ new WeakMap();
   var pendingLayouts = /* @__PURE__ */ new Set();
@@ -882,13 +915,32 @@
     const wrapper = wrapperOf(table);
     const sized = Boolean(wrapper) && getComputedStyle(wrapper).getPropertyValue("--doc-span-width").trim() !== "";
     const wider = sized ? Math.max(1, parseFloat(getComputedStyle(wrapper).getPropertyValue("--doc-span")) || 1) : 1;
-    return { wrapper, sized, wider, previousWidth: wrapper?.style.width };
+    return { wrapper, sized, wider };
+  }
+  function innerWidth(element) {
+    const style = getComputedStyle(element);
+    const padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+    const border = (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.borderRightWidth) || 0);
+    if (element.getClientRects?.().length > 0 && /px$/.test(style.width)) {
+      const width = parseFloat(style.width);
+      return style.boxSizing === "border-box" ? width - padding - border : width;
+    }
+    return (element.clientWidth || element.getBoundingClientRect().width - border) - padding;
+  }
+  function roomOf(element, width = null) {
+    const before = element.style.width;
+    if (width === null || before === width) return innerWidth(element);
+    element.style.width = width;
+    try {
+      return innerWidth(element);
+    } finally {
+      element.style.width = before;
+    }
   }
   function sizedInside({ wrapper, sized, wider }) {
     if (!sized) return null;
-    wrapper.style.width = "";
-    const style = getComputedStyle(wrapper);
-    const inner = wrapper.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+    if (wrapper.style.width) wrapper.style.width = "";
+    const inner = innerWidth(wrapper);
     return inner > 0 ? { wider, inner } : null;
   }
   function frameEdges(wrapper) {
@@ -962,19 +1014,19 @@
     table.classList.add("doc-table--auto");
     table.style.width = `${total2}px`;
     clearColumnMarks(table);
+    let room = frameSize?.inner ?? null;
     if (wrapper) {
       const edges = frameEdges(wrapper);
       setAttribute(wrapper, "data-doc-min-width", String(Math.min(total2, COLUMN_FLOOR) + edges));
       if (!frameSize) {
-        wrapper.style.width = "100%";
-        const style = getComputedStyle(wrapper);
-        const available = wrapper.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
-        wrapper.style.width = total2 < available ? `${total2 + edges}px` : "100%";
+        room = roomOf(wrapper, "100%");
+        setStyle(wrapper, "width", total2 < room ? `${total2 + edges}px` : "100%");
       }
     }
     writeColgroup(table, sizes.map((width, index) => ({ width: `${width}px`, key: String(index) })));
     layouts.set(table, sizes.map((width, index) => ({ key: String(index), kind: "compact", preferredWidth: width, softMinWidth: width, hardMinWidth: width, width, ratio: width / total2 })));
     for (const [cell, { c, cols }] of slots?.places ?? []) markRunWrap(cell, sizes.slice(c, c + cols).reduce((sum, width) => sum + width, 0), measureCell);
+    return room;
   }
   function raiseNarrow(widths, room, floor) {
     const low = widths.filter((width) => width < floor).sort((a, b) => a - b);
@@ -989,12 +1041,15 @@
     }
     return widths.map((width) => Math.max(width, Math.min(level, floor)));
   }
-  function refreshLayout(table) {
+  function refreshLayout(table, { observed = false } = {}) {
     idleLayouts.delete(table);
     const measure = createCellMeasurer(table);
-    layOut(table, measure);
+    const room = layOut(table, measure);
     measure.done();
     markWhole(table);
+    followChain(table, room, observed);
+    const watched = observedOf.get(table);
+    if (watched) leftAt.set(table, new Map(watched.map((element) => [element, innerWidth(element)])));
     const wrapper = wrapperOf(table);
     if (wrapper) placeScrollbars(wrapper, { renote: true });
   }
@@ -1007,7 +1062,36 @@
     if (manual) return manualLayout(table, frame, manual, measure);
     const count = headers.length || rows[0]?.cells.length || 0;
     if (!count || table.tHead && table.tHead.rows.length !== 1 || spanned) return nativeLayout(table, frame);
-    allocatedLayout(table, frame, headers, rows, count, measure);
+    return allocatedLayout(table, frame, headers, rows, count, measure);
+  }
+  var observedOf = /* @__PURE__ */ new WeakMap();
+  var leftAt = /* @__PURE__ */ new WeakMap();
+  var CHAIN_GAP = 100;
+  var RETURNS_MAX = 3;
+  var HOLD = 1e3;
+  var chains = /* @__PURE__ */ new WeakMap();
+  function followChain(table, room, observed) {
+    const now = performance.now();
+    const chain = chains.get(table);
+    if (!observed || !chain || now - chain.at > CHAIN_GAP) {
+      if (chain?.timer) clearTimeout(chain.timer);
+      chains.set(table, { at: now, rooms: [room], returns: 0, held: false, timer: 0 });
+      return;
+    }
+    const near = (other) => typeof room === "number" && typeof other === "number" && Math.abs(room - other) < SUBPIXEL;
+    if (!near(chain.rooms.at(-1)) && near(chain.rooms.at(-2))) chain.returns++;
+    chain.rooms = [...chain.rooms.slice(-2), room];
+    chain.at = now;
+    chain.held = chain.returns >= RETURNS_MAX;
+  }
+  function held(table) {
+    const chain = chains.get(table);
+    if (!chain?.held) return false;
+    chain.timer ||= setTimeout(() => {
+      chains.delete(table);
+      queueLayout(table);
+    }, Math.max(0, chain.at + HOLD - performance.now()));
+    return true;
   }
   var wholeTexts = /* @__PURE__ */ new WeakMap();
   function markWhole(table) {
@@ -1064,21 +1148,19 @@ ${columns.map((texts) => texts?.join("\n") ?? "").join("\f")}`;
       table.removeAttribute("data-doc-filled");
       table.style.removeProperty("width");
     }
+    return frameSize?.inner ?? null;
   }
   function allocatedLayout(table, frame, headers, rows, count, measureCell) {
     table.removeAttribute("data-doc-filled");
-    const { wrapper, sized, wider, previousWidth } = frame;
+    const { wrapper, sized, wider } = frame;
     const parent = wrapper || table.parentElement;
-    if (!parent) return;
-    if (wrapper) wrapper.style.width = sized ? "" : "100%";
+    if (!parent) return null;
+    if (sized && wrapper.style.width) wrapper.style.width = "";
     const style = getComputedStyle(parent);
     const padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
     const border = (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.borderRightWidth) || 0);
-    const available = (parent.clientWidth || parent.getBoundingClientRect().width - border) - padding;
-    if (!(available > 0)) {
-      if (wrapper) wrapper.style.width = previousWidth;
-      return;
-    }
+    const available = roomOf(parent, wrapper && !sized ? "100%" : null);
+    if (!(available > 0)) return null;
     const font = fontFor(rows[0]?.cells[0] || table);
     const cellPadding = cellPaddingFor(getComputedStyle(rows[0]?.cells[0] || headers[0]));
     const measuredCells = /* @__PURE__ */ new Map();
@@ -1124,7 +1206,7 @@ ${columns.map((texts) => texts?.join("\n") ?? "").join("\f")}`;
     table.classList.add("doc-table--auto");
     table.style.width = sized && tableWidth <= available + 4 ? "100%" : `${tableWidth}px`;
     if (wrapper) setAttribute(wrapper, "data-doc-min-width", String(Math.ceil(result.reduce((value, column) => value + column.softMinWidth, 0) + border + padding)));
-    if (wrapper && !sized) wrapper.style.width = tableWidth >= available - 0.01 ? "100%" : `${tableWidth + border + padding}px`;
+    if (wrapper && !sized) setStyle(wrapper, "width", tableWidth >= available - 0.01 ? "100%" : `${tableWidth + border + padding}px`);
     writeColgroup(table, result.map((column) => ({ width: `${column.ratio * 100}%`, key: column.key })));
     result.forEach((column, index) => {
       for (const cell of [headers[index], ...rows.map((row) => row.cells[index])].filter(Boolean)) {
@@ -1136,15 +1218,23 @@ ${columns.map((texts) => texts?.join("\n") ?? "").join("\f")}`;
       }
     });
     layouts.set(table, result.map((column) => ({ ...column, width: column.ratio * tableWidth })));
+    return available;
   }
-  function queueLayout(table) {
+  var observedOnly = /* @__PURE__ */ new WeakSet();
+  function queueLayout(table, { observed = false } = {}) {
+    if (!observed) observedOnly.delete(table);
+    else if (!pendingLayouts.has(table)) observedOnly.add(table);
     pendingLayouts.add(table);
     if (layoutFrame) return;
     layoutFrame = requestAnimationFrame(() => {
       layoutFrame = 0;
       const tables = [...pendingLayouts];
       pendingLayouts.clear();
-      tables.filter((table2) => table2.isConnected).forEach(refreshLayout);
+      for (const table2 of tables) {
+        const observed2 = observedOnly.has(table2);
+        observedOnly.delete(table2);
+        if (table2.isConnected) refreshLayout(table2, { observed: observed2 });
+      }
     });
   }
   var idleLayouts = /* @__PURE__ */ new Set();
@@ -1157,26 +1247,23 @@ ${columns.map((texts) => texts?.join("\n") ?? "").join("\f")}`;
       idleQueued = false;
       const tables = [...idleLayouts];
       idleLayouts.clear();
-      tables.forEach(queueLayout);
+      tables.forEach((table2) => queueLayout(table2));
     };
     if (globalThis.requestIdleCallback) requestIdleCallback(run, { timeout: 1e3 });
     else setTimeout(run, 50);
   }
   function applyColumnWidths(table, { layout = true } = {}) {
     if (!layoutObservers.has(table)) {
-      const previous = /* @__PURE__ */ new WeakMap();
       const observer = new ResizeObserver((entries) => {
-        for (const { target, contentRect } of entries) {
-          if (contentRect.width !== previous.get(target)) {
-            previous.set(target, contentRect.width);
-            queueLayout(table);
-          }
-        }
+        const left = leftAt.get(table);
+        const changed = entries.some(({ target, contentRect }) => !(Math.abs(contentRect.width - (left?.get(target) ?? NaN)) < SUBPIXEL));
+        if (changed && !held(table)) queueLayout(table, { observed: true });
       });
       const wrapper = wrapperOf(table);
       const parent = wrapper ? wrapper.parentElement : table.parentElement;
-      if (parent) observer.observe(parent);
-      if (wrapper) observer.observe(wrapper);
+      const watched = [parent, wrapper].filter(Boolean);
+      watched.forEach((element) => observer.observe(element));
+      observedOf.set(table, watched);
       layoutObservers.set(table, observer);
       if (wrapper) drawScrollbars(wrapper, table);
     }

package/kit/ui.js

@@ -134,7 +134,8 @@ ${source}
   var OWN_METAS = new RegExp(`<head\\b[^>]*>\\s*<meta name="generator" content="(?:${GENERATORS.join("|")})">\\s*<meta http-equiv="Content-Security-Policy" content="[^"]*">\\s*<meta name="${SOURCE_META}" content="sha256:([0-9a-f]{64})">(?:\\s*<meta name="${PACKAGES_META}" content="([^"]*)">)?`, "i");
 
   // src/shared/page-links.mjs
-  function pageId(slug) {
+  var DOC_SLUG = /^doc-([a-z][a-z0-9]{7})$/;
+  function hashId(slug) {
     let one = 3735928559;
     let two = 1103547991;
     for (let at = 0; at < slug.length; at++) {
@@ -146,10 +147,15 @@ ${source}
     const hash = (two >>> 0) % 2 ** 21 * 2 ** 32 + (one >>> 0);
     return String.fromCharCode(97 + hash % 26) + Math.floor(hash / 26).toString(36).padStart(7, "0").slice(-7);
   }
+  var pageId = (slug) => DOC_SLUG.exec(slug)?.[1] ?? hashId(slug);
+  var earlierId = (slug) => DOC_SLUG.test(slug) ? hashId(slug) : null;
+  var ID_FIRST = "abcdefghijklmnopqrstuvwxyz";
+  var ID_REST = `${ID_FIRST}0123456789`;
   function pageOfLink(links, value) {
     if (links.has(value)) return value;
     const id = value.slice(value.lastIndexOf("-") + 1);
     for (const slug of links.keys()) if (pageId(slug) === id) return slug;
+    for (const slug of links.keys()) if (earlierId(slug) === id) return slug;
     return null;
   }
 
@@ -208,7 +214,7 @@ ${source}
   }
 
   // src/shared/components/page.mjs
-  var LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure" });
+  var LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure", full: "data-doc-width" });
   var page_default = {
     id: "page",
     match: "main.doc-page",
@@ -228,11 +234,34 @@ ${source}
     classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
     runtime: {
       generated: [".doc-display", "script[data-doc-state]"],
-      root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] },
-      // The reader's theme and width (ui.js), and the document's look (字体与布局: its doc.json's, put on by
-      // the render, src/shared/document-look.mjs), which a copy of the view keeps; never written in doc.html.
-      state: { html: ["data-doc-theme", "data-doc-width", ...Object.values(LOOK_ATTRIBUTES)] },
-      internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"]
+      // data-doc-effective-theme: the theme the page shows now (ui.js), "light" or "dark", which a custom page's own colors go by.
+      // data-doc-platform: "mac" on an Apple platform (runtime/index.js sets it as the page opens), the text's color and smoothing go by it; a copy of the view lets it go, its reader's machine judges anew.
+      root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls", "data-doc-effective-theme", "data-doc-platform"] },
+      // The reader's theme (ui.js) and the document's look (字体与布局 and 全宽: its doc.json's, put on by
+      // the render, src/shared/document-look.mjs; the reader's own 全宽显示 is the same data-doc-width), which
+      // a copy of the view keeps; never written in doc.html.
+      state: { html: ["data-doc-theme", ...Object.values(LOOK_ATTRIBUTES)] },
+      internal: [
+        "doc-display*",
+        "data-doc-export-copy",
+        "data-theme",
+        "doc-export-id",
+        "doc-reveal",
+        "doc-kit-error",
+        "doc-net-consent*",
+        "data-doc-snapshot",
+        // A consent bar on a card under 240px of content (runtime/net.js), its line over its button.
+        "data-doc-net-narrow",
+        // The time an export's snapshot was made (its data-doc-snapshot tag's: render/net-snapshot.mjs), which context.workspace.query answers as `at`.
+        "data-at",
+        // A custom page's (no document's: src/render/page-html.mjs, the kit's board/): its cards' cells, the Agent's
+        // (data-x, data-y, data-w, data-h), and its boards' columns now (data-columns, board.js's).
+        "data-x",
+        "data-y",
+        "data-w",
+        "data-h",
+        "data-columns"
+      ]
     }
   };
 
@@ -244,8 +273,11 @@ ${source}
     // 字体大小: 小号, 默认, 大号
     spacing: Object.freeze(["default", "compact", "loose"]),
     // 正文间距: 紧凑, 默认, 宽松
-    width: Object.freeze(["default", "narrow", "wide"])
+    width: Object.freeze(["default", "narrow", "wide"]),
     // 正文宽度: 偏窄, 默认, 偏宽
+    // 全宽 (the 更多 menu's switch under 目录): the page at the full width of its area, whatever its 正文宽度 is; its attribute is
+    // the kit's own data-doc-width="full", the reader's display menu's 全宽显示 too (components/page.mjs LOOK_ATTRIBUTES)
+    full: Object.freeze(["default", "full"])
   });
   var SIZE_FACTOR = Object.freeze({ default: 1, small: 15 / 16, large: 18 / 16 });
   var SPACING = Object.freeze({
@@ -311,17 +343,47 @@ ${source}
     "use strict";
     const root = document.documentElement;
     const page = document.querySelector(".doc-page");
-    if (!page || document.querySelector(".doc-display")) return;
+    const custom = page ? null : document.querySelector(".gallery-page");
+    if (!(page || custom) || document.querySelector(".doc-display")) return;
     const systemTheme = matchMedia("(prefers-color-scheme: dark)");
     if (!globalThis.DocState) throw new Error("Report UI requires /kit/state.js to be loaded first.");
     if (!globalThis.DocKit) throw new Error("Report UI requires /kit/runtime.js to be loaded first.");
-    const reportId = page.dataset.docId || location.pathname || "report";
-    const displayState = DocState.create({
+    const reportId = page?.dataset.docId || location.pathname || "report";
+    const displayState = page ? DocState.create({
       id: "display",
       // this report's (DocState scopes it by data-doc-id)
       version: 1,
       defaults: { theme: null, width: "reading", exportVersion: 0 }
+    }) : null;
+    const chosenTheme = () => {
+      const theme = displayState?.get("theme");
+      return theme === "light" || theme === "dark" ? theme : null;
+    };
+    function effectiveTheme() {
+      return root.dataset.docTheme || (systemTheme.matches ? "dark" : "light");
+    }
+    const themeChanged = () => {
+      root.dataset.docEffectiveTheme = effectiveTheme();
+      for (const name of ["doc-theme-change", "report-theme-change"]) dispatchEvent(new CustomEvent(name, { detail: { theme: effectiveTheme() } }));
+    };
+    addEventListener("doc-theme-request", (event) => {
+      const theme = event.detail?.theme ?? chosenTheme();
+      if (theme === "light" || theme === "dark") root.dataset.docTheme = theme;
+      else delete root.dataset.docTheme;
+      updateThemeItems();
+      themeChanged();
     });
+    systemTheme.addEventListener?.("change", () => {
+      if (root.dataset.docTheme) return;
+      themeChanged();
+    });
+    const markReady = () => requestAnimationFrame(() => root.setAttribute("data-doc-ready", ""));
+    const ready = () => document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", markReady, { once: true }) : markReady();
+    if (custom) {
+      root.dataset.docEffectiveTheme = effectiveTheme();
+      ready();
+      return;
+    }
     const icons = {
       // Two sliders, their knobs open circles the lines stop at.
       settings: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5h7.25M15.25 6.5h1.25M3.5 13.5h1.25M9.25 13.5h7.25"/><circle cx="13" cy="6.5" r="2.25"/><circle cx="7" cy="13.5" r="2.25"/></svg>',
@@ -382,19 +444,15 @@ ${source}
     display.append(menuButton, menu);
     document.body.prepend(display);
     root.dataset.docControls = "ready";
-    const markReady = () => requestAnimationFrame(() => root.setAttribute("data-doc-ready", ""));
-    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", markReady, { once: true });
-    else markReady();
-    const storedTheme = displayState.get("theme");
-    if (storedTheme === "light" || storedTheme === "dark") root.dataset.docTheme = storedTheme;
+    ready();
+    const storedTheme = chosenTheme();
+    if (storedTheme) root.dataset.docTheme = storedTheme;
+    root.dataset.docEffectiveTheme = effectiveTheme();
     const storedWidth = displayState.get("width");
     if (storedWidth === "full") root.dataset.docWidth = "full";
-    function effectiveTheme() {
-      return root.dataset.docTheme || (systemTheme.matches ? "dark" : "light");
-    }
     function updateThemeItems() {
-      const chosen = displayState.get("theme");
-      const current = chosen === "light" || chosen === "dark" ? chosen : "system";
+      if (!displayState) return;
+      const current = chosenTheme() ?? "system";
       themeItems.forEach((item) => item.setAttribute("aria-checked", String(item.dataset.theme === current)));
     }
     function updateWidthItem() {
@@ -585,9 +643,6 @@ ${clone.outerHTML}`;
       event.preventDefault();
       list[next].focus();
     });
-    const themeChanged = () => {
-      for (const name of ["doc-theme-change", "report-theme-change"]) dispatchEvent(new CustomEvent(name, { detail: { theme: effectiveTheme() } }));
-    };
     themeItems.forEach((item) => item.addEventListener("click", () => {
       const theme = item.dataset.theme;
       if (theme === "system") delete root.dataset.docTheme;
@@ -596,13 +651,6 @@ ${clone.outerHTML}`;
       updateThemeItems();
       themeChanged();
     }));
-    addEventListener("doc-theme-request", (event) => {
-      const theme = event.detail?.theme ?? displayState.get("theme");
-      if (theme === "light" || theme === "dark") root.dataset.docTheme = theme;
-      else delete root.dataset.docTheme;
-      updateThemeItems();
-      themeChanged();
-    });
     const LOOK_HELD = 2e3;
     let held = null;
     const showLook = (look) => {
@@ -648,10 +696,6 @@ ${clone.outerHTML}`;
       }
       dispatchEvent(new CustomEvent("doc-export-copy-done", { detail: outcome }));
     });
-    systemTheme.addEventListener?.("change", () => {
-      if (root.dataset.docTheme) return;
-      themeChanged();
-    });
     updateThemeItems();
     updateWidthItem();
   })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycys/gallery",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Gallery: documents written as HTML by an AI agent, shown and edited in the browser, delivered as one offline file. The gallery command and its local server.",
   "keywords": [
     "gallery",
@@ -29,6 +29,7 @@
     "vendor/",
     "starter/",
     "assets/",
+    "packs/",
     "sdk/",
     "skill/",
     "release.json",

package/packs/gallery/card/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery/card",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "卡片", "en": "Card" },
+  "description": { "zh": "带标题的卡片，里面放任意内容", "en": "A card with a title, any blocks inside it" },
+  "words": "kapian card 卡片 框 frame box",
+  "parts": {
+    "title": { "at": ":scope > h3", "edit": "text" },
+    "body": { "edit": "flow" }
+  },
+  "places": ["document"],
+  "markdown": "parts"
+}

package/packs/gallery/card/example.html

@@ -0,0 +1,10 @@
+<div data-doc-component="gallery/card">
+  <h3>这一周的要点</h3>
+  <div data-doc-slot="body">
+    <p>卡片里写文档自己的块：段落、列表、表格、公式、图表卡片都可以。</p>
+    <ul>
+      <li>标题写这张卡片说的是什么</li>
+      <li>内容照常写，读者照常编辑</li>
+    </ul>
+  </div>
+</div>

package/packs/gallery/card/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="#f2f4f7"/><rect x="16" y="14" width="208" height="92" rx="8" fill="#ffffff" stroke="#d0d5dd"/><rect x="30" y="28" width="96" height="12" rx="4" fill="#667085"/><rect x="30" y="52" width="176" height="8" rx="4" fill="#d0d5dd"/><rect x="30" y="68" width="150" height="8" rx="4" fill="#d0d5dd"/><rect x="30" y="84" width="120" height="8" rx="4" fill="#d0d5dd"/></svg>

package/packs/gallery/card/style.css

@@ -0,0 +1,6 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page or the blocks in the slot, which read as the page's. The look is a
+   card's of the kit (.doc-figure): its border, its radius and its title's size, in the kit's colors,
+   which follow the theme. */
+[data-doc-component="gallery/card"] { margin: var(--doc-component-gap) 0; padding: 20px 24px 8px; border: 1px solid var(--doc-border); border-radius: 10px; background: var(--doc-surface); }
+[data-doc-component="gallery/card"] > h3 { margin: 0 0 4px; font-size: var(--doc-card-title-font-size); line-height: var(--doc-card-title-line-height); font-weight: 600; letter-spacing: -.025em; }

package/packs/gallery/card/template.html

@@ -0,0 +1,6 @@
+<div data-doc-component="gallery/card">
+  <h3>标题</h3>
+  <div data-doc-slot="body">
+    <p></p>
+  </div>
+</div>

package/packs/gallery/card/writing.md

@@ -0,0 +1,14 @@
+# 卡片 (gallery/card)
+
+A card that frames a few blocks under a title: a summary beside the text, a set of points to keep together, a step of a guide. Use it where a framed group reads better than a heading; for a whole section, a heading is enough.
+
+## How to write it
+
+Write the element as example.html does (`gallery block show gallery/card` prints it):
+
+- the title, its `h3`: required, a few words.
+- the body, its `<div data-doc-slot="body">`: required, the document's own blocks, written as anywhere in the document (paragraphs, lists, tables, formulas, a chart card). The reader edits them as any.
+
+## How it looks
+
+A frame with rounded corners in the kit's border color, its title at the top. It draws nothing of its own and has no script: what the file says is what a reader sees.

package/packs/gallery/chart-card/component.json

@@ -0,0 +1,15 @@
+{
+  "id": "gallery/chart-card",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "表格图表卡片", "en": "Chart from a table" },
+  "description": { "zh": "一个标题、一张表格和它画出的条形图，改表格里的数，图跟着重画", "en": "A title, a table and the bar chart drawn from it: edit a number and the chart draws again" },
+  "words": "biaogetubiaokapian tubiao chart bar table 图表 条形图 表格 画图",
+  "parts": {
+    "title": { "at": ":scope > h3", "edit": "text" },
+    "table": { "edit": "flow" }
+  },
+  "runtime": { "generated": [":scope > .gallery-chart-card-bars"] },
+  "places": ["document"],
+  "markdown": "parts"
+}