@forgebook/react 0.1.8 → 0.2.1

package/README.md

@@ -19,6 +19,10 @@ import { defineConfig } from "forgebook";
 export default defineConfig({ framework: react(), title: "My components", stories: ["src/**/*.stories.tsx"] });
 ```
 
+`react()` brings React's Vite plugin, with Fast Refresh; a library whose files need it configured passes its options,
+as `react({ include: /\.[jt]sx?$/ })` for JSX in `.js` files. Leave the plugin to the adapter rather than adding your own:
+the adapter's plugins around it redraw an edited component sooner.
+
 and the stories take their types from it:
 
 ```tsx
@@ -34,7 +38,7 @@ 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/vite` | `react()`, the framework adapter of `forgebook.config.ts`; it takes `@vitejs/plugin-react`'s options, as `react({ include: /\.[jt]sx?$/ })` to give Fast Refresh to `.js` files |
 | `@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

package/dist/src/StoryErrorBoundary.d.ts

@@ -56,4 +56,3 @@ export declare class StoryErrorBoundary extends Component<StoryErrorBoundaryProp
     render(): ReactNode;
 }
 export {};
-//# sourceMappingURL=StoryErrorBoundary.d.ts.map

package/dist/src/StoryErrorBoundary.js

@@ -56,4 +56,3 @@ export class StoryErrorBoundary extends Component {
         return this.state.hasError ? null : this.props.children;
     }
 }
-//# sourceMappingURL=StoryErrorBoundary.js.map

package/dist/src/clock.d.ts

@@ -23,4 +23,3 @@ export declare const useStoryClock: () => StoryClock;
  * @returns the moment, in milliseconds since the Unix epoch.
  */
 export declare const useStoryNow: () => number;
-//# sourceMappingURL=clock.d.ts.map

package/dist/src/clock.js

@@ -27,4 +27,3 @@ export const useStoryNow = () => {
     const clock = useStoryClock();
     return useSyncExternalStore(clock.subscribe, clock.now, clock.now);
 };
-//# sourceMappingURL=clock.js.map

package/dist/src/mountFrame.d.ts

@@ -12,4 +12,3 @@ import { type FrameConfig } from "forgebook/frame";
  * @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.js

@@ -5,12 +5,11 @@
  * @module
  */
 import { mountFrame as mountForgebookFrame } from "forgebook/frame";
-import { reactRenderer } from "./reactRenderer.js";
+import { reactFrameRenderer } from "./reactFrameRenderer.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
+export const mountFrame = (container, config) => mountForgebookFrame(container, { ...config, renderer: reactFrameRenderer });

package/dist/src/reactFrameRenderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Forgebook's renderer for React, as the frame draws with it: 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, catching 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. The server render is in `reactRenderer.tsx` and nothing here imports
+ * it, so React's server renderer never reaches a frame page: neither a static catalogue's files nor a first start's
+ * pre-bundle.
+ *
+ * @module
+ */
+import type { FrameRenderer } from "forgebook/renderer";
+/** React as the frame draws with it. */
+export declare const reactFrameRenderer: FrameRenderer;

package/dist/src/reactFrameRenderer.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { storyContextOf } from "forgebook/renderer";
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { StoryErrorBoundary } from "./StoryErrorBoundary.js";
+import { storyElement } from "./storyElement.js";
+import { inProviders } from "./storyProviders.js";
+/**
+ * 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 reactFrameRenderer = {
+    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, storyContextOf(drawing, drawing.args, () => canvas), drawing.decorators, drawing.changeArgs) }) })));
+        };
+        draw();
+        return {
+            drawn,
+            update: (next) => {
+                drawing = next;
+                draw();
+            },
+            unmount: () => root.unmount()
+        };
+    }
+};

package/dist/src/reactRenderer.d.ts

@@ -1,15 +1,13 @@
 /**
- * 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.
+ * Forgebook's renderer for React, whole: the frame's drawing (`reactFrameRenderer.tsx`) and the story drawn as HTML
+ * on the server, for the generated server tests.
  *
  * @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.
+ * The frame page imports `reactFrameRenderer.tsx` alone, so React's server renderer never reaches it. Here it still
+ * loads only when a server test renders a story (`renderToString`), so a test that only mounts does not load it.
  *
  * @module
  */
 import type { StoryRenderer } from "forgebook/renderer";
-/** React as the frame draws with it. */
+/** React as the frame draws with it and the server tests render with it. */
 export declare const reactRenderer: StoryRenderer;
