feat: storybook cases and mocks

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/svelte-vite';
+import Decorator from './Decorator.svelte';
 import StoryStage from './StoryStage.svelte';
 import '../src/app/styles/app.css';
 
@@ -23,25 +24,41 @@ const preview: Preview = {
             story: {
                 // This sets the default height for the iframe in Autodocs
                 iframeHeight: '400px',
-                // Ensure the story isn't forced into a tiny inline box
-                // inline: true,
             },
         },
+
+        head: `
+            <link rel="preconnect" href="https://api.fontshare.com" />
+            <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+            <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
+            />
+            <style>
+                body {
+                    font-family: "Karla", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
+                }
+            </style>
+        `,
     },
+
     decorators: [
-        (storyFn, { parameters }) => {
-            const { Component, props } = storyFn();
-            return {
-                Component: StoryStage,
-                // We pass the actual story component into the Stage via a snippet/slot
-                // Svelte 5 Storybook handles this mapping internally when you return this structure
-                props: {
-                    children: Component,
-                    width: parameters.stageWidth || 'max-w-3xl',
-                    ...props,
-                },
-            };
-        },
+        // Wrap with providers (TooltipProvider, ResponsiveManager)
+        story => ({
+            Component: Decorator,
+            props: {
+                children: story(),
+            },
+        }),
+        // Wrap with StoryStage for presentation styling
+        story => ({
+            Component: StoryStage,
+            props: {
+                children: story(),
+            },
+        }),
     ],
 };