// Import the console's REAL stylesheet directly (rememed-style) — the @theme // blocks process because this is the literal entry Storybook's Vite pipeline sees. import '../src/styles.css' // The console loads its brand typeface separately (in __root.tsx); do the same // here or every story falls back to system-ui and looks off. import '@fontsource-variable/geist' import { useEffect } from 'react' import { definePreview } from '@storybook/react-vite' import { MaterialProvider, defaultMaterialTheme } from '@unom/ui/material' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' // React Query is present so any query-backed component mounts without a real // host. Stories should feed mock data rather than fetch — retries are off so a // stray request fails fast instead of hanging the canvas. const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } }, }) export default definePreview({ addons: [], // The live console pins dark; default the canvas to dark too, with a toolbar // switch to preview the light theme while designing. 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' // `layout: 'fullscreen'` stories (e.g. the AppShell) own their own padding; // everything else gets a comfortable inset. const fullscreen = context.parameters.layout === 'fullscreen' // Mirror `.dark` onto so the body's token-driven background AND any // portal-mounted content (radix dialogs, popovers) pick up the right // palette — the console keys its whole token set off `html.dark`. useEffect(() => { document.documentElement.classList.toggle('dark', dark) }, [dark]) return (

) }, ], parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } }, layout: 'padded', }, })