-//# sourceMappingURL=reactRenderer.d.ts.map

package/dist/src/reactRenderer.js

@@ -1,79 +1,23 @@
-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.
+ * Forgebook's renderer for React, whole: the frame's drawing (`reactFrameRenderer.tsx`) and the story drawn as HTML
+ * on the server, for the generated server tests.
  *
- * @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.
+ * @remarks
+ * The frame page imports `reactFrameRenderer.tsx` alone, so React's server renderer never reaches it. Here it still
+ * loads only when a server test renders a story (`renderToString`), so a test that only mounts does not load it.
  *
- * @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.
+ * @module
  */
-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. */
+import { storyContextOf } from "forgebook/renderer";
+import { reactFrameRenderer } from "./reactFrameRenderer.js";
+import { storyElement } from "./storyElement.js";
+import { inProviders } from "./storyProviders.js";
+/** React as the frame draws with it and the server tests render 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);
+    ...reactFrameRenderer,
+    renderToString: async (drawing) => {
+        const { renderToString } = await import("react-dom/server");
+        const context = storyContextOf(drawing, drawing.args, () => document.body);
         return renderToString(inProviders(drawing, storyElement(drawing.story, context, drawing.decorators)));
     }
 };
-//# sourceMappingURL=reactRenderer.js.map

package/dist/src/stories.d.ts

@@ -67,4 +67,3 @@ export type Decorator<TArgs> = CsfDecorator<ReactRenderer, TArgs>;
  */
 export type Preview = CsfPreview<ReactRenderer>;
 export {};
-//# sourceMappingURL=stories.d.ts.map

package/dist/src/stories.js

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

package/dist/src/storyElement.d.ts

@@ -3,9 +3,24 @@
  * 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.
  *
+ * @remarks
+ * The render and the decorators run inside components (`StoryDraw`, and the kept `storyAt` of each level), never while
+ * the element is built: Storybook's users write hooks in both, and a hook outside a render throws. The components are
+ * module-level functions, so new args draw the same components again and the story keeps its state; another story is
+ * another key, so it starts over. Since a decorator's story reads its level from a context, a decorator calls it while
+ * it renders, as it would a hook: not from an event handler, and not in another React root.
+ *
+ * What a decorator gets as its story is a component too, the same one for every drawing of a level (`storyAt`): a
+ * decorator writes `<Story />` as often as `story()`, and a new function at each drawing would be a new component to
+ * React, mounting the story afresh and losing its state whenever an arg changed.
+ *
+ * Each decorator and the render are called with the context Storybook's preview hooks read (`storybookHooks.ts`), so
+ * a story file written for Storybook (`useArgs` in a decorator) runs as it does there.
+ *
  * @module
  */
 import type { StoryContext } from "@forgebook/story-format/csf";
+import type { ArgsChange } from "forgebook/renderer";
 import type { LoadedArgs, LoadedDecorator, LoadedStory } from "forgebook/story-module";
 import { type ReactNode } from "react";
 /**
@@ -14,6 +29,6 @@ import { type ReactNode } from "react";
  * @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.
+ * @param changeArgs - changes the story's args from its own code (Storybook's `useArgs`); none changes nothing.
  */
-export declare const storyElement: (loaded: LoadedStory, context: StoryContext<LoadedArgs>, outer: readonly LoadedDecorator[]) => ReactNode;
-//# sourceMappingURL=storyElement.d.ts.map
+export declare const storyElement: (loaded: LoadedStory, context: StoryContext<LoadedArgs>, outer: readonly LoadedDecorator[], changeArgs?: (change: ArgsChange) => void) => ReactNode;

package/dist/src/storyElement.js

@@ -3,9 +3,24 @@
  * 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.
  *
+ * @remarks
+ * The render and the decorators run inside components (`StoryDraw`, and the kept `storyAt` of each level), never while
+ * the element is built: Storybook's users write hooks in both, and a hook outside a render throws. The components are
+ * module-level functions, so new args draw the same components again and the story keeps its state; another story is
+ * another key, so it starts over. Since a decorator's story reads its level from a context, a decorator calls it while
+ * it renders, as it would a hook: not from an event handler, and not in another React root.
+ *
+ * What a decorator gets as its story is a component too, the same one for every drawing of a level (`storyAt`): a
+ * decorator writes `<Story />` as often as `story()`, and a new function at each drawing would be a new component to
+ * React, mounting the story afresh and losing its state whenever an arg changed.
+ *
+ * Each decorator and the render are called with the context Storybook's preview hooks read (`storybookHooks.ts`), so
+ * a story file written for Storybook (`useArgs` in a decorator) runs as it does there.
+ *
  * @module
  */
