@lolyjs/core 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/react/themes.cjs

@@ -32,19 +32,29 @@ var import_react2 = require("react");
 var import_react = require("react");
 var useBroadcastChannel = (channelName) => {
   const [message, setMessage] = (0, import_react.useState)(null);
-  const channel = new BroadcastChannel(channelName);
+  const channelRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
+    if (!channelRef.current && typeof window !== "undefined") {
+      channelRef.current = new BroadcastChannel(channelName);
+    }
+    const channel = channelRef.current;
+    if (!channel) return;
     const handleMessage = (event) => {
       setMessage(event.data);
     };
     channel.onmessage = handleMessage;
     return () => {
-      channel.close();
+      if (channelRef.current) {
+        channelRef.current.close();
+        channelRef.current = null;
+      }
     };
-  }, [channel]);
-  const sendMessage = (msg) => {
-    channel.postMessage(msg);
-  };
+  }, [channelName]);
+  const sendMessage = (0, import_react.useCallback)((msg) => {
+    if (channelRef.current) {
+      channelRef.current.postMessage(msg);
+    }
+  }, []);
   return { message, sendMessage };
 };
 
@@ -66,6 +76,7 @@ var ThemeProvider = ({
   initialTheme
 }) => {
   const { message: themeMessage, sendMessage } = useBroadcastChannel("theme_channel");
+  const lastSentRef = (0, import_react2.useRef)(null);
   const [theme, setTheme] = (0, import_react2.useState)(() => {
     if (initialTheme) return initialTheme;
     if (typeof window !== "undefined") {
@@ -80,10 +91,29 @@ var ThemeProvider = ({
   });
   (0, import_react2.useEffect)(() => {
     if (!themeMessage) return;
-    if (themeMessage !== theme) {
-      setTheme(themeMessage);
+    if (themeMessage === lastSentRef.current) {
+      lastSentRef.current = null;
+      return;
     }
-  }, [themeMessage, theme]);
+    setTheme((currentTheme) => {
+      if (themeMessage !== currentTheme) {
+        if (typeof document !== "undefined") {
+          document.cookie = `theme=${themeMessage}; path=/; max-age=31536000`;
+        }
+        if (typeof window !== "undefined") {
+          if (!window.__FW_DATA__) {
+            window.__FW_DATA__ = {};
+          }
+          window.__FW_DATA__ = {
+            ...window.__FW_DATA__,
+            theme: themeMessage
+          };
+        }
+        return themeMessage;
+      }
+      return currentTheme;
+    });
+  }, [themeMessage]);
   (0, import_react2.useEffect)(() => {
     const handleDataRefresh = () => {
       if (typeof window !== "undefined") {
@@ -98,13 +128,15 @@ var ThemeProvider = ({
         }
       }
     };
-    window.addEventListener("fw-data-refresh", handleDataRefresh);
-    return () => {
-      window.removeEventListener("fw-data-refresh", handleDataRefresh);
-    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("fw-data-refresh", handleDataRefresh);
+      return () => {
+        window.removeEventListener("fw-data-refresh", handleDataRefresh);
+      };
+    }
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (initialTheme) {
+    if (initialTheme && initialTheme !== theme) {
       setTheme(initialTheme);
     }
   }, [initialTheme]);
@@ -120,17 +152,28 @@ var ThemeProvider = ({
     if (body.className !== newClassName) {
       body.className = newClassName;
     }
-    sendMessage(theme);
-  }, [theme, sendMessage]);
+  }, [theme]);
   const handleThemeChange = (newTheme) => {
     setTheme(newTheme);
-    document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
-    if (typeof window !== "undefined" && window.__FW_DATA__) {
+    if (typeof document !== "undefined") {
+      document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
+    }
+    if (typeof window !== "undefined") {
+      if (!window.__FW_DATA__) {
+        window.__FW_DATA__ = {};
+      }
       window.__FW_DATA__ = {
         ...window.__FW_DATA__,
         theme: newTheme
       };
     }
+    lastSentRef.current = newTheme;
+    sendMessage(newTheme);
+    setTimeout(() => {
+      if (lastSentRef.current === newTheme) {
+        lastSentRef.current = null;
+      }
+    }, 500);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme, handleThemeChange }, children });
 };

package/dist/react/themes.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../modules/react/themes/index.ts","../../modules/react/themes/theme-provider/index.tsx","../../modules/react/hooks/useBroadcastChannel/index.tsx"],"sourcesContent":["export {\r\n    ThemeProvider,\r\n    useTheme\r\n} from './theme-provider';","import React, { createContext, useContext, useState, useEffect } from \"react\";\r\nimport { useBroadcastChannel } from \"../../hooks/useBroadcastChannel\";\r\n\r\nconst ThemeContext = createContext<{\r\n  theme: string;\r\n  handleThemeChange: (theme: string) => void;\r\n}>({ theme: \"light\", handleThemeChange: () => {} });\r\n\r\n// Helper function to get cookie value\r\nfunction getCookie(name: string): string | null {\r\n  if (typeof document === \"undefined\") return null;\r\n  const value = `; ${document.cookie}`;\r\n  const parts = value.split(`; ${name}=`);\r\n  if (parts.length === 2) {\r\n    return parts.pop()?.split(\";\").shift() || null;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const ThemeProvider = ({ \r\n  children,\r\n  initialTheme \r\n}: { \r\n  children: React.ReactNode;\r\n  initialTheme?: string;\r\n}) => {\r\n  const { message: themeMessage, sendMessage } = useBroadcastChannel('theme_channel');\r\n\r\n  // Initialize theme consistently between server and client\r\n  // The server renders with initialTheme, and we must use the same value on client\r\n  // to avoid hydration mismatch. Priority: initialTheme prop > window.__FW_DATA__ > cookie > default\r\n  const [theme, setTheme] = useState<string>(() => {\r\n    // 1. Use prop if provided (this should match what server rendered)\r\n    if (initialTheme) return initialTheme;\r\n    \r\n    // 2. On client, use window.__FW_DATA__ from SSR (this is set before hydration)\r\n    // This ensures consistency between server and client\r\n    if (typeof window !== \"undefined\") {\r\n      const windowData = (window as any).__FW_DATA__;\r\n      if (windowData?.theme) return windowData.theme;\r\n    }\r\n    \r\n    // 3. Fallback to cookie (only if window.__FW_DATA__ not available yet)\r\n    if (typeof window !== \"undefined\") {\r\n      const cookieTheme = getCookie(\"theme\");\r\n      if (cookieTheme) return cookieTheme;\r\n    }\r\n    \r\n    // Default fallback\r\n    return \"light\";\r\n  });\r\n\r\n  // Listen for theme changes from broadcast channel (other tabs/windows)\r\n  useEffect(() => {\r\n    if (!themeMessage) return;\r\n    if (themeMessage !== theme) {\r\n      setTheme(themeMessage);\r\n    }\r\n  }, [themeMessage, theme]);\r\n\r\n  // Listen for theme changes from window.__FW_DATA__ during SPA navigation\r\n  useEffect(() => {\r\n    const handleDataRefresh = () => {\r\n      if (typeof window !== \"undefined\") {\r\n        const windowData = (window as any).__FW_DATA__;\r\n        if (windowData?.theme) {\r\n          // Use functional update to avoid stale closure\r\n          setTheme((currentTheme) => {\r\n            if (windowData.theme !== currentTheme) {\r\n              return windowData.theme;\r\n            }\r\n            return currentTheme;\r\n          });\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n    };\r\n  }, []);\r\n\r\n  // Update theme when initialTheme prop changes (e.g., during SPA navigation)\r\n  // This is the primary way theme updates during SPA navigation when layout re-renders\r\n  useEffect(() => {\r\n    if (initialTheme) {\r\n      // Always update if initialTheme is provided, even if it's the same\r\n      // This ensures theme syncs correctly during SPA navigation\r\n      setTheme(initialTheme);\r\n    }\r\n  }, [initialTheme]);\r\n\r\n  // Update body class when theme changes (skip during initial hydration to avoid mismatch)\r\n  useEffect(() => {\r\n    if (typeof document === \"undefined\") return;\r\n\r\n    const body = document.body;\r\n    const currentClasses = body.className.split(\" \").filter(Boolean);\r\n    \r\n    // Remove old theme classes (light, dark, etc.)\r\n    const themeClasses = [\"light\", \"dark\"];\r\n    const filteredClasses = currentClasses.filter(\r\n      (cls) => !themeClasses.includes(cls)\r\n    );\r\n    \r\n    // Add new theme class\r\n    const newClassName = [...filteredClasses, theme].filter(Boolean).join(\" \");\r\n    \r\n    // Only update if different to avoid unnecessary DOM updates\r\n    if (body.className !== newClassName) {\r\n      body.className = newClassName;\r\n    }\r\n\r\n    sendMessage(theme);\r\n  }, [theme, sendMessage]);\r\n\r\n  const handleThemeChange = (newTheme: string) => {\r\n    setTheme(newTheme);\r\n\r\n    // Set theme cookie\r\n    document.cookie = `theme=${newTheme}; path=/; max-age=31536000`; // 1 year expiry\r\n\r\n    // Update window.__FW_DATA__.theme so getCurrentTheme() returns the correct value during navigation\r\n    if (typeof window !== \"undefined\" && (window as any).__FW_DATA__) {\r\n      (window as any).__FW_DATA__ = {\r\n        ...(window as any).__FW_DATA__,\r\n        theme: newTheme,\r\n      };\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ theme, handleThemeChange }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => {\r\n  return useContext(ThemeContext);\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\nexport const useBroadcastChannel = (channelName: string) => {\r\n  const [message, setMessage] = useState(null);\r\n  const channel = new BroadcastChannel(channelName);\r\n\r\n  useEffect(() => {\r\n    const handleMessage = (event: MessageEvent) => {\r\n      setMessage(event.data);\r\n    };\r\n\r\n    channel.onmessage = handleMessage;\r\n\r\n    // Clean up the channel when the component unmounts\r\n    return () => {\r\n      channel.close();\r\n    };\r\n  }, [channel]);\r\n\r\n  const sendMessage = (msg: unknown) => {\r\n    channel.postMessage(msg);\r\n  };\r\n\r\n  return { message, sendMessage };\r\n};\r\n"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../../modules/react/themes/index.ts","../../modules/react/themes/theme-provider/index.tsx","../../modules/react/hooks/useBroadcastChannel/index.tsx"],"sourcesContent":["export {\r\n    ThemeProvider,\r\n    useTheme\r\n} from './theme-provider';","import React, { createContext, useContext, useState, useEffect, useRef } from \"react\";\r\nimport { useBroadcastChannel } from \"../../hooks/useBroadcastChannel\";\r\n\r\nconst ThemeContext = createContext<{\r\n  theme: string;\r\n  handleThemeChange: (theme: string) => void;\r\n}>({ theme: \"light\", handleThemeChange: () => {} });\r\n\r\n// Helper function to get cookie value\r\nfunction getCookie(name: string): string | null {\r\n  if (typeof document === \"undefined\") return null;\r\n  const value = `; ${document.cookie}`;\r\n  const parts = value.split(`; ${name}=`);\r\n  if (parts.length === 2) {\r\n    return parts.pop()?.split(\";\").shift() || null;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const ThemeProvider = ({ \r\n  children,\r\n  initialTheme \r\n}: { \r\n  children: React.ReactNode;\r\n  initialTheme?: string;\r\n}) => {\r\n  const { message: themeMessage, sendMessage } = useBroadcastChannel('theme_channel');\r\n  \r\n  // Track what we last sent to avoid loops\r\n  const lastSentRef = useRef<string | null>(null);\r\n\r\n  // Initialize theme consistently between server and client\r\n  const [theme, setTheme] = useState<string>(() => {\r\n    if (initialTheme) return initialTheme;\r\n    \r\n    if (typeof window !== \"undefined\") {\r\n      const windowData = (window as any).__FW_DATA__;\r\n      if (windowData?.theme) return windowData.theme;\r\n    }\r\n    \r\n    if (typeof window !== \"undefined\") {\r\n      const cookieTheme = getCookie(\"theme\");\r\n      if (cookieTheme) return cookieTheme;\r\n    }\r\n    \r\n    return \"light\";\r\n  });\r\n\r\n  // Handle messages from broadcast channel (other tabs)\r\n  // This effect ONLY responds to themeMessage changes, not theme changes\r\n  useEffect(() => {\r\n    if (!themeMessage) return;\r\n    \r\n    // Ignore if this is a message we just sent\r\n    if (themeMessage === lastSentRef.current) {\r\n      lastSentRef.current = null;\r\n      return;\r\n    }\r\n    \r\n    // Only update if different from current theme\r\n    setTheme((currentTheme) => {\r\n      if (themeMessage !== currentTheme) {\r\n        // Update cookie\r\n        if (typeof document !== \"undefined\") {\r\n          document.cookie = `theme=${themeMessage}; path=/; max-age=31536000`;\r\n        }\r\n        \r\n        // Update window data\r\n        if (typeof window !== \"undefined\") {\r\n          if (!(window as any).__FW_DATA__) {\r\n            (window as any).__FW_DATA__ = {};\r\n          }\r\n          (window as any).__FW_DATA__ = {\r\n            ...(window as any).__FW_DATA__,\r\n            theme: themeMessage,\r\n          };\r\n        }\r\n        \r\n        return themeMessage;\r\n      }\r\n      return currentTheme;\r\n    });\r\n  }, [themeMessage]); // Only depend on themeMessage, NOT theme!\r\n\r\n  // Handle window.__FW_DATA__ changes during SPA navigation\r\n  useEffect(() => {\r\n    const handleDataRefresh = () => {\r\n      if (typeof window !== \"undefined\") {\r\n        const windowData = (window as any).__FW_DATA__;\r\n        if (windowData?.theme) {\r\n          setTheme((currentTheme) => {\r\n            if (windowData.theme !== currentTheme) {\r\n              return windowData.theme;\r\n            }\r\n            return currentTheme;\r\n          });\r\n        }\r\n      }\r\n    };\r\n\r\n    if (typeof window !== \"undefined\") {\r\n      window.addEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n      return () => {\r\n        window.removeEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n      };\r\n    }\r\n  }, []); // No dependencies - event listener doesn't need theme\r\n\r\n  // Handle initialTheme prop changes\r\n  useEffect(() => {\r\n    if (initialTheme && initialTheme !== theme) {\r\n      setTheme(initialTheme);\r\n    }\r\n  }, [initialTheme]); // Only depend on initialTheme, not theme\r\n\r\n  // Update body class when theme changes\r\n  useEffect(() => {\r\n    if (typeof document === \"undefined\") return;\r\n\r\n    const body = document.body;\r\n    const currentClasses = body.className.split(\" \").filter(Boolean);\r\n    const themeClasses = [\"light\", \"dark\"];\r\n    const filteredClasses = currentClasses.filter(\r\n      (cls) => !themeClasses.includes(cls)\r\n    );\r\n    const newClassName = [...filteredClasses, theme].filter(Boolean).join(\" \");\r\n    \r\n    if (body.className !== newClassName) {\r\n      body.className = newClassName;\r\n    }\r\n  }, [theme]);\r\n\r\n  const handleThemeChange = (newTheme: string) => {\r\n    // Update state immediately\r\n    setTheme(newTheme);\r\n\r\n    // Update cookie\r\n    if (typeof document !== \"undefined\") {\r\n      document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;\r\n    }\r\n\r\n    // Update window data\r\n    if (typeof window !== \"undefined\") {\r\n      if (!(window as any).__FW_DATA__) {\r\n        (window as any).__FW_DATA__ = {};\r\n      }\r\n      (window as any).__FW_DATA__ = {\r\n        ...(window as any).__FW_DATA__,\r\n        theme: newTheme,\r\n      };\r\n    }\r\n    \r\n    // Mark this as the last value we sent\r\n    lastSentRef.current = newTheme;\r\n    \r\n    // Broadcast to other tabs\r\n    sendMessage(newTheme);\r\n    \r\n    // Clear the ref after a delay\r\n    setTimeout(() => {\r\n      if (lastSentRef.current === newTheme) {\r\n        lastSentRef.current = null;\r\n      }\r\n    }, 500);\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ theme, handleThemeChange }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => {\r\n  return useContext(ThemeContext);\r\n};\r\n","import React, { useEffect, useState, useRef, useCallback } from \"react\";\r\n\r\nexport const useBroadcastChannel = (channelName: string) => {\r\n  const [message, setMessage] = useState(null);\r\n  const channelRef = useRef<BroadcastChannel | null>(null);\r\n\r\n  useEffect(() => {\r\n    // Create channel only once, inside useEffect\r\n    if (!channelRef.current && typeof window !== \"undefined\") {\r\n      channelRef.current = new BroadcastChannel(channelName);\r\n    }\r\n\r\n    const channel = channelRef.current;\r\n    if (!channel) return;\r\n\r\n    const handleMessage = (event: MessageEvent) => {\r\n      setMessage(event.data);\r\n    };\r\n\r\n    channel.onmessage = handleMessage;\r\n\r\n    // Clean up the channel when the component unmounts\r\n    return () => {\r\n      if (channelRef.current) {\r\n        channelRef.current.close();\r\n        channelRef.current = null;\r\n      }\r\n    };\r\n  }, [channelName]);\r\n\r\n  const sendMessage = useCallback((msg: unknown) => {\r\n    if (channelRef.current) {\r\n      channelRef.current.postMessage(msg);\r\n    }\r\n  }, []);\r\n\r\n  return { message, sendMessage };\r\n};\r\n"],"mappings":"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","names":["import_react"]}

