🤖 fix: prevent localStorage interference with Storybook theme modes

Changes:
- Always pass forcedTheme={selected} (never undefined) to ThemeProvider
- ThemeProvider respects forcedTheme over persistedTheme
- Add preview-head.html to clear localStorage before Storybook loads
- Decorator applies theme synchronously to document before React renders

This ensures Chromatic modes work correctly without localStorage
causing themes to stick or fail to switch.

Author: ethanndickson

.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<script>
+  // This runs BEFORE Storybook and React load
+  // Prevent localStorage from interfering with Storybook theme switching
+  (function () {
+    // Don't apply any theme from localStorage in Storybook
+    // Let the decorator handle theme application based on context.globals.theme
+    
+    // Clear any stored theme so it doesn't interfere with forced themes
+    const THEME_KEY = "uiTheme";
+    try {
+      window.localStorage.removeItem(THEME_KEY);
+    } catch (error) {
+      console.warn("Failed to clear theme in preview-head", error);
+    }
+    
+    // DO NOT set document.documentElement.dataset.theme here
+    // Let the decorator do it synchronously based on Chromatic mode
+  })();
+</script>

.storybook/preview.tsx

@@ -32,7 +32,7 @@ const preview: Preview = {
       }
 
       return (
-        <ThemeProvider forcedTheme={mode}>
+        <ThemeProvider forcedTheme={selected}>
           <Story />
         </ThemeProvider>
       );

src/browser/contexts/ThemeContext.tsx

@@ -60,7 +60,6 @@ export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeM
     }
   );
 
-  // Use forcedTheme if provided (e.g., from Storybook), otherwise use persisted theme
   const activeTheme = props.forcedTheme ?? persistedTheme;
 
   useLayoutEffect(() => {