chore: catch up Storybook preview, coverage, and story hygiene

Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.

.storybook/fonts.css

@@ -1,7 +1,13 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bricolage+Grotesque:wght@400;500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap");
 
 :root {
   --font-inter:
     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
+  --font-bricolage-grotesque:
+    "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial;
+  --font-space-grotesk:
+    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial;
 }

.storybook/main.js

@@ -4,32 +4,10 @@ module.exports = {
     "../stories/**/*.mdx",
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
-  addons: [
-    // Removed @storybook/addon-essentials due to version mismatch with Storybook 10.x
-    // Using individual addons instead. Interaction helpers import from storybook/test
-    // (bundled with storybook@10); @storybook/addon-interactions was merged into SB 8 core.
-    "@storybook/addon-a11y",
-  ],
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
   staticDirs: ["../public"],
-
-  // Webpack configuration to resolve Next.js modules for Next.js 16 compatibility
-  async webpackFinal(config) {
-    // Ensure Next.js modules are resolved correctly
-    config.resolve = config.resolve || {};
-    config.resolve.alias = {
-      ...(config.resolve.alias || {}),
-    };
-
-    // Ensure node_modules are resolved
-    config.resolve.modules = [
-      ...(config.resolve.modules || []),
-      "node_modules",
-    ];
-
-    return config;
-  },
 };

.storybook/preview.js

@@ -1,10 +1,43 @@
 import "../app/globals.css";
 import "./fonts.css";
+import { MINIMAL_VIEWPORTS } from "storybook/viewport";
+import { AuthModalProvider } from "../app/contexts/AuthModalContext";
 import { MessagesProvider } from "../app/contexts/MessagesContext";
+import { CreateFlowProvider } from "../app/(app)/create/context/CreateFlowContext";
 import messages from "../messages/en/index";
 
+/** Figma / Tailwind breakpoints from `app/tailwind.css`. */
+const dsViewports = {
+  sm: {
+    name: "sm 430",
+    styles: { width: "430px", height: "932px" },
+  },
+  md: {
+    name: "md 640",
+    styles: { width: "640px", height: "1024px" },
+  },
+  lg: {
+    name: "lg 1024",
+    styles: { width: "1024px", height: "768px" },
+  },
+  xl: {
+    name: "xl 1440",
+    styles: { width: "1440px", height: "900px" },
+  },
+  // Aliases used by existing page stories
+  mobile1: {
+    name: "sm 430",
+    styles: { width: "430px", height: "932px" },
+  },
+  desktop: {
+    name: "xl 1440",
+    styles: { width: "1440px", height: "900px" },
+  },
+};
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
+  tags: ["autodocs"],
   parameters: {
     controls: {
       matchers: {
@@ -12,13 +45,32 @@ const preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      options: {
+        dark: { name: "Dark", value: "#000000" },
+        light: { name: "Light", value: "#ffffff" },
+      },
+    },
+    viewport: {
+      options: {
+        ...MINIMAL_VIEWPORTS,
+        ...dsViewports,
+      },
+    },
+  },
+  initialGlobals: {
+    backgrounds: { value: "dark" },
   },
   decorators: [
     (Story) => (
       <MessagesProvider messages={messages}>
-        <div className="font-inter">
-          <Story />
-        </div>
+        <AuthModalProvider>
+          <CreateFlowProvider>
+            <div className="font-inter">
+              <Story />
+            </div>
+          </CreateFlowProvider>
+        </AuthModalProvider>
       </MessagesProvider>
     ),
   ],

.storybook/vitest.setup.js

@@ -1,7 +0,0 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from "@storybook/nextjs-vite";
-import * as projectAnnotations from "./preview";
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);