package/dist/react/themes.js

@@ -1,23 +1,33 @@
 // modules/react/themes/theme-provider/index.tsx
-import { createContext, useContext, useState as useState2, useEffect as useEffect2 } from "react";
+import { createContext, useContext, useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // modules/react/hooks/useBroadcastChannel/index.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 var useBroadcastChannel = (channelName) => {
   const [message, setMessage] = useState(null);
-  const channel = new BroadcastChannel(channelName);
+  const channelRef = useRef(null);
   useEffect(() => {
+    if (!channelRef.current && typeof window !== "undefined") {
+      channelRef.current = new BroadcastChannel(channelName);
+    }
+    const channel = channelRef.current;
+    if (!channel) return;
     const handleMessage = (event) => {
       setMessage(event.data);
     };
     channel.onmessage = handleMessage;
     return () => {
-      channel.close();
+      if (channelRef.current) {
+        channelRef.current.close();
+        channelRef.current = null;
+      }
     };
-  }, [channel]);
-  const sendMessage = (msg) => {
-    channel.postMessage(msg);
-  };
+  }, [channelName]);
+  const sendMessage = useCallback((msg) => {
+    if (channelRef.current) {
+      channelRef.current.postMessage(msg);
+    }
+  }, []);
   return { message, sendMessage };
 };
 
