@heycys/gallery 0.1.0 → 0.1.2

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

@@ -384,6 +384,79 @@
     for (const [cell, sides] of edges) if (cell.getAttribute(EDGE) !== sides) cell.setAttribute(EDGE, sides);
   }
 
+  // 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", full: "data-doc-width" });
+  var page_default = {
+    id: "page",
+    match: "main.doc-page",
+    flow: ".doc-page",
+    groups: false,
+    header: "header.doc-header",
+    // the title and the lines under it
+    title: ".doc-title",
+    // the document's title, the h1 of the header: its text, mirrored in <title> and report.json
+    attrs: {
+      "data-doc-id": "the document's slug: its reading state is kept under it",
+      "data-doc-kit": "a kit asset's tag (the render puts in those a report needs; an older source writes them)",
+      "data-doc-vendor": "a vendor library's tag",
+      "data-doc-placeholder": "the starter's content, which the checks want replaced",
+      "data-doc-transient-view": "its hidden or open shows transient reading state, reset in an export of the view"
+    },
+    classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
+    runtime: {
+      generated: [".doc-display", "script[data-doc-state]"],
+      // 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",
+        // 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"
+      ]
+    }
+  };
+
+  // src/shared/document-look.mjs
+  var LOOK = Object.freeze({
+    font: Object.freeze(["sans", "serif", "mixed"]),
+    // 等线体, 衬线体, 混合体 (the title and headings serif)
+    size: Object.freeze(["default", "small", "large"]),
+    // 字体大小: 小号, 默认, 大号
+    spacing: Object.freeze(["default", "compact", "loose"]),
+    // 正文间距: 紧凑, 默认, 宽松
+    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({
+    default: Object.freeze({ leading: 1, gaps: 1 }),
+    compact: Object.freeze({ leading: 0.8, gaps: 0.75 }),
+    loose: Object.freeze({ leading: 1.2, gaps: 1.25 })
+  });
+  var WIDTH = Object.freeze({ default: 712, narrow: 648, wide: 776 });
+  var ATTRIBUTE_VALUE = String.raw`(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?`;
+
   // src/shared/table-hides.mjs
   function cellColumns(table) {
     const taken = [];
@@ -497,6 +570,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", () => {
@@ -514,10 +588,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)) {
@@ -525,7 +599,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;
@@ -555,6 +628,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);
@@ -622,6 +701,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();
@@ -683,7 +763,8 @@
   function contextOf(table) {
     const root = document.documentElement;
     const classes = [...table.classList].filter((name) => name !== "doc-table--auto").join(" ");
-    return `${classes}${wrapperOf(table)?.className ?? ""}${root.getAttribute("data-doc-theme") ?? ""}|${root.getAttribute("data-doc-width") ?? ""}`;
+    const look = Object.values(LOOK_ATTRIBUTES).map((name) => root.getAttribute(name) ?? "").join("|");
+    return `${classes}${wrapperOf(table)?.className ?? ""}${root.getAttribute("data-doc-theme") ?? ""}|${root.getAttribute("data-doc-width") ?? ""}|${look}`;
   }
   function createCellMeasurer(table) {
     sameZoom();
@@ -832,13 +913,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) {
@@ -912,19 +1012,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);
@@ -939,12 +1039,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 });
   }
@@ -957,7 +1060,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) {
@@ -1014,21 +1146,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();
@@ -1074,7 +1204,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)) {
@@ -1086,15 +1216,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();
@@ -1107,26 +1245,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

@@ -3,6 +3,9 @@
   // src/shared/components/installed.mjs
   var ATTRIBUTE = "data-doc-component";
   var INSTANCE = `div[${ATTRIBUTE}], section[${ATTRIBUTE}]`;
+  var SLOT = "data-doc-slot";
+  var SLOT_PART = `div[${SLOT}], section[${SLOT}]`;
+  var REGION = `${INSTANCE}, ${SLOT_PART}`;
   var PACKAGE_MARK = "data-doc-package";
   var DATA_MOST = 1024 * 1024;
 
@@ -131,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++) {
@@ -143,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;
   }
 
