@weasel-js/forge 1.11.1 → 1.13.0-rc.0

package/dist/chunk-STF6NQ5N.js

@@ -0,0 +1,60 @@
+import { sanitize } from './chunk-5WS67HMU.js';
+
+// src/story/indexPages.ts
+var SUFFIX = ":index";
+var INDEX_NAME = "Index";
+function indexId(title) {
+  return `${sanitize(title)}${SUFFIX}`;
+}
+function isIndexId(id) {
+  return id.endsWith(SUFFIX);
+}
+function stemOf(file) {
+  const name = file.replaceAll("\\", "/").split("/").pop() ?? file;
+  return name.replace(/(?:\.(?:story|stories))?\.[^.]+$/i, "");
+}
+function primaryFile(title, files) {
+  const name = (title.split("/").pop() ?? title).toLowerCase();
+  return files.find((file) => stemOf(file).toLowerCase() === name) ?? files[0];
+}
+function byComponent(stories) {
+  const byTitle = /* @__PURE__ */ new Map();
+  for (const entry of stories) {
+    const group = byTitle.get(entry.title);
+    if (group) group.push(entry);
+    else byTitle.set(entry.title, [entry]);
+  }
+  return [...byTitle].flatMap(([title, group]) => {
+    const primary = primaryFile(title, [...new Set(group.map((entry) => entry.file))]);
+    return [...group.filter((entry) => entry.file === primary), ...group.filter((entry) => entry.file !== primary)];
+  });
+}
+function indexEntries(stories) {
+  const byTitle = /* @__PURE__ */ new Map();
+  for (const entry of byComponent(stories)) {
+    const page = byTitle.get(entry.title);
+    if (page) {
+      if (page.tags) {
+        const common = page.tags.filter((tag) => entry.tags?.includes(tag));
+        if (common.length > 0) page.tags = common;
+        else delete page.tags;
+      }
+      continue;
+    }
+    byTitle.set(entry.title, {
+      id: indexId(entry.title),
+      title: entry.title,
+      name: INDEX_NAME,
+      exportName: "",
+      file: entry.file,
+      ...entry.componentDescription === void 0 ? {} : { componentDescription: entry.componentDescription },
+      ...entry.componentName === void 0 ? {} : { componentName: entry.componentName },
+      ...entry.tags === void 0 ? {} : { tags: entry.tags }
+    });
+  }
+  return [...byTitle.values()];
+}
+
+export { byComponent, indexEntries, indexId, isIndexId };
+//# sourceMappingURL=chunk-STF6NQ5N.js.map
+//# sourceMappingURL=chunk-STF6NQ5N.js.map

package/dist/chunk-STF6NQ5N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/story/indexPages.ts"],"names":[],"mappings":"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","file":"chunk-STF6NQ5N.js","sourcesContent":["import { sanitize } from './ids';\nimport type { IndexEntry } from './types';\n\nconst SUFFIX = ':index';\n\n/** The name an index page goes by in the sidebar and in its trial's title. */\nexport const INDEX_NAME = 'Index';\n\n/** The id of `title`'s index page. A colon never survives `sanitize`, so no story id can collide with it. */\nexport function indexId(title: string): string {\n  return `${sanitize(title)}${SUFFIX}`;\n}\n\nexport function isIndexId(id: string): boolean {\n  return id.endsWith(SUFFIX);\n}\n\n/** A story file's name with its `.stories.tsx`-style suffix removed: `Bar` for `/x/Bar.stories.tsx`. */\nfunction stemOf(file: string): string {\n  const name = file.replaceAll('\\\\', '/').split('/').pop() ?? file;\n  return name.replace(/(?:\\.(?:story|stories))?\\.[^.]+$/i, '');\n}\n\n/**\n * The file that speaks for a title several story files share: the one named for the title's last segment, so\n * `Bar.stories.tsx` over `lab/BarArc.stories.tsx` for `ui/Bar`, else the first. Its meta describes the component.\n */\nexport function primaryFile(title: string, files: readonly string[]): string | undefined {\n  const name = (title.split('/').pop() ?? title).toLowerCase();\n  return files.find((file) => stemOf(file).toLowerCase() === name) ?? files[0];\n}\n\n/** `stories` grouped by title, in the order titles first appear, each title's primary file's stories first. */\nexport function byComponent(stories: readonly IndexEntry[]): IndexEntry[] {\n  const byTitle = new Map<string, IndexEntry[]>();\n  for (const entry of stories) {\n    const group = byTitle.get(entry.title);\n    if (group) group.push(entry);\n    else byTitle.set(entry.title, [entry]);\n  }\n  return [...byTitle].flatMap(([title, group]) => {\n    const primary = primaryFile(title, [...new Set(group.map((entry) => entry.file))]);\n    return [...group.filter((entry) => entry.file === primary), ...group.filter((entry) => entry.file !== primary)];\n  });\n}\n\n/**\n * One index-page entry per title in `stories`, in the order titles first appear. It routes and runs like a story:\n * its `file` is the title's primary file, its descriptions are that file's, and its tags are those every story\n * of the title carries.\n */\nexport function indexEntries(stories: readonly IndexEntry[]): IndexEntry[] {\n  const byTitle = new Map<string, IndexEntry>();\n  for (const entry of byComponent(stories)) {\n    const page = byTitle.get(entry.title);\n    if (page) {\n      if (page.tags) {\n        const common = page.tags.filter((tag) => entry.tags?.includes(tag));\n        if (common.length > 0) page.tags = common;\n        else delete page.tags;\n      }\n      continue;\n    }\n    byTitle.set(entry.title, {\n      id: indexId(entry.title),\n      title: entry.title,\n      name: INDEX_NAME,\n      exportName: '',\n      file: entry.file,\n      ...(entry.componentDescription === undefined ? {} : { componentDescription: entry.componentDescription }),\n      ...(entry.componentName === undefined ? {} : { componentName: entry.componentName }),\n      ...(entry.tags === undefined ? {} : { tags: entry.tags }),\n    });\n  }\n  return [...byTitle.values()];\n}\n"]}

