forgebook 0.3.2 → 0.3.3

package/README.md

@@ -1095,8 +1095,9 @@ it, and the Embed button's **Follow the story's height** adds the few lines that
 iframe, since its modules are loaded as those of its own origin.
 
 An embed sends nothing but the height and listens to nothing from the page around it, and it keeps working where a browser
-denies a third-party frame its storage. What it does take from outside is its address: like the catalogue's own `args`, the
-address reaches the story's props, so a story that renders a prop as raw HTML should not be published for anyone to frame.
+denies a third-party frame its storage. What it does take from outside is its address, checked as the catalogue's own
+`args` are: a story receives only the props its panel can set, with a value of their type. A prop the story does declare
+still reaches it, so a story that renders a prop as raw HTML should not be published for anyone to frame.
 And a height says something: a page that can reach your catalogue can tell whether a story exists.
 
 Forgebook sets no framing headers, on the dev server or in a build, so what you host keeps the rules it has. To choose who may

package/dist/bin/forgebook/agents.md

@@ -84,9 +84,9 @@ in JSON with `--json`, and every answer about a story carries the links that ope
   the window (`style={{ flex: 1 }}`) needs `parameters.layout: "fullscreen"`; the app's root providers
   (`SafeAreaProvider`, a theme) go in the preview's decorators. A component that calls a native module or a gesture
   of native code does not draw in a browser: give it a `.web.tsx` file, or mock what it calls in the preview.
