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

package/src/sections/tabs-section.tsx

@@ -10,6 +10,7 @@ import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
 import { useThemeSettingsContext } from '../theme-settings-context';
 
+import { postToEditor } from '../editor-bridge';
 interface TabsSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -30,16 +31,21 @@ const TabsSection: React.FC<TabsSectionProps> = ({
 
   // Separate tab blocks from non-tab blocks (like headers)
   const nonTabBlocks = section.blocks
-    .filter((block) => block.type !== 'tab' && (isDesigner ? true : !block.hidden))
+    .filter(
+      (block) => block.type !== 'tab' && (isDesigner ? true : !block.hidden)
+    )
     .sort((a, b) => (a.order || 0) - (b.order || 0));
 
   const tabBlocks = section.blocks
-    .filter((block) => block.type === 'tab' && (isDesigner ? true : !block.hidden))
+    .filter(
+      (block) => block.type === 'tab' && (isDesigner ? true : !block.hidden)
+    )
     .sort((a, b) => (a.order || 0) - (b.order || 0));
 
   const getResponsiveValue = useCallback(
     <T,>(value: unknown, fallback: T): T => {
-      if (value === undefined || value === null || value === '') return fallback;
+      if (value === undefined || value === null || value === '')
+        return fallback;
       if (typeof value === 'object' && !Array.isArray(value)) {
         const responsiveValue = value as Record<string, T | undefined> & {
           desktop?: T;
@@ -93,12 +99,7 @@ const TabsSection: React.FC<TabsSectionProps> = ({
     if (activeTabIndex > tabBlocks.length - 1) {
       setActiveTabIndex(tabBlocks.length - 1);
     }
-  }, [
-    activeTabIndex,
-    findTabIndexBySelectedBlock,
-    selectedBlockId,
-    tabBlocks
-  ]);
+  }, [activeTabIndex, findTabIndexBySelectedBlock, selectedBlockId, tabBlocks]);
 
   const activeTabColor = resolveThemeCssVariables(
     getResponsiveValue<string>(
@@ -218,93 +219,75 @@ const TabsSection: React.FC<TabsSectionProps> = ({
           selectedBlockId={selectedBlockId}
           onMoveUp={() => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'MOVE_BLOCK_UP',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'MOVE_BLOCK_UP',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id
+                }
+              });
             }
           }}
           onMoveDown={() => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'MOVE_BLOCK_DOWN',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'MOVE_BLOCK_DOWN',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id
+                }
+              });
             }
           }}
           onDuplicate={() => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'DUPLICATE_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'DUPLICATE_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id
+                }
+              });
             }
           }}
           onToggleVisibility={() => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'TOGGLE_BLOCK_VISIBILITY',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'TOGGLE_BLOCK_VISIBILITY',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id
+                }
+              });
             }
           }}
           onDelete={() => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'DELETE_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'DELETE_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id
+                }
+              });
             }
           }}
           onRename={(newLabel) => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'RENAME_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId: section.id,
-                    blockId: block.id,
-                    label: newLabel
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'RENAME_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId: section.id,
+                  blockId: block.id,
+                  label: newLabel
+                }
+              });
             }
           }}
         />
@@ -328,7 +311,11 @@ const TabsSection: React.FC<TabsSectionProps> = ({
 
           const isActive = index === activeTabIndex;
           const headerStyles = resolveThemeStyleObject(
-            getCSSStyles(headerBlock.styles || {}, themeSettings, currentBreakpoint),
+            getCSSStyles(
+              headerBlock.styles || {},
+              themeSettings,
+              currentBreakpoint
+            ),
             themeSettings
           );
           const cleanHeaderStyles = {
@@ -370,93 +357,75 @@ const TabsSection: React.FC<TabsSectionProps> = ({
                     selectedBlockId={selectedBlockId}
                     onMoveUp={() => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'MOVE_BLOCK_UP',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'MOVE_BLOCK_UP',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id
+                          }
+                        });
                       }
                     }}
                     onMoveDown={() => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'MOVE_BLOCK_DOWN',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'MOVE_BLOCK_DOWN',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id
+                          }
+                        });
                       }
                     }}
                     onDuplicate={() => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'DUPLICATE_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'DUPLICATE_BLOCK',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id
+                          }
+                        });
                       }
                     }}
                     onToggleVisibility={() => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'TOGGLE_BLOCK_VISIBILITY',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'TOGGLE_BLOCK_VISIBILITY',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id
+                          }
+                        });
                       }
                     }}
                     onDelete={() => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'DELETE_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'DELETE_BLOCK',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id
+                          }
+                        });
                       }
                     }}
                     onRename={(newLabel) => {
                       if (window.parent) {
-                        window.parent.postMessage(
-                          {
-                            type: 'RENAME_BLOCK',
-                            data: {
-                              placeholderId,
-                              sectionId: section.id,
-                              blockId: tabBlock.id,
-                              label: newLabel
-                            }
-                          },
-                          '*'
-                        );
+                        postToEditor({
+                          type: 'RENAME_BLOCK',
+                          data: {
+                            placeholderId,
+                            sectionId: section.id,
+                            blockId: tabBlock.id,
+                            label: newLabel
+                          }
+                        });
                       }
                     }}
                   />