-import { createElement } from "react";
+import { createContext, createElement, useContext } from "react";
+import { withStoryHooks } from "./storybookHooks.js";
 /**
  * A loaded story read as React's: the one place React's types meet the story file's module.
  *
@@ -19,21 +34,63 @@ import { createElement } from "react";
  * @param story - the loaded story.
  */
 const asReactStory = (story) => story;
+/** What each level of decorators draws, innermost first, for the drawing being rendered. */
+const LevelsContext = createContext([]);
+/** The story a decorator gets at each level, made once and kept: a component's identity is what keeps its state. */
+const levels = [];
+/**
+ * The story a decorator at a level gets: callable (`story()`) and a component (`<Story />`), the same function for every
+ * drawing, which draws whatever its level holds in the drawing being rendered.
+ *
+ * @param level - the level, 0 for what the innermost decorator wraps.
+ */
+const storyAt = (level) => {
+    const known = levels[level];
+    if (known !== undefined)
+        return known;
+    const story = () => useContext(LevelsContext)[level]?.() ?? null;
+    levels[level] = story;
+    return story;
+};
+/**
+ * Where the outermost level draws, inside its levels' provider: a decorator calling `story()` reads them from there.
+ *
+ * @param props - what to draw.
+ */
+const StoryDraw = ({ draw }) => draw();
+/**
+ * The component a story draws in: where its render's and its decorators' hooks run.
+ *
+ * @param props - the story's render, inside its decorators.
+ */
+const StoryBody = ({ draw, levels: drawn }) => createElement(LevelsContext.Provider, { value: drawn }, createElement(StoryDraw, { draw }));
 /**
  * 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.
+ * @param changeArgs - changes the story's args from its own code (Storybook's `useArgs`); none changes nothing.
  */
