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

package/src/blocks/hotspot-block.tsx

@@ -7,6 +7,7 @@ import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalization } from '@akinon/next/hooks';
 import ThemeBlock from '../theme-block';
 
+import { postToEditor } from '../editor-bridge';
 const HotspotBlock = ({
   block,
   currentBreakpoint = 'desktop',
@@ -19,7 +20,7 @@ const HotspotBlock = ({
   const themeSettings = useThemeSettingsContext();
   const { locale } = useLocalization();
   const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
-    
+
   const styles = block.styles || {};
   const properties = block.properties || {};
 
@@ -27,7 +28,10 @@ const HotspotBlock = ({
     if (typeof content === 'string') return content;
     if (typeof content === 'object' && content !== null) {
       return (
-        content[locale] || content[defaultLocale] || Object.values(content)[0] || ''
+        content[locale] ||
+        content[defaultLocale] ||
+        Object.values(content)[0] ||
+        ''
       );
     }
     return '';
@@ -38,106 +42,193 @@ const HotspotBlock = ({
   const link = getLocalizedContent(properties.link);
   const linkText = getLocalizedContent(properties.linkText || 'View Details');
 
-  const backgroundColor = getResponsiveValue(styles['background-color'], currentBreakpoint, '#ffffff');
-  const color = getResponsiveValue(styles.color, currentBreakpoint, '#000000'); 
-  
-  const formatPercentage = (val: string | number | undefined, defaultVal: string): string => {
-      if (val === undefined || val === null || val === '') return defaultVal;
-      const strVal = String(val);
-      if (strVal.endsWith('%')) return strVal;
-      const num = parseFloat(strVal);
-      return isNaN(num) ? defaultVal : `${num}%`;
+  const backgroundColor = getResponsiveValue(
+    styles['background-color'],
+    currentBreakpoint,
+    '#ffffff'
+  );
+  const color = getResponsiveValue(styles.color, currentBreakpoint, '#000000');
+
+  const formatPercentage = (
+    val: string | number | undefined,
+    defaultVal: string
+  ): string => {
+    if (val === undefined || val === null || val === '') return defaultVal;
+    const strVal = String(val);
+    if (strVal.endsWith('%')) return strVal;
+    const num = parseFloat(strVal);
+    return isNaN(num) ? defaultVal : `${num}%`;
   };
 
-  const top = formatPercentage(getResponsiveValue(styles.top, currentBreakpoint) as string | number | undefined, '50%');
-  const left = formatPercentage(getResponsiveValue(styles.left, currentBreakpoint) as string | number | undefined, '50%');
-  
+  const top = formatPercentage(
+    getResponsiveValue(styles.top, currentBreakpoint) as
+      | string
+      | number
+      | undefined,
+    '50%'
+  );
+  const left = formatPercentage(
+    getResponsiveValue(styles.left, currentBreakpoint) as
+      | string
+      | number
+      | undefined,
+    '50%'
+  );
+
   const handleToggle = (e: React.MouseEvent) => {
-     if (isDesigner) return; 
-     e.stopPropagation();
-     setIsOpen(!isOpen);
+    if (isDesigner) return;
+    e.stopPropagation();
+    setIsOpen(!isOpen);
   };
 
   return (
-    <div 
-        className="absolute group pointer-events-auto"
-        style={{ top: top as string, left: left as string }}
+    <div
+      className="absolute group pointer-events-auto"
+      style={{ top: top as string, left: left as string }}
     >
       <button
         onClick={handleToggle}
         className="relative flex items-center justify-center w-8 h-8 -ml-4 -mt-4 cursor-pointer outline-none focus:outline-none z-10 pointer-events-auto"
-        aria-label={title || "Hotspot"}
+        aria-label={title || 'Hotspot'}
       >
-        <span 
+        <span
           className="absolute w-full h-full rounded-full animate-ping opacity-75"
           style={{ backgroundColor: backgroundColor as string }}
         ></span>
-        
-        <span 
+
+        <span
           className="relative w-4 h-4 rounded-full shadow-md"
           style={{ backgroundColor: backgroundColor as string }}
         ></span>
       </button>
 
       {(isOpen || (isDesigner && styles.forceOpen)) && (
-        <div 
-            className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto"
-        >
-            <div className="flex justify-between items-start mb-2">
-                {title && <h3 className="font-bold text-gray-900">{title}</h3>}
-                <button onClick={(e) => { e.stopPropagation(); setIsOpen(false); }} className="text-gray-400 hover:text-gray-600">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <line x1="18" y1="6" x2="6" y2="18"></line>
-                      <line x1="6" y1="6" x2="18" y2="18"></line>
-                    </svg>
-                </button>
-            </div>
-            {description && <p className="text-gray-600 mb-3">{description}</p>}
-            
-            {block.blocks && block.blocks.map((childBlock) => (
-                <div key={childBlock.id} className="mb-2">
-                    <ThemeBlock
-                        block={childBlock}
-                        placeholderId={placeholderId}
-                        sectionId={sectionId}
-                        isDesigner={isDesigner}
-                        currentBreakpoint={currentBreakpoint}
-                        isSelected={selectedBlockId === childBlock.id}
-                        selectedBlockId={selectedBlockId}
-                        onMoveUp={() => {
-                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
-                        }}
-                        onMoveDown={() => {
-                            if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
-                        }}
-                        onDuplicate={() => {
-                            if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
-                        }}
-                        onToggleVisibility={() => {
-                            if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
-                        }}
-                        onDelete={() => {
-                            if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK_FROM_PARENT', data: { placeholderId, sectionId, blockId: childBlock.id, parentBlockId: block.id } }, '*');
-                        }}
-                        onRename={(newLabel) => {
-                            if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId, blockId: childBlock.id, label: newLabel } }, '*');
-                        }}
-                    />
-                </div>
+        <div className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto">
+          <div className="flex justify-between items-start mb-2">
+            {title && <h3 className="font-bold text-gray-900">{title}</h3>}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+              }}
+              className="text-gray-400 hover:text-gray-600"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          {description && <p className="text-gray-600 mb-3">{description}</p>}
+
+          {block.blocks &&
+            block.blocks.map((childBlock) => (
+              <div key={childBlock.id} className="mb-2">
+                <ThemeBlock
+                  block={childBlock}
+                  placeholderId={placeholderId}
+                  sectionId={sectionId}
+                  isDesigner={isDesigner}
+                  currentBreakpoint={currentBreakpoint}
+                  isSelected={selectedBlockId === childBlock.id}
+                  selectedBlockId={selectedBlockId}
+                  onMoveUp={() => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'MOVE_BLOCK_UP',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          parentBlockId: block.id
+                        }
+                      });
+                  }}
+                  onMoveDown={() => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'MOVE_BLOCK_DOWN',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          parentBlockId: block.id
+                        }
+                      });
+                  }}
+                  onDuplicate={() => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'DUPLICATE_BLOCK',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          parentBlockId: block.id
+                        }
+                      });
+                  }}
+                  onToggleVisibility={() => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'TOGGLE_BLOCK_VISIBILITY',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          parentBlockId: block.id
+                        }
+                      });
+                  }}
+                  onDelete={() => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'DELETE_BLOCK_FROM_PARENT',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          parentBlockId: block.id
+                        }
+                      });
+                  }}
+                  onRename={(newLabel) => {
+                    if (window.parent)
+                      postToEditor({
+                        type: 'RENAME_BLOCK',
+                        data: {
+                          placeholderId,
+                          sectionId,
+                          blockId: childBlock.id,
+                          label: newLabel
+                        }
+                      });
+                  }}
+                />
+              </div>
             ))}
 