package/dist/chunk-VUPN73JP.js

@@ -0,0 +1,16 @@
+// src/story/tags.ts
+var GALLERY_TAG = "gallery";
+function isGallery(entry) {
+  return entry.tags?.includes(GALLERY_TAG) ?? false;
+}
+var LAB_TAG = "lab";
+function isLab(entry) {
+  return entry.tags?.includes(LAB_TAG) ?? false;
+}
+function taggedIds(entries) {
+  return { galleries: entries.filter(isGallery).map((e) => e.id), labs: entries.filter(isLab).map((e) => e.id) };
+}
+
+export { GALLERY_TAG, LAB_TAG, isGallery, isLab, taggedIds };
+//# sourceMappingURL=chunk-VUPN73JP.js.map
+//# sourceMappingURL=chunk-VUPN73JP.js.map

package/dist/chunk-VUPN73JP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/story/tags.ts"],"names":[],"mappings":";AACO,IAAM,WAAA,GAAc;AAEpB,SAAS,UAAU,KAAA,EAA8C;AACtE,EAAA,OAAO,KAAA,CAAM,IAAA,EAAM,QAAA,CAAS,WAAW,CAAA,IAAK,KAAA;AAC9C;AAGO,IAAM,OAAA,GAAU;AAEhB,SAAS,MAAM,KAAA,EAA8C;AAClE,EAAA,OAAO,KAAA,CAAM,IAAA,EAAM,QAAA,CAAS,OAAO,CAAA,IAAK,KAAA;AAC1C;AAGO,SAAS,UAAU,OAAA,EAGxB;AACA,EAAA,OAAO,EAAE,WAAW,OAAA,CAAQ,MAAA,CAAO,SAAS,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,EAAE,GAAG,IAAA,EAAM,OAAA,CAAQ,OAAO,KAAK,CAAA,CAAE,IAAI,CAAC,CAAA,KAAM,CAAA,CAAE,EAAE,CAAA,EAAE;AAC/G","file":"chunk-VUPN73JP.js","sourcesContent":["/** The meta tag marking a story file as a gallery: a catalog of many components, or of every permutation of one. */\nexport const GALLERY_TAG = 'gallery';\n\nexport function isGallery(entry: { tags?: readonly string[] }): boolean {\n  return entry.tags?.includes(GALLERY_TAG) ?? false;\n}\n\n/** The meta tag marking a story file as a lab: a whole screen for exercising a component, not a specimen of it. */\nexport const LAB_TAG = 'lab';\n\nexport function isLab(entry: { tags?: readonly string[] }): boolean {\n  return entry.tags?.includes(LAB_TAG) ?? false;\n}\n\n/** The ids among `entries` tagged as galleries and as labs, as an index page is handed them. */\nexport function taggedIds(entries: readonly { id: string; tags?: readonly string[] }[]): {\n  galleries: string[];\n  labs: string[];\n} {\n  return { galleries: entries.filter(isGallery).map((e) => e.id), labs: entries.filter(isLab).map((e) => e.id) };\n}\n"]}

package/dist/{config-DN6IaNf6.d.ts → config-Bd6FVlh7.d.ts}

@@ -1,9 +1,9 @@
 import { LabMode, LabContribution, LabPage } from '@weasel-js/labkit';
 import { Theme } from '@weasel-js/theme';
 import { ControlRenderer } from '@weasel-js/labkit/config';
