.storybook/StoryStage.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+interface Props {
+    children: import('svelte').Snippet;
+    width?: string; // Optional width override
+}
+
+let { children, width = 'max-w-3xl' }: Props = $props();
+</script>
+
+<div class="flex min-h-screen w-full items-center justify-center bg-slate-50 p-8">
+    <div class="w-full bg-white shadow-xl ring-1 ring-slate-200 rounded-xl p-12 {width}">
+        <div class="relative">
+            {@render children()}
+        </div>
+    </div>
+</div>

.storybook/preview.ts

@@ -1,9 +1,10 @@
 import type { Preview } from '@storybook/svelte-vite';
-
+import StoryStage from './StoryStage.svelte';
 import '../src/app/styles/app.css';
 
 const preview: Preview = {
     parameters: {
+        layout: 'fullscreen',
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -18,6 +19,21 @@ const preview: Preview = {
             test: 'todo',
         },
     },
+    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,
+                },
+            };
+        },
+    ],
 };
 
 export default preview;