🤖 fix(storybook): remove theme sync race condition

Removed duplicate theme application logic that was causing conflicts
between the preview decorator and ThemeProvider.

Previously, both `syncStorybookTheme()` and `ThemeProvider`'s
`applyThemeToDocument()` were trying to control document.documentElement,
causing race conditions where some light mode stories would render as
dark (e.g., ErrorMessage Long message).

Changes:
- Removed `applyStorybookTheme()` and `syncStorybookTheme()` functions
- Simplified decorator to only pass forcedTheme to ThemeProvider
- ThemeProvider now disables persistence listener when forcedTheme is set
- Toggle is disabled when theme is forced (prevents conflicts)

This makes ThemeProvider the single source of truth for theme application,
eliminating timing issues and localStorage conflicts.

Net: -40 lines

Author: ethanndickson

.storybook/preview.tsx

@@ -1,49 +1,8 @@
 import React from "react";
 import type { Preview } from "@storybook/react-vite";
 import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
-import { getStorageChangeEvent } from "@/common/constants/events";
-import { UI_THEME_KEY } from "@/common/constants/storage";
 import "../src/browser/styles/globals.css";
 
-const applyStorybookTheme = (mode: ThemeMode) => {
-  if (typeof window === "undefined") {
-    return;
-  }
-
-  try {
-    const serialized = JSON.stringify(mode);
-    const prev = window.localStorage.getItem(UI_THEME_KEY);
-    const root = document.documentElement;
-    const current = root?.dataset?.theme as ThemeMode | undefined;
-    if (prev === serialized && current === mode) {
-      return; // no-op if already applied
-    }
-
-    window.localStorage.setItem(UI_THEME_KEY, serialized);
-    root.dataset.theme = mode;
-    root.style.colorScheme = mode;
-
-    const event = new CustomEvent(getStorageChangeEvent(UI_THEME_KEY), {
-      detail: { key: UI_THEME_KEY, newValue: mode, origin: "storybook" },
-    });
-    window.dispatchEvent(event);
-  } catch (error) {
-    console.warn("Failed to write Storybook theme:", error);
-  }
-};
-
-const syncStorybookTheme = (mode?: ThemeMode): ThemeMode => {
-  if (typeof window === "undefined") {
-    return mode ?? "dark"; // Default to dark theme
-  }
-
-  const stored = window.localStorage.getItem(UI_THEME_KEY);
-  const persisted = stored ? (JSON.parse(stored) as ThemeMode) : undefined;
-  const resolved = mode ?? persisted ?? "dark"; // Default to dark for Latest when unset
-  applyStorybookTheme(resolved);
-  return resolved;
-};
-
 const preview: Preview = {
   globalTypes: {
     theme: {
@@ -62,7 +21,6 @@ const preview: Preview = {
   decorators: [
     (Story, context) => {
       const mode = context.globals.theme as ThemeMode | undefined;
-      syncStorybookTheme(mode);
       return (
         <ThemeProvider forcedTheme={mode}>
           <Story />

src/browser/contexts/ThemeContext.tsx

@@ -53,7 +53,7 @@ function applyThemeToDocument(theme: ThemeMode) {
 
 export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeMode }) {
   const [theme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
-    listener: true,
+    listener: !props.forcedTheme, // Disable listener when theme is forced (avoids conflicts)
   });
 
   // Use forcedTheme if provided (e.g., from Storybook), otherwise use persisted theme
@@ -64,8 +64,11 @@ export function ThemeProvider(props: { children: ReactNode; forcedTheme?: ThemeM
   }, [activeTheme]);
 
   const toggleTheme = useCallback(() => {
-    setTheme((current) => (current === "dark" ? "light" : "dark"));
-  }, [setTheme]);
+    // Only allow toggling when not forced
+    if (!props.forcedTheme) {
+      setTheme((current) => (current === "dark" ? "light" : "dark"));
+    }
+  }, [props.forcedTheme, setTheme]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({