-import { G as Globals, F as FrameSetup } from './FrameController-Cj_i-Rdk.js';
+import { G as Globals, F as FrameSetup } from './FrameController-Tv3jrHyT.js';
 import { IconRef } from '@weasel-js/icons';
-import { StanceProps } from '@weasel-js/ui/stance';
+import { AppearanceProps } from '@weasel-js/ui/appearance';
 
 /** One global the workshop's toolbar sets for every story, and a trial may pin for its own. */
 interface GlobalDeclaration {
@@ -28,6 +28,12 @@ interface GlobalDeclaration {
      * pin follows the lab or names a value; it cannot follow the app on its own.
      */
     follows?: (chrome: LabChrome) => string;
+    /**
+     * The value opposite `value`, for the global a lens's opposite-mode comparison flips (`ShellConfig.loupe`'s
+     * `modeGlobal`); undefined when it has none. `App` and `auto` are resolved to the mode they show before this is
+     * asked. Absent, the lens swaps `light` and `dark`.
+     */
+    opposite?: (value: string, globals: Globals) => string | undefined;
 }
 /** The lab chrome's own settings a global can follow. */
 interface LabChrome {
@@ -43,8 +49,8 @@ interface Library {
     /** A stretch of path every story file of the library has, with forward slashes: `/packages/ui/`. */
     path: string;
     label: string;
-    /** The tone of the library's badge, as a `<Badge>` takes one. Default: the badge's own muted tone. */
-    tone?: StanceProps['tone'];
+    /** The tint of the library's badge, as a `<Badge>` takes one. Default: the badge's own low emphasis. */
+    tint?: AppearanceProps['tint'];
 }
 /** A project's libraries, as the tree's package filter, the index page header, and Get Info ask about them. */
 interface Libraries {
@@ -53,7 +59,7 @@ interface Libraries {
         file: string;
         title: string;
     }): string;
-    toneOf(label: string): StanceProps['tone'];
+    tintOf(label: string): AppearanceProps['tint'];
 }
 
 /** A shell config module: what the workshop adds to the lab. Only the workshop page imports it. */
@@ -78,6 +84,17 @@ interface ShellConfig {
     pages?: readonly LabPage[];
     /** Which of `pages` the workshop is, when the URL alone cannot say, as across dev servers on different ports. */
     path?: string;
+    /** What a Pixels capture may load besides the dev server's own pages, such as the origins of a web-font service
+     *  the stories' fonts come from. Every other request a capture makes is refused. The dev server reads the list
+     *  from this module's source, as it does `title`, so write each origin as a string. */
+    capture?: {
+        allowOrigins?: readonly string[];
+    };
+    /** The workshop's lenses. `modeGlobal` names the global holding the color mode, which a lens's opposite-mode
+     *  comparison flips through its declaration's `opposite`. Default `mode`. */
+    loupe?: {
+        modeGlobal?: string;
+    };
 }
 /** A frame config module's default export. The workshop page imports it as well as every frame document, so CSS it imports reaches both; the plugin's `frameStyles` is for CSS meant for frames alone. */
 declare function defineFrameConfig(config: FrameSetup): FrameSetup;

package/dist/frame/index.css

@@ -73,6 +73,24 @@ body {
   margin-top: calc(var(--wzl-space-lg) * 1.5);
   border-top: var(--wzl-border-w) solid var(--wzl-border);
 }
+.fg-index-story__main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--wzl-space-8) calc(var(--wzl-space-lg) * 1.5);
+}
+.fg-index-story__text {
+  flex: 1 1 20rem;
+  min-width: 0;
+}
+.fg-index-story__main > .fg-index-cell {
+  flex: 0 1 auto;
+  margin: 0;
+}
+.fg-index-story__main > .fg-index-cell--padded,
+.fg-index-story__main > .fg-index-cell--fullscreen {
+  flex: 2 1 28rem;
+}
 .fg-index-story__head {
   display: flex;
   align-items: center;
@@ -87,6 +105,14 @@ body {
   text-transform: var(--wzl-panel-title-case);
   color: var(--wzl-panel-title-color);
 }
+.fg-index-story__link {
+  color: inherit;
+  text-decoration: none;
+}
+.fg-index-story__link:hover {
+  color: var(--wzl-accent-fg);
+  text-decoration: underline;
+}
 .fg-index-cell {
   margin: var(--wzl-space-8) 0 0;
   width: fit-content;
@@ -213,4 +239,15 @@ body {
   margin: var(--wzl-space-8) 0 0;
   font-size: var(--wzl-font-size-sm);
 }
+
+/* src/frame/capture/capture.css */
+.fg-story[data-fg-capture] {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--fg-capture-w);
+  height: var(--fg-capture-h);
+  overflow: hidden;
+  contain: paint;
+  container-type: size;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/frame/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/frame/frame.css","../../src/frame/index/index.css"],"sourcesContent":["html,\nbody {\n  margin: 0;\n}\n\n.fg-frame {\n  box-sizing: border-box;\n}\n\n.fg-frame--centered {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n}\n\n.fg-frame--padded {\n  padding: var(--wzl-space-8);\n}\n\n.fg-frame--fullscreen {\n  height: 100vh;\n  padding: 0;\n}\n\n.fg-frame__fault {\n  margin: 0;\n  padding: var(--wzl-space-8);\n  white-space: pre-wrap;\n  border: 1px solid #f2b8b5;\n  border-radius: 4px;\n  background: #fdecea;\n  color: #8c1d18;\n  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n",".fg-index {\n  box-sizing: border-box;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--wzl-space-lg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n}\n\n.fg-index__head {\n  margin-bottom: calc(var(--wzl-space-lg) * 2);\n}\n\n.fg-index__path {\n  margin: 0 0 var(--wzl-space-2);\n  font-size: var(--wzl-font-size-lg);\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index__title {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: calc(var(--wzl-font-size-xl) * 1.6);\n  font-weight: var(--wzl-font-weight-medium);\n  letter-spacing: var(--wzl-panel-title-tracking);\n  text-transform: var(--wzl-panel-title-case);\n}\n\n.fg-index__description,\n.fg-index-story__description {\n  max-width: 72ch;\n  margin: var(--wzl-space-4) 0 0;\n  font-family: var(--wzl-font-body);\n  line-height: 1.5;\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-story {\n  padding-top: calc(var(--wzl-space-lg) * 1.5);\n  margin-top: calc(var(--wzl-space-lg) * 1.5);\n  border-top: var(--wzl-border-w) solid var(--wzl-border);\n}\n\n.fg-index-story__head {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-story__name {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: var(--wzl-font-size-xl);\n  font-weight: var(--wzl-panel-title-weight);\n  letter-spacing: var(--wzl-panel-title-tracking);\n  text-transform: var(--wzl-panel-title-case);\n  color: var(--wzl-panel-title-color);\n}\n\n.fg-index-cell {\n  margin: var(--wzl-space-8) 0 0;\n  width: fit-content;\n  /* A fluid specimen (a slider, a tiled workspace) has no width of its own,\n     so hugging it alone collapses the cell to its padding. */\n  min-width: min(100%, 20rem);\n  max-width: 100%;\n}\n\n.fg-index-cell__stage {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 96px;\n  padding: var(--wzl-space-2);\n  border: var(--wzl-border-w) solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface);\n  overflow: auto;\n}\n\n/* A padded story sits top-left as it would on a page: the column's width, and\n   none of the minimum height that gives a centered one presence. */\n.fg-index-cell--padded {\n  width: auto;\n}\n\n.fg-index-cell--padded > .fg-index-cell__stage {\n  display: block;\n  min-height: 0;\n}\n\n.fg-index-cell--fullscreen {\n  width: auto;\n}\n\n.fg-index-cell--fullscreen > .fg-index-cell__stage {\n  display: block;\n  height: 360px;\n  padding: 0;\n}\n\n.fg-index-cell__label {\n  margin-top: var(--wzl-space-3);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-variants__row {\n  margin-top: calc(var(--wzl-space-lg) * 1.25);\n}\n\n/* Set as the kit's panel titles are, at the small size. */\n.fg-index-variants__label {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-panel-title-weight);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-variants__cells {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-variants__cells > .fg-index-cell {\n  margin-top: var(--wzl-space-4);\n}\n\n.fg-index__library {\n  margin-inline-end: var(--wzl-space-4);\n  vertical-align: middle;\n}\n\n.fg-index__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-history {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-2) var(--wzl-space-8);\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.fg-index-history__item {\n  display: flex;\n  gap: var(--wzl-space-3);\n}\n\n.fg-index-history__label {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-history__value {\n  margin: 0;\n}\n\n.fg-index-deps {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  gap: var(--wzl-space-3) var(--wzl-space-8);\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.fg-index-deps__row {\n  display: contents;\n}\n\n.fg-index-deps__label {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-deps__value {\n  margin: 0;\n}\n\n.fg-index-deps__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-2) var(--wzl-space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.fg-index-deps__link {\n  color: var(--wzl-accent-fg);\n  text-decoration: none;\n}\n\n.fg-index-deps__link:hover {\n  text-decoration: underline;\n}\n\n.fg-index-deps__prefix,\n.fg-index-deps__empty,\n.fg-index-deps__none {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-deps__none {\n  max-width: 72ch;\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/frame/frame.css","../../src/frame/index/index.css","../../src/frame/capture/capture.css"],"sourcesContent":["html,\nbody {\n  margin: 0;\n}\n\n.fg-frame {\n  box-sizing: border-box;\n}\n\n.fg-frame--centered {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n}\n\n.fg-frame--padded {\n  padding: var(--wzl-space-8);\n}\n\n.fg-frame--fullscreen {\n  height: 100vh;\n  padding: 0;\n}\n\n.fg-frame__fault {\n  margin: 0;\n  padding: var(--wzl-space-8);\n  white-space: pre-wrap;\n  border: 1px solid #f2b8b5;\n  border-radius: 4px;\n  background: #fdecea;\n  color: #8c1d18;\n  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n",".fg-index {\n  box-sizing: border-box;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--wzl-space-lg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n}\n\n.fg-index__head {\n  margin-bottom: calc(var(--wzl-space-lg) * 2);\n}\n\n.fg-index__path {\n  margin: 0 0 var(--wzl-space-2);\n  font-size: var(--wzl-font-size-lg);\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index__title {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: calc(var(--wzl-font-size-xl) * 1.6);\n  font-weight: var(--wzl-font-weight-medium);\n  letter-spacing: var(--wzl-panel-title-tracking);\n  text-transform: var(--wzl-panel-title-case);\n}\n\n.fg-index__description,\n.fg-index-story__description {\n  max-width: 72ch;\n  margin: var(--wzl-space-4) 0 0;\n  font-family: var(--wzl-font-body);\n  line-height: 1.5;\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-story {\n  padding-top: calc(var(--wzl-space-lg) * 1.5);\n  margin-top: calc(var(--wzl-space-lg) * 1.5);\n  border-top: var(--wzl-border-w) solid var(--wzl-border);\n}\n\n/* Text and example share a row while both fit, and the example wraps under the text rather than squeezing it. */\n.fg-index-story__main {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--wzl-space-8) calc(var(--wzl-space-lg) * 1.5);\n}\n\n.fg-index-story__text {\n  flex: 1 1 20rem;\n  min-width: 0;\n}\n\n.fg-index-story__main > .fg-index-cell {\n  flex: 0 1 auto;\n  margin: 0;\n}\n\n.fg-index-story__main > .fg-index-cell--padded,\n.fg-index-story__main > .fg-index-cell--fullscreen {\n  flex: 2 1 28rem;\n}\n\n.fg-index-story__head {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-story__name {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: var(--wzl-font-size-xl);\n  font-weight: var(--wzl-panel-title-weight);\n  letter-spacing: var(--wzl-panel-title-tracking);\n  text-transform: var(--wzl-panel-title-case);\n  color: var(--wzl-panel-title-color);\n}\n\n.fg-index-story__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n.fg-index-story__link:hover {\n  color: var(--wzl-accent-fg);\n  text-decoration: underline;\n}\n\n.fg-index-cell {\n  margin: var(--wzl-space-8) 0 0;\n  width: fit-content;\n  /* A fluid specimen (a slider, a tiled workspace) has no width of its own,\n     so hugging it alone collapses the cell to its padding. */\n  min-width: min(100%, 20rem);\n  max-width: 100%;\n}\n\n.fg-index-cell__stage {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 96px;\n  padding: var(--wzl-space-2);\n  border: var(--wzl-border-w) solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface);\n  overflow: auto;\n}\n\n/* A padded story sits top-left as it would on a page: the column's width, and\n   none of the minimum height that gives a centered one presence. */\n.fg-index-cell--padded {\n  width: auto;\n}\n\n.fg-index-cell--padded > .fg-index-cell__stage {\n  display: block;\n  min-height: 0;\n}\n\n.fg-index-cell--fullscreen {\n  width: auto;\n}\n\n.fg-index-cell--fullscreen > .fg-index-cell__stage {\n  display: block;\n  height: 360px;\n  padding: 0;\n}\n\n.fg-index-cell__label {\n  margin-top: var(--wzl-space-3);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-variants__row {\n  margin-top: calc(var(--wzl-space-lg) * 1.25);\n}\n\n/* Set as the kit's panel titles are, at the small size. */\n.fg-index-variants__label {\n  margin: 0;\n  font-family: var(--wzl-panel-title-font);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-panel-title-weight);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-variants__cells {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-variants__cells > .fg-index-cell {\n  margin-top: var(--wzl-space-4);\n}\n\n.fg-index__library {\n  margin-inline-end: var(--wzl-space-4);\n  vertical-align: middle;\n}\n\n.fg-index__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n}\n\n.fg-index-history {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-2) var(--wzl-space-8);\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.fg-index-history__item {\n  display: flex;\n  gap: var(--wzl-space-3);\n}\n\n.fg-index-history__label {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-history__value {\n  margin: 0;\n}\n\n.fg-index-deps {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  gap: var(--wzl-space-3) var(--wzl-space-8);\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.fg-index-deps__row {\n  display: contents;\n}\n\n.fg-index-deps__label {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-deps__value {\n  margin: 0;\n}\n\n.fg-index-deps__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-2) var(--wzl-space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.fg-index-deps__link {\n  color: var(--wzl-accent-fg);\n  text-decoration: none;\n}\n\n.fg-index-deps__link:hover {\n  text-decoration: underline;\n}\n\n.fg-index-deps__prefix,\n.fg-index-deps__empty,\n.fg-index-deps__none {\n  color: var(--wzl-fg-muted);\n}\n\n.fg-index-deps__none {\n  max-width: 72ch;\n  margin: var(--wzl-space-8) 0 0;\n  font-size: var(--wzl-font-size-sm);\n}\n","/* The capture box is the host's size exactly, whatever else styles a `.fg-story`. An isolated story's frame wrapper\n   measures `100vh` against the page, which the capture sizes to the box. */\n.fg-story[data-fg-capture] {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--fg-capture-w);\n  height: var(--fg-capture-h);\n  overflow: hidden;\n  contain: paint;\n  container-type: size;\n}\n"],"mappings":"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","names":[]}

package/dist/frame/index.d.ts

@@ -1,39 +1,72 @@
-import { F as FrameSetup, L as LoadedStory } from '../FrameController-Cj_i-Rdk.js';
-export { v as Channel, w as ConfigAnswers, x as FaultPhase, n as FromFrame, y as StartFrameOptions, o as ToFrame, z as reportImportFault, B as startFrame } from '../FrameController-Cj_i-Rdk.js';
+import { G as Globals, L as Layout, I as IndexEntry, F as FrameSetup } from '../FrameController-Tv3jrHyT.js';
+export { C as Channel, a as ConfigAnswers, b as FaultPhase, c as FromFrame, S as StartFrameOptions, T as ToFrame, r as reportImportFault, s as startFrame } from '../FrameController-Tv3jrHyT.js';
+import { F as FrameImporters } from '../mountFrame-FdJDb3TB.js';
+export { a as FrameIndexEntry, M as MountFrameOptions, m as mountFrame } from '../mountFrame-FdJDb3TB.js';
+import { Theme } from '@weasel-js/theme';
 import '@weasel-js/icons';
 import '@weasel-js/labkit/config';
 import 'react';
 
-/** Story modules by file path, each loaded on first use. */
-interface FrameImporters {
-    [file: string]: () => Promise<Record<string, unknown>>;
+/** Everything the screen renders a story from, as the capture endpoint takes it. */
+interface CapturePayload {
+    /** The story's index id. */
+    story: string;
+    /** Picks the document: an isolated story renders under frame styles, any other under shell styles. */
+    isolate: boolean;
+    /** The story's config, with forge's `$` keys stripped and a comparison's args laid over. */
+    config: unknown;
+    /** Must survive JSON. */
+    state: unknown;
+    globals: Globals;
+    /** CSS variable overrides, by property name. */
+    overrides: Readonly<Record<string, string>>;
+    /** Null for a story with no timeline, and for an isolated story. */
+    playhead: number | null;
+    /** The host's size in CSS pixels. */
+    box: {
+        width: number;
+        height: number;
+    };
+    layout: Layout;
+    /** Device pixel ratio, in [1, 3]. */
+    dpr: number;
+    /** Where the story's scroller stands in its host, in CSS pixels, so the capture shows the patch the screen does. */
+    scroll: {
+        left: number;
+        top: number;
+    };
+    /** The workshop lab's theme as the screen shows it: the lab's globals, which the shell config's `labTheme` reads,
+     *  and its resolved color mode. An isolated story's document has no lab, and ignores it. */
+    lab: {
+        globals: Globals;
+        mode: 'light' | 'dark';
+    };
+    /** The OS color scheme the screen sees, which the capture page emulates: a story or a lab in `auto` mode follows
+     *  `prefers-color-scheme`, and headless Chromium would otherwise answer light. */
+    colorScheme: 'light' | 'dark';
 }
-/** One story as a frame document needs to find it, before its module is loaded. */
-interface FrameIndexEntry {
-    id: string;
-    /** The story's title as indexed, which titles the file's stories when its meta names none. */
-    title: string;
-    file: string;
-    exportName: string;
-    /** The JSDoc above the story's export, which its index page shows. */
-    description?: string;
-    /** The JSDoc above the file's meta, which heads the index page. */
-    componentDescription?: string;
-    /** The meta's `tags`. */
-    tags?: readonly string[];
-}
-/** Inputs to `mountFrame`. `load` replaces the default module loader, `loadStories`. */
-interface MountFrameOptions {
-    index: readonly FrameIndexEntry[];
+
+/** Inputs to `mountCapture`, as a capture page's entry module passes them. */
+interface MountCaptureOptions {
+    index: readonly IndexEntry[];
     importers: FrameImporters;
-    setup?: FrameSetup;
-    load?: (mod: Record<string, unknown>, title: string, parameters?: Record<string, unknown>) => LoadedStory[];
+    setup: FrameSetup;
+    /** The shell config's `labTheme`; only the shell's capture page has one. */
+    labTheme?: ((globals: Globals) => Theme) | undefined;
+}
+declare global {
+    interface Window {
+        /** Set by `mountCapture`: renders one payload and resolves once it has painted. */
+        __forgeCapture?: {
+            render(payload: CapturePayload): Promise<void>;
+        };
+    }
 }
-
 /**
- * The frame document's entry: asks its parent for a port and shows what the handoff names, or, from a shell that
- * names nothing, what the hash does. The hash is read at once, so its module loads during the handshake.
+ * A capture page's entry: exposes `window.__forgeCapture.render(payload)`, which loads the payload's story, renders
+ * it afresh into `#root`, and resolves once it has painted. Rejects for a story the index does not hold, and with
+ * whatever throws outside the story's own error boundary.
  */
-declare function mountFrame(options: MountFrameOptions): Promise<void>;
+declare function mountCapture({ index, importers, setup, labTheme }: MountCaptureOptions): void;
 
-export { type FrameImporters, type FrameIndexEntry, FrameSetup, type MountFrameOptions, mountFrame };
+export { FrameImporters, FrameSetup, type MountCaptureOptions, mountCapture };

package/dist/frame/index.js

@@ -1,14 +1,19 @@
-import { describeSchema, createKitRoot, openChannel, isIndexId, TITLE_LIBRARIES, indexId, answerSchema, IndexPage } from '../chunk-BKPDKUDN.js';
-import { isGallery } from '../chunk-WEQSLPKT.js';
-import { createOverrides, createGlobalsTarget, createA11yHighlighter, loadStories, indexRenderOf, scanCssVars, auditElement, runAxe, StoryHost, resolveCssVar } from '../chunk-JTCUIJPZ.js';
-import '../chunk-L5XM5VKB.js';
-import '../chunk-ZAWXMUGZ.js';
+import { describeSchema, createKitRoot, openChannel, TITLE_LIBRARIES, LAB_DENSITY, answerSchema, IndexPage } from '../chunk-BUXUWAI4.js';
+import { isIndexId, indexId } from '../chunk-STF6NQ5N.js';
+import { taggedIds, isGallery } from '../chunk-VUPN73JP.js';
+import { createOverrides, createGlobalsTarget, createA11yHighlighter, loadStories, indexRenderOf, scanCssVars, auditElement, runAxe, useHostConditions, useStoryClock, StoryHost, resolveCssVar } from '../chunk-35DOPXHZ.js';
+import { ClockContext } from '../chunk-L5XM5VKB.js';
+import '../chunk-5WS67HMU.js';
 import '../chunk-KEQBGDUZ.js';
 import { FRAME_HELLO, stableStringify, PORT_HANDOFF } from '../chunk-GH5RE5X5.js';
 import { flushSync } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
 import { f } from '@weasel-js/labkit/config';
-import { Component } from 'react';
+import { Component, useState, useMemo, useLayoutEffect, useRef, useEffect } from 'react';
+import { useLatest, useVisibleRaf } from '@weasel-js/core';
+import { interstellarTheme, LabRoot } from '@weasel-js/labkit';
+import { ThemeProvider } from '@weasel-js/theme/react';
+import { OverlayPortalProvider } from '@weasel-js/ui/portal-host';
 
 var VARS_SETTLE_MS = 100;
 function fault(phase, error, seq) {
@@ -207,6 +212,7 @@ function startIndex(options) {
       descriptions: options.descriptions,
       gallery: options.gallery ?? false,
       galleries: options.galleries ?? [],
+      labs: options.labs ?? [],
       globals,
       decorators: setup.decorators ?? [],
       open: (id) => send({ type: "open", id }),
@@ -312,7 +318,7 @@ async function mountFrame(options) {
         // The project's library table is the shell config's, which a frame document does not load.
         library: TITLE_LIBRARIES.of({ file: entries[0]?.file ?? "", title }),
         gallery: entries.every(isGallery),
-        galleries: entries.filter(isGallery).map((e) => e.id),
+        ...taggedIds(entries),
         stories: stories2,
         descriptions: Object.fromEntries(entries.flatMap((e) => e.description ? [[e.id, e.description]] : [])),
         render: mods.map(indexRenderOf).find((render) => render !== null) ?? null,
@@ -334,7 +340,131 @@ async function mountFrame(options) {
     reportImportFault(channel, error);
   }
 }
+var HOST_ID = "capture";
+var NO_WRITE = () => {
+};
+var boxStyle = ({ width, height }) => ({ ["--fg-capture-w"]: `${width}px`, ["--fg-capture-h"]: `${height}px` });
+function scrollTo(host, { left, top }) {
+  const scroller = host?.querySelector(":scope > .fg-story__scroll");
+  if (!scroller) return;
+  scroller.scrollLeft = left;
+  scroller.scrollTop = top;
+}
+function CaptureView({ story, payload, setup, labTheme, onRendered }) {
+  const [host, setHost] = useState(null);
+  useHostConditions(host, { hostId: HOST_ID, globals: payload.globals, overrides: payload.overrides, setup });
+  const spec = useMemo(() => story.timeline?.(payload.config) ?? null, [story, payload.config]);
+  const clock = useStoryClock(spec, () => payload.playhead);
+  const state = useMemo(
+    () => payload.state === null && story.initialState ? story.initialState(payload.config) : payload.state,
+    [payload.state, payload.config, story]
+  );
+  const ctx = {
+    config: payload.config,
+    setConfig: NO_WRITE,
+    state,
+    setState: NO_WRITE,
+    globals: payload.globals,
+    title: story.title,
+    name: story.name
+  };
+  const latest = useLatest({ onRendered, host, scroll: payload.scroll });
+  useLayoutEffect(() => scrollTo(host, payload.scroll), [host, payload.scroll]);
+  const ticks = useRef(0);
+  const raf = useVisibleRaf(
+    (_now, loop) => {
+      ticks.current += 1;
+      scrollTo(latest.current.host, latest.current.scroll);
+      if (ticks.current < 2) loop.request();
+      else latest.current.onRendered();
+    },
+    { dangerouslyRunWhenHidden: true }
+  );
+  useEffect(() => {
+    if (!host) return;
+    let canceled = false;
+    const start = () => {
+      if (!canceled) raf.request();
+    };
+    const { fonts } = host.ownerDocument;
+    if (fonts) void fonts.ready.then(start, start);
+    else start();
+    return () => {
+      canceled = true;
+      raf.cancel();
+    };
+  }, [host, raf]);
+  const content = host ? /* @__PURE__ */ jsx(ClockContext.Provider, { value: clock, children: /* @__PURE__ */ jsx(StoryHost, { story, ctx, decorators: setup.decorators ?? [], resetKey: 0, onError: NO_WRITE }) }) : null;
+  const box = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setHost,
+      className: "fg-story",
+      "data-fg-host": HOST_ID,
+      "data-fg-capture": "",
+      "data-fg-layout": payload.layout,
+      style: boxStyle(payload.box),
+      children: payload.isolate ? /* @__PURE__ */ jsx("div", { className: `fg-frame fg-frame--${payload.layout}`, children: content }) : /* @__PURE__ */ jsx("div", { className: "fg-story__scroll", children: host ? /* @__PURE__ */ jsx(OverlayPortalProvider, { container: host, contained: true, children: content }) : null })
+    }
+  );
+  if (payload.isolate) return box;
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      theme: labTheme?.(payload.lab.globals) ?? interstellarTheme,
+      selection: { mode: payload.lab.mode, density: LAB_DENSITY },
+      children: /* @__PURE__ */ jsx(LabRoot, { children: box })
+    }
+  );
+}
+var CaptureBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
+function mountCapture({ index, importers, setup, labTheme }) {
+  const container = document.getElementById("root") ?? document.body;
+  const root = createKitRoot(container, setup.icons);
+  const prepared = /* @__PURE__ */ new Map();
+  let renders = 0;
+  const storyOf = (id) => {
+    let loading = prepared.get(id);
+    if (!loading) {
+      loading = (async () => {
+        const entry = index.find((e) => e.id === id);
+        if (!entry) throw new Error(`No story with id "${id}"`);
+        const importer = importers[entry.file];
+        if (!importer) throw new Error(`No importer for ${entry.file}`);
+        const story = loadStories(await importer(), entry.title, setup.parameters).find((s) => s.exportName === entry.exportName);
+        if (!story) throw new Error(`${entry.file} has no story export "${entry.exportName}"`);
+        await setup.prepare?.(story);
+        return story;
+      })();
+      prepared.set(id, loading);
+      loading.catch(() => prepared.delete(id));
+    }
+    return loading;
+  };
+  window.__forgeCapture = {
+    async render(payload) {
+      const story = await storyOf(payload.story);
+      renders += 1;
+      await new Promise((resolve, reject) => {
+        root.render(
+          /* @__PURE__ */ jsx(CaptureBoundary, { onError: reject, children: /* @__PURE__ */ jsx(CaptureView, { story, payload, setup, labTheme, onRendered: resolve }) }, renders)
+        );
+      });
+    }
+  };
+}
 
-export { mountFrame, reportImportFault, startFrame };
+export { mountCapture, mountFrame, reportImportFault, startFrame };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map