@forgebook/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ensiria
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# @forgebook/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React for [Forgebook](https://www.npmjs.com/package/forgebook): the story types, the renderer the frame mounts a story
+with, and the adapter that reads a React component's props from its TypeScript types.
+
+**Requirements:** React 18.2 or 19 · `forgebook` · Vite 8 · [MIT licence](https://github.com/Ensiria/forgebook/blob/develop/packages/react/LICENSE)
+
+```sh
+npm install --save-dev forgebook @forgebook/react
+```
+
+The catalogue's configuration names it as its framework:
+
+```ts
+// forgebook.config.ts
+import { react } from "@forgebook/react/vite";
+import { defineConfig } from "forgebook";
+
+export default defineConfig({ framework: react(), title: "My components", stories: ["src/**/*.stories.tsx"] });
+```
+
+and the stories take their types from it:
+
+```tsx
+import type { Meta, Story } from "@forgebook/react";
+
+import { Badge } from "./Badge";
+
+export default { title: "Components/Badge", component: Badge } satisfies Meta<typeof Badge>;
+
+export const Default: Story<typeof Badge> = { args: { label: "New" } };
+```
+
+| Import | What it is |
+|---|---|
+| `@forgebook/react` | `Meta`, `Story`, `Decorator`, `Preview`: CSF 3 typed for React, the args from the component's props |
+| `@forgebook/react/vite` | `react()`, the framework adapter of `forgebook.config.ts` |
+| `@forgebook/react/texts`, `@forgebook/react/clock` | A story's texts in the catalogue's language, and the story clock, as hooks |
+
+The rest of its exports are what the catalogue loads itself. Getting started, the catalogue's features and its
+commands: [Forgebook's README](https://github.com/Ensiria/forgebook/blob/develop/packages/forgebook/README.md).

package/dist/src/StoryErrorBoundary.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The boundary around a story: an error thrown while the story renders goes to the frame, which shows it with its
+ * stack and reports it, instead of leaving an empty frame that never says it is ready.
+ *
+ * @remarks
+ * React catches render errors only in a class component (`getDerivedStateFromError`), so this is the package's one
+ * class. While the error stands it draws nothing: the frame draws the error, the same for every framework. A new
+ * `resetKey` (the story's args, changed by the props panel or Replay) clears the error and renders the story again,
+ * so a value that made it throw can be changed back.
+ *
+ * @module
+ */
+import { Component, type ErrorInfo, type ReactNode } from "react";
+/** The boundary's props. */
+export type StoryErrorBoundaryProps = {
+    /** The story. */
+    readonly children: ReactNode;
+    /** Renders the story again after an error when it changes. */
+    readonly resetKey: unknown;
+    /** Called once with the error when the story fails to render. */
+    readonly onError: (error: Error) => void;
+};
+/** Whether the story threw. */
+type StoryErrorBoundaryState = {
+    readonly hasError: boolean;
+};
+/** The boundary. */
+export declare class StoryErrorBoundary extends Component<StoryErrorBoundaryProps, StoryErrorBoundaryState> {
+    /** No error at first. */
+    state: StoryErrorBoundaryState;
+    /**
+     * Whether the standing error was handed to the frame: React may catch the same failure twice (it renders the tree
+     * again before giving up), and the frame hears of each error once.
+     */
+    private isReported;
+    /**
+     * Notes the error, so the next render draws nothing.
+     *
+     * @returns the state with the error.
+     */
+    static getDerivedStateFromError(): StoryErrorBoundaryState;
+    /**
+     * Hands the error to the frame.
+     *
+     * @param error - what the story threw.
+     * @param _info - React's component stack, which the error's own stack already covers.
+     */
+    componentDidCatch(error: unknown, _info: ErrorInfo): void;
+    /**
+     * Clears the error when the story's args change.
+     *
+     * @param previous - the props before the change.
+     */
+    componentDidUpdate(previous: StoryErrorBoundaryProps): void;
+    /** The story, or nothing while its error stands. */
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=StoryErrorBoundary.d.ts.map

package/dist/src/StoryErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/StoryErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,4BAA4B;AAC5B,MAAM,MAAM,uBAAuB,GAAG;IACpC,iBAAiB;IACjB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,+BAA+B;AAC/B,KAAK,uBAAuB,GAAG;IAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9D,oBAAoB;AACpB,qBAAa,kBAAmB,SAAQ,SAAS,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IACjG,yBAAyB;IAChB,KAAK,EAAE,uBAAuB,CAAuB;IAE9D;;;OAGG;IACH,OAAO,CAAC,UAAU,CAAS;IAE3B;;;;OAIG;IACH,MAAM,CAAC,wBAAwB,IAAI,uBAAuB;IAI1D;;;;;OAKG;IACM,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;IAMlE;;;;OAIG;IACM,kBAAkB,CAAC,QAAQ,EAAE,uBAAuB,GAAG,IAAI;IAOpE,oDAAoD;IAC3C,MAAM,IAAI,SAAS;CAG7B"}

package/dist/src/StoryErrorBoundary.js

@@ -0,0 +1,59 @@
+/**
+ * The boundary around a story: an error thrown while the story renders goes to the frame, which shows it with its
+ * stack and reports it, instead of leaving an empty frame that never says it is ready.
+ *
+ * @remarks
+ * React catches render errors only in a class component (`getDerivedStateFromError`), so this is the package's one
+ * class. While the error stands it draws nothing: the frame draws the error, the same for every framework. A new
+ * `resetKey` (the story's args, changed by the props panel or Replay) clears the error and renders the story again,
+ * so a value that made it throw can be changed back.
+ *
+ * @module
+ */
+import { Component } from "react";
+/** The boundary. */
+export class StoryErrorBoundary extends Component {
+    /** No error at first. */
+    state = { hasError: false };
+    /**
+     * Whether the standing error was handed to the frame: React may catch the same failure twice (it renders the tree
+     * again before giving up), and the frame hears of each error once.
+     */
+    isReported = false;
+    /**
+     * Notes the error, so the next render draws nothing.
+     *
+     * @returns the state with the error.
+     */
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    /**
+     * Hands the error to the frame.
+     *
+     * @param error - what the story threw.
+     * @param _info - React's component stack, which the error's own stack already covers.
+     */
+    componentDidCatch(error, _info) {
+        if (this.isReported)
+            return;
+        this.isReported = true;
+        this.props.onError(error instanceof Error ? error : new Error(String(error)));
+    }
+    /**
+     * Clears the error when the story's args change.
+     *
+     * @param previous - the props before the change.
+     */
+    componentDidUpdate(previous) {
+        if (this.state.hasError && previous.resetKey !== this.props.resetKey) {
+            this.isReported = false;
+            this.setState({ hasError: false });
+        }
+    }
+    /** The story, or nothing while its error stands. */
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}
+//# sourceMappingURL=StoryErrorBoundary.js.map

package/dist/src/StoryErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryErrorBoundary.js","sourceRoot":"","sources":["../../src/StoryErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAelE,oBAAoB;AACpB,MAAM,OAAO,kBAAmB,SAAQ,SAA2D;IACjG,yBAAyB;IAChB,KAAK,GAA4B,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAE9D;;;OAGG;IACK,UAAU,GAAG,KAAK,CAAC;IAE3B;;;;OAIG;IACH,MAAM,CAAC,wBAAwB;QAC7B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IACM,iBAAiB,CAAC,KAAc,EAAE,KAAgB;QACzD,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAChF,CAAC;IAED;;;;OAIG;IACM,kBAAkB,CAAC,QAAiC;QAC3D,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACrE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oDAAoD;IAC3C,MAAM;QACb,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC1D,CAAC;CACF"}

package/dist/src/clock.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The story clock for React components inside a story: the clock the catalogue runs, held at the Unix epoch outside a
+ * catalogue (D-504).
+ *
+ * @remarks
+ * The clock itself is the format's (`@forgebook/story-format/clock`); this module is how a React component reads it.
+ * The frame's renderer provides it (`reactRenderer.tsx`).
+ *
+ * @module
+ */
+import { type StoryClock } from "@forgebook/story-format/clock";
+/** The story clock of the frame: held at the Unix epoch outside a catalogue. */
+export declare const StoryClockContext: import("react").Context<StoryClock>;
+/**
+ * The story's clock, for a component inside a story.
+ *
+ * @returns the clock the catalogue runs for the story.
+ */
+export declare const useStoryClock: () => StoryClock;
+/**
+ * The story's current moment, drawn again at each tick of the clock.
+ *
+ * @returns the moment, in milliseconds since the Unix epoch.
+ */
+export declare const useStoryNow: () => number;
+//# sourceMappingURL=clock.d.ts.map

package/dist/src/clock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../src/clock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhF,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,qCAA+C,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAO,UAA2C,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,WAAW,QAAO,MAG9B,CAAC"}

package/dist/src/clock.js

@@ -0,0 +1,30 @@
+/**
+ * The story clock for React components inside a story: the clock the catalogue runs, held at the Unix epoch outside a
+ * catalogue (D-504).
+ *
+ * @remarks
+ * The clock itself is the format's (`@forgebook/story-format/clock`); this module is how a React component reads it.
+ * The frame's renderer provides it (`reactRenderer.tsx`).
+ *
+ * @module
+ */
+import { heldStoryClock } from "@forgebook/story-format/clock";
+import { createContext, useContext, useSyncExternalStore } from "react";
+/** The story clock of the frame: held at the Unix epoch outside a catalogue. */
+export const StoryClockContext = createContext(heldStoryClock(0));
+/**
+ * The story's clock, for a component inside a story.
+ *
+ * @returns the clock the catalogue runs for the story.
+ */
+export const useStoryClock = () => useContext(StoryClockContext);
+/**
+ * The story's current moment, drawn again at each tick of the clock.
+ *
+ * @returns the moment, in milliseconds since the Unix epoch.
+ */
+export const useStoryNow = () => {
+    const clock = useStoryClock();
+    return useSyncExternalStore(clock.subscribe, clock.now, clock.now);
+};
+//# sourceMappingURL=clock.js.map

package/dist/src/clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.js","sourceRoot":"","sources":["../../src/clock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,cAAc,EAAmB,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAExE,gFAAgF;AAChF,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAa,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9E;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAe,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;AAE7E;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE;IACtC,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACrE,CAAC,CAAC"}

package/dist/src/mountFrame.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The frame page of a React catalogue: Forgebook's frame, drawing its stories with React. Called by the page the
+ * plugin generates from the catalogue's configuration, not by an app.
+ *
+ * @module
+ */
+import { type FrameConfig } from "forgebook/frame";
+/**
+ * Shows the story the address names in the given element, drawn with React.
+ *
+ * @param container - the element the story renders into.
+ * @param config - the sources and the languages, as the shell's configuration gives them.
+ */
+export declare const mountFrame: (container: HTMLElement, config: Omit<FrameConfig, "renderer">) => Promise<void>;
+//# sourceMappingURL=mountFrame.d.ts.map

package/dist/src/mountFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountFrame.d.ts","sourceRoot":"","sources":["../../src/mountFrame.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,KAAK,WAAW,EAAqC,MAAM,iBAAiB,CAAC;AAItF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,WAAW,WAAW,EAAE,QAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,KAAG,OAAO,CAAC,IAAI,CAC/B,CAAC"}

package/dist/src/mountFrame.js

@@ -0,0 +1,16 @@
+/**
+ * The frame page of a React catalogue: Forgebook's frame, drawing its stories with React. Called by the page the
+ * plugin generates from the catalogue's configuration, not by an app.
+ *
+ * @module
+ */
+import { mountFrame as mountForgebookFrame } from "forgebook/frame";
+import { reactRenderer } from "./reactRenderer.js";
+/**
+ * Shows the story the address names in the given element, drawn with React.
+ *
+ * @param container - the element the story renders into.
+ * @param config - the sources and the languages, as the shell's configuration gives them.
+ */
+export const mountFrame = (container, config) => mountForgebookFrame(container, { ...config, renderer: reactRenderer });
+//# sourceMappingURL=mountFrame.js.map

package/dist/src/mountFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountFrame.js","sourceRoot":"","sources":["../../src/mountFrame.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAoB,UAAU,IAAI,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAsB,EAAE,MAAqC,EAAiB,EAAE,CACzG,mBAAmB,CAAC,SAAS,EAAE,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC"}

package/dist/src/reactRenderer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Forgebook's renderer for React: draws a story in a canvas with a React root of its own, inside the texts' and the
+ * clock's providers and the catalogue's decorators, and catches what the story throws.
+ *
+ * @remarks
+ * The frame runs everything else the same for every framework (`forgebook/renderer`): the play function, Replay, the
+ * matrix, the error shown in place of the story. Drawing again with other args keeps the story's state; the frame
+ * mounts it anew when a story must start over.
+ *
+ * @module
+ */
+import type { StoryRenderer } from "forgebook/renderer";
+/** React as the frame draws with it. */
+export declare const reactRenderer: StoryRenderer;
+//# sourceMappingURL=reactRenderer.d.ts.map

package/dist/src/reactRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactRenderer.d.ts","sourceRoot":"","sources":["../../src/reactRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAA8B,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkEpF,wCAAwC;AACxC,eAAO,MAAM,aAAa,EAAE,aAuC3B,CAAC"}

package/dist/src/reactRenderer.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { storyTextOf } from "@forgebook/story-format/texts";
+import { untracedStep } from "forgebook/renderer";
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { StoryClockContext } from "./clock.js";
+import { StoryErrorBoundary } from "./StoryErrorBoundary.js";
+import { storyElement } from "./storyElement.js";
+import { StoryTextsContext } from "./texts.js";
+/**
+ * The story in the texts' and the clock's providers; the language's provider is a decorator of the catalogue's
+ * preview, inside these.
+ *
+ * @param drawing - the story's texts and clock.
+ * @param story - the story's element, to wrap.
+ */
+const inProviders = (drawing, story) => (_jsx(StoryTextsContext.Provider, { value: drawing.texts, children: _jsx(StoryClockContext.Provider, { value: drawing.clock, children: story }) }));
+/**
+ * What a render and a decorator receive.
+ *
+ * @param drawing - the story's args, texts, clock and switches' values.
+ * @param canvasOf - the element the story is drawn in, read only when a story asks for it: on the server there is
+ *   none, and a story that reads it there fails as it would in a page rendered on the server.
+ */
+const contextOf = (drawing, canvasOf) => ({
+    args: drawing.args,
+    step: untracedStep,
+    text: storyTextOf(drawing.texts),
+    clock: drawing.clock,
+    globals: drawing.globals,
+    loaded: drawing.loaded,
+    ...drawing.identity,
+    parameters: drawing.story.parameters,
+    get canvasElement() {
+        return canvasOf();
+    }
+});
+/**
+ * The story, telling once that it is drawn: its effect runs after React put it in the page, and does not run when the
+ * story threw.
+ *
+ * @param props - the story's element and what to call once it is drawn.
+ */
+const Drawn = ({ children, onDrawn }) => {
+    const drawnRef = useRef(onDrawn);
+    useEffect(() => {
+        drawnRef.current();
+    }, []);
+    return children;
+};
+/** React as the frame draws with it. */
+export const reactRenderer = {
+    mount: (canvas, first, onError) => {
+        const root = createRoot(canvas);
+        let markDrawn = () => undefined;
+        const drawn = new Promise((resolve) => {
+            markDrawn = resolve;
+        });
+        let drawing = first;
+        const draw = () => {
+            root.render(inProviders(drawing, _jsx(StoryErrorBoundary, { resetKey: drawing.args, onError: onError, children: _jsx(Drawn, { onDrawn: markDrawn, children: storyElement(drawing.story, contextOf(drawing, () => canvas), drawing.decorators) }) })));
+        };
+        draw();
+        return {
+            drawn,
+            update: (next) => {
+                drawing = next;
+                draw();
+            },
+            unmount: () => root.unmount()
+        };
+    },
+    renderToString: (drawing) => {
+        const context = contextOf(drawing, () => document.body);
+        return renderToString(inProviders(drawing, storyElement(drawing.story, context, drawing.decorators)));
+    }
+};
+//# sourceMappingURL=reactRenderer.js.map

package/dist/src/reactRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactRenderer.js","sourceRoot":"","sources":["../../src/reactRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/src/stories.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The story types for React: what a story file of a React library is written with
+ * (`import type { Meta, Story } from "@forgebook/react"`).
+ *
+ * @remarks
+ * The format's types (`@forgebook/story-format/csf`) are generic over a framework; these name them for React, so a
+ * meta writes `satisfies Meta<typeof Button>` and its stories' args are the component's props, a prop that takes a
+ * text also as `storyText("key")`. Types only: a library that writes stories depends on this package, never on the
+ * catalogue that shows them (D-438).
+ *
+ * @module
+ */
+import type { Decorator as CsfDecorator, CsfMeta, CsfPreview, CsfStory, WrittenArg } from "@forgebook/story-format/csf";
+import type { ReactNode } from "react";
+/**
+ * Any function component (the library writes no class components); the props are what the stories' args fill in.
+ * Its parameter is `never` so a component of any props is assignable to it.
+ */
+export type AnyComponent = (props: never) => ReactNode;
+/** React, as the format's types read it. */
+export type ReactRenderer = {
+    /** A function component. */
+    readonly component: AnyComponent;
+    /** What a story draws. */
+    readonly storyResult: ReactNode;
+};
+/** A component's props, every one optional: what a story's args may set, and what its render receives. */
+export type ArgsOf<TComponent extends AnyComponent> = TComponent extends (props: infer TProps) => ReactNode ? Partial<TProps> : never;
+/**
+ * What a story's `args` may write: the component's props, every one optional, a prop that takes a text also as
+ * `storyText("key")`. The render and the play function receive `ArgsOf`, the text already in the shown language.
+ */
+export type WrittenArgsOf<TComponent extends AnyComponent> = TComponent extends (props: infer TProps) => ReactNode ? {
+    [TName in keyof TProps]?: WrittenArg<TProps[TName]>;
+} : never;
+/** A page with no component (a foundations page): no args. */
+export type NoComponent = () => ReactNode;
+/** A React story file's default export: `{ title, component, args… } satisfies Meta<typeof Button>`. */
+export type Meta<TComponent extends AnyComponent = NoComponent> = CsfMeta<ReactRenderer, TComponent, ArgsOf<TComponent>, WrittenArgsOf<TComponent>>;
+/** A React story: a named export of a story file. */
+export type Story<TComponent extends AnyComponent = NoComponent> = CsfStory<ReactRenderer, ArgsOf<TComponent>, WrittenArgsOf<TComponent>>;
+/** Wraps a React story: a provider, a container of a given width. */
+export type Decorator<TArgs> = CsfDecorator<ReactRenderer, TArgs>;
+/**
+ * A React catalogue's preview (`forgebook.preview.ts`): decorators around every story (its providers, the language's
+ * reading `context.globals.lang`), parameters under every meta's, a setup before any story renders.
+ */
+export type Preview = CsfPreview<ReactRenderer>;
+//# sourceMappingURL=stories.d.ts.map

package/dist/src/stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../src/stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EACV,SAAS,IAAI,YAAY,EACzB,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC;AAEvD,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC;IACjC,0BAA0B;IAC1B,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC;CACjC,CAAC;AAEF,0GAA0G;AAC1G,MAAM,MAAM,MAAM,CAAC,UAAU,SAAS,YAAY,IAAI,UAAU,SAAS,CAAC,KAAK,EAAE,MAAM,MAAM,KAAK,SAAS,GACvG,OAAO,CAAC,MAAM,CAAC,GACf,KAAK,CAAC;AAEV;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,UAAU,SAAS,YAAY,IAAI,UAAU,SAAS,CAC9E,KAAK,EAAE,MAAM,MAAM,KAChB,SAAS,GACV;KAAG,KAAK,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CAAE,GACvD,KAAK,CAAC;AAEV,8DAA8D;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,SAAS,CAAC;AAE1C,wGAAwG;AACxG,MAAM,MAAM,IAAI,CAAC,UAAU,SAAS,YAAY,GAAG,WAAW,IAAI,OAAO,CACvE,aAAa,EACb,UAAU,EACV,MAAM,CAAC,UAAU,CAAC,EAClB,aAAa,CAAC,UAAU,CAAC,CAC1B,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,KAAK,CAAC,UAAU,SAAS,YAAY,GAAG,WAAW,IAAI,QAAQ,CACzE,aAAa,EACb,MAAM,CAAC,UAAU,CAAC,EAClB,aAAa,CAAC,UAAU,CAAC,CAC1B,CAAC;AAEF,qEAAqE;AACrE,MAAM,MAAM,SAAS,CAAC,KAAK,IAAI,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC"}

package/dist/src/stories.js

@@ -0,0 +1 @@
+//# sourceMappingURL=stories.js.map

package/dist/src/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../src/stories.ts"],"names":[],"mappings":""}

package/dist/src/storyElement.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A story drawn as React: its render (or the meta's component) inside its decorators, the story's, the meta's and
+ * the catalogue's (its preview's), in that order outward. The story's canvas and each cell of its matrix draw it the
+ * same way.
+ *
+ * @module
+ */
+import type { StoryContext } from "@forgebook/story-format/csf";
+import type { LoadedArgs, LoadedDecorator, LoadedStory } from "forgebook/story-module";
+import { type ReactNode } from "react";
+/**
+ * The story with these args: its render (or the meta's component), inside its decorators.
+ *
+ * @param loaded - the story.
+ * @param context - the args and the canvas its render, play and decorators read.
+ * @param outer - the catalogue's decorators, outside the story's and the meta's.
+ */
+export declare const storyElement: (loaded: LoadedStory, context: StoryContext<LoadedArgs>, outer: readonly LoadedDecorator[]) => ReactNode;
+//# sourceMappingURL=storyElement.d.ts.map

package/dist/src/storyElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyElement.d.ts","sourceRoot":"","sources":["../../src/storyElement.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BxE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,QAAQ,WAAW,EACnB,SAAS,YAAY,CAAC,UAAU,CAAC,EACjC,OAAO,SAAS,eAAe,EAAE,KAChC,SAWF,CAAC"}

package/dist/src/storyElement.js

@@ -0,0 +1,39 @@
+/**
+ * A story drawn as React: its render (or the meta's component) inside its decorators, the story's, the meta's and
+ * the catalogue's (its preview's), in that order outward. The story's canvas and each cell of its matrix draw it the
+ * same way.
+ *
+ * @module
+ */
+import { createElement } from "react";
+/**
+ * A loaded story read as React's: the one place React's types meet the story file's module.
+ *
+ * @remarks
+ * The frame reads a story file without its types (`forgebook/story-module`: a function is taken with the signature
+ * CSF gives it), so what its functions return is `unknown` there. A React story file is written against
+ * `@forgebook/react`'s `Meta` and `Story`, and its catalogue's preview against its `Preview`, whose components,
+ * renders and decorators return `ReactNode`: that is what this view takes on trust, as the frame takes the functions'
+ * parameters.
+ *
+ * @param story - the loaded story.
+ */
+const asReactStory = (story) => story;
+/**
+ * The story with these args: its render (or the meta's component), inside its decorators.
+ *
+ * @param loaded - the story.
+ * @param context - the args and the canvas its render, play and decorators read.
+ * @param outer - the catalogue's decorators, outside the story's and the meta's.
+ */
+export const storyElement = (loaded, context, outer) => {
+    const story = asReactStory({ ...loaded, decorators: [...loaded.decorators, ...outer] });
+    const renderStory = () => {
+        if (story.render !== undefined)
+            return story.render(context.args, context);
+        return story.component === undefined ? null : createElement(story.component, context.args);
+    };
+    const decorated = story.decorators.reduce((inner, decorator) => () => decorator(inner, context), renderStory);
+    return decorated();
+};
+//# sourceMappingURL=storyElement.js.map

package/dist/src/storyElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyElement.js","sourceRoot":"","sources":["../../src/storyElement.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,aAAa,EAAoC,MAAM,OAAO,CAAC;AAYxE;;;;;;;;;;;GAWG;AACH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAc,EAAE,CAAC,KAAmB,CAAC;AAE7E;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,MAAmB,EACnB,OAAiC,EACjC,KAAiC,EACtB,EAAE;IACb,MAAM,KAAK,GAAG,YAAY,CAAC,EAAE,GAAG,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IACxF,MAAM,WAAW,GAAG,GAAc,EAAE;QAClC,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS;YAAE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC3E,OAAO,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CACvC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,GAAc,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAChE,WAAW,CACZ,CAAC;IACF,OAAO,SAAS,EAAE,CAAC;AACrB,CAAC,CAAC"}

package/dist/src/storyJsx.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The JSX of a story drawn from its args: the component with the values the story and the props panel set, as a
+ * developer would write it, for the Code card.
+ *
+ * @remarks
+ * A text is an attribute in quotes (in braces when it holds a quote), a number or `null` in braces, `true` the bare
+ * name, `false` in braces, a named value by its name (`icon={IconFolder}`); `children` goes between the tags. Only the
+ * values that cross from the frame are known (texts, numbers, booleans, `null`, named values): a function or an
+ * element the story passes is left out. Pure.
+ *
+ * @module
+ */
+import { type PanelArgs } from "forgebook/messages";
+import type { StoryCodeWriter } from "forgebook/renderer";
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export declare const storyJsx: (component: string, args: PanelArgs) => string;
+/** The code writer a React catalogue's shell writes a story's code with: the name the generated pages import. */
+export declare const codeOf: StoryCodeWriter;
+//# sourceMappingURL=storyJsx.d.ts.map

package/dist/src/storyJsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyJsx.d.ts","sourceRoot":"","sources":["../../src/storyJsx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAe1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,MAAM,EAAE,MAAM,SAAS,KAAG,MAY7D,CAAC;AAEF,iHAAiH;AACjH,eAAO,MAAM,MAAM,EAAE,eAA0B,CAAC"}

package/dist/src/storyJsx.js

@@ -0,0 +1,48 @@
+/**
+ * The JSX of a story drawn from its args: the component with the values the story and the props panel set, as a
+ * developer would write it, for the Code card.
+ *
+ * @remarks
+ * A text is an attribute in quotes (in braces when it holds a quote), a number or `null` in braces, `true` the bare
+ * name, `false` in braces, a named value by its name (`icon={IconFolder}`); `children` goes between the tags. Only the
+ * values that cross from the frame are known (texts, numbers, booleans, `null`, named values): a function or an
+ * element the story passes is left out. Pure.
+ *
+ * @module
+ */
+import { isNamedArg } from "forgebook/messages";
+/** One attribute as JSX writes it. */
+const attribute = (name, value) => {
+    if (value === true)
+        return name;
+    if (typeof value === "string")
+        return value.includes('"') ? `${name}={${JSON.stringify(value)}}` : `${name}="${value}"`;
+    // a named value is written by its name, as the source's module exports it (`icon={IconFolder}`)
+    if (isNamedArg(value))
+        return `${name}={${value.named}}`;
+    return `${name}={${String(value)}}`;
+};
+/** The longest line the attributes stay on one line for, in characters. */
+const ONE_LINE = 80;
+/**
+ * A component's JSX with these args.
+ *
+ * @param component - the component's name (`IconTile`).
+ * @param args - the values, in the order they are written.
+ */
+export const storyJsx = (component, args) => {
+    const { children, ...rest } = args;
+    const attributes = Object.entries(rest).map(([name, value]) => attribute(name, value));
+    const inner = children === undefined || children === null || children === false ? undefined : String(children);
+    const oneLine = [component, ...attributes].join(" ");
+    const isOneLine = oneLine.length + 2 <= ONE_LINE;
+    const opening = isOneLine
+        ? `<${oneLine}`
+        : `<${component}\n${attributes.map((text) => `  ${text}`).join("\n")}\n`;
+    if (inner === undefined)
+        return `${opening}${isOneLine ? " " : ""}/>`;
+    return `${opening}>${inner}</${component}>`;
+};
+/** The code writer a React catalogue's shell writes a story's code with: the name the generated pages import. */
+export const codeOf = storyJsx;
+//# sourceMappingURL=storyJsx.js.map

package/dist/src/storyJsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyJsx.js","sourceRoot":"","sources":["../../src/storyJsx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAiB,UAAU,EAAkB,MAAM,oBAAoB,CAAC;AAG/E,sCAAsC;AACtC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAe,EAAU,EAAE;IAC1D,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC3B,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,KAAK,GAAG,CAAC;IAC3F,gGAAgG;IAChG,IAAI,UAAU,CAAC,KAAK,CAAC;QAAE,OAAO,GAAG,IAAI,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC;IACzD,OAAO,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;AACtC,CAAC,CAAC;AAEF,2EAA2E;AAC3E,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAiB,EAAE,IAAe,EAAU,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IACnC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvF,MAAM,KAAK,GACT,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACnG,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC;IACjD,MAAM,OAAO,GAAG,SAAS;QACvB,CAAC,CAAC,IAAI,OAAO,EAAE;QACf,CAAC,CAAC,IAAI,SAAS,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3E,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;IACtE,OAAO,GAAG,OAAO,IAAI,KAAK,KAAK,SAAS,GAAG,CAAC;AAC9C,CAAC,CAAC;AAEF,iHAAiH;AACjH,MAAM,CAAC,MAAM,MAAM,GAAoB,QAAQ,CAAC"}