@weasel-js/forge 1.5.1 → 1.6.0

package/README.md

@@ -1,22 +1,53 @@
 # @weasel-js/forge
 
 A component workshop built on labkit. It reads Storybook's story files and
-renders each story in its own frame document; the story's controls, state,
-undo and snapshots live in a labkit trial beside it, so two settings of one
+renders each story in the workshop page as a labkit trial: the story's
+controls, state, undo and snapshots live in the trial, so two settings of one
 component can be compared side by side.
 
 Direction: `docs/superpowers/specs/2026-09-13-forge-design.md`.
 
+## Where a story renders
+
+A story renders inside a host element in the workshop document. The host
+carries the theme attributes the globals resolve to, keeps its CSS variable
+overrides on itself, contains its fixed-position descendants, and is where
+weasel overlays portal, so a Dialog opened in one trial stays in that trial.
+`vw`, `vh` and media queries read the workshop page, not the host; a story
+with a `viewport` renders as a fixed-size box the trial pans and zooms.
+
+A story that needs a document of its own says so, with the reason:
+
+```tsx
+export const Interactive = story({ isolate: 'ToastRegion portals to document.body', render: … });
+// CSF: parameters: { forge: { isolate: 'ToastRegion portals to document.body' } }
+```
+
+It then renders in an iframe, as every story once did. The frame path is kept
+for those stories and gets no new features; `npm run check:forge-isolate`
+lists the isolated stories and fails when their number goes above the one the
+script holds, so the count only goes down. The value is read from the source
+without running it, and must be a string literal.
+
+A story may stay isolated as long as it needs to. If the count ever reaches
+zero, the frame side goes: `FrameView`, `framePool`, `trialFrames`,
+`answers`, `readyKey`, `labHarness`, `mountFrame`, `protocol/*`, the frame
+entry, `frame.html`, `html.ts`, the frame page in `build.ts`, the `./frame`
+and `./frame.css` exports, the ratchet script, and the `docs/TODO.md` entries
+about frame reloads; `defineFrameConfig` folds into one config.
+
 ## Config modules
 
-The vite plugin takes two optional config modules, one per realm, because the
-workshop page and each frame document are separate documents:
+The vite plugin takes two optional config modules:
 
 - `frameConfig` default-exports `defineFrameConfig({...})`: decorators around
-  every story, `applyGlobals` for what a global does to the frame document,
-  `cssVarsScope`, and `parameters`, the project-wide CSF parameters that
-  Storybook keeps in `preview`. Only frame documents import it, so its CSS
-  stays off the workshop page.
+  every story, `applyGlobals` for what a global does to a story's host (or to
+  a frame document's root, for an isolated story), `cssVarsScope`,
+  `parameters`, the project-wide CSF parameters that Storybook keeps in
+  `preview`, and `prepare`, awaited before a story first renders, which is
+  where to import what only some stories need. `applyGlobals` is handed a
+  target: its `root`, a `scope` selector matching only that root, and
+  `style(css)` for a rule that should reach that story alone.
 - `shellConfig` default-exports `defineShellConfig({...})`: lab chrome, control
   renderers, and global declarations. Only the workshop page imports it.
 
@@ -24,10 +55,41 @@ workshop page and each frame document are separate documents:
 forge({ stories: ['src/**/*.stories.tsx'], frameConfig: 'forge.frame.tsx', shellConfig: 'forge.shell.tsx' });
 ```
 
+Editing a story file reloads that story in every trial showing it, with the
+trial's config and state kept; the page itself stays.
+
+Clicking a story in the tree, or reaching one by its URL, shows it in the
+focused trial; Shift-click opens another trial beside it.
+
+## Index pages
+
+Every component — every story title — has an index page, opened by clicking
+the component's row in the sidebar (its fold mark only folds it) and routed at
+`#/<title id>:index`. It renders all
+of the component's stories in one trial: each at its defaults, then once per
+value of each of its boolean and enum controls, one control at a time.
+
+A component can supply its own page. A native meta takes `index`; a CSF meta
+sets `parameters.forge.index`. Either is handed an `IndexContext` holding the
+stories and the generated page's parts, `Story`, `Variants` and `DefaultIndex`,
+so a custom page composes them:
+
+```tsx
+export default meta({
+  title: 'ui/Button',
+  index: ({ stories, Story, DefaultIndex }) => (
+    <>
+      <Story story={stories[0]} config={{ label: 'Save' }} label="In a form" />
+      <DefaultIndex />
+    </>
+  ),
+});
+```
+
 ## Story tests
 
 `forgeTest` from `@weasel-js/forge/vite` runs every story as a vitest browser
-test: each story renders through forge's frame with its defaults, plays, and
-fails on any fault. Pass it the same `frameConfig`. It needs vitest 4 in browser mode with a provider, such as
+test: each story renders in the test page through the same host the workshop
+uses, with its defaults, plays, and fails on any fault. Pass it the same `frameConfig`. It needs vitest 4 in browser mode with a provider, such as
 `@vitest/browser-playwright`. This repo runs it with
 `npm run test:stories:forge`, not in CI.

package/dist/{FrameController-BPfCt4PJ.d.ts → FrameController-BspC9Zr5.d.ts}

