// Storybook renders the REAL pages on the mock transport: the static import below // registers the fixture HttpClient layer + status ticker (Storybook bundles are never // shipped, so fixtures in them are fine), and the decorator gives every story a fresh // atom registry seeded with mock mode + the story's scenario. import "../src/styles.css"; import "../src/mocks/http"; import { RegistryProvider } from "@effect/atom-react"; import { definePreview } from "@storybook/react-vite"; import { useEffect } from "react"; import { apiModeAtom, type Scenario, scenarioAtom, } from "../src/mocks/scenario"; export default definePreview({ addons: [], // The console pins dark; default the canvas to dark with a toolbar light switch. initialGlobals: { theme: "dark" }, globalTypes: { theme: { description: "Light/dark color scheme", toolbar: { title: "Theme", icon: "circlehollow", items: [ { value: "dark", icon: "moon", title: "Dark" }, { value: "light", icon: "sun", title: "Light" }, ], dynamicTitle: true, }, }, }, decorators: [ (Story, context) => { const dark = (context.globals.theme as string) !== "light"; const scenario = (context.parameters.scenario as Scenario | undefined) ?? "healthy"; const fullscreen = context.parameters.layout === "fullscreen"; // Mirror `.dark` onto so portal-mounted content (selects, dialogs, // toasts) picks up the palette — the theme keys everything off `html.dark`. useEffect(() => { document.documentElement.classList.toggle("dark", dark); }, [dark]); return (

); }, ], parameters: { layout: "padded", }, });