@@ -485,7 +454,9 @@ const TabsSection: React.FC<TabsSectionProps> = ({
                 onClick={() => setActiveTabIndex(index)}
               >
                 {headerBlock.blocks
-                  ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+                  ?.filter((childBlock) =>
+                    isDesigner ? true : !childBlock.hidden
+                  )
                   .sort((a, b) => (a.order || 0) - (b.order || 0))
                   .map((childBlock, childIndex) => {
                     // If tab is active, we want to override the child's color with the active tab color
@@ -537,7 +508,11 @@ const TabsSection: React.FC<TabsSectionProps> = ({
           if (!contentBlock) return null;
 
           const contentStyles = resolveThemeStyleObject(
-            getCSSStyles(contentBlock.styles || {}, themeSettings, currentBreakpoint),
+            getCSSStyles(
+              contentBlock.styles || {},
+              themeSettings,
+              currentBreakpoint
+            ),
             themeSettings
           );
 
@@ -547,7 +522,9 @@ const TabsSection: React.FC<TabsSectionProps> = ({
               style={contentStyles}
             >
               {contentBlock.blocks
-                ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+                ?.filter((childBlock) =>
+                  isDesigner ? true : !childBlock.hidden
+                )
                 .sort((a, b) => (a.order || 0) - (b.order || 0))
                 .map((childBlock, childIndex) => (
                   <ThemeBlock

package/src/theme-placeholder-client.tsx

@@ -11,6 +11,8 @@ import { useVisibilityContext } from './hooks/use-visibility-context';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
 import { isPublishWindowVisible } from './utils/publish-window';
 
+import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 // Global flags that must survive component remounts (e.g. in-iframe route
 // changes): IFRAME_READY is sent once per document, and the designer flag
 // arrives once from the editor in response — remounted components must not
@@ -64,12 +66,9 @@ export default function ThemePlaceholderClient({
     if (isInIframe && window.parent) {
       // Only send IFRAME_READY once per page session to prevent re-initialization
       if (!window.__iframeReadySent) {
-        window.parent.postMessage(
-          {
-            type: 'IFRAME_READY'
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'IFRAME_READY'
+        });
         window.__iframeReadySent = true;
       }
 
@@ -77,6 +76,7 @@ export default function ThemePlaceholderClient({
     }
 
     const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
       switch (event.data?.type) {
         case 'SET_THEME_EDITOR_COOKIE':
           if (event.data.data) {
@@ -144,7 +144,7 @@ export default function ThemePlaceholderClient({
   }, [slug]);
 
   const sendAction = (
-    action: string,
+    action: PreviewToEditorMessageType,
     data: {
       placeholderId?: string;
       sectionId?: string;
@@ -153,13 +153,10 @@ export default function ThemePlaceholderClient({
     }
   ) => {
     if (window.parent) {
-      window.parent.postMessage(
-        {
-          type: action,
-          data
-        },
-        '*'
-      );
+      postToEditor({
+        type: action,
+        data
+      });
     }
   };
 

package/src/theme-placeholder-wrapper.tsx

@@ -16,6 +16,8 @@ import { createPageContextDiscovery } from './utils/page-context-discovery';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
 import { isPublishWindowVisible } from './utils/publish-window';
 import { buildClientRequestUrl } from '@akinon/next/utils';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
+import { parseEditorMessage, postToEditor } from './editor-bridge';
 
 // Helper function to inject theme colors as CSS custom properties
 const injectThemeColors = (settings: Record<string, unknown>) => {
@@ -166,22 +168,15 @@ const postProductPickerResponse = (
   result?: unknown,
   error?: string
 ) => {
-  if (!window.parent) {
-    return;
-  }
-
-  window.parent.postMessage(
-    {
-      type: 'PRODUCT_PICKER_RESPONSE',
-      data: {
-        requestId,
-        ok,
-        result,
-        error
-      }
-    },
-    '*'
-  );
+  postToEditor({
+    type: 'PRODUCT_PICKER_RESPONSE',
+    data: {
+      requestId,
+      ok,
+      result,
+      error
+    }
+  });
 };
 
 const attachProductPickerPreviewListener = () => {
@@ -195,8 +190,14 @@ const attachProductPickerPreviewListener = () => {
   window.__productPickerPreviewListenerAttached = true;
 
   window.addEventListener('message', async (event) => {
-    const type = event.data?.type;
-    const requestId = event.data?.data?.requestId;
+    // This listener performs storefront fetches on request — never service
+    // a frame from an untrusted embedder.
+    const message = parseEditorMessage(event);
+    if (!message) return;
+
+    const type = message.type;
+    const requestId = (message.data as { requestId?: unknown } | undefined)
+      ?.requestId;
 
     if (
       ![
@@ -374,15 +375,12 @@ export default function ThemePlaceholderWrapper({
     if (typeof window === 'undefined') return;
     if (window.self === window.top || !window.parent) return;
 
-    window.parent.postMessage(
-      {
-        type: 'PAGE_CONTEXT_DISCOVERY',
-        data: {
-          discovery: createPageContextDiscovery(resolvedPageContext)
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type: 'PAGE_CONTEXT_DISCOVERY',
+      data: {
+        discovery: createPageContextDiscovery(resolvedPageContext)
+      }
+    });
   }, [resolvedPageContext]);
 
   // Load fonts from initial sections on mount (for production site, not iframe)
@@ -494,12 +492,7 @@ export default function ThemePlaceholderWrapper({
 
       // Only send IFRAME_READY once per page session to prevent re-initialization
       if (!window.__iframeReadySent) {
-        window.parent.postMessage(
-          {
-            type: 'IFRAME_READY'
-          },
-          '*'
-        );
+        postToEditor({ type: 'IFRAME_READY' });
         window.__iframeReadySent = true;
       }
 
@@ -507,9 +500,15 @@ export default function ThemePlaceholderWrapper({
     }
 
     const handleMessage = (event: MessageEvent) => {
-      switch (event.data?.type) {
+      const message = parseEditorMessage(event);
+      if (!message) return;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const messageData: any = message.data;
+
+      switch (message.type) {
         case 'SET_THEME_EDITOR_COOKIE':
-          if (event.data.data) {
+          if (messageData) {
             window.__themeEditorDesigner = true;
             setIsDesigner(true);
           }
@@ -517,7 +516,7 @@ export default function ThemePlaceholderWrapper({
 
         case 'LOAD_THEME':
         case 'UPDATE_THEME': {
-          const theme = event.data.data?.theme;
+          const theme = messageData?.theme;
 
           // Inject theme colors as CSS custom properties
           if (theme?.settings) {
@@ -621,7 +620,7 @@ export default function ThemePlaceholderWrapper({
         }
 
         case 'SELECT_SECTION': {
-          const { sectionId } = event.data.data || {};
+          const { sectionId } = messageData || {};
           if (sectionId) {
             setSelectedSectionId(sectionId);
             setSelectedBlockId(null);
@@ -630,7 +629,7 @@ export default function ThemePlaceholderWrapper({
         }
 
         case 'SELECT_BLOCK': {
-          const { blockId } = event.data.data || {};
+          const { blockId } = messageData || {};
           if (blockId) {
             setSelectedBlockId(blockId);
             setSelectedSectionId(null);
@@ -639,7 +638,7 @@ export default function ThemePlaceholderWrapper({
         }
 
         case 'CHANGE_BREAKPOINT': {
-          const { breakpoint } = event.data.data || {};
+          const { breakpoint } = messageData || {};
           if (breakpoint) {
             setCurrentBreakpoint(breakpoint);
           }
@@ -653,7 +652,7 @@ export default function ThemePlaceholderWrapper({
         }
 
         case 'LOAD_FONT': {
-          const { fontFamily, fontWeight } = event.data.data || {};
+          const { fontFamily, fontWeight } = messageData || {};
           if (fontFamily) {
             loadGoogleFont(fontFamily, fontWeight);
           }
@@ -661,7 +660,7 @@ export default function ThemePlaceholderWrapper({
         }
 
         case 'LOAD_CUSTOM_FONT': {
-          const { name, sources } = event.data.data || {};
+          const { name, sources } = messageData || {};
           if (!name || !Array.isArray(sources) || sources.length === 0) break;
 
           const styleId = `custom-font-${name
@@ -693,7 +692,7 @@ export default function ThemePlaceholderWrapper({
   }, [slug]);
 
   const sendAction = (
-    action: string,
+    action: PreviewToEditorMessageType,
     data: {
       placeholderId?: string;
       sectionId?: string;
@@ -701,15 +700,7 @@ export default function ThemePlaceholderWrapper({
       label?: string;
     }
   ) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          type: action,
-          data
-        },
-        '*'
-      );
-    }
+    postToEditor({ type: action, data });
   };
 
   const dynamicCSS = useMemo(