@@ -39,6 +49,7 @@ var ThemeProvider = ({
   initialTheme
 }) => {
   const { message: themeMessage, sendMessage } = useBroadcastChannel("theme_channel");
+  const lastSentRef = useRef2(null);
   const [theme, setTheme] = useState2(() => {
     if (initialTheme) return initialTheme;
     if (typeof window !== "undefined") {
@@ -53,10 +64,29 @@ var ThemeProvider = ({
   });
   useEffect2(() => {
     if (!themeMessage) return;
-    if (themeMessage !== theme) {
-      setTheme(themeMessage);
+    if (themeMessage === lastSentRef.current) {
+      lastSentRef.current = null;
+      return;
     }
-  }, [themeMessage, theme]);
+    setTheme((currentTheme) => {
+      if (themeMessage !== currentTheme) {
+        if (typeof document !== "undefined") {
+          document.cookie = `theme=${themeMessage}; path=/; max-age=31536000`;
+        }
+        if (typeof window !== "undefined") {
+          if (!window.__FW_DATA__) {
+            window.__FW_DATA__ = {};
+          }
+          window.__FW_DATA__ = {
+            ...window.__FW_DATA__,
+            theme: themeMessage
+          };
+        }
+        return themeMessage;
+      }
+      return currentTheme;
+    });
+  }, [themeMessage]);
   useEffect2(() => {
     const handleDataRefresh = () => {
       if (typeof window !== "undefined") {
@@ -71,13 +101,15 @@ var ThemeProvider = ({
         }
       }
     };
-    window.addEventListener("fw-data-refresh", handleDataRefresh);
-    return () => {
-      window.removeEventListener("fw-data-refresh", handleDataRefresh);
-    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("fw-data-refresh", handleDataRefresh);
+      return () => {
+        window.removeEventListener("fw-data-refresh", handleDataRefresh);
+      };
+    }
   }, []);
   useEffect2(() => {
-    if (initialTheme) {
+    if (initialTheme && initialTheme !== theme) {
       setTheme(initialTheme);
     }
   }, [initialTheme]);
@@ -93,17 +125,28 @@ var ThemeProvider = ({
     if (body.className !== newClassName) {
       body.className = newClassName;
     }
-    sendMessage(theme);
-  }, [theme, sendMessage]);
+  }, [theme]);
   const handleThemeChange = (newTheme) => {
     setTheme(newTheme);
-    document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
-    if (typeof window !== "undefined" && window.__FW_DATA__) {
+    if (typeof document !== "undefined") {
+      document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
+    }
+    if (typeof window !== "undefined") {
+      if (!window.__FW_DATA__) {
+        window.__FW_DATA__ = {};
+      }
       window.__FW_DATA__ = {
         ...window.__FW_DATA__,
         theme: newTheme
       };
     }
+    lastSentRef.current = newTheme;
+    sendMessage(newTheme);
+    setTimeout(() => {
+      if (lastSentRef.current === newTheme) {
+        lastSentRef.current = null;
+      }
+    }, 500);
   };
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, handleThemeChange }, children });
 };

