@heycys/gallery 0.1.0 → 0.1.1

package/kit/runtime.js

@@ -1,10 +1,10 @@
 "use strict";
 (() => {
   // <define:__COMPONENT_FLOWS__>
-  var define_COMPONENT_FLOWS_default = [".doc-page", ".doc-section", ".doc-summary", ".doc-panel", ".doc-details-content", ".doc-dialog-content", "[data-doc-sheet]", ".doc-column"];
+  var define_COMPONENT_FLOWS_default = [".doc-page", ".doc-section", ".doc-summary", ".doc-panel", ".doc-callout", ".doc-details-content", ".doc-dialog-content", "[data-doc-sheet]", ".doc-column", "[data-doc-slot]"];
 
   // <define:__COMPONENT_RUNTIME__>
-  var define_COMPONENT_RUNTIME_default = [{ id: "page", match: "main.doc-page", runtime: { generated: [".doc-display", "script[data-doc-state]"], root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] }, state: { html: ["data-doc-theme", "data-doc-width"] }, internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"] } }, { id: "text", runtime: { classes: { ".doc-range": ["doc-range"] } } }, { id: "mention", runtime: { attrs: { "a.doc-link-mention": ["data-doc-gone"] } } }, { id: "paragraph", match: "p" }, { id: "heading", match: "h1, h2, h3, h4" }, { id: "list", match: "ul, ol", runtime: { attrs: { "ol.doc-flow": ["data-doc-flow-key", "data-doc-flow-recount"] }, generated: ["br.doc-item-line"] } }, { id: "quote", match: "blockquote" }, { id: "callout", match: ".doc-callout" }, { id: "code", match: ".doc-code", runtime: { generated: [".doc-code-fold", ".doc-code-range", ".doc-code-tools"], internal: ["doc-code-lines", "doc-code-line*", "doc-code-content", "doc-code-toolbar", "doc-code-language", "doc-code-separator", "doc-code-copy*", "doc-code-wrap*", "data-line-number"] } }, { id: "divider", match: "hr" }, { id: "math", match: ".doc-math-inline, .doc-math-block", runtime: { generated: [".doc-math-break", ".doc-math-joiner"], classes: { ".doc-math-tie": ["doc-math-tie"], ".doc-math-skip": ["doc-math-skip"] } } }, { id: "section", match: "section.doc-section" }, { id: "highlight", match: ".doc-panel, .doc-summary" }, { id: "details", match: "details.doc-details" }, { id: "dialog", match: "dialog.doc-dialog", runtime: { attrs: { "dialog.doc-dialog": ["data-doc-dialog-ready", "open", "aria-label"], ".doc-dialog-content": ["tabindex"] }, root: { classes: ["doc-dialog-open", "doc-dialog-gutter"] }, internal: ["doc-dialog-in", "doc-dialog-fade"] } }, { id: "sheets", match: "[data-doc-sheets]", runtime: { state: { "[data-doc-sheets]": ["data-active-sheet"], "[data-sheet-tab]": ["aria-selected", "tabindex", "is-active"], "[data-doc-sheet]": ["hidden", "aria-hidden"] }, internal: ["doc-sheets"] } }, { id: "table", match: "table.doc-table", runtime: { generated: ["colgroup[data-doc-columns]", ".doc-scrollbars"], attrs: { "table.doc-table": ["data-doc-sortable-ready", "data-doc-filled"], ".doc-table-wrap": ["data-doc-min-width", "data-doc-layout", "data-doc-whole"], "th, td": ["data-column-kind", "data-column-wrap", "data-run-wrap", "data-doc-edge"] }, classes: { "table.doc-table": ["doc-table--auto"] }, internal: ["doc-code-run", "doc-table-sort-button", "doc-scrollbar*", "data-doc-sort-arrow", "data-active", "data-drag", "data-x", "data-y", "data-more"] } }, { id: "columns", match: ".doc-columns" }, { id: "figure", match: "figure" }, { id: "chart", match: "[data-doc-chart]", runtime: { attrs: { "[data-doc-chart]": ["data-doc-layout"] }, classes: { "[data-doc-chart]": ["doc-chart"] }, internal: ["doc-chart-message", "data-missing"] } }, { id: "image", match: "figure.doc-image", runtime: { generated: ["dialog.doc-zoom"], attrs: { "img[data-doc-zoom]": ["data-doc-zoom", "tabindex", "role", "aria-haspopup", "aria-label"] }, root: { classes: ["doc-zoom-open", "doc-zoom-gutter", "doc-zoom-hover"] }, internal: ["doc-zoom-*"] } }, { id: "file", match: "figure.doc-file" }, { id: "bookmark", match: "figure.doc-bookmark" }, { id: "embed", match: "figure.doc-embed", runtime: { attrs: { "iframe.doc-embed-frame": ["data-doc-blob"] } } }, { id: "diff", match: ".doc-diff", runtime: { generated: [".doc-diff-body", ".doc-diff-stats"], internal: ["doc-diff-added", "doc-diff-removed"] } }, { id: "icon", match: ".doc-icon", runtime: { internal: ["data-doc-tab-icon"] } }, { id: "installed", match: "div[data-doc-component], section[data-doc-component]", runtime: { generated: [".doc-component-note", ".doc-component-data"], attrs: { "[data-doc-fallback]": ["data-doc-fallback"], "[data-doc-fallback-control]": ["data-doc-fallback-control", "inert"] }, internal: ["data-doc-package", "doc-component-more", "doc-component-one", "doc-component-line", "doc-component-short"] } }, { id: "state", match: "[data-doc-bind], [data-doc-show]", runtime: { attrs: { "[data-doc-show]": ["hidden"] }, state: { "button[data-doc-bind]": ["aria-pressed"] } } }];
+  var define_COMPONENT_RUNTIME_default = [{ id: "page", match: "main.doc-page", runtime: { generated: [".doc-display", "script[data-doc-state]"], root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] }, state: { html: ["data-doc-theme", "data-doc-width", "data-doc-font", "data-doc-size", "data-doc-spacing", "data-doc-measure"] }, internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"] } }, { id: "text", runtime: { classes: { ".doc-range": ["doc-range"], ".doc-long-run": ["doc-long-run"] } } }, { id: "mention", runtime: { attrs: { "a.doc-link-mention": ["data-doc-gone"] } } }, { id: "paragraph", match: "p" }, { id: "heading", match: "h1, h2, h3, h4" }, { id: "list", match: "ul, ol", runtime: { attrs: { "ol.doc-flow": ["data-doc-flow-key", "data-doc-flow-recount"] }, generated: ["br.doc-item-line"] } }, { id: "quote", match: "blockquote" }, { id: "code", match: ".doc-code", runtime: { generated: [".doc-code-fold", ".doc-code-range", ".doc-code-tools"], internal: ["doc-code-lines", "doc-code-line*", "doc-code-content", "doc-code-toolbar", "doc-code-language", "doc-code-separator", "doc-code-copy*", "doc-code-wrap*", "data-line-number"] } }, { id: "divider", match: "hr" }, { id: "math", match: ".doc-math-inline, .doc-math-block", runtime: { generated: [".doc-math-break", ".doc-math-joiner"], classes: { ".doc-math-tie": ["doc-math-tie"], ".doc-math-skip": ["doc-math-skip"] } } }, { id: "section", match: "section.doc-section" }, { id: "highlight", match: ".doc-panel, .doc-summary" }, { id: "callout", match: ".doc-callout" }, { id: "details", match: "details.doc-details" }, { id: "dialog", match: "dialog.doc-dialog", runtime: { attrs: { "dialog.doc-dialog": ["data-doc-dialog-ready", "open", "aria-label"], ".doc-dialog-content": ["tabindex"] }, root: { classes: ["doc-dialog-open", "doc-dialog-gutter"] }, internal: ["doc-dialog-in", "doc-dialog-fade"] } }, { id: "sheets", match: "[data-doc-sheets]", runtime: { state: { "[data-doc-sheets]": ["data-active-sheet"], "[data-sheet-tab]": ["aria-selected", "tabindex", "is-active"], "[data-doc-sheet]": ["hidden", "aria-hidden"] }, internal: ["doc-sheets"] } }, { id: "table", match: "table.doc-table", runtime: { generated: ["colgroup[data-doc-columns]", ".doc-scrollbars"], attrs: { "table.doc-table": ["data-doc-sortable-ready", "data-doc-filled"], ".doc-table-wrap": ["data-doc-min-width", "data-doc-layout", "data-doc-whole"], "th, td": ["data-column-kind", "data-column-wrap", "data-run-wrap", "data-doc-edge"] }, classes: { "table.doc-table": ["doc-table--auto"] }, internal: ["doc-code-run", "doc-table-sort-button", "doc-scrollbar*", "data-doc-sort-arrow", "data-active", "data-drag", "data-x", "data-y", "data-more"] } }, { id: "columns", match: ".doc-columns" }, { id: "figure", match: "figure" }, { id: "chart", match: "[data-doc-chart]", runtime: { attrs: { "[data-doc-chart]": ["data-doc-layout"] }, classes: { "[data-doc-chart]": ["doc-chart"] }, internal: ["doc-chart-message", "data-missing"] } }, { id: "image", match: "figure.doc-image", runtime: { generated: ["dialog.doc-zoom"], attrs: { "img[data-doc-zoom]": ["data-doc-zoom", "tabindex", "role", "aria-haspopup", "aria-label"] }, root: { classes: ["doc-zoom-open", "doc-zoom-gutter", "doc-zoom-hover"] }, internal: ["doc-zoom-*"] } }, { id: "file", match: "figure.doc-file" }, { id: "bookmark", match: "figure.doc-bookmark" }, { id: "embed", match: "figure.doc-embed", runtime: { attrs: { "iframe.doc-embed-frame": ["data-doc-blob"] } } }, { id: "diff", match: ".doc-diff", runtime: { generated: [".doc-diff-body", ".doc-diff-stats"], internal: ["doc-diff-added", "doc-diff-removed"] } }, { id: "icon", match: ".doc-icon", runtime: { internal: ["data-doc-tab-icon"] } }, { id: "installed", match: "div[data-doc-component], section[data-doc-component]", runtime: { generated: [".doc-component-note", ".doc-component-data"], attrs: { "[data-doc-fallback]": ["data-doc-fallback"], "[data-doc-fallback-control]": ["data-doc-fallback-control", "inert"] }, internal: ["data-doc-package", "doc-component-more", "doc-component-one", "doc-component-line", "doc-component-short"] } }, { id: "state", match: "[data-doc-bind], [data-doc-show]", runtime: { attrs: { "[data-doc-show]": ["hidden"] }, state: { "button[data-doc-bind]": ["aria-pressed"] } } }];
 
   // src/render/kit/runtime/bindings.js
   var global = globalThis;
@@ -196,6 +196,23 @@
     return each.map((weight) => weight / all);
   }
 
+  // src/shared/long-runs.mjs
+  var LONG_RUN = 20;
+  var RUNS = /[^\s\u2000-\u206f\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\ufe30-\ufe4f\uff00-\uffef]+/gu;
+  var PIECES = /(?<=[-?])/u;
+  var long = (run) => run.length > LONG_RUN && run.split(PIECES).some((piece) => [...piece].length > LONG_RUN);
+  function longRuns(text) {
+    const found = [];
+    if (text.length <= LONG_RUN) return found;
+    for (const match of text.matchAll(RUNS)) if (long(match[0])) found.push({ index: match.index, length: match[0].length });
+    return found;
+  }
+  function holdsLongRun(text) {
+    if (text.length <= LONG_RUN) return false;
+    for (const match of text.matchAll(RUNS)) if (long(match[0])) return true;
+    return false;
+  }
+
   // src/render/kit/words.js
   var RUNTIME = {
     "component-missing": { zh: "\u7EC4\u4EF6 {0} \u7684\u7EC4\u4EF6\u5305\u4E0D\u5728\u8FD9\u4E2A\u5DE5\u4F5C\u533A\u91CC\uFF0C\u8FD9\u91CC\u53EA\u663E\u793A\u5B83\u7684\u5185\u5BB9\u3002", en: "The package of component {0} is not in this workspace: only what it holds is shown." },
@@ -234,7 +251,7 @@
   // src/render/kit/runtime/flowchart.js
   var CJK = "\\u2e80-\\u9fff\\uac00-\\ud7af\\uf900-\\ufaff\\uff00-\\uffef";
   var WORDS = new RegExp(`[${CJK}]|[^\\s${CJK}]+`, "g");
-  var PIECES = new RegExp(`[${CJK}]|[^\\s${CJK}]+|\\s+`, "g");
+  var PIECES2 = new RegExp(`[${CJK}]|[^\\s${CJK}]+|\\s+`, "g");
   var WIDE = new RegExp(`[${CJK}]`);
   function linesOf(pieces, width) {
     let lines = 0;
@@ -372,11 +389,23 @@
       return context.measureText(text).width;
     };
   }
-  function piecesOf(text, style) {
+  function piecesOf(text, style, split = true) {
     const measure = measurer(style);
     const space = measure(" ");
-    const pieces = (String(text).match(PIECES) ?? []).map((piece) => /^\s/.test(piece) ? { width: space, space: true } : { width: measure(piece) });
-    return { pieces, widest: Math.max(0, ...pieces.filter((piece) => !piece.space).map((piece) => piece.width)) };
+    const anywhere = split && style.wordBreak === "break-all";
+    const pieces = [];
+    let widest = 0;
+    for (const piece of String(text).match(PIECES2) ?? []) {
+      if (/^\s/.test(piece)) {
+        pieces.push({ width: space, space: true });
+        continue;
+      }
+      const width = measure(piece);
+      widest = Math.max(widest, width);
+      if (split && !WIDE.test(piece) && (anywhere || holdsLongRun(piece))) for (const character of piece) pieces.push({ width: measure(character) });
+      else pieces.push({ width });
+    }
+    return { pieces, widest };
   }
   function inlinePieces(nodes, style) {
     const holds = (node) => node.nodeType === 1 && (node.tagName === "CODE" || node.querySelector("code"));
@@ -390,23 +419,27 @@
       } else if (node.nodeType === 1) node.childNodes.forEach((child) => walk(child, code ?? (node.tagName === "CODE" ? node : null)));
     };
     nodes.forEach((node) => walk(node, null));
-    const pieces = [];
-    let joins = false;
-    for (const { text, code } of segments) {
-      if (!text) continue;
-      const look = code ? getComputedStyle(code) : style;
-      const own = piecesOf(text, look).pieces;
-      if (code && own.length) {
-        own[0].width += pixels(look.paddingLeft) + pixels(look.borderLeftWidth);
-        own.at(-1).width += pixels(look.paddingRight) + pixels(look.borderRightWidth);
+    const collect = (split) => {
+      const pieces = [];
+      let joins = false;
+      for (const { text, code } of segments) {
+        if (!text) continue;
+        const look = code ? getComputedStyle(code) : style;
+        const own = piecesOf(text, look, split).pieces;
+        if (code && own.length) {
+          own[0].width += pixels(look.paddingLeft) + pixels(look.borderLeftWidth);
+          own.at(-1).width += pixels(look.paddingRight) + pixels(look.borderRightWidth);
+        }
+        own.forEach((piece, at) => {
+          if (at === 0 && joins && !piece.space && !WIDE.test(text[0])) pieces.at(-1).width += piece.width;
+          else pieces.push(piece);
+        });
+        joins = !/\s$/.test(text) && !WIDE.test(text.at(-1));
       }
-      own.forEach((piece, at) => {
-        if (at === 0 && joins && !piece.space && !WIDE.test(text[0])) pieces.at(-1).width += piece.width;
-        else pieces.push(piece);
-      });
-      joins = !/\s$/.test(text) && !WIDE.test(text.at(-1));
-    }
-    return { pieces, widest: Math.max(0, ...pieces.filter((piece) => !piece.space).map((piece) => piece.width)) };
+      return { pieces, widest: Math.max(0, ...pieces.filter((piece) => !piece.space).map((piece) => piece.width)) };
+    };
+    const whole = collect(false);
+    return { pieces: collect(true).pieces, widest: whole.widest };
   }
   function contentOf(elements) {
     const blocks = [];
@@ -563,6 +596,19 @@
   var ATTRIBUTE = "data-doc-component";
   var PACKAGE_ID = /^[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/;
   var INSTANCE = `div[${ATTRIBUTE}], section[${ATTRIBUTE}]`;
+  var SLOT = "data-doc-slot";
+  var SLOT_PART = `div[${SLOT}], section[${SLOT}]`;
+  var REGION = `${INSTANCE}, ${SLOT_PART}`;
+  var edgeAround = (node) => node?.parentElement?.closest(REGION) ?? null;
+  function heldBy(node) {
+    const edge = edgeAround(node);
+    if (!edge) return null;
+    const owner = heldBy(edge);
+    if (edge.matches(INSTANCE)) return owner ?? edge;
+    return owner !== null && edgeAround(edge) === owner ? null : owner;
+  }
+  var opensDocument = (node) => node.matches(SLOT_PART) && heldBy(node) !== null && edgeAround(node) === heldBy(node);
+  var componentAt = (node) => node?.nodeType === 1 && heldBy(node) !== null && !opensDocument(node);
   var FALLBACK = "data-doc-fallback";
   var CONTROLS2 = "input, select, textarea, button";
   var CONTROL_MARK = "data-doc-fallback-control";
@@ -795,7 +841,8 @@
     global2.addEventListener("resize", () => tellAll("viewport"));
     document.fonts?.ready.then(() => tellAll("fonts"));
     document.fonts?.addEventListener?.("loadingdone", (event) => tellAll("fonts", [...event.fontfaces ?? []]));
-    const partsIn = (host, at) => [...host.querySelectorAll(at)].filter((node) => !node.matches(INSTANCE) && node.parentElement.closest(INSTANCE) === host);
+    const ownedBy = (node, host) => node.parentElement.closest(INSTANCE) === host && heldBy(node) === host;
+    const partsIn = (host, at, edit = null) => [...host.querySelectorAll(at)].filter((node) => !node.matches(INSTANCE) && ownedBy(node, host) && edit === "flow" === node.matches(SLOT_PART));
     const instanceName = (def, host) => host.getAttribute("data-block-id") ?? String(hostsIn(document, selectorOf(def)).indexOf(host));
     const canEdit = (def, host) => editable && instances.get(host)?.failed === false && !schemaAhead(host.getAttribute(SCHEMA), descriptions.get(def.id)?.schema);
     const partNamed = (def, name) => {
@@ -804,7 +851,7 @@
       return part;
     };
     const packageContext = (def, host) => ({
-      part: (name) => partsIn(host, partNamed(def, name).at)[0] ?? null,
+      part: (name) => partsIn(host, partNamed(def, name).at, partNamed(def, name).edit)[0] ?? null,
       state: ({ version, defaults, transientKeys }) => global2.DocState.getOrCreate({ id: `${def.id}:${instanceName(def, host)}`, version, defaults, transientKeys }),
       canEdit: () => canEdit(def, host),
       edit(names, change) {
@@ -813,7 +860,7 @@
         const parts = (several ? names : [names]).map((name) => {
           const { at, edit } = partNamed(def, name);
           if (edit !== "data") throw new Error(`the part "${name}" of ${def.id} is not edited as data`);
-          return { name, part: partsIn(host, at)[0] };
+          return { name, part: partsIn(host, at, edit)[0] };
         });
         const apart = parts.find(({ part }, index) => parts.some((other, at) => at !== index && part && other.part && (part === other.part || other.part.contains(part))));
         if (apart) throw new Error(`the part "${apart.name}" of ${def.id} is in another this edit names, or is it: name the one around it`);
@@ -832,8 +879,9 @@
     });
     function takeRuntime(description, root) {
       const { generated = [], attrs = {} } = description?.runtime ?? {};
-      for (const selector of generated) hostsIn(root, selector).forEach((node) => node.remove());
-      for (const [selector, names] of Object.entries(attrs)) hostsIn(root, selector).forEach((node) => names.forEach((name) => node.removeAttribute(name)));
+      const own = (selector) => hostsIn(root, selector).filter((node) => node === root || heldBy(node) === root);
+      for (const selector of generated) own(selector).forEach((node) => node.remove());
+      for (const [selector, names] of Object.entries(attrs)) own(selector).forEach((node) => names.forEach((name) => node.removeAttribute(name)));
     }
     function clear(def, host) {
       try {
@@ -947,10 +995,7 @@
     }
     const hostsIn = (root, selector) => [...root.matches?.(selector) ? [root] : [], ...root.querySelectorAll?.(selector) ?? []];
     const outsidePage = (node) => Boolean(node.closest?.("[data-doc-dev]"));
-    const inOther = (def, host) => {
-      for (let around = host.closest(INSTANCE); around; around = around.parentElement?.closest(INSTANCE)) if (around.getAttribute(ATTRIBUTE) !== def.id) return true;
-      return false;
-    };
+    const inOther = (def, host) => host.matches(INSTANCE) && host.getAttribute(ATTRIBUTE) !== def.id || (heldBy(host)?.getAttribute(ATTRIBUTE) ?? def.id) !== def.id;
     function scan(root, only, { later = false } = {}) {
       for (const def of only ? [only] : defs.values()) {
         if (!def.started || later && def.added === false) continue;
@@ -976,18 +1021,18 @@
     function showAsItStands(host) {
       host.setAttribute(FALLBACK, "");
       for (const control of host.querySelectorAll(CONTROLS2)) {
-        if (control.hasAttribute("inert")) continue;
+        if (control.hasAttribute("inert") || heldBy(control) !== host) continue;
         control.setAttribute("inert", "");
         control.setAttribute(CONTROL_MARK, "");
       }
       showData(host);
     }
     const drawnFrom = /* @__PURE__ */ new WeakMap();
-    const dataShownIn = (host) => [...host.querySelectorAll(`.${DATA_SHOWN}`)].filter((node) => node.parentElement.closest(INSTANCE) === host);
+    const dataShownIn = (host) => [...host.querySelectorAll(`.${DATA_SHOWN}`)].filter((node) => ownedBy(node, host));
     function showData(host) {
       const kept = /* @__PURE__ */ new Set();
       for (const script of host.querySelectorAll("script")) {
-        if (script.closest(INSTANCE) !== host || !isDataScript(script.localName, [...script.attributes])) continue;
+        if (!ownedBy(script, host) || !isDataScript(script.localName, [...script.attributes])) continue;
         const next = script.nextElementSibling;
         if (next && drawnFrom.get(next) === script.textContent) {
           kept.add(next);
@@ -1006,7 +1051,7 @@
       for (const host of hostsIn(root, INSTANCE)) {
         const id = host.getAttribute(ATTRIBUTE);
         const told = descriptions.get(id);
-        if (outsidePage(host) || host.parentElement?.closest(INSTANCE) || defs.has(id) || [...document.querySelectorAll(`script[${ARRIVING}]`)].some((script) => script.getAttribute(ARRIVING) === id)) continue;
+        if (outsidePage(host) || heldBy(host) || defs.has(id) || [...document.querySelectorAll(`script[${ARRIVING}]`)].some((script) => script.getAttribute(ARRIVING) === id)) continue;
         if (told?.match && !(told.script && loaded2)) {
           if (host.hasAttribute(FALLBACK)) takeFallback(host);
           continue;
@@ -1027,7 +1072,13 @@
     if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => fallback(document), { once: true });
     else fallback(document);
     if (document.readyState !== "complete") global2.addEventListener("load", () => fallback(document), { once: true });
-    const sourceParts = (host, id) => Object.values(descriptions.get(id)?.parts ?? {}).filter(({ edit }) => edit === "text" || edit === "data").flatMap(({ at }) => partsIn(host, at));
+    const sourceParts = (host, id) => Object.values(descriptions.get(id)?.parts ?? {}).filter(({ edit }) => edit === "text" || edit === "data" || edit === "flow").flatMap(({ at, edit }) => partsIn(host, at, edit));
+    const ownedHere = (target) => {
+      const host = target.closest(owned);
+      if (!host) return false;
+      if (!host.matches(INSTANCE)) return true;
+      return target === host || componentAt(target) && heldBy(target) === host;
+    };
     function changes(records, options) {
       if (!global2.document?.defaultView) return;
       const changed = [];
@@ -1040,7 +1091,7 @@
         const target = record.target.nodeType === 1 ? record.target : record.target.parentElement;
         if (!target || outsidePage(target)) continue;
         if (sourced.length > 0 && record.type !== "attributes") written.push([target, record]);
-        if (owned && target.closest(owned)) continue;
+        if (owned && ownedHere(target)) continue;
         if (record.type === "attributes") {
           revealed.add(target);
           continue;
@@ -1096,10 +1147,11 @@
           }
         }
       }
-      for (const description of descriptions.values()) {
+      for (const [id, description] of descriptions) {
         const marks = description.runtime ?? {};
-        for (const selector of marks.generated ?? []) all(selector).forEach((node) => node.remove());
-        for (const [selector, names] of Object.entries(marks.attrs ?? {})) all(selector).forEach((node) => names.forEach((name) => node.removeAttribute(name)));
+        const of = (selector) => PACKAGE_ID.test(id) ? all(selector).filter((node) => (node.matches(INSTANCE) ? node : heldBy(node))?.getAttribute(ATTRIBUTE) === id) : all(selector);
+        for (const selector of marks.generated ?? []) of(selector).forEach((node) => node.remove());
+        for (const [selector, names] of Object.entries(marks.attrs ?? {})) of(selector).forEach((node) => names.forEach((name) => node.removeAttribute(name)));
         for (const [selector, names] of Object.entries(marks.classes ?? {})) {
           all(selector).forEach((node) => {
             node.classList.remove(...names);
@@ -1402,12 +1454,12 @@
   }
 
   // src/render/kit/runtime/spacing.js
-  var inert = (element) => element.closest(`pre, svg, [contenteditable], [data-doc-dev], script, style, textarea, ${INSTANCE}`);
+  var inert = (element) => element.closest("pre, svg, [contenteditable], [data-doc-dev], script, style, textarea") || element.matches(INSTANCE) || componentAt(element);
   var NUMBER = String.raw`\d(?:[\d.,]*\d)?(?:%|[A-Za-z]{1,3})?`;
   var DASH = "[\u2013\u2014~\uFF5E]";
   var CLOSING = new RegExp(String.raw`^(?:${DASH}${NUMBER})?[，。、；：！？）」』》】〉〕”’,.;:!?)\]]*`);
   var RANGE = new RegExp(`${NUMBER} ?${DASH} ?${NUMBER}`);
-  var OWN_TEXT = "code, kbd, samp, .katex, .doc-range, option";
+  var OWN_TEXT = "code, kbd, samp, .katex, .doc-range, .doc-long-run, option";
   var TEX = /\\[()[\]]|\$\$/;
   var WRAPPER = /^(STRONG|B|EM|I|U|S|MARK|SPAN|A|SUB|SUP|SMALL)$/;
   function tieClosing(formula) {
@@ -1458,13 +1510,36 @@
     }
     return held;
   }
-  function holdIn(root) {
+  function holdRuns(text) {
+    const held = [];
+    for (const { index, length } of longRuns(text.data).reverse()) {
+      if (index + length < text.data.length) text.splitText(index + length);
+      held.unshift(breaking(index > 0 ? text.splitText(index) : text));
+    }
+    return held;
+  }
+  function breaking(node) {
+    const span = node.ownerDocument.createElement("span");
+    span.className = "doc-long-run";
+    node.before(span);
+    span.append(node);
+    return span;
+  }
+  function textsIn(root) {
     const texts = [];
     const walker = root.ownerDocument.createTreeWalker(root, 4);
     for (let node = walker.nextNode(); node; node = walker.nextNode()) texts.push(node);
-    for (const text of texts) {
-      const parent = text.parentElement;
-      if (parent?.closest("main") && RANGE.test(text.data) && !TEX.test(text.data) && !inert(parent) && !parent.closest(OWN_TEXT) && !(text.data.includes("$") && parent.closest("[data-doc-math-dollar]"))) holdRanges(text);
+    return texts;
+  }
+  function looked(text) {
+    const parent = text.parentElement;
+    return Boolean(parent?.closest("main")) && !TEX.test(text.data) && !inert(parent) && !parent.closest(OWN_TEXT) && !(text.data.includes("$") && parent.closest("[data-doc-math-dollar]"));
+  }
+  function holdIn(root) {
+    for (const text of textsIn(root)) if (RANGE.test(text.data) && looked(text)) holdRanges(text);
+    for (const text of textsIn(root)) if (holdsLongRun(text.data) && looked(text)) holdRuns(text);
+    for (const code of [...root.matches("code") ? [root] : [], ...root.querySelectorAll("code")]) {
+      if (code.closest("main") && !inert(code) && !code.parentElement?.closest(`${OWN_TEXT}, td, th`) && holdsLongRun(code.textContent)) breaking(code);
     }
   }
   function keepLines(root, flows) {
@@ -1506,8 +1581,7 @@
     ".doc-bookmark",
     ".doc-file",
     ".doc-zoom",
-    "[data-doc-dev]",
-    INSTANCE
+    "[data-doc-dev]"
   ].join(", ");
   var ZOOM_PICTURES = ".doc-page img";
   var ZOOM_MARK = "data-doc-zoom";
@@ -1515,7 +1589,7 @@
   var loaded = (img) => img.complete && (img.naturalWidth > 0 || /^data:image\/svg|\.svg(?:[?#]|$)/i.test(img.currentSrc || img.src));
   function zoomable(img) {
     const holder = img?.hasAttribute?.(ZOOM_MARK) ? img.parentElement : img;
-    if (img?.localName !== "img" || !img.closest(".doc-page") || holder?.closest(ZOOM_SKIP) || !loaded(img)) return false;
+    if (img?.localName !== "img" || !img.closest(".doc-page") || holder?.closest(ZOOM_SKIP) || holder.matches(INSTANCE) || componentAt(holder) || !loaded(img)) return false;
     const box = img.getBoundingClientRect();
     return box.width >= ZOOM_LEAST || box.height >= ZOOM_LEAST;
   }
@@ -1695,11 +1769,12 @@
     kit.component({ id: "bind", selector: CONTROLS3, mount: (element, context2) => bindControl(element, context2) });
     kit.component({ id: "show", selector: "[data-doc-show]", mount: (element) => bindShow(element) });
     kit.component({ id: "embed", mount: (figure) => showEmbed(figure), dehydrate: (figure) => dehydrateEmbed(figure) });
-    kit.component({ id: "flowchart", selector: FLOWCHART, on: ["resize", "fonts", "content"], mount: (list2, context2) => startFlowchart(list2, context2), dehydrate: (list2) => dehydrateFlowchart(list2) });
+    kit.component({ id: "flowchart", selector: FLOWCHART, on: ["resize", "fonts", "content", "layout"], mount: (list2, context2) => startFlowchart(list2, context2), dehydrate: (list2) => dehydrateFlowchart(list2) });
     globalThis.DocKit = Object.freeze({ ...kit, bindings: store, flows: define_COMPONENT_FLOWS_default, reveal });
     globalThis.ReportKit = globalThis.DocKit;
     globalThis.DocKit.component({ id: "range", selector: ".doc-range", added: false, mount: () => null, dehydrate: untie });
-    startSpacing(document, ".doc-page, .doc-section, .doc-summary, .doc-panel, .doc-details-content, .doc-dialog-content, [data-doc-sheet], .doc-column, :is(.doc-section, .doc-summary, .doc-panel, .doc-details-content, .doc-dialog-content, .doc-column) > div:not([class])");
+    globalThis.DocKit.component({ id: "long-run", selector: ".doc-long-run", added: false, mount: () => null, dehydrate: untie });
+    startSpacing(document, ".doc-page, .doc-section, .doc-summary, .doc-panel, .doc-callout, .doc-details-content, .doc-dialog-content, [data-doc-sheet], .doc-column, [data-doc-slot], :is(.doc-section, .doc-summary, .doc-panel, .doc-callout, .doc-details-content, .doc-dialog-content, .doc-column, [data-doc-slot]) > div:not([class])");
     startZoom(document);
     globalThis.DocKit.component({ id: "zoom", selector: ZOOM_PICTURES, on: ["resize", "reveal"], mount: (img, context2) => watchZoom(img, context2) });
     startBlockLinks(document);

package/kit/tables.js

@@ -384,6 +384,55 @@
     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" });
+  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]"],
+      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"]
+    }
+  };
+
+  // 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"])
+    // 正文宽度: 偏窄, 默认, 偏宽
+  });
+  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 = [];
@@ -683,7 +732,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();

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;
 
@@ -204,6 +207,77 @@ ${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 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]"],
+      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"]
+    }
+  };
+
+  // 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"])
+    // 正文宽度: 偏窄, 默认, 偏宽
+  });
+  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" },
@@ -529,6 +603,29 @@ ${clone.outerHTML}`;
       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";
       if (next === "full") root.dataset.docWidth = "full";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycys/gallery",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",

package/release.json

@@ -1,25 +1,25 @@
 {
   "name": "@heycys/gallery",
-  "version": "0.1.0",
-  "built": "2026-11-06T10:00:52.739Z",
+  "version": "0.1.1",
+  "built": "2026-11-07T19:54:21.173Z",
   "stamps": {
-    "editor": "295752d9b9a9fa1b",
+    "editor": "7973798600a49543",
     "kit": {
-      "styles": "564765b3cbdaa4a4",
+      "styles": "352e294997d57222",
       "katex-styles": "81d0a0b4dcb41846",
-      "runtime": "7962ca56c811916f",
+      "runtime": "5f0ec1aab5218879",
       "code": "0a5cdb6e4d87b122",
       "state": "48e779637984ca20",
       "sheets": "fda7b7b754e01019",
       "tokens": "a218d5d5f9008530",
-      "ui": "2dd7ea87c2703215",
+      "ui": "c2df5a6e42253acc",
       "dialogs": "42866e832540bf9f",
       "katex": "1b0a973a02ab84f0",
       "katex-auto-render": "63e7162ddec186d6",
-      "math": "623acde1bb2dba91",
+      "math": "af1582414dca108c",
       "d3": "9f5a21b6070f8353",
       "charts": "ae38e5e52ab30cef",
-      "tables": "7154e8327052d2b8"
+      "tables": "5138346c9a693efb"
     }
   }
 }

package/sdk/doc-kit.d.ts

@@ -3,7 +3,8 @@ import type { DocState } from "./doc-state.js";
 /**
  * What an instance can hear (`on`). `editable`: `context.canEdit()` has just become true, for one mounted before the page came to edit.
  * `content`: a change inside the instance, heard only with `owns: false`, as what a component owns the
- * kit does not watch; a change of what the file says of it is `source`, whatever it owns.
+ * kit does not watch; a change of what the file says of it is `source`, whatever it owns: of a part edited
+ * as text or data, or of the blocks a slot holds (a part edited as flow), typed, moved in or out, undone.
  */
 export type DocComponentSignal = "source" | "resize" | "theme" | "layout" | "viewport" | "fonts" | "content" | "reveal" | "editable";
 
@@ -41,7 +42,12 @@ export interface DocComponentContext {
   frame(draw: () => void): void;
   /** Say this instance failed: it ends there, even as `mount` runs, and shows what it holds, read-only. */
   fail(error: unknown): void;
-  /** The first element of a part of the manifest, or null. A name the manifest does not have throws. */
+  /**
+   * The first element of a part of the manifest in this instance's own markup, or null. A part edited as
+   * flow gives its slot (data-doc-slot), whose blocks are the document's, the reader's: read it (its
+   * height, its words, its headings), and never write in it, move it or take it off. A name the manifest
+   * does not have throws.
+   */
   part(name: string): HTMLElement | null;
   /** This instance's reading state, of no other instance of the package: the same object at every mount. */
   state<T extends Record<string, unknown>>(options: DocComponentStateOptions<T>): DocState<T>;
@@ -59,7 +65,7 @@ export interface DocComponentContext {
    * draft, or leaves what a file cannot hold (a script, a handler, an element that does not read back as
    * itself, its own tag changed): nothing has happened then, and the console says why. Undo puts the
    * part back and `source` tells you, like any change of it. A name the manifest does not have, or a
-   * part not edited as data, throws. A list of names changes those parts in one write, one undo step (a
+   * part not edited as data (a text part, a slot), throws. A list of names changes those parts in one write, one undo step (a
    * gesture that moves a card and counts the move): `change` is handed a draft of each, by its name, and
    * two that are one element, or one in the other, throw.
    */