@@ -204,6 +213,101 @@ ${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", full: "data-doc-width" });
+  var page_default = {
+    id: "page",
+    match: "main.doc-page",
+    flow: ".doc-page",
+    groups: false,
+    header: "header.doc-header",
+    // the title and the lines under it
+    title: ".doc-title",
+    // the document's title, the h1 of the header: its text, mirrored in <title> and report.json
+    attrs: {
+      "data-doc-id": "the document's slug: its reading state is kept under it",
+      "data-doc-kit": "a kit asset's tag (the render puts in those a report needs; an older source writes them)",
+      "data-doc-vendor": "a vendor library's tag",
+      "data-doc-placeholder": "the starter's content, which the checks want replaced",
+      "data-doc-transient-view": "its hidden or open shows transient reading state, reset in an export of the view"
+    },
+    classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
+    runtime: {
+      generated: [".doc-display", "script[data-doc-state]"],
+      // 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",
+        // 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"
+      ]
+    }
+  };
+
+  // src/shared/document-look.mjs
+  var LOOK = Object.freeze({
+    font: Object.freeze(["sans", "serif", "mixed"]),
+    // 等线体, 衬线体, 混合体 (the title and headings serif)
+    size: Object.freeze(["default", "small", "large"]),
+    // 字体大小: 小号, 默认, 大号
+    spacing: Object.freeze(["default", "compact", "loose"]),
+    // 正文间距: 紧凑, 默认, 宽松
+    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({
+    default: Object.freeze({ leading: 1, gaps: 1 }),
+    compact: Object.freeze({ leading: 0.8, gaps: 0.75 }),
+    loose: Object.freeze({ leading: 1.2, gaps: 1.25 })
+  });
+  var WIDTH = Object.freeze({ default: 712, narrow: 648, wide: 776 });
+  var isPlain = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  function lookOf(value) {
+    const look = {};
+    if (!isPlain(value)) return look;
+    for (const [key, choices] of Object.entries(LOOK)) {
+      const chosen = value[key];
+      if (typeof chosen === "string" && choices.includes(chosen) && chosen !== choices[0]) look[key] = chosen;
+    }
+    return look;
+  }
+  var ATTRIBUTE_VALUE = String.raw`(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?`;
+  function setLookOn(element, look) {
+    const next = lookOf(look);
+    let changed = false;
+    for (const [key, name] of Object.entries(LOOK_ATTRIBUTES)) {
+      const value = next[key] ?? null;
+      if (element.getAttribute(name) === value) continue;
+      if (value === null) element.removeAttribute(name);
+      else element.setAttribute(name, value);
+      changed = true;
+    }
+    return changed;
+  }
+
   // src/render/kit/words.js
   var DISPLAY = {
     "display": { zh: "\u663E\u793A\u8BBE\u7F6E", en: "Display settings" },
@@ -237,17 +341,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>',
@@ -308,19 +442,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() {
@@ -511,9 +641,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;
@@ -522,12 +649,28 @@ ${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) => {
+      if (!setLookOn(root, look)) return;
+      dispatchEvent(new Event("doc-layout-change"));
+      dispatchEvent(new Event("resize"));
+      dispatchEvent(new CustomEvent("doc-look-change", { detail: { look: lookOf(look) } }));
+    };
+    addEventListener("doc-look-request", (event) => {
+      const look = event.detail?.look;
+      if (event.detail?.from === "file") {
+        if (held) held.said = look;
+        else showLook(look);
+        return;
+      }
+      clearTimeout(held?.timer);
+      held = { said: null, timer: setTimeout(() => {
+        const said = held?.said;
+        held = null;
+        if (said) showLook(said);
+      }, LOOK_HELD) };
+      showLook(look);
     });
     widthItem.addEventListener("click", () => {
       const next = root.dataset.docWidth === "full" ? "reading" : "full";
@@ -551,10 +694,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.0",
+  "version": "0.1.2",
   "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",