-export const storyElement = (loaded, context, outer) => {
+export const storyElement = (loaded, context, outer, changeArgs = () => undefined) => {
     const story = asReactStory({ ...loaded, decorators: [...loaded.decorators, ...outer] });
-    const renderStory = () => {
+    const hooks = {
+        id: context.id,
+        args: context.args,
+        globals: context.globals,
+        parameters: context.parameters,
+        context,
+        changeArgs
+    };
+    const renderStory = () => withStoryHooks(hooks, () => {
         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();
+    });
+    // each level draws the one inside it through that level's kept component
+    const drawn = [renderStory];
+    story.decorators.forEach((decorator, level) => {
+        drawn.push(() => withStoryHooks(hooks, () => decorator(storyAt(level), context)));
+    });
+    return createElement(StoryBody, { key: context.id, draw: drawn.at(-1) ?? renderStory, levels: drawn });
 };
-//# sourceMappingURL=storyElement.js.map

package/dist/src/storyJsx.d.ts

@@ -1,17 +1,3 @@
-/**
- * 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}`), a list as an array literal
- * (`options={["weekly", "monthly"]}`); `children` goes between the tags. Only the values that cross from the frame are
- * known (texts, numbers, booleans, `null`, lists of texts and numbers, 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.
@@ -19,7 +5,6 @@ import type { StoryCodeWriter } from "forgebook/renderer";
  * @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;
+export declare const storyJsx: StoryCodeWriter;
 /** 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.js

@@ -1,52 +1,16 @@
 /**
- * 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}`), a list as an array literal
- * (`options={["weekly", "monthly"]}`); `children` goes between the tags. Only the values that cross from the frame are
- * known (texts, numbers, booleans, `null`, lists of texts and numbers, named values): a function or an element the
- * story passes is left out. Pure.
+ * The code writer a React catalogue's shell writes a story's code with: the JSX every framework written in JSX shares
+ * (`forgebook/jsx-code`), under the names the generated pages and earlier versions import.
  *
  * @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}}`;
-    // a multiple choice's values, as the source writes a list
-    if (Array.isArray(value))
-        return `${name}={[${value.map((item) => JSON.stringify(item)).join(", ")}]}`;
-    return `${name}={${String(value)}}`;
-};
-/** The longest line the attributes stay on one line for, in characters. */
-const ONE_LINE = 80;
+import { jsxCode } from "forgebook/jsx-code";
 /**
  * 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}>`;
-};
+export const storyJsx = jsxCode;
 /** 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
+export const codeOf = jsxCode;

package/dist/src/storyProviders.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The providers every React story is drawn inside, in a frame and on the server alike: the story's texts and its clock.
+ *
+ * @module
+ */
+import type { StoryDrawing } from "forgebook/renderer";
+import type { ReactNode } from "react";
+/**
+ * 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.
+ */
+export declare const inProviders: (drawing: StoryDrawing, story: ReactNode) => ReactNode;

package/dist/src/storyProviders.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StoryClockContext } from "./clock.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.
+ */
+export const inProviders = (drawing, story) => (_jsx(StoryTextsContext.Provider, { value: drawing.texts, children: _jsx(StoryClockContext.Provider, { value: drawing.clock, children: story }) }));

package/dist/src/storybookHooks.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Storybook's preview hooks that read the story (`useArgs`, `useGlobals`, `useParameter`, `useStoryContext`), for a
+ * React story file written for Storybook: its imports of `storybook/preview-api` reach these, and React's own for
+ * Storybook's `useState`, `useEffect` and the rest (`vite/storybookPreviewApi.ts`).
+ *
+ * @remarks
+ * Storybook runs its hooks on a state of its own, since it calls a decorator outside any framework's render. Forgebook
+ * draws every decorator and render of a React story inside a component (`storyElement.ts`), so Storybook's hooks are
+ * React's there, and a hook of each kind may be mixed in one decorator as Storybook's documentation asks not to. What
+ * the story is drawn with comes from the decorator or render being called: `storyElement.ts` names it while it calls
+ * one (`withStoryHooks`), as Storybook names its own, and on the global object so that a second copy of this module
+ * (a pre-bundled one beside the sources) reads the same. `useArgs`'s update and reset change the story's args as the
+ * panel would (`forgebook/renderer`'s `changeArgs`). Globals are the catalogue's switches, set from its toolbar: a
+ * story cannot change them, and Storybook's channel does not exist here.
+ *
+ * @module
+ */
+import type { ArgsChange } from "forgebook/renderer";
+/** What a story's decorators and render are drawn with, as Storybook's hooks read it. */
+export type StoryHooksContext = {
+    /** The story's id. */
+    readonly id: string;
+    /** The args it is drawn with. */
+    readonly args: Readonly<Record<string, unknown>>;
+    /** The values of the catalogue's switches, its `context.globals`. */
+    readonly globals: Readonly<Record<string, string>>;
+    /** Its parameters. */
+    readonly parameters: Readonly<Record<string, unknown>>;
+    /** The whole context its decorator or render was called with, for `useStoryContext`. */
+    readonly context: Readonly<Record<string, unknown>>;
+    /** Changes its args as the panel would; does nothing where nothing takes them (a server render). */
+    readonly changeArgs: (change: ArgsChange) => void;
+};
+/**
+ * Calls a story's decorator or render with the context Storybook's hooks read while it runs.
+ *
+ * @param context - what the story is drawn with.
+ * @param call - the decorator's or render's call.
+ * @returns what it returns.
+ */
+export declare const withStoryHooks: <TResult>(context: StoryHooksContext, call: () => TResult) => TResult;
+/**
+ * The story's args, and how to change them, as the panel would: `updateArgs` sets values, `resetArgs` puts the named
+ * ones (every one, with none named) back to the story's own.
+ *
+ * @returns the args, the update and the reset.
+ */
+export declare const useArgs: () => [Readonly<Record<string, unknown>>, (args: Readonly<Record<string, unknown>>) => void, (names?: readonly string[]) => void];
+/**
+ * The values of the catalogue's switches, and Storybook's way to change them, which throws: they are set from the
+ * catalogue's toolbar.
+ *
+ * @returns the values and the change.
+ */
+export declare const useGlobals: () => [Readonly<Record<string, string>>, (globals: unknown) => never];
+/**
+ * One of the story's parameters.
+ *
+ * @param key - the parameter's name.
+ * @param defaultValue - what to give when the story has none.
+ */
+export declare const useParameter: <TValue>(key: string, defaultValue?: TValue) => unknown;
+/**
+ * The context the decorator or render was called with.
+ *
+ * @returns the context.
+ */
+export declare const useStoryContext: () => Readonly<Record<string, unknown>>;
+/**
+ * Storybook's channel to its addons, which Forgebook does not have.
+ *
+ * @throws always, saying so.
+ */
+export declare const useChannel: () => never;