-- A link may carry the Props tab's values (`args=` in the address, JSON). The catalogue applies only the props the
-  story's panel can set, with a value of their type; to show a story with other values, write a story with those
-  args rather than a link.
+- A link or an embed may carry the Props tab's values (`args=` in the address, JSON). The catalogue applies only the
+  props the story's panel can set, with a value of their type; to show a story with other values, write a story with
+  those args rather than a link.
 - `parameters.height` gives the frame the room an overlay the story opens needs (a menu, a popover), in CSS px.
 - A screen meant for a phone or a tablet can be shown in a drawn device by default:
   `parameters: { device: { frame: true, model: "iphone-16" } }` (on the meta for every story; `orientation:

package/dist/src/addressArgs.d.ts

@@ -12,12 +12,16 @@
  * left out and reported. A value that is code never comes from an address: a named value is looked up among the
  * source's own entries only, never through an object's prototype (`constructor`). Pure.
  *
+ * A frame takes values from one kind of message only, whichever frame it is (the stage's, an embed's, a plugin's aside),
+ * so `checkedArgsMessage` builds it, from nothing but what this check sealed (`AcceptedArgs`): a page that skipped the
+ * check has no value of that type to give it. A test holds every other module to not writing the message itself.
+ *
  * @module
  */
 import type { StoryControlsSetting } from "@forgebook/story-format/source";
 import { type PanelArgTypes, type PanelProp } from "./argTypes.ts";
 import type { PropDocs } from "./componentDocs.ts";
-import { type ArgValue, type PanelArgs } from "./messages.ts";
+import { type ArgValue, type PanelArgs, type ShellMessage } from "./messages.ts";
 import { type NamedValues } from "./namedValues.ts";
 /** What a story declares about the args the panel sets, as the shell knows it once the story's frame is ready. */
 export type ArgDeclaration = {
@@ -47,7 +51,20 @@ export type CheckedArgs = {
     readonly accepted: PanelArgs;
     /** The values left out, in the address's order. */
     readonly dropped: readonly DroppedArg[];
+    /** The values the story receives, as a frame can be told them. */
+    readonly sealed: AcceptedArgs;
+};
+/** What only this module can write on values: the type system's proof that they went through the check. */
+declare const ACCEPTED: unique symbol;
+/** Values the check accepted, the only ones a frame can be told. */
+export type AcceptedArgs = {
+    /** The values. */
+    readonly values: PanelArgs;
+    /** Marks them as the check's. */
+    readonly [ACCEPTED]: true;
 };
+/** No values: what a frame the address has no say in receives (a story on a docs page). */
+export declare const NO_ACCEPTED_ARGS: AcceptedArgs;
 /**
  * The props the panel sets for a story, whatever the address says: the component's props with the `argTypes` over
  * them and the args only the `argTypes` name, then the story's own args the two leave out, each kept only when the
@@ -72,3 +89,10 @@ export declare const isValueOfProp: (prop: PanelProp, value: ArgValue, namedValu
  * @param declaration - what the story declares.
  */
 export declare const checkedAddressArgs: (args: PanelArgs, declaration: ArgDeclaration) => CheckedArgs;
+/**
+ * The message that gives a frame its values.
+ *
+ * @param accepted - the values `checkedAddressArgs` accepted.
+ */
+export declare const checkedArgsMessage: (accepted: AcceptedArgs) => ShellMessage;
+export {};

package/dist/src/addressArgs.js

@@ -1,6 +1,10 @@
 import { panelProps, settableProps } from "./argTypes.js";
 import { isChoiceList, isNamedArg } from "./messages.js";
 import { namedValueOf } from "./namedValues.js";
+/** What only this module can write on values: the type system's proof that they went through the check. */
+const ACCEPTED = Symbol("accepted");
+/** No values: what a frame the address has no say in receives (a story on a docs page). */
+export const NO_ACCEPTED_ARGS = { values: {}, [ACCEPTED]: true };
 /** A prop made from one of the story's own args, for an arg neither the types nor the `argTypes` name. */
 const propOfStoryArg = (name, value) => {
     const prop = { name, type: "", description: "", isRequired: false };
@@ -105,5 +109,15 @@ export const checkedAddressArgs = (args, declaration) => {
         else
             accepted.push([name, value]);
     }
-    return { accepted: Object.fromEntries(accepted), dropped };
+    const values = Object.fromEntries(accepted);
+    return { accepted: values, dropped, sealed: { values, [ACCEPTED]: true } };
 };
+/**
+ * The message that gives a frame its values.
+ *
+ * @param accepted - the values `checkedAddressArgs` accepted.
+ */
+export const checkedArgsMessage = (accepted) => ({
+    type: "forgebook:args",
+    args: accepted.values
+});

package/dist/src/shell/EmbedPage.js

@@ -15,9 +15,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import "./embed.css";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { checkedArgsMessage } from "../addressArgs.js";
 import { addressArgsFor } from "../addressTexts.js";
 import { EMBED_SIZE_TYPE } from "../embed.js";
 import { parsePanelArgsParam } from "../messages.js";
+import { sourceFiles } from "../sourceFiles.js";
 import { storyBackground } from "../storyBackground.js";
 import { NOT_FIXED, withFixed } from "../storyGlobals.js";
 import { findStory, storyTree } from "../storyTree.js";
@@ -28,11 +30,17 @@ import { framesOrigin } from "./framesOrigin.js";
 import { LATER_STRINGS } from "./laterStrings.js";
 import { shellIsDark } from "./shellScheme.js";
 import { STRINGS } from "./strings.js";
+import { useAddressArgs } from "./useAddressArgs.js";
 import { APPEARANCE_ATTRIBUTE } from "./useAppearance.js";
 import { useFrameMessages } from "./useFrameMessages.js";
+import { usePanelDocs } from "./usePanelDocs.js";
 import { useSystemDark } from "./useSystemDark.js";
 /** The height of the frame before its story reports its own, in CSS px, in a page with no height of its own yet. */
 const WAITING_HEIGHT = 240;
+/** No actions, before the frame reported its own. */
+const NO_ACTIONS = [];
+/** No `argTypes`, before the frame reported its own. */
+const NO_ARG_TYPES = {};
 /**
  * Tells the page around the embed how tall the story is.
  *
@@ -98,17 +106,34 @@ const EmbedNotice = ({ message, detail, isFailure }) => {
  *
  * @param props - the story, the view, its args and the frame page.
  */
-const EmbedStory = ({ location, view, panelArgs, frameUrl }) => {
+const EmbedStory = ({ location, view, panelArgs, loadDocs, namedValues, frameUrl }) => {
     const catalogue = useCatalogue();
     const { story, component, source } = location;
     const [fixed, setFixed] = useState(NOT_FIXED);
     const [failure, setFailure] = useState(undefined);
+    const [ready, setReady] = useState(undefined);
+    const storyRef = useRef(null);
+    // the docs only serve the check: an embed whose address names no value does not load them
+    const hasValues = Object.keys(panelArgs).length > 0;
+    const docs = usePanelDocs(hasValues ? loadDocs : undefined, component.name, ready?.args, ready?.actions ?? NO_ACTIONS);
+    // whoever embeds the story writes its address, as whoever shares a link does: the same check applies
+    const addressArgs = useAddressArgs({
+        panelArgs,
+        docs,
+        storyArgs: ready?.args,
+        argTypes: ready?.argTypes ?? NO_ARG_TYPES,
+        controls: ready?.controls ?? "all",
+        namedValues,
+        frames: storyRef
+    });
     const { heights, settled } = useFrameMessages({
         onReady: (frame, message) => {
             setFixed(message.fixed);
             setFailure(undefined);
-            const args = { type: "forgebook:args", args: panelArgs };
-            frame.postMessage(args, framesOrigin());
+            setReady(message);
+            const accepted = addressArgs.acceptedFor(message);
+            if (accepted !== undefined)
+                frame.postMessage(checkedArgsMessage(accepted), framesOrigin());
         },
         onCall: () => undefined,
         onFailed: (_storyId, message) => setFailure(message)
@@ -135,7 +160,7 @@ const EmbedStory = ({ location, view, panelArgs, frameUrl }) => {
     useHostHeight(failure === undefined ? ownHeight : undefined);
     return (_jsxs("main", { className: "forgebook-embed", style: {
             backgroundColor: storyBackground(source.background, shownView, catalogue, isSystemDark)
-        }, children: [failure === undefined ? null : (_jsx(EmbedNotice, { message: STRINGS.embedFailed, detail: failure, isFailure: true })), _jsx("div", { className: "forgebook-embed__story", hidden: failure !== undefined, style: { width: shownView.width === "fill" ? undefined : shownView.width }, children: _jsx(FrameView, { title: STRINGS.frameTitle(component.name, story.name), address: address, heights: heights, settled: settled, fallbackHeight: WAITING_HEIGHT, sceneHeight: Math.max(story.height ?? 0, windowHeight), fixedHeight: fixedHeight }) })] }));
+        }, children: [failure === undefined ? null : (_jsx(EmbedNotice, { message: STRINGS.embedFailed, detail: failure, isFailure: true })), _jsx("div", { ref: storyRef, className: "forgebook-embed__story", hidden: failure !== undefined, style: { width: shownView.width === "fill" ? undefined : shownView.width }, children: _jsx(FrameView, { title: STRINGS.frameTitle(component.name, story.name), address: address, heights: heights, settled: settled, fallbackHeight: WAITING_HEIGHT, sceneHeight: Math.max(story.height ?? 0, windowHeight), fixedHeight: fixedHeight }) })] }));
 };
 /**
  * The page: the story the address names, or why there is none.
@@ -150,15 +175,16 @@ const EmbedContent = ({ title, sources, frameUrl, addressTexts }) => {
     const storyId = params.get("story");
     const location = storyId === null ? undefined : findStory(tree, storyId);
     const name = location?.component.name;
+    // one object for as long as the address is read: the check is not run again for each render
+    const panelArgs = useMemo(() => addressArgsFor(parsePanelArgsParam(params.get("args")), addressTexts), [params, addressTexts]);
     useEffect(() => {
         document.title = name === undefined ? title : `${name} · ${title}`;
     }, [name, title]);
     if (location === undefined) {
         return (_jsx("main", { className: "forgebook-embed", children: _jsx(EmbedNotice, { message: storyId === null ? LATER_STRINGS.embedNoStory : LATER_STRINGS.embedUnknownStory(storyId) }) }));
     }
-    return (_jsx(EmbedStory, { location: location, view: parseView(params.toString(), catalogue), 
-        // whoever embeds the story writes its address, as whoever shares a link does: the same rule applies
-        panelArgs: addressArgsFor(parsePanelArgsParam(params.get("args")), addressTexts), frameUrl: frameUrl }));
+    const source = sources.find((each) => each.id === location.source.id);
+    return (_jsx(EmbedStory, { location: location, view: parseView(params.toString(), catalogue), panelArgs: panelArgs, loadDocs: source === undefined ? undefined : sourceFiles(source).docs[location.story.file], namedValues: source?.namedValues, frameUrl: frameUrl }));
 };
 /**
  * One story alone, inside the catalogue's settings.

package/dist/src/shell/PluginBlockHost.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @module
  */
 import { useCallback, useMemo, useRef } from "react";
+import { NO_ACCEPTED_ARGS } from "../addressArgs.js";
 import { findStory } from "../storyTree.js";
 import { frameAddress, isComparing, liveView } from "../viewState.js";
 import { showAsideStory } from "./asideStory.js";
@@ -29,7 +30,7 @@ export const PluginBlockHost = ({ load, pluginId, argument, body, page }) => {
             address: frameAddress(frameUrl, options.storyId, view, switches),
             width: "fill",
             background: backgroundOf(location.source),
-            args: {},
+            args: NO_ACCEPTED_ARGS,
             view: isComparing(view) ? undefined : liveView(view)
         });
     }, []);

package/dist/src/shell/PluginTabHost.js

@@ -5,7 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @module
  */
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { showAsideStory } from "./asideStory.js";
 import { PluginViewHost, pluginText, useShellAppearance } from "./PluginViewHost.js";
 /**
@@ -18,7 +18,24 @@ export const PluginTabHost = ({ load, pluginId, strings, story, report, aside })
     // read when the view asks: the stage of that moment, without a new context for every change of the stage
     const asideRef = useRef(aside);
     asideRef.current = aside;
-    const showStory = useCallback((target, { title }) => showAsideStory(target, title, asideRef.current), []);
+    const asideFrames = useRef(new Set());
+    const showStory = useCallback((target, { title }) => {
+        const frame = showAsideStory(target, title, asideRef.current);
+        asideFrames.current.add(frame);
+        return {
+            remove: () => {
+                asideFrames.current.delete(frame);
+                frame.remove();
+            }
+        };
+    }, []);
+    const { args } = aside;
+    useEffect(() => {
+        if (args === undefined)
+            return;
+        for (const frame of asideFrames.current)
+            frame.settle(args);
+    }, [args]);
     const text = useMemo(() => pluginText(strings, pluginId), [strings, pluginId]);
     const context = useMemo(() => ({ appearance, text, story, report, showStory }), [appearance, text, story, report, showStory]);
     return _jsx(PluginViewHost, { load: load, context: context });

package/dist/src/shell/Stage.js

@@ -12,9 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module
  */
 import { useEffect, useMemo, useRef, useState } from "react";
+import { checkedArgsMessage } from "../addressArgs.js";
 import { panelProps, settableProps } from "../argTypes.js";
 import { matrixOf, matrixProps } from "../matrix.js";
-import { panelArgsParam, parsePanelArgsParam } from "../messages.js";
+import { panelArgsParam } from "../messages.js";
 import { withFixed, withOwnFixed } from "../storyGlobals.js";
 import { frameAddress, isComparing, liveView, schemeOf, viewParams } from "../viewState.js";
 import { useStoryClockControls } from "./ClockControls.js";
@@ -127,7 +128,8 @@ export const Stage = ({ component, story, view: ownView, onViewChange: onOwnView
         storyArgs: storyArgs.get(story.id),
         argTypes: panel.argTypes,
         controls: panel.controls,
-        namedValues
+        namedValues,
+        frames: storyRef
     });
     const acceptedArgs = addressArgs.accepted;
     const values = { ...storyArgs.get(story.id), ...acceptedArgs };
@@ -160,7 +162,7 @@ export const Stage = ({ component, story, view: ownView, onViewChange: onOwnView
             // checked against the shown story's declaration only: a late message of the story shown before sends nothing
             const accepted = message.storyId === story.id ? addressArgs.acceptedFor(message) : undefined;
             if (accepted !== undefined)
-                send({ type: "forgebook:args", args: accepted });
+                send(checkedArgsMessage(accepted));
             send({ type: "forgebook:matrix", matrix });
             // the view may have changed while the frame loaded
             if (!isComparing(view))
@@ -186,14 +188,6 @@ export const Stage = ({ component, story, view: ownView, onViewChange: onOwnView
     // the docs may arrive after the frames: they learn the events then
     useEffect(() => tellFrames(storyRef.current, { type: "forgebook:events", names: eventNames }), [eventNames]);
     useEffect(() => tellFrames(storyRef.current, { type: "forgebook:matrix", matrix }), [matrix]);
-    // the values reach the frames from the address, so going back in the history sets them too; compared as text, so
-    // a frame is told again only when they change
-    const { acceptedParam } = addressArgs;
-    useEffect(() => {
-        if (acceptedParam === undefined)
-            return;
-        tellFrames(storyRef.current, { type: "forgebook:args", args: parsePanelArgsParam(acceptedParam) });
-    }, [acceptedParam]);
     // a change starts from the values the story takes: one the address named and the story does not is let go
     const changeValue = (name, value) => {
         const { [name]: _removed, ...rest } = acceptedArgs;
@@ -235,7 +229,8 @@ export const Stage = ({ component, story, view: ownView, onViewChange: onOwnView
             address: deviceAddress(frameAddress(frameUrl, story.id, view, switches), framed),
             width: framed?.area.width ?? view.width,
             background: backgroundOf(view),
-            args: panelArgs,
+            // as the stage's frames receive them: an aside asked for while the check waits for the docs is told when it ends
+            args: addressArgs.checked,
             view: liveView(view)
         }
     });

package/dist/src/shell/asideStory.d.ts

@@ -7,7 +7,7 @@
  *
  * @module
  */
-import { type PanelArgs } from "../messages.ts";
+import { type AcceptedArgs } from "../addressArgs.ts";
 import type { PluginStoryFrame } from "../plugin.ts";
 import type { LiveView, StageWidth } from "../viewState.ts";
 /** How the story is drawn again. */
@@ -18,11 +18,24 @@ export type AsideStory = {
     readonly width: StageWidth;
     /** The colour its page has in the view; none without one. */
     readonly background: string | undefined;
-    /** The values set in the panel, sent once it is ready. */
-    readonly args: PanelArgs;
+    /**
+     * The values the story accepted of the panel's, sent once it is ready; `undefined` while the check waits for the
+     * story's docs, when the frame draws the story's own and `AsideFrame.settle` gives them.
+     */
+    readonly args: AcceptedArgs | undefined;
     /** The view's live part, sent once it is ready; none when the address already says it all (the compare view). */
     readonly view: LiveView | undefined;
 };
+/** A story's second frame, as the shell holds it. */
+export type AsideFrame = PluginStoryFrame & {
+    /**
+     * Gives a frame drawn before the check ended the values it accepted; a frame that has them keeps them, since it shows
+     * the panel's values of the moment it was asked for.
+     *
+     * @param args - the accepted values.
+     */
+    readonly settle: (args: AcceptedArgs) => void;
+};
 /**
  * Draws a story's second frame in an element.
  *
@@ -31,4 +44,4 @@ export type AsideStory = {
  * @param aside - how the story is drawn.
  * @returns what takes it away.
  */
-export declare const showAsideStory: (target: HTMLElement, title: string, aside: AsideStory) => PluginStoryFrame;
+export declare const showAsideStory: (target: HTMLElement, title: string, aside: AsideStory) => AsideFrame;

package/dist/src/shell/asideStory.js

@@ -7,6 +7,7 @@
  *
  * @module
  */
+import { checkedArgsMessage } from "../addressArgs.js";
 import { isFrameMessage } from "../messages.js";
 import { framesOrigin, isFromFrames, storyFrameAttributes } from "./framesOrigin.js";
 import { FRAME_ASIDE_ATTRIBUTE } from "./useFrameMessages.js";
@@ -32,14 +33,18 @@ export const showAsideStory = (target, title, aside) => {
     frame.style.width = aside.width === "fill" ? "100%" : `${aside.width}px`;
     if (aside.background !== undefined)
         target.style.backgroundColor = aside.background;
+    let args = aside.args;
+    let isReady = false;
+    const send = (message) => frame.contentWindow?.postMessage(message, framesOrigin());
     const answer = (event) => {
         const story = frame.contentWindow;
         if (!isFromFrames(event) || event.source !== story || story === null)
             return;
         if (!isFrameMessage(event.data) || event.data.type !== "forgebook:ready")
             return;
-        const send = (message) => story.postMessage(message, framesOrigin());
-        send({ type: "forgebook:args", args: aside.args });
+        isReady = true;
+        if (args !== undefined)
+            send(checkedArgsMessage(args));
         if (aside.view !== undefined)
             send({ type: "forgebook:view", view: aside.view });
     };
@@ -50,6 +55,13 @@ export const showAsideStory = (target, title, aside) => {
         remove: () => {
             window.removeEventListener("message", answer);
             frame.remove();
+        },
+        settle: (accepted) => {
+            if (args !== undefined)
+                return;
+            args = accepted;
+            if (isReady)
+                send(checkedArgsMessage(accepted));
         }
     };
 };

package/dist/src/shell/useAddressArgs.d.ts

@@ -1,4 +1,16 @@
-import { type ArgDeclaration, type DroppedArg } from "../addressArgs.ts";
+/**
+ * The props panel's values an address names, as a page hands them to the story's frames: only those the story declares,
+ * with a value of the declared type, once the story's frame and its component's docs say what that is.
+ *
+ * @remarks
+ * The address is written by whoever shares the link, so its values are checked here, in the core, before any frame
+ * receives them, whatever framework draws the story (`addressArgs.ts`). Until the story's frame is ready and its docs
+ * are read (or known to be missing), no value is sent: the frame draws the story's own args meanwhile.
+ *
+ * @module
+ */
+import { type RefObject } from "react";
+import { type AcceptedArgs, type ArgDeclaration, type DroppedArg } from "../addressArgs.ts";
 import type { ComponentDocs } from "../componentDocs.ts";
 import { type PanelArgs } from "../messages.ts";
 import type { NamedValues } from "../namedValues.ts";
@@ -29,11 +41,15 @@ export type AddressArgsInput = {
     readonly controls: ReadyDeclaration["controls"];
     /** The source's named values; none when it has none. */
     readonly namedValues: NamedValues | undefined;
+    /** The element that holds the story's frames, which hear each change of the checked values. */
+    readonly frames: RefObject<HTMLElement | null>;
 };
 /** The address's values once checked, and how to check them for a frame that has just reported ready. */
 export type AddressArgs = {
     /** The values the story receives; none before its declaration is known. */
     readonly accepted: PanelArgs;
+    /** The same values for a frame that waits for the check; `undefined` until the declaration is known. */
+    readonly checked: AcceptedArgs | undefined;
     /** The values left out, with the reason. */
     readonly dropped: readonly DroppedArg[];
     /**
@@ -45,7 +61,7 @@ export type AddressArgs = {
      * The values to send a frame that has just reported ready, from its own message, since the state that holds it
      * updates after; none while the docs load.
      */
-    readonly acceptedFor: (ready: ReadyDeclaration) => PanelArgs | undefined;
+    readonly acceptedFor: (ready: ReadyDeclaration) => AcceptedArgs | undefined;
 };
 /**
  * The address's values, checked against what the story declares.

package/dist/src/shell/useAddressArgs.js

@@ -1,6 +1,6 @@
 /**
- * The props panel's values an address names, as the stage hands them to the story's frames: only those the story
- * declares, with a value of the declared type, once the story's frame and its component's docs say what that is.
+ * The props panel's values an address names, as a page hands them to the story's frames: only those the story declares,
+ * with a value of the declared type, once the story's frame and its component's docs say what that is.
  *
  * @remarks
  * The address is written by whoever shares the link, so its values are checked here, in the core, before any frame
@@ -9,9 +9,10 @@
  *
  * @module
  */
-import { useMemo } from "react";
-import { checkedAddressArgs } from "../addressArgs.js";
+import { useEffect, useMemo, useRef } from "react";
+import { checkedAddressArgs, checkedArgsMessage } from "../addressArgs.js";
 import { panelArgsParam } from "../messages.js";
+import { tellFrames } from "./FrameView.js";
 /**
  * What a story declares, once both its frame and its docs answered.
  *
@@ -43,20 +44,31 @@ const NO_NAMED_VALUES = {};
  * @param input - the address's values and what the stage knows of the story.
  */
 export const useAddressArgs = (input) => {
-    const { panelArgs, docs, storyArgs, argTypes, controls } = input;
+    const { panelArgs, docs, storyArgs, argTypes, controls, frames } = input;
     const namedValues = input.namedValues ?? NO_NAMED_VALUES;
     const checked = useMemo(() => {
         const ready = storyArgs === undefined ? undefined : { args: storyArgs, argTypes, controls };
         const declaration = declarationOf(docs, ready, namedValues);
         return declaration === undefined ? undefined : checkedAddressArgs(panelArgs, declaration);
     }, [panelArgs, docs, storyArgs, argTypes, controls, namedValues]);
+    const acceptedParam = checked === undefined ? undefined : panelArgsParam(checked.accepted);
+    // the values reach the frames from the address, so going back in the history sets them too; compared as text, so a
+    // frame is told again only when they change
+    const sealedRef = useRef(checked?.sealed);
+    sealedRef.current = checked?.sealed;
+    useEffect(() => {
+        if (acceptedParam === undefined || sealedRef.current === undefined)
+            return;
+        tellFrames(frames.current, checkedArgsMessage(sealedRef.current));
+    }, [acceptedParam, frames]);
     return {
         accepted: checked?.accepted ?? NO_ARGS,
+        checked: checked?.sealed,
         dropped: checked?.dropped ?? NOTHING_DROPPED,
-        acceptedParam: checked === undefined ? undefined : panelArgsParam(checked.accepted),
+        acceptedParam,
         acceptedFor: (message) => {
             const declaration = declarationOf(docs, message, namedValues);
-            return declaration === undefined ? undefined : checkedAddressArgs(panelArgs, declaration).accepted;
+            return declaration === undefined ? undefined : checkedAddressArgs(panelArgs, declaration).sealed;
         }
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forgebook",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "See every component in every theme, contrast, language and width: CSF stories, one frame per story, and a props table from the components' types.",
   "keywords": [
     "react",
@@ -244,7 +244,7 @@
     "lightningcss": "1.33.0",
     "marked": "18.1.0",
     "typescript-6": "npm:typescript@6.0.3",
-    "@forgebook/story-format": "0.2.3"
+    "@forgebook/story-format": "0.2.4"
   },
   "peerDependencies": {
     "@testing-library/dom": "^10.4.0",