package/dist/react/themes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../modules/react/themes/theme-provider/index.tsx","../../modules/react/hooks/useBroadcastChannel/index.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect } from \"react\";\r\nimport { useBroadcastChannel } from \"../../hooks/useBroadcastChannel\";\r\n\r\nconst ThemeContext = createContext<{\r\n  theme: string;\r\n  handleThemeChange: (theme: string) => void;\r\n}>({ theme: \"light\", handleThemeChange: () => {} });\r\n\r\n// Helper function to get cookie value\r\nfunction getCookie(name: string): string | null {\r\n  if (typeof document === \"undefined\") return null;\r\n  const value = `; ${document.cookie}`;\r\n  const parts = value.split(`; ${name}=`);\r\n  if (parts.length === 2) {\r\n    return parts.pop()?.split(\";\").shift() || null;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const ThemeProvider = ({ \r\n  children,\r\n  initialTheme \r\n}: { \r\n  children: React.ReactNode;\r\n  initialTheme?: string;\r\n}) => {\r\n  const { message: themeMessage, sendMessage } = useBroadcastChannel('theme_channel');\r\n\r\n  // Initialize theme consistently between server and client\r\n  // The server renders with initialTheme, and we must use the same value on client\r\n  // to avoid hydration mismatch. Priority: initialTheme prop > window.__FW_DATA__ > cookie > default\r\n  const [theme, setTheme] = useState<string>(() => {\r\n    // 1. Use prop if provided (this should match what server rendered)\r\n    if (initialTheme) return initialTheme;\r\n    \r\n    // 2. On client, use window.__FW_DATA__ from SSR (this is set before hydration)\r\n    // This ensures consistency between server and client\r\n    if (typeof window !== \"undefined\") {\r\n      const windowData = (window as any).__FW_DATA__;\r\n      if (windowData?.theme) return windowData.theme;\r\n    }\r\n    \r\n    // 3. Fallback to cookie (only if window.__FW_DATA__ not available yet)\r\n    if (typeof window !== \"undefined\") {\r\n      const cookieTheme = getCookie(\"theme\");\r\n      if (cookieTheme) return cookieTheme;\r\n    }\r\n    \r\n    // Default fallback\r\n    return \"light\";\r\n  });\r\n\r\n  // Listen for theme changes from broadcast channel (other tabs/windows)\r\n  useEffect(() => {\r\n    if (!themeMessage) return;\r\n    if (themeMessage !== theme) {\r\n      setTheme(themeMessage);\r\n    }\r\n  }, [themeMessage, theme]);\r\n\r\n  // Listen for theme changes from window.__FW_DATA__ during SPA navigation\r\n  useEffect(() => {\r\n    const handleDataRefresh = () => {\r\n      if (typeof window !== \"undefined\") {\r\n        const windowData = (window as any).__FW_DATA__;\r\n        if (windowData?.theme) {\r\n          // Use functional update to avoid stale closure\r\n          setTheme((currentTheme) => {\r\n            if (windowData.theme !== currentTheme) {\r\n              return windowData.theme;\r\n            }\r\n            return currentTheme;\r\n          });\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n\r\n    return () => {\r\n      window.removeEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n    };\r\n  }, []);\r\n\r\n  // Update theme when initialTheme prop changes (e.g., during SPA navigation)\r\n  // This is the primary way theme updates during SPA navigation when layout re-renders\r\n  useEffect(() => {\r\n    if (initialTheme) {\r\n      // Always update if initialTheme is provided, even if it's the same\r\n      // This ensures theme syncs correctly during SPA navigation\r\n      setTheme(initialTheme);\r\n    }\r\n  }, [initialTheme]);\r\n\r\n  // Update body class when theme changes (skip during initial hydration to avoid mismatch)\r\n  useEffect(() => {\r\n    if (typeof document === \"undefined\") return;\r\n\r\n    const body = document.body;\r\n    const currentClasses = body.className.split(\" \").filter(Boolean);\r\n    \r\n    // Remove old theme classes (light, dark, etc.)\r\n    const themeClasses = [\"light\", \"dark\"];\r\n    const filteredClasses = currentClasses.filter(\r\n      (cls) => !themeClasses.includes(cls)\r\n    );\r\n    \r\n    // Add new theme class\r\n    const newClassName = [...filteredClasses, theme].filter(Boolean).join(\" \");\r\n    \r\n    // Only update if different to avoid unnecessary DOM updates\r\n    if (body.className !== newClassName) {\r\n      body.className = newClassName;\r\n    }\r\n\r\n    sendMessage(theme);\r\n  }, [theme, sendMessage]);\r\n\r\n  const handleThemeChange = (newTheme: string) => {\r\n    setTheme(newTheme);\r\n\r\n    // Set theme cookie\r\n    document.cookie = `theme=${newTheme}; path=/; max-age=31536000`; // 1 year expiry\r\n\r\n    // Update window.__FW_DATA__.theme so getCurrentTheme() returns the correct value during navigation\r\n    if (typeof window !== \"undefined\" && (window as any).__FW_DATA__) {\r\n      (window as any).__FW_DATA__ = {\r\n        ...(window as any).__FW_DATA__,\r\n        theme: newTheme,\r\n      };\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ theme, handleThemeChange }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => {\r\n  return useContext(ThemeContext);\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\nexport const useBroadcastChannel = (channelName: string) => {\r\n  const [message, setMessage] = useState(null);\r\n  const channel = new BroadcastChannel(channelName);\r\n\r\n  useEffect(() => {\r\n    const handleMessage = (event: MessageEvent) => {\r\n      setMessage(event.data);\r\n    };\r\n\r\n    channel.onmessage = handleMessage;\r\n\r\n    // Clean up the channel when the component unmounts\r\n    return () => {\r\n      channel.close();\r\n    };\r\n  }, [channel]);\r\n\r\n  const sendMessage = (msg: unknown) => {\r\n    channel.postMessage(msg);\r\n  };\r\n\r\n  return { message, sendMessage };\r\n};\r\n"],"mappings":"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","names":["useState","useEffect","useState","useEffect"]}
+{"version":3,"sources":["../../modules/react/themes/theme-provider/index.tsx","../../modules/react/hooks/useBroadcastChannel/index.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect, useRef } from \"react\";\r\nimport { useBroadcastChannel } from \"../../hooks/useBroadcastChannel\";\r\n\r\nconst ThemeContext = createContext<{\r\n  theme: string;\r\n  handleThemeChange: (theme: string) => void;\r\n}>({ theme: \"light\", handleThemeChange: () => {} });\r\n\r\n// Helper function to get cookie value\r\nfunction getCookie(name: string): string | null {\r\n  if (typeof document === \"undefined\") return null;\r\n  const value = `; ${document.cookie}`;\r\n  const parts = value.split(`; ${name}=`);\r\n  if (parts.length === 2) {\r\n    return parts.pop()?.split(\";\").shift() || null;\r\n  }\r\n  return null;\r\n}\r\n\r\nexport const ThemeProvider = ({ \r\n  children,\r\n  initialTheme \r\n}: { \r\n  children: React.ReactNode;\r\n  initialTheme?: string;\r\n}) => {\r\n  const { message: themeMessage, sendMessage } = useBroadcastChannel('theme_channel');\r\n  \r\n  // Track what we last sent to avoid loops\r\n  const lastSentRef = useRef<string | null>(null);\r\n\r\n  // Initialize theme consistently between server and client\r\n  const [theme, setTheme] = useState<string>(() => {\r\n    if (initialTheme) return initialTheme;\r\n    \r\n    if (typeof window !== \"undefined\") {\r\n      const windowData = (window as any).__FW_DATA__;\r\n      if (windowData?.theme) return windowData.theme;\r\n    }\r\n    \r\n    if (typeof window !== \"undefined\") {\r\n      const cookieTheme = getCookie(\"theme\");\r\n      if (cookieTheme) return cookieTheme;\r\n    }\r\n    \r\n    return \"light\";\r\n  });\r\n\r\n  // Handle messages from broadcast channel (other tabs)\r\n  // This effect ONLY responds to themeMessage changes, not theme changes\r\n  useEffect(() => {\r\n    if (!themeMessage) return;\r\n    \r\n    // Ignore if this is a message we just sent\r\n    if (themeMessage === lastSentRef.current) {\r\n      lastSentRef.current = null;\r\n      return;\r\n    }\r\n    \r\n    // Only update if different from current theme\r\n    setTheme((currentTheme) => {\r\n      if (themeMessage !== currentTheme) {\r\n        // Update cookie\r\n        if (typeof document !== \"undefined\") {\r\n          document.cookie = `theme=${themeMessage}; path=/; max-age=31536000`;\r\n        }\r\n        \r\n        // Update window data\r\n        if (typeof window !== \"undefined\") {\r\n          if (!(window as any).__FW_DATA__) {\r\n            (window as any).__FW_DATA__ = {};\r\n          }\r\n          (window as any).__FW_DATA__ = {\r\n            ...(window as any).__FW_DATA__,\r\n            theme: themeMessage,\r\n          };\r\n        }\r\n        \r\n        return themeMessage;\r\n      }\r\n      return currentTheme;\r\n    });\r\n  }, [themeMessage]); // Only depend on themeMessage, NOT theme!\r\n\r\n  // Handle window.__FW_DATA__ changes during SPA navigation\r\n  useEffect(() => {\r\n    const handleDataRefresh = () => {\r\n      if (typeof window !== \"undefined\") {\r\n        const windowData = (window as any).__FW_DATA__;\r\n        if (windowData?.theme) {\r\n          setTheme((currentTheme) => {\r\n            if (windowData.theme !== currentTheme) {\r\n              return windowData.theme;\r\n            }\r\n            return currentTheme;\r\n          });\r\n        }\r\n      }\r\n    };\r\n\r\n    if (typeof window !== \"undefined\") {\r\n      window.addEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n      return () => {\r\n        window.removeEventListener(\"fw-data-refresh\", handleDataRefresh);\r\n      };\r\n    }\r\n  }, []); // No dependencies - event listener doesn't need theme\r\n\r\n  // Handle initialTheme prop changes\r\n  useEffect(() => {\r\n    if (initialTheme && initialTheme !== theme) {\r\n      setTheme(initialTheme);\r\n    }\r\n  }, [initialTheme]); // Only depend on initialTheme, not theme\r\n\r\n  // Update body class when theme changes\r\n  useEffect(() => {\r\n    if (typeof document === \"undefined\") return;\r\n\r\n    const body = document.body;\r\n    const currentClasses = body.className.split(\" \").filter(Boolean);\r\n    const themeClasses = [\"light\", \"dark\"];\r\n    const filteredClasses = currentClasses.filter(\r\n      (cls) => !themeClasses.includes(cls)\r\n    );\r\n    const newClassName = [...filteredClasses, theme].filter(Boolean).join(\" \");\r\n    \r\n    if (body.className !== newClassName) {\r\n      body.className = newClassName;\r\n    }\r\n  }, [theme]);\r\n\r\n  const handleThemeChange = (newTheme: string) => {\r\n    // Update state immediately\r\n    setTheme(newTheme);\r\n\r\n    // Update cookie\r\n    if (typeof document !== \"undefined\") {\r\n      document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;\r\n    }\r\n\r\n    // Update window data\r\n    if (typeof window !== \"undefined\") {\r\n      if (!(window as any).__FW_DATA__) {\r\n        (window as any).__FW_DATA__ = {};\r\n      }\r\n      (window as any).__FW_DATA__ = {\r\n        ...(window as any).__FW_DATA__,\r\n        theme: newTheme,\r\n      };\r\n    }\r\n    \r\n    // Mark this as the last value we sent\r\n    lastSentRef.current = newTheme;\r\n    \r\n    // Broadcast to other tabs\r\n    sendMessage(newTheme);\r\n    \r\n    // Clear the ref after a delay\r\n    setTimeout(() => {\r\n      if (lastSentRef.current === newTheme) {\r\n        lastSentRef.current = null;\r\n      }\r\n    }, 500);\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={{ theme, handleThemeChange }}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => {\r\n  return useContext(ThemeContext);\r\n};\r\n","import React, { useEffect, useState, useRef, useCallback } from \"react\";\r\n\r\nexport const useBroadcastChannel = (channelName: string) => {\r\n  const [message, setMessage] = useState(null);\r\n  const channelRef = useRef<BroadcastChannel | null>(null);\r\n\r\n  useEffect(() => {\r\n    // Create channel only once, inside useEffect\r\n    if (!channelRef.current && typeof window !== \"undefined\") {\r\n      channelRef.current = new BroadcastChannel(channelName);\r\n    }\r\n\r\n    const channel = channelRef.current;\r\n    if (!channel) return;\r\n\r\n    const handleMessage = (event: MessageEvent) => {\r\n      setMessage(event.data);\r\n    };\r\n\r\n    channel.onmessage = handleMessage;\r\n\r\n    // Clean up the channel when the component unmounts\r\n    return () => {\r\n      if (channelRef.current) {\r\n        channelRef.current.close();\r\n        channelRef.current = null;\r\n      }\r\n    };\r\n  }, [channelName]);\r\n\r\n  const sendMessage = useCallback((msg: unknown) => {\r\n    if (channelRef.current) {\r\n      channelRef.current.postMessage(msg);\r\n    }\r\n  }, []);\r\n\r\n  return { message, sendMessage };\r\n};\r\n"],"mappings":"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","names":["useState","useEffect","useRef","useRef","useState","useEffect"]}