@akinon/pz-theme 2.0.58-rc.0 → 2.0.58

package/src/overlays/use-overlay-breakpoint.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { parseEditorMessage } from '../editor-bridge';
+import { breakpointForWidth } from '../utils/breakpoints';
+
+/**
+ * Which breakpoint the surrounding page is at.
+ *
+ * `ThemePlaceholderWrapper` already tracks this for the sections it renders,
+ * but a modal host is not inside a placeholder — it is mounted once in the
+ * brand's layout — so it cannot read that state and needs its own copy of the
+ * same rule.
+ *
+ * Two sources, exactly as the wrapper has: the viewport on a live storefront,
+ * and the editor's forced breakpoint in the canvas. Inside the iframe the
+ * viewport is the iframe's, not the device the designer picked, so the message
+ * wins there and the resize listener is not installed at all.
+ */
+export const useOverlayBreakpoint = (): string => {
+  const [breakpoint, setBreakpoint] = useState<string>('desktop');
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+
+    const inIframe = (() => {
+      try {
+        return window.self !== window.top;
+      } catch {
+        // Cross-origin parent: the access threw, which itself means embedded.
+        return true;
+      }
+    })();
+
+    if (inIframe) {
+      const handleMessage = (event: MessageEvent) => {
+        const message = parseEditorMessage(event);
+        if (message?.type !== 'CHANGE_BREAKPOINT') return;
+
+        const next = (message.data as { breakpoint?: string })?.breakpoint;
+        if (next) setBreakpoint(next);
+      };
+
+      window.addEventListener('message', handleMessage);
+
+      return () => window.removeEventListener('message', handleMessage);
+    }
+
+    const read = () => setBreakpoint(breakpointForWidth(window.innerWidth));
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(read, 200);
+    };
+
+    read();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return breakpoint;
+};