@@ -1,5 +1,5 @@
 import { BranchAnnotations, Annotations, ConfigSchema } from '@weasel-js/labkit/config';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 
 interface Channel<In, Out> {
     send(msg: Out): void;
@@ -147,6 +147,11 @@ type FromFrame = {
 } | {
     type: 'vars';
     vars: CssVarReport[];
+}
+/** Asks the shell to show story `id` in this frame's trial in place of what it shows now. */
+ | {
+    type: 'open';
+    id: string;
 } | {
     type: 'played';
     ok: boolean;
@@ -200,7 +205,38 @@ interface MetaSpec {
     title?: string;
     decorators?: Decorator[];
     layout?: Layout;
+    /** Renders this story in its own frame document, for a reason the value states. The default is the workshop document. */
+    isolate?: string;
+    /** The component's own index page, in place of the generated one. A CSF file sets `parameters.forge.index`. */
+    index?: IndexRender;
+}
+/** What an index page is given: its component's stories, and the parts the generated page is built from. */
+interface IndexContext {
+    title: string;
+    /** The JSDoc above the file's meta, if any. */
+    description?: string;
+    /** In file order. */
+    stories: readonly LoadedStory[];
+    globals: Globals;
+    /** One story, interactive, at its defaults with `config` over them. */
+    Story: ComponentType<IndexStoryProps>;
+    /** One story rendered once per value of each of its boolean and enum controls, the rest at their defaults. */
+    Variants: ComponentType<{
+        story: LoadedStory;
+    }>;
+    /** The whole generated page. */
+    DefaultIndex: ComponentType;
+    /** Shows story `id` in this page's trial in its place. */
+    open: (id: string) => void;
 }
+interface IndexStoryProps {
+    story: LoadedStory;
+    /** Merged over the story's defaults; nested groups merge rather than replace. */
+    config?: Record<string, unknown>;
+    /** Shown under the story. */
+    label?: string;
+}
+type IndexRender = (ctx: IndexContext) => ReactNode;
 interface StorySpec<C = Record<string, never>, S = undefined> {
     name?: string;
     config?: ConfigSchema<C>;
@@ -209,6 +245,8 @@ interface StorySpec<C = Record<string, never>, S = undefined> {
     decorators?: Decorator[];
     layout?: Layout;
     viewport?: Viewport;
+    /** Renders this story in its own frame document, for a reason the value states. The default is the workshop document. */
+    isolate?: string;
     play?: (ctx: PlayContext<C>) => void | Promise<void>;
 }
 /** One story, normalized — what both the native and CSF loaders produce. */
@@ -224,6 +262,7 @@ interface LoadedStory {
     decorators: Decorator[];
     layout: Layout;
     viewport: Viewport | null;
+    isolate: string | null;
     play: ((ctx: PlayContext) => void | Promise<void>) | null;
 }
 /** One story as the index knows it, before its module is loaded. */
@@ -234,13 +273,32 @@ interface IndexEntry {
     exportName: string;
     /** Absolute path of the story file. */
     file: string;
+    /** The JSDoc written above this story's export, if any. */
+    description?: string;
+    /** The JSDoc written above the file's meta, if any. */
+    componentDescription?: string;
+    /** The identifier the meta's `component` names, if it names one. */
+    componentName?: string;
+    /** Read statically from the source; a story with it renders in its own frame. */
+    isolate?: string;
+}
+
+/** What a setup's `applyGlobals` is handed: the element the globals apply to, and a way to style it alone. */
+interface GlobalsTarget {
+    /** A frame document's root, or one story's host in the workshop document. */
+    root: HTMLElement;
+    /** A selector matching `root` and nothing else, so a rule written under it reaches only this target. */
+    scope: string;
+    /** Replaces the CSS forge keeps for this target. */
+    style: (css: string) => void;
 }
 
 interface FrameSetup {
     /** Wraps every story, outermost; receives the globals. From the frame config (`frameConfig`). */
     decorators?: Decorator[];
-    /** Applies globals to the frame document — theme mode, fonts. */
-    applyGlobals?: (globals: Globals, root: HTMLElement) => void;
+    /** Applies globals to a target: theme mode, fonts. The target is a frame document's root, or one story's host in
+     *  the workshop document, so a rule the setup writes goes through `target.style` under `target.scope`. */
+    applyGlobals?: (globals: Globals, target: GlobalsTarget) => void;
     /**
      * The elements a CSS variable override is declared on; `:root` by default. An override has to be declared on
      * whichever element declares the token itself — a theme wrapper, say — or that element's own value wins.
@@ -248,6 +306,11 @@ interface FrameSetup {
     cssVarsScope?: string;
     /** Project-wide CSF parameters, Storybook's preview `parameters`: under each meta's and story's. */
     parameters?: Record<string, unknown>;
+    /**
+     * Awaited once a story is loaded and before it first renders — the place to import what only some stories
+     * need, so the rest never load it.
+     */
+    prepare?: (story: LoadedStory) => void | Promise<void>;
 }
 interface StartFrameOptions {
     story: LoadedStory;
@@ -260,4 +323,4 @@ declare function startFrame({ story, channel, container, setup }: StartFrameOpti
 /** Reports an import failure — there is no story to start. */
 declare function reportImportFault(channel: Channel<ToFrame, FromFrame>, error: unknown): void;
 
-export { type A11yFinding as A, type CssVarReport as C, type Decorator as D, type FrameSetup as F, type Globals as G, type IndexEntry as I, type LoadedStory as L, type MetaSpec as M, type PlayContext as P, type StorySpec as S, type ToFrame as T, type Viewport as V, type A11yNode as a, type A11yReport as b, type StoryContext as c, type StartFrameOptions as d, type FromFrame as e, type CapturedPicture as f, reportImportFault as r, startFrame as s };
+export { type A11yFinding as A, type CssVarReport as C, type Decorator as D, type FrameSetup as F, type Globals as G, type IndexContext as I, type LoadedStory as L, type MetaSpec as M, type PlayContext as P, type StorySpec as S, type ToFrame as T, type Viewport as V, type A11yNode as a, type A11yReport as b, type GlobalsTarget as c, type IndexRender as d, type IndexStoryProps as e, type StoryContext as f, type IndexEntry as g, type Layout as h, type FromFrame as i, type CapturedPicture as j, type StartFrameOptions as k, reportImportFault as r, startFrame as s };

package/dist/chunk-A4JOEGYQ.js

@@ -0,0 +1,325 @@
+import { createOverrides, createGlobalsTarget, StoryHost, scanCssVars, runAxe, captureElement } from './chunk-FWPBKKYB.js';
+import { createContext, useContext, useCallback, useSyncExternalStore, useMemo, useId, useState, useRef, useLayoutEffect, useEffect } from 'react';
+import { usePersistedState, TrialIdContext, LabBoundary } from '@weasel-js/labkit';
+import { OverlayPortalProvider } from '@weasel-js/ui';
+import { f } from '@weasel-js/labkit/config';
+import { jsx } from 'react/jsx-runtime';
+
+var NO_FRAME = { send: null, vars: [], audit: null, a11y: null, capture: null, size: null };
+function createTrialFrames() {
+  const frames = /* @__PURE__ */ new Map();
+  const hosts = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  const changed = () => {
+    for (const listener of [...listeners]) listener();
+  };
+  const patch = (trialId, next) => {
+    const frame = frames.get(trialId);
+    if (!frame) return;
+    frames.set(trialId, { ...frame, ...next });
+    changed();
+  };
+  return {
+    connect(trialId, calls) {
+      const held = frames.get(trialId);
+      frames.set(trialId, {
+        send: calls.send,
+        vars: [],
+        audit: calls.audit,
+        a11y: null,
+        capture: calls.capture,
+        size: held?.size ?? null
+      });
+      changed();
+      return () => {
+        if (frames.get(trialId)?.send !== calls.send) return;
+        frames.delete(trialId);
+        changed();
+      };
+    },
+    report: (trialId, vars) => patch(trialId, { vars }),
+    reportA11y: (trialId, a11y) => patch(trialId, { a11y }),
+    reportSize(trialId, size) {
+      const frame = frames.get(trialId) ?? NO_FRAME;
+      if (frame.size?.width === size.width && frame.size?.height === size.height) return;
+      frames.set(trialId, { ...frame, size });
+      changed();
+    },
+    hostRef(trialId) {
+      let ref = hosts.get(trialId);
+      if (!ref) {
+        ref = { current: null };
+        hosts.set(trialId, ref);
+      }
+      return ref;
+    },
+    get: (trialId) => frames.get(trialId) ?? NO_FRAME,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var TrialFramesContext = createContext(null);
+function useTrialFrame(trialId) {
+  const frames = useContext(TrialFramesContext);
+  const subscribe = useCallback((listener) => frames?.subscribe(listener) ?? (() => {
+  }), [frames]);
+  const read = () => frames?.get(trialId) ?? NO_FRAME;
+  return useSyncExternalStore(subscribe, read, read);
+}
+var StoryGlobalsContext = createContext({});
+var NONE = {};
+function useCssOverrides() {
+  return usePersistedState("fg-css-overrides", NONE, { scope: "trial" });
+}
+var GLOBALS_KEY = "$globals";
+var FOLLOW_LAB = "lab";
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isGlobalsPath = (path) => path === GLOBALS_KEY || path.startsWith(`${GLOBALS_KEY}.`);
+function labGlobals(declarations, stored) {
+  const from = isRecord(stored) ? stored : {};
+  return Object.fromEntries(
+    Object.entries(declarations).map(([key, declaration]) => {
+      const value = from[key];
+      return [key, declaration.options.some((option) => option.value === value) ? value : declaration.default];
+    })
+  );
+}
+function effectiveGlobals(lab, pins) {
+  if (!isRecord(pins)) return lab;
+  const pinned = Object.entries(pins).filter(([key, value]) => key in lab && value !== FOLLOW_LAB);
+  return pinned.length === 0 ? lab : { ...lab, ...Object.fromEntries(pinned) };
+}
+function storyConfig(config, previous) {
+  if (!isRecord(config) || !(GLOBALS_KEY in config)) return config;
+  const rest = Object.fromEntries(Object.entries(config).filter(([key]) => key !== GLOBALS_KEY));
+  if (isRecord(previous)) {
+    const keys = Object.keys(rest);
+    if (keys.length === Object.keys(previous).length && keys.every((key) => rest[key] === previous[key])) return previous;
+  }
+  return rest;
+}
+function withGlobals(schema, declarations) {
+  const entries = Object.entries(declarations);
+  if (entries.length === 0) return schema;
+  const leaves = Object.fromEntries(
+    entries.map(([key, declaration]) => [
+      key,
+      f.enum(FOLLOW_LAB, [{ value: FOLLOW_LAB, label: "Lab" }, ...declaration.options]).label(declaration.label)
+    ])
+  );
+  const group = f.group(leaves).label("").section("Globals", { layout: "inline", pack: "pairs" });
+  return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group });
+}
+var IN_VIEW_MARGIN = "50%";
+var VARS_SETTLE_MS = 100;
+function useInView(ref) {
+  const [inView, setInView] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const last = entries.at(-1);
+        if (last) setInView(last.isIntersecting);
+      },
+      { rootMargin: IN_VIEW_MARGIN }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return inView;
+}
+var scopeOf = (id) => `[data-fg-host="${id}"]`;
+function TrialHost({ layout, setup, config, children, hostRef, onRendered }) {
+  const trialId = useContext(TrialIdContext);
+  const frames = useContext(TrialFramesContext);
+  const labGlobals2 = useContext(StoryGlobalsContext);
+  const pins = config?.[GLOBALS_KEY];
+  const globals = useMemo(() => effectiveGlobals(labGlobals2, pins), [labGlobals2, pins]);
+  const [persisted] = useCssOverrides();
+  const reactId = useId();
+  const hostId = trialId ?? reactId;
+  const [host, setHost] = useState(null);
+  const elementRef = useRef(null);
+  const inView = useInView(elementRef);
+  const [pending, setPending] = useState(true);
+  const overridesRef = useRef(null);
+  const latest = useRef({ setup, onRendered });
+  latest.current = { setup, onRendered };
+  useLayoutEffect(() => {
+    if (!host) return;
+    const doc = host.ownerDocument;
+    const scope = scopeOf(hostId);
+    const { cssVarsScope } = latest.current.setup;
+    const overrides = createOverrides(doc, cssVarsScope ? `${scope}, ${scope} :is(${cssVarsScope})` : scope);
+    overridesRef.current = overrides;
+    let lastVars = null;
+    let reported = null;
+    const publish = (vars) => {
+      lastVars = vars;
+      const key = JSON.stringify(vars);
+      if (key === reported) return;
+      reported = key;
+      if (trialId) frames?.report(trialId, vars);
+    };
+    const scan = () => publish(scanCssVars(doc, overrides.has, host));
+    let settleTimer;
+    const ownMutation = (record) => overrides.owns(record.target) || record.type === "childList" && [...record.addedNodes, ...record.removedNodes].length > 0 && [...record.addedNodes, ...record.removedNodes].every(overrides.owns);
+    const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+      if (records.every(ownMutation)) return;
+      clearTimeout(settleTimer);
+      settleTimer = setTimeout(scan, VARS_SETTLE_MS);
+    });
+    mutations?.observe(host, { subtree: true, childList: true, characterData: true, attributes: true });
+    const send = (msg) => {
+      if (msg.type !== "vars.set") return;
+      overrides.set(msg.name, msg.value);
+      const at = lastVars?.findIndex((v) => v.name === msg.name) ?? -1;
+      if (!lastVars || at < 0) return;
+      const vars = lastVars.slice();
+      vars[at] = { ...vars[at], overridden: overrides.has(msg.name) };
+      scan();
+    };
+    const audit = async () => {
+      let outcome;
+      try {
+        outcome = { ok: true, report: await runAxe(host, { page: false }) };
+      } catch (error) {
+        outcome = { ok: false, message: error instanceof Error ? error.message : String(error) };
+      }
+      if (trialId) frames?.reportA11y(trialId, outcome);
+      return outcome;
+    };
+    const capture = async () => captureElement(host);
+    const disconnect = frames && trialId ? frames.connect(trialId, { send, audit, capture }) : () => {
+    };
+    if (frames && trialId) frames.hostRef(trialId).current = host;
+    const sizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      const { width, height } = host.getBoundingClientRect();
+      if (trialId) frames?.reportSize(trialId, { width: Math.ceil(width), height: Math.ceil(height) });
+    });
+    sizes?.observe(host);
+    return () => {
+      disconnect();
+      sizes?.disconnect();
+      mutations?.disconnect();
+      clearTimeout(settleTimer);
+      overrides.dispose();
+      overridesRef.current = null;
+      if (frames && trialId && frames.hostRef(trialId).current === host) frames.hostRef(trialId).current = null;
+    };
+  }, [host, hostId, trialId, frames]);
+  const applied = useRef({});
+  useLayoutEffect(() => {
+    const overrides = overridesRef.current;
+    if (!overrides) return;
+    for (const name of Object.keys(applied.current)) if (!(name in persisted)) overrides.set(name, null);
+    for (const [name, value] of Object.entries(persisted)) overrides.set(name, value);
+    applied.current = { ...persisted };
+  }, [host, persisted]);
+  useLayoutEffect(() => {
+    if (!host) return;
+    const target = createGlobalsTarget(host, scopeOf(hostId));
+    latest.current.setup.applyGlobals?.(globals, target);
+    return () => target.dispose();
+  }, [host, hostId, globals]);
+  const announced = useRef(false);
+  useEffect(() => {
+    if (!host || !inView || announced.current) return;
+    announced.current = true;
+    let canceled = false;
+    const done = () => {
+      if (canceled) return;
+      setPending(false);
+      latest.current.onRendered?.();
+    };
+    const { fonts } = host.ownerDocument;
+    if (!fonts) {
+      done();
+      return;
+    }
+    const afterPaint = () => requestAnimationFrame(done);
+    void fonts.ready.then(afterPaint, afterPaint);
+    return () => {
+      canceled = true;
+    };
+  }, [host, inView]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        elementRef.current = el;
+        if (hostRef) hostRef.current = el;
+        setHost(el);
+      },
+      className: "fg-story",
+      "data-fg-host": hostId,
+      "data-fg-layout": layout,
+      "data-pending": pending || void 0,
+      children: host && inView ? (
+        // The workshop is itself a lab; below the boundary a story sees no lab, trial or theme above it, as in a
+        // document of its own.
+        /* @__PURE__ */ jsx(LabBoundary, { children: /* @__PURE__ */ jsx(OverlayPortalProvider, { container: host, children: children(globals) }) })
+      ) : null
+    }
+  );
+}
+function StoryTrial({ story, setup, ctx, hostRef, onRendered, onError }) {
+  const latest = useRef(ctx);
+  latest.current = ctx;
+  const config = useMemo(() => storyConfig(ctx.config), [ctx.config]);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current || ctx.state !== null || !story.initialState) return;
+    seeded.current = true;
+    ctx.setState(story.initialState(config));
+  }, [ctx, story, config]);
+  const input = useRef({ config, state: ctx.state, key: 0 });
+  if (input.current.config !== config || input.current.state !== ctx.state) {
+    input.current = { config, state: ctx.state, key: input.current.key + 1 };
+  }
+  const resetKey = input.current.key;
+  const setConfig = useCallback((path, value) => {
+    if (!isGlobalsPath(path)) latest.current.setConfig(path, value);
+  }, []);
+  const setState = useCallback((next) => latest.current.setState(next), []);
+  const decorators = setup.decorators ?? [];
+  const render = (globals) => {
+    const storyCtx = {
+      config,
+      setConfig,
+      state: ctx.state,
+      setState,
+      globals,
+      title: story.title,
+      name: story.name
+    };
+    return /* @__PURE__ */ jsx(
+      StoryHost,
+      {
+        story,
+        ctx: storyCtx,
+        decorators,
+        resetKey,
+        onError: (error) => onError?.(error)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    TrialHost,
+    {
+      layout: story.layout,
+      setup,
+      config: ctx.config,
+      ...hostRef ? { hostRef } : {},
+      ...onRendered ? { onRendered } : {},
+      children: render
+    }
+  );
+}
+
+export { GLOBALS_KEY, StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, createTrialFrames, effectiveGlobals, isGlobalsPath, labGlobals, storyConfig, useCssOverrides, useTrialFrame, withGlobals };
+//# sourceMappingURL=chunk-A4JOEGYQ.js.map
+//# sourceMappingURL=chunk-A4JOEGYQ.js.map

package/dist/chunk-A4JOEGYQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/trialFrames.ts","../src/shell/StoryGlobalsContext.ts","../src/shell/cssVars/overrides.ts","../src/shell/globals.ts","../src/shell/TrialHost.tsx","../src/shell/StoryTrial.tsx"],"names":["createContext","useContext","labGlobals","useRef","useMemo","useEffect","useCallback","jsx"],"mappings":"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","file":"chunk-A4JOEGYQ.js","sourcesContent":["import { createContext, type RefObject, useCallback, useContext, useSyncExternalStore } from 'react';\nimport type { A11yReport, CapturedPicture, CssVarReport, ToFrame, Viewport } from '../protocol/messages';\n\ntype Send = (msg: ToFrame) => void;\n\n/** What an axe run in the frame came back with. */\nexport type A11yOutcome = { ok: true; report: A11yReport } | { ok: false; message: string };\n\n/** The half of a trial's frame that answers a request: each call is one round trip over the frame's channel. */\nexport interface TrialFrameCalls {\n  send: Send;\n  audit: () => Promise<A11yOutcome>;\n  /** Rejects when the frame could not draw itself, or went away before it did. */\n  capture: () => Promise<CapturedPicture>;\n}\n\n/** What trial chrome can reach of the frame its trial shows. */\nexport interface TrialFrame {\n  /** Null while no frame is connected. */\n  send: Send | null;\n  /** The frame's latest `vars` report. */\n  vars: readonly CssVarReport[];\n  /** Runs axe over the story and records the answer as `a11y`. Null while no frame is connected. */\n  audit: (() => Promise<A11yOutcome>) | null;\n  /** What the last audit found; null until one has run against the connected frame. */\n  a11y: A11yOutcome | null;\n  /** The story's own picture, for an export to draw over. Null while no frame is connected. */\n  capture: (() => Promise<CapturedPicture>) | null;\n  /** The story's content box, as the frame last measured it; null until it has. */\n  size: Viewport | null;\n}\n\n/** Each trial's frame, keyed by trial id: `FrameView` connects and reports, trial chrome reads. */\nexport interface TrialFrames {\n  /** Returns a disconnect that does nothing once a newer connection replaced this one. */\n  connect(trialId: string, calls: TrialFrameCalls): () => void;\n  report(trialId: string, vars: readonly CssVarReport[]): void;\n  reportA11y(trialId: string, outcome: A11yOutcome): void;\n  reportSize(trialId: string, size: Viewport): void;\n  /** The element a trial's frame is mounted in — stable across the frame reloads that replace the link,\n   *  because an annotation target's ref has to outlive them. */\n  hostRef(trialId: string): RefObject<HTMLElement | null>;\n  get(trialId: string): TrialFrame;\n  subscribe(listener: () => void): () => void;\n}\n\nconst NO_FRAME: TrialFrame = { send: null, vars: [], audit: null, a11y: null, capture: null, size: null };\n\nexport function createTrialFrames(): TrialFrames {\n  const frames = new Map<string, TrialFrame>();\n  const hosts = new Map<string, RefObject<HTMLElement | null>>();\n  const listeners = new Set<() => void>();\n  const changed = () => {\n    for (const listener of [...listeners]) listener();\n  };\n  const patch = (trialId: string, next: Partial<TrialFrame>) => {\n    const frame = frames.get(trialId);\n    if (!frame) return;\n    frames.set(trialId, { ...frame, ...next });\n    changed();\n  };\n  return {\n    connect(trialId, calls) {\n      const held = frames.get(trialId);\n      frames.set(trialId, {\n        send: calls.send,\n        vars: [],\n        audit: calls.audit,\n        a11y: null,\n        capture: calls.capture,\n        size: held?.size ?? null,\n      });\n      changed();\n      return () => {\n        if (frames.get(trialId)?.send !== calls.send) return;\n        frames.delete(trialId);\n        changed();\n      };\n    },\n    report: (trialId, vars) => patch(trialId, { vars }),\n    reportA11y: (trialId, a11y) => patch(trialId, { a11y }),\n    reportSize(trialId, size) {\n      const frame = frames.get(trialId) ?? NO_FRAME;\n      if (frame.size?.width === size.width && frame.size?.height === size.height) return;\n      frames.set(trialId, { ...frame, size });\n      changed();\n    },\n    hostRef(trialId) {\n      let ref = hosts.get(trialId);\n      if (!ref) {\n        ref = { current: null };\n        hosts.set(trialId, ref);\n      }\n      return ref;\n    },\n    get: (trialId) => frames.get(trialId) ?? NO_FRAME,\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n  };\n}\n\nexport const TrialFramesContext = createContext<TrialFrames | null>(null);\n\n/** The frame of the trial `trialId` names, re-read when it connects or reports. */\nexport function useTrialFrame(trialId: string): TrialFrame {\n  const frames = useContext(TrialFramesContext);\n  const subscribe = useCallback((listener: () => void) => frames?.subscribe(listener) ?? (() => {}), [frames]);\n  const read = () => frames?.get(trialId) ?? NO_FRAME;\n  return useSyncExternalStore(subscribe, read, read);\n}\n","import { createContext } from 'react';\nimport type { Globals } from '../protocol/messages';\n\n/** The lab's global values, which a trial's pins override. A change reaches open frames without replacing instruments. */\nexport const StoryGlobalsContext = createContext<Globals>({});\n","import { usePersistedState } from '@weasel-js/labkit';\n\nexport type CssOverrides = Readonly<Record<string, string>>;\n\nconst NONE: CssOverrides = {};\n\n/** The CSS variable overrides of the trial this is rendered inside, persisted with it. */\nexport function useCssOverrides() {\n  return usePersistedState<CssOverrides>('fg-css-overrides', NONE, { scope: 'trial' });\n}\n","import { type ConfigSchema, f } from '@weasel-js/labkit/config';\nimport type { Globals } from '../protocol/messages';\n\n/** One global the workshop's toolbar sets for every story, and a trial may pin for its own. */\nexport interface GlobalDeclaration {\n  label: string;\n  options: readonly { value: string; label: string }[];\n  default: string;\n  /** Another global's key: the toolbar shows this one in a popover beside that one rather than in the bar itself. */\n  under?: string;\n}\n\nexport type GlobalDeclarations = Readonly<Record<string, GlobalDeclaration>>;\n\n/** The config group every story schema gains, holding the trial's pins. A story never sees it. */\nexport const GLOBALS_KEY = '$globals';\n/** A pin's value when the trial follows the lab. */\nexport const FOLLOW_LAB = 'lab';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport const isGlobalsPath = (path: string): boolean => path === GLOBALS_KEY || path.startsWith(`${GLOBALS_KEY}.`);\n\n/** The lab's values from what was stored: declared keys only, and a value no option offers falls back to the default. */\nexport function labGlobals(declarations: GlobalDeclarations, stored: unknown): Globals {\n  const from = isRecord(stored) ? stored : {};\n  return Object.fromEntries(\n    Object.entries(declarations).map(([key, declaration]) => {\n      const value = from[key];\n      return [key, declaration.options.some((option) => option.value === value) ? value : declaration.default];\n    }),\n  );\n}\n\n/** The lab's values, overridden by the pins in a trial's config that do not follow the lab. */\nexport function effectiveGlobals(lab: Globals, pins: unknown): Globals {\n  if (!isRecord(pins)) return lab;\n  const pinned = Object.entries(pins).filter(([key, value]) => key in lab && value !== FOLLOW_LAB);\n  return pinned.length === 0 ? lab : { ...lab, ...Object.fromEntries(pinned) };\n}\n\n/**\n * The config a story receives: the trial's, without its pins. Returns `previous` when every other entry is the same,\n * so a change to a pin alone is not a change to the story's config.\n */\nexport function storyConfig(config: unknown, previous?: unknown): unknown {\n  if (!isRecord(config) || !(GLOBALS_KEY in config)) return config;\n  const rest = Object.fromEntries(Object.entries(config).filter(([key]) => key !== GLOBALS_KEY));\n  if (isRecord(previous)) {\n    const keys = Object.keys(rest);\n    if (keys.length === Object.keys(previous).length && keys.every((key) => rest[key] === previous[key])) return previous;\n  }\n  return rest;\n}\n\n/** `schema` with a `$globals` group appended: one leaf per declaration, following the lab until pinned. */\nexport function withGlobals(schema: ConfigSchema<unknown>, declarations: GlobalDeclarations): ConfigSchema<unknown> {\n  const entries = Object.entries(declarations);\n  if (entries.length === 0) return schema;\n  const leaves = Object.fromEntries(\n    entries.map(([key, declaration]) => [\n      key,\n      f.enum(FOLLOW_LAB, [{ value: FOLLOW_LAB, label: 'Lab' }, ...declaration.options]).label(declaration.label),\n    ]),\n  );\n  // An empty group name contributes rows without a heading of its own, under the section's.\n  const group = f.group(leaves).label('').section('Globals', { layout: 'inline', pack: 'pairs' });\n  return f.schema({ ...schema.nodes, [GLOBALS_KEY]: group }) as ConfigSchema<unknown>;\n}\n","import { LabBoundary, TrialIdContext } from '@weasel-js/labkit';\nimport { OverlayPortalProvider } from '@weasel-js/ui';\nimport {\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { runAxe } from '../frame/a11y';\nimport { captureElement } from '../frame/capture';\nimport { createOverrides, type Overrides, scanCssVars } from '../frame/cssVars';\nimport type { FrameSetup } from '../frame/FrameController';\nimport { createGlobalsTarget } from '../frame/globalsTarget';\nimport type { CssVarReport, Globals, Layout, ToFrame } from '../protocol/messages';\nimport { useCssOverrides } from './cssVars/overrides';\nimport { effectiveGlobals, GLOBALS_KEY } from './globals';\nimport { StoryGlobalsContext } from './StoryGlobalsContext';\nimport { type A11yOutcome, TrialFramesContext } from './trialFrames';\n\nexport interface TrialHostProps {\n  layout: Layout;\n  setup: FrameSetup;\n  /** The trial's config, read for its `$globals` pins. */\n  config: unknown;\n  /** Rendered once the host element exists, with the globals in force on it. */\n  children: (globals: Globals) => ReactNode;\n  /** Receives the host element, for a caller with no trial to reach it through. */\n  hostRef?: RefObject<HTMLElement | null>;\n  /** Called once the children's first commit has painted. */\n  onRendered?: () => void;\n}\n\n/** How far past the viewport a story stays mounted, so a small scroll back does not remount it. */\nconst IN_VIEW_MARGIN = '50%';\nconst VARS_SETTLE_MS = 100;\n\n/** Whether `ref`'s element is near the viewport; true where the browser cannot say. */\nfunction useInView(ref: RefObject<Element | null>): boolean {\n  const [inView, setInView] = useState(true);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof IntersectionObserver === 'undefined') return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const last = entries.at(-1);\n        if (last) setInView(last.isIntersecting);\n      },\n      { rootMargin: IN_VIEW_MARGIN },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref]);\n  return inView;\n}\n\n/** A selector matching only the element carrying `id`. */\nconst scopeOf = (id: string) => `[data-fg-host=\"${id}\"]`;\n\n/**\n * One story's box in the workshop document: what a frame document was, as an element. It applies the globals to\n * itself, keeps its CSS variable overrides on itself, contains fixed-position descendants and portals, reports its\n * vars, size and audits to the trial's frame registry, and unmounts its content while out of view.\n */\nexport function TrialHost({ layout, setup, config, children, hostRef, onRendered }: TrialHostProps) {\n  const trialId = useContext(TrialIdContext);\n  const frames = useContext(TrialFramesContext);\n  const labGlobals = useContext(StoryGlobalsContext);\n  const pins = (config as Record<string, unknown> | null | undefined)?.[GLOBALS_KEY];\n  const globals = useMemo(() => effectiveGlobals(labGlobals, pins), [labGlobals, pins]);\n  const [persisted] = useCssOverrides();\n  const reactId = useId();\n  const hostId = trialId ?? reactId;\n  const [host, setHost] = useState<HTMLDivElement | null>(null);\n  const elementRef = useRef<HTMLDivElement | null>(null);\n  const inView = useInView(elementRef);\n  const [pending, setPending] = useState(true);\n  const overridesRef = useRef<Overrides | null>(null);\n  const latest = useRef({ setup, onRendered });\n  latest.current = { setup, onRendered };\n\n  // Everything the host owns for its lifetime: the globals target, the overrides rule, the registry connection.\n  useLayoutEffect(() => {\n    if (!host) return;\n    const doc = host.ownerDocument;\n    const scope = scopeOf(hostId);\n    const { cssVarsScope } = latest.current.setup;\n    const overrides = createOverrides(doc, cssVarsScope ? `${scope}, ${scope} :is(${cssVarsScope})` : scope);\n    overridesRef.current = overrides;\n    let lastVars: CssVarReport[] | null = null;\n    let reported: string | null = null;\n    const publish = (vars: CssVarReport[]) => {\n      lastVars = vars;\n      const key = JSON.stringify(vars);\n      if (key === reported) return;\n      reported = key;\n      if (trialId) frames?.report(trialId, vars);\n    };\n    const scan = () => publish(scanCssVars(doc, overrides.has, host));\n    let settleTimer: ReturnType<typeof setTimeout> | undefined;\n    const ownMutation = (record: MutationRecord) =>\n      overrides.owns(record.target) ||\n      (record.type === 'childList' &&\n        [...record.addedNodes, ...record.removedNodes].length > 0 &&\n        [...record.addedNodes, ...record.removedNodes].every(overrides.owns));\n    const mutations =\n      typeof MutationObserver === 'undefined'\n        ? null\n        : new MutationObserver((records) => {\n            if (records.every(ownMutation)) return;\n            clearTimeout(settleTimer);\n            settleTimer = setTimeout(scan, VARS_SETTLE_MS);\n          });\n    mutations?.observe(host, { subtree: true, childList: true, characterData: true, attributes: true });\n\n    const send = (msg: ToFrame) => {\n      if (msg.type !== 'vars.set') return;\n      overrides.set(msg.name, msg.value);\n      const at = lastVars?.findIndex((v) => v.name === msg.name) ?? -1;\n      if (!lastVars || at < 0) return;\n      const vars = lastVars.slice();\n      vars[at] = { ...vars[at]!, overridden: overrides.has(msg.name) };\n      scan();\n    };\n    const audit = async (): Promise<A11yOutcome> => {\n      let outcome: A11yOutcome;\n      try {\n        outcome = { ok: true, report: await runAxe(host, { page: false }) };\n      } catch (error) {\n        outcome = { ok: false, message: error instanceof Error ? error.message : String(error) };\n      }\n      if (trialId) frames?.reportA11y(trialId, outcome);\n      return outcome;\n    };\n    const capture = async () => captureElement(host);\n    const disconnect = frames && trialId ? frames.connect(trialId, { send, audit, capture }) : () => {};\n    if (frames && trialId) frames.hostRef(trialId).current = host;\n\n    const sizes =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => {\n            const { width, height } = host.getBoundingClientRect();\n            if (trialId) frames?.reportSize(trialId, { width: Math.ceil(width), height: Math.ceil(height) });\n          });\n    sizes?.observe(host);\n\n    return () => {\n      disconnect();\n      sizes?.disconnect();\n      mutations?.disconnect();\n      clearTimeout(settleTimer);\n      overrides.dispose();\n      overridesRef.current = null;\n      if (frames && trialId && frames.hostRef(trialId).current === host) frames.hostRef(trialId).current = null;\n    };\n  }, [host, hostId, trialId, frames]);\n\n  // The overrides the trial persisted, put back on every mount and kept in step with the panel's edits.\n  const applied = useRef<Record<string, string>>({});\n  useLayoutEffect(() => {\n    const overrides = overridesRef.current;\n    if (!overrides) return;\n    for (const name of Object.keys(applied.current)) if (!(name in persisted)) overrides.set(name, null);\n    for (const [name, value] of Object.entries(persisted)) overrides.set(name, value);\n    applied.current = { ...persisted };\n  }, [host, persisted]);\n\n  useLayoutEffect(() => {\n    if (!host) return;\n    const target = createGlobalsTarget(host, scopeOf(hostId));\n    latest.current.setup.applyGlobals?.(globals, target);\n    return () => target.dispose();\n  }, [host, hostId, globals]);\n\n  // The host is hidden until its first commit has painted with its fonts, so a new trial never shows a jump.\n  const announced = useRef(false);\n  useEffect(() => {\n    if (!host || !inView || announced.current) return;\n    announced.current = true;\n    let canceled = false;\n    const done = () => {\n      if (canceled) return;\n      setPending(false);\n      latest.current.onRendered?.();\n    };\n    const { fonts } = host.ownerDocument;\n    if (!fonts) {\n      done();\n      return;\n    }\n    const afterPaint = () => requestAnimationFrame(done);\n    void fonts.ready.then(afterPaint, afterPaint);\n    return () => {\n      canceled = true;\n    };\n  }, [host, inView]);\n\n  return (\n    <div\n      ref={(el) => {\n        elementRef.current = el;\n        if (hostRef) hostRef.current = el;\n        setHost(el);\n      }}\n      className=\"fg-story\"\n      data-fg-host={hostId}\n      data-fg-layout={layout}\n      data-pending={pending || undefined}\n    >\n      {host && inView ? (\n        // The workshop is itself a lab; below the boundary a story sees no lab, trial or theme above it, as in a\n        // document of its own.\n        <LabBoundary>\n          <OverlayPortalProvider container={host}>{children(globals)}</OverlayPortalProvider>\n        </LabBoundary>\n      ) : null}\n    </div>\n  );\n}\n","import type { RenderContext } from '@weasel-js/labkit';\nimport { type RefObject, useCallback, useEffect, useMemo, useRef } from 'react';\nimport type { FrameSetup } from '../frame/FrameController';\nimport { StoryHost } from '../frame/StoryHost';\nimport type { Globals } from '../protocol/messages';\nimport type { LoadedStory, StoryContext } from '../story/types';\nimport { isGlobalsPath, storyConfig } from './globals';\nimport { TrialHost } from './TrialHost';\n\nexport interface StoryTrialProps {\n  story: LoadedStory;\n  setup: FrameSetup;\n  /** The trial's config and state; the story reads and writes them through its `StoryContext`. */\n  ctx: Pick<RenderContext<unknown, unknown>, 'config' | 'state' | 'setConfig' | 'setState'>;\n  hostRef?: RefObject<HTMLElement | null>;\n  onRendered?: () => void;\n  /** A render throw, after the boundary has shown it. */\n  onError?: (error: unknown) => void;\n}\n\n/** A story rendered in the workshop document, inside a `TrialHost`, from the trial's own config and state. */\nexport function StoryTrial({ story, setup, ctx, hostRef, onRendered, onError }: StoryTrialProps) {\n  const latest = useRef(ctx);\n  latest.current = ctx;\n  const config = useMemo(() => storyConfig(ctx.config), [ctx.config]);\n\n  // A trial opened on the provisional instrument starts at `null`; the story's own initial state fills it once.\n  const seeded = useRef(false);\n  useEffect(() => {\n    if (seeded.current || ctx.state !== null || !story.initialState) return;\n    seeded.current = true;\n    ctx.setState(story.initialState(config));\n  }, [ctx, story, config]);\n\n  // Each new input retries a render the boundary caught, as the frame did on each message.\n  const input = useRef({ config, state: ctx.state, key: 0 });\n  if (input.current.config !== config || input.current.state !== ctx.state) {\n    input.current = { config, state: ctx.state, key: input.current.key + 1 };\n  }\n  const resetKey = input.current.key;\n\n  // Stable, as the frame's were: a story may list them as effect dependencies.\n  // The pins belong to the trial; a story cannot see them, so it cannot set them either.\n  const setConfig = useCallback((path: string, value: unknown) => {\n    if (!isGlobalsPath(path)) latest.current.setConfig(path, value);\n  }, []);\n  const setState = useCallback((next: unknown) => latest.current.setState(next), []);\n\n  const decorators = setup.decorators ?? [];\n  const render = (globals: Globals) => {\n    const storyCtx: StoryContext = {\n      config,\n      setConfig,\n      state: ctx.state,\n      setState,\n      globals,\n      title: story.title,\n      name: story.name,\n    };\n    return (\n      <StoryHost\n        story={story}\n        ctx={storyCtx}\n        decorators={decorators}\n        resetKey={resetKey}\n        onError={(error) => onError?.(error)}\n      />\n    );\n  };\n\n  return (\n    <TrialHost\n      layout={story.layout}\n      setup={setup}\n      config={ctx.config}\n      {...(hostRef ? { hostRef } : {})}\n      {...(onRendered ? { onRendered } : {})}\n    >\n      {render}\n    </TrialHost>\n  );\n}\n"]}