🤖 fix: use useLayoutEffect for synchronous theme sync in Storybook

Root cause: Writing to localStorage in decorator was causing persistence
issues. Also, synchronous document writes bypassed ThemeProvider.

Fix:
- Use ThemeStorySync component with useLayoutEffect (not useEffect)
- useLayoutEffect runs synchronously before paint, preventing flashes
- Let ThemeProvider manage localStorage, don't write in decorator
- Chromatic modes will trigger ThemeStorySync with correct mode

This should fix the issue where both dark and light mode stories
were rendering in dark mode.

Author: ethanndickson

.storybook/preview.tsx

@@ -1,9 +1,24 @@
-import React from "react";
+import React, { useLayoutEffect } from "react";
 import type { Preview } from "@storybook/react-vite";
-import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
-import { UI_THEME_KEY } from "../src/common/constants/storage";
+import {
+  ThemeProvider,
+  useTheme,
+  type ThemeMode,
+} from "../src/browser/contexts/ThemeContext";
 import "../src/browser/styles/globals.css";
 
+const ThemeStorySync: React.FC<{ mode: ThemeMode }> = ({ mode }) => {
+  const { theme, setTheme } = useTheme();
+
+  useLayoutEffect(() => {
+    if (theme !== mode) {
+      setTheme(mode);
+    }
+  }, [mode, setTheme, theme]);
+
+  return null;
+};
+
 const preview: Preview = {
   globalTypes: {
     theme: {
@@ -23,18 +38,9 @@ const preview: Preview = {
   decorators: [
     (Story, context) => {
       const mode = (context.globals.theme ?? "dark") as ThemeMode;
-      
-      // Apply theme synchronously BEFORE React renders
-      // This ensures Chromatic snapshots capture the correct theme without timing issues
-      if (typeof window !== "undefined") {
-        const serialized = JSON.stringify(mode);
-        window.localStorage.setItem(UI_THEME_KEY, serialized);
-        document.documentElement.dataset.theme = mode;
-        document.documentElement.style.colorScheme = mode;
-      }
-      
       return (
         <ThemeProvider>
+          <ThemeStorySync mode={mode} />
           <Story />
         </ThemeProvider>
       );