-            {link && (
-                <a 
-                    href={link} 
-                    className="text-blue-600 hover:underline font-medium block mt-2"
-                    onClick={(e) => e.stopPropagation()}
-                >
-                    {linkText} &rarr;
-                </a>
-            )}
-            
-            {/* Arrow */}
-            <div className="absolute left-1/2 top-full -translate-x-1/2 -mt-1 border-8 border-transparent border-t-white"></div>
+          {link && (
+            <a
+              href={link}
+              className="text-blue-600 hover:underline font-medium block mt-2"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {linkText} &rarr;
+            </a>
+          )}
+
+          {/* Arrow */}
+          <div className="absolute left-1/2 top-full -translate-x-1/2 -mt-1 border-8 border-transparent border-t-white"></div>
         </div>
       )}
     </div>

package/src/blocks/input-block.tsx

@@ -6,6 +6,7 @@ import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { useThemeSettingsContext } from '../theme-settings-context';
 
+import { postToEditor } from '../editor-bridge';
 const InputBlock = ({
   block,
   currentBreakpoint = 'desktop',
@@ -15,10 +16,7 @@ const InputBlock = ({
   const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
-  const resolveLocalizedValue = (
-    value: unknown,
-    fallback: string
-  ): string => {
+  const resolveLocalizedValue = (value: unknown, fallback: string): string => {
     if (value == null) return fallback;
 
     if (typeof value === 'object' && !Array.isArray(value)) {
@@ -33,7 +31,7 @@ const InputBlock = ({
         return String(responsive);
       }
 
-      const firstValue = Object.values(localized).find(item => item != null);
+      const firstValue = Object.values(localized).find((item) => item != null);
       if (firstValue != null) return String(firstValue);
     }
 
@@ -70,7 +68,10 @@ const InputBlock = ({
     }
 
     Object.keys(block.styles).forEach((key) => {
-      const styleValue = getResponsiveValue(block.styles[key], currentBreakpoint);
+      const styleValue = getResponsiveValue(
+        block.styles[key],
+        currentBreakpoint
+      );
       if (styleValue === undefined || styleValue === null) return;
 
       const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
@@ -93,16 +94,13 @@ const InputBlock = ({
     setLocalValue(nextValue);
 
     if (isDesigner && window.parent) {
-      window.parent.postMessage(
-        {
-          type: 'UPDATE_BLOCK_VALUE',
-          data: {
-            blockId: block.id,
-            value: nextValue
-          }
-        },
-        '*'
-      );
+      postToEditor({
+        type: 'UPDATE_BLOCK_VALUE',
+        data: {
+          blockId: block.id,
+          value: nextValue
+        }
+      });
     }
   };
 
@@ -120,4 +118,4 @@ const InputBlock = ({
   );
 };
 
-export default InputBlock;
+export default InputBlock;

package/src/blocks/link-block.tsx

@@ -9,6 +9,8 @@ import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 const LinkBlock = ({
   block,
   placeholderId,
@@ -155,36 +157,31 @@ const LinkBlock = ({
         .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
         .sort((a, b) => (a.order || 0) - (b.order || 0))
         .map((childBlock, index) => {
-          const createActionHandler = (actionType: string) => () => {
-            if (window.parent) {
-              window.parent.postMessage(
-                {
+          const createActionHandler =
+            (actionType: PreviewToEditorMessageType) => () => {
+              if (window.parent) {
+                postToEditor({
                   type: actionType,
                   data: {
                     placeholderId,
                     sectionId,
                     blockId: childBlock.id
                   }
-                },
-                '*'
-              );
-            }
-          };
+                });
+              }
+            };
 
           const handleRename = (newLabel: string) => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'RENAME_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId,
-                    blockId: childBlock.id,
-                    label: newLabel
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'RENAME_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId,
+                  blockId: childBlock.id,
+                  label: newLabel
+                }
+              });
             }
           };
 

package/src/blocks/slider-block.tsx

@@ -14,6 +14,8 @@ import {
 } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 const parseNumber = (value: unknown, fallback: number) => {
   if (value === undefined || value === null || value === '') return fallback;
   const parsed = typeof value === 'string' ? Number(value) : Number(value);
@@ -163,19 +165,20 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   );
   const maxWidthClass = hasMaxWidth ? `max-w-[${maxWidthValue}]` : '';
 
-  const blockAction = (action: string, blockId: string, label?: string) => {
+  const blockAction = (
+    action: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!isDesigner) return;
-    window.parent.postMessage(
-      {
-        type: 'BLOCK_ACTION',
-        action,
-        blockId,
-        sectionId,
-        placeholderId,
-        label
-      },
-      '*'
-    );
+    postToEditor({
+      type: 'BLOCK_ACTION',
+      action,
+      blockId,
+      sectionId,
+      placeholderId,
+      label
+    });
   };
 
   const modifySVGColor = (svgContent: string, color: string) => {

package/src/components/with-designer-features.tsx

@@ -6,6 +6,7 @@ import { getResponsiveValue } from '../utils';
 import DesignerOverlay from './designer-overlay';
 import { useDesignerFeatures } from '../hooks/use-designer-features';
 
+import { isTrustedEditorEvent } from '../editor-bridge';
 interface WithDesignerFeaturesProps {
   block: any;
   placeholderId: string;
@@ -60,6 +61,7 @@ export function WithDesignerFeatures({
     if (!isDesigner) return;
 
     const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
       if (
         event.data?.type === 'SCROLL_TO_BLOCK' &&
         event.data?.data?.blockId === actionBlockId

package/src/editor-bridge.ts

@@ -0,0 +1,160 @@
+import {
+  OutboundThemeMessage,
+  ParsedThemeMessageRejected,
+  THEME_CONTRACT_PROTOCOL_VERSION,
+  ThemeMessage,
+  createOriginGuard,
+  parseOriginList,
+  parseThemeMessage,
+  safeOrigin,
+  stampThemeMessage
+} from '@akinon/theme-contract';
+
+/**
+ * The preview side of the editor ⇄ preview postMessage boundary. Every
+ * message listener validates inbound events through `isTrustedEditorEvent`
+ * / `parseEditorMessage`, and every sender goes through `postToEditor` —
+ * so no designer code accepts frames from an arbitrary embedding page, and
+ * nothing is ever posted to `'*'`.
+ *
+ * The editor's origin comes from `NEXT_PUBLIC_THEME_EDITOR_ORIGINS`
+ * (comma-separated). Outside production, localhost origins are additionally
+ * trusted so local editor + storefront development needs no configuration.
+ */
+const guard = createOriginGuard({
+  allowedOrigins: parseOriginList(process.env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS),
+  allowLocalDev: process.env.NODE_ENV !== 'production'
+});
+
+/**
+ * The editor origin proven by a previously accepted inbound message. This
+ * is the preferred postMessage target — the allowlist may hold several
+ * origins, but only one of them is the live editor.
+ */
+let activeEditorOrigin: string | null = null;
+
+const warnedOnce = new Set<string>();
+const warnOnce = (key: string, message: string) => {
+  if (warnedOnce.has(key)) return;
+  warnedOnce.add(key);
+  // eslint-disable-next-line no-console
+  console.warn(message);
+};
+
+/**
+ * Whether a message event comes from a trusted editor origin. Call this
+ * FIRST in every designer message listener. Accepting an event also records
+ * its origin as the postMessage target for subsequent `postToEditor` calls.
+ */
+export function isTrustedEditorEvent(event: MessageEvent): boolean {
+  if (guard.isTrusted(event.origin)) {
+    activeEditorOrigin = event.origin;
+    return true;
+  }
+
+  // Only surface rejections that actually look like contract traffic —
+  // window.postMessage noise from extensions/devtools should stay silent.
+  const parsed = parseThemeMessage(event.data);
+  if (parsed.ok) {
+    warnOnce(
+      `origin:${event.origin}`,
+      `[theme-editor] Ignoring "${parsed.message.type}" from untrusted origin "${event.origin}". ` +
+        'Add the editor origin to NEXT_PUBLIC_THEME_EDITOR_ORIGINS to allow it.'
+    );
+  }
+  return false;
+}
+
+/**
+ * Origin check + contract validation in one step. Returns the validated
+ * message, or `null` for untrusted/foreign/unknown frames. A protocol
+ * version mismatch still returns the message (the envelope is additive)
+ * but warns once so a drifted deploy is visible.
+ */
+export function parseEditorMessage(event: MessageEvent): ThemeMessage | null {
+  if (!isTrustedEditorEvent(event)) return null;
+
+  const parsed = parseThemeMessage(event.data);
+  if (parsed.ok) {
+    if (parsed.versionMismatch) {
+      warnOnce(
+        `version:${parsed.remoteVersion}`,
+        `[theme-editor] Protocol version mismatch (remote ${parsed.remoteVersion}, local ${THEME_CONTRACT_PROTOCOL_VERSION}). Update @akinon/theme-contract on the older side.`
+      );
+    }
+    return parsed.message;
+  }
+
+  // Cast instead of narrowing: consumers compile with strict mode off,
+  // where the boolean-discriminant union does not narrow.
+  const rejection = parsed as ParsedThemeMessageRejected;
+  if (rejection.reason === 'unknown-type') {
+    warnOnce(
+      `unknown:${rejection.type}`,
+      `[theme-editor] Ignoring unknown message type "${rejection.type}" — editor and storefront builds may be out of sync.`
+    );
+  }
+  return null;
+}
+
+const resolveTargetOrigins = (): string[] => {
+  if (activeEditorOrigin) return [activeEditorOrigin];
+
+  // Before the editor's first message (e.g. IFRAME_READY on mount), the
+  // embedding page's origin is only known via the referrer — trust it only
+  // if the guard does.
+  const referrerOrigin = safeOrigin(document.referrer);
+  if (referrerOrigin && guard.isTrusted(referrerOrigin)) {
+    return [referrerOrigin];
+  }
+
+  // Last resort: address every allowlisted origin. postMessage delivers
+  // only to the one that actually matches the parent, so this is a targeted
+  // send, not a broadcast.
+  return [...guard.allowedOrigins];
+};
+
+/**
+ * Send a message up to the editor. Safe to call anywhere: it no-ops outside
+ * the browser and outside an iframe, stamps the protocol version, and never
+ * posts to `'*'` — if no trusted target can be resolved, the message is
+ * dropped with a one-time warning instead of leaked to an unknown embedder.
+ */
+export function postToEditor<TData>(
+  message: OutboundThemeMessage<TData>
+): void {
+  if (typeof window === 'undefined') return;
+  if (window.self === window.top || !window.parent) return;
+
+  const envelope = stampThemeMessage(message);
+  const targets = resolveTargetOrigins();
+
+  if (targets.length === 0) {
+    warnOnce(
+      'no-target',
+      `[theme-editor] Dropping "${envelope.type}" — no trusted editor origin known. ` +
+        'Set NEXT_PUBLIC_THEME_EDITOR_ORIGINS to the theme editor origin.'
+    );
+    return;
+  }
+
+  targets.forEach((origin) => {
+    window.parent.postMessage(envelope, origin);
+  });
+}
+
+/** Test-only: reset module state between cases. */
+export function __resetEditorBridgeForTests(): void {
+  activeEditorOrigin = null;
+  warnedOnce.clear();
+}
+
+// Re-exported so app-level senders can type their message helpers without
+// depending on @akinon/theme-contract directly.
+export type {
+  EditorToPreviewMessageType,
+  OutboundThemeMessage,
+  PreviewToEditorMessageType,
+  ThemeMessage,
+  ThemeMessageType
+} from '@akinon/theme-contract';