@propknot/shared-ui 1.0.5 → 1.0.6

package/dist/index.js

@@ -1545,15 +1545,33 @@ var CustomThemeProvider = ({ children }) => {
   const [currentTheme, setCurrentTheme] = (0, import_react3.useState)("light");
   const [loading, setLoading] = (0, import_react3.useState)(false);
   const { user, companyBranding } = useAuth();
+  const isEmbedded = new URLSearchParams(window.location.search).get("embedded") === "true";
   const canModifyTheme = Boolean(user && (user.role === "admin" || user.role === "owner" || user.role === "property_manager" || user.role === "maintenance"));
   (0, import_react3.useEffect)(() => {
+    if (!isEmbedded) return;
+    const handleMessage = (event) => {
+      if (!event.origin.startsWith("http://localhost:")) return;
+      const { type, theme } = event.data;
+      if (type === "THEME_CHANGE" && theme && ["light", "dark"].includes(theme)) {
+        console.log("Embedded app received theme change:", theme);
+        setCurrentTheme(theme);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: "REQUEST_THEME" }, "*");
+    }
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isEmbedded]);
+  (0, import_react3.useEffect)(() => {
+    if (isEmbedded) return;
     if (user && canModifyTheme) {
       const themeToUse = user.themePreference || "light";
       setCurrentTheme(themeToUse);
     } else {
       setCurrentTheme("light");
     }
-  }, [user, canModifyTheme]);
+  }, [user, canModifyTheme, isEmbedded]);
   const toggleTheme = async () => {
     if (!canModifyTheme) return;
     const newTheme = currentTheme === "light" ? "dark" : "light";

package/dist/index.mjs

@@ -1481,15 +1481,33 @@ var CustomThemeProvider = ({ children }) => {
   const [currentTheme, setCurrentTheme] = useState3("light");
   const [loading, setLoading] = useState3(false);
   const { user, companyBranding } = useAuth();
+  const isEmbedded = new URLSearchParams(window.location.search).get("embedded") === "true";
   const canModifyTheme = Boolean(user && (user.role === "admin" || user.role === "owner" || user.role === "property_manager" || user.role === "maintenance"));
   useEffect2(() => {
+    if (!isEmbedded) return;
+    const handleMessage = (event) => {
+      if (!event.origin.startsWith("http://localhost:")) return;
+      const { type, theme } = event.data;
+      if (type === "THEME_CHANGE" && theme && ["light", "dark"].includes(theme)) {
+        console.log("Embedded app received theme change:", theme);
+        setCurrentTheme(theme);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: "REQUEST_THEME" }, "*");
+    }
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isEmbedded]);
+  useEffect2(() => {
+    if (isEmbedded) return;
     if (user && canModifyTheme) {
       const themeToUse = user.themePreference || "light";
       setCurrentTheme(themeToUse);
     } else {
       setCurrentTheme("light");
     }
-  }, [user, canModifyTheme]);
+  }, [user, canModifyTheme, isEmbedded]);
   const toggleTheme = async () => {
     if (!canModifyTheme) return;
     const newTheme = currentTheme === "light" ? "dark" : "light";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propknot/shared-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "files": [