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

package/src/hooks/use-designer-features.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback } from 'react';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface BlockInfo {
   id: string;
   type: string;
@@ -30,19 +32,16 @@ export function useDesignerFeatures({
         e.stopPropagation();
 
         if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'SELECT_BLOCK',
-              data: {
-                placeholderId,
-                sectionId,
-                blockId,
-                blockType: blockInfo?.type,
-                blockLabel: blockInfo?.label
-              }
-            },
-            '*'
-          );
+          postToEditor({
+            type: 'SELECT_BLOCK',
+            data: {
+              placeholderId,
+              sectionId,
+              blockId,
+              blockType: blockInfo?.type,
+              blockLabel: blockInfo?.label
+            }
+          });
         }
       }
     },
@@ -50,19 +49,16 @@ export function useDesignerFeatures({
   );
 
   const createActionHandler = useCallback(
-    (actionType: string) => () => {
+    (actionType: PreviewToEditorMessageType) => () => {
       if (window.parent) {
-        window.parent.postMessage(
-          {
-            type: actionType,
-            data: {
-              placeholderId,
-              sectionId,
-              blockId
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: actionType,
+          data: {
+            placeholderId,
+            sectionId,
+            blockId
+          }
+        });
       }
     },
     [blockId, placeholderId, sectionId]
@@ -71,18 +67,15 @@ export function useDesignerFeatures({
   const handleRename = useCallback(
     (newLabel: string) => {
       if (window.parent) {
-        window.parent.postMessage(
-          {
-            type: 'RENAME_BLOCK',
-            data: {
-              placeholderId,
-              sectionId,
-              blockId,
-              label: newLabel
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'RENAME_BLOCK',
+          data: {
+            placeholderId,
+            sectionId,
+            blockId,
+            label: newLabel
+          }
+        });
       }
     },
     [blockId, placeholderId, sectionId]

package/src/placeholder-registry.ts

@@ -1,3 +1,4 @@
+import { postToEditor } from './editor-bridge';
 const placeholderRegistry = new Set<string>();
 let registryTimeout: NodeJS.Timeout | null = null;
 
@@ -15,13 +16,10 @@ export const registerPlaceholder = (slug: string) => {
       window.self !== window.top
     ) {
       const availablePlaceholders = Array.from(placeholderRegistry);
-      window.parent.postMessage(
-        {
-          type: 'PLACEHOLDERS_AVAILABLE',
-          data: { placeholders: availablePlaceholders }
-        },
-        '*'
-      );
+      postToEditor({
+        type: 'PLACEHOLDERS_AVAILABLE',
+        data: { placeholders: availablePlaceholders }
+      });
     }
   }, 100);
 };

package/src/sections/__tests__/countdown-campaign-banner-section.test.tsx

@@ -25,17 +25,19 @@ const renderSection = (props: any = {}) => {
   let utils: ReturnType<typeof render>;
   act(() => {
     utils = render(
-      <CountdownCampaignBannerSection section={makeSection(props.section)} {...props} />
+      <CountdownCampaignBannerSection
+        section={makeSection(props.section)}
+        {...props}
+      />
     );
   });
-  // @ts-expect-error assigned inside act
   return utils;
 };
 
 // Fixed "now" so countdown math is deterministic.
 const NOW = new Date('2026-06-26T00:00:00.000Z').getTime();
 // now + 1d 2h 3m 4s
-const DELTA_MS = ((((1 * 24 + 2) * 60) + 3) * 60 + 4) * 1000;
+const DELTA_MS = (((1 * 24 + 2) * 60 + 3) * 60 + 4) * 1000;
 const END_MS = NOW + DELTA_MS;
 
 beforeEach(() => {
@@ -92,7 +94,9 @@ describe('CountdownCampaignBannerSection - parseEndDate', () => {
 
 describe('CountdownCampaignBannerSection - expired', () => {
   it('renders the default expired message for a past date', () => {
-    renderSection({ section: { properties: { 'end-date': '2000-01-01T00:00:00.000Z' } } });
+    renderSection({
+      section: { properties: { 'end-date': '2000-01-01T00:00:00.000Z' } }
+    });
 
     expect(screen.getByText('Campaign ended')).toBeInTheDocument();
     // No timer cells when expired.

package/src/sections/__tests__/coupon-banner-section.test.tsx

@@ -42,7 +42,7 @@ const renderSection = (section: AnyBlock, props: AnyBlock = {}) =>
     <CouponBannerSection
       section={section as never}
       currentBreakpoint="desktop"
-      {...(props as never)}
+      {...(props as object)}
     />
   );
 
@@ -62,7 +62,9 @@ describe('CouponBannerSection — role resolution', () => {
 
     renderSection(section);
 
-    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    const ids = screen
+      .getAllByTestId('tb')
+      .map((el) => el.getAttribute('data-id'));
     // label block rendered through ThemeBlock (role slot) ...
     expect(ids).toContain('label-1');
     // ... and the plain content block kept in the content column.

package/src/sections/before-after-section.tsx

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
 import ThemeBlock from '../theme-block';
 
+import { postToEditor } from '../editor-bridge';
 interface BeforeAfterSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -32,54 +33,99 @@ export default function BeforeAfterSection({
   const styles = section.styles || {};
   const properties = section.properties || {};
 
-  const beforeBlock = section.blocks?.find(b => b.label === 'Before Image');
-  const afterBlock = section.blocks?.find(b => b.label === 'After Image');
+  const beforeBlock = section.blocks?.find((b) => b.label === 'Before Image');
+  const afterBlock = section.blocks?.find((b) => b.label === 'After Image');
+
+  const height = getResponsiveValue(
+    styles.height,
+    currentBreakpoint,
+    '500px'
+  ) as string | number;
+  const width = getResponsiveValue(
+    styles.width,
+    currentBreakpoint,
+    '100%'
+  ) as string;
+  const maxWidth = getResponsiveValue(
+    styles['max-width'],
+    currentBreakpoint,
+    'normal'
+  ) as string;
 
-  const height = getResponsiveValue(styles.height, currentBreakpoint, '500px') as string | number;
-  const width = getResponsiveValue(styles.width, currentBreakpoint, '100%') as string;
-  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
-  
   const sliderColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['slider-color'], currentBreakpoint, '#ffffff') as string,
+    getResponsiveValue(
+      styles['slider-color'],
+      currentBreakpoint,
+      '#ffffff'
+    ) as string,
     themeSettings
   );
 
   const renderBlock = (block: any) => {
-      return (
-          <ThemeBlock
-            key={block.id}
-            block={block}
-            placeholderId={placeholderId}
-            sectionId={section.id}
-            isDesigner={isDesigner}
-            isSelected={selectedBlockId === block.id}
-            selectedBlockId={selectedBlockId}
-            currentBreakpoint={currentBreakpoint}
-            onMoveUp={() => {
-                if (window.parent) window.parent.postMessage({ 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 } }, '*');
-            }}
-            onDuplicate={() => {
-                if (window.parent) window.parent.postMessage({ 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 } }, '*');
-            }}
-            onDelete={() => {
-                if (window.parent) window.parent.postMessage({ 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 } }, '*');
-            }}
-          />
-      );
+    return (
+      <ThemeBlock
+        key={block.id}
+        block={block}
+        placeholderId={placeholderId}
+        sectionId={section.id}
+        isDesigner={isDesigner}
+        isSelected={selectedBlockId === block.id}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+        onMoveUp={() => {
+          if (window.parent)
+            postToEditor({
+              type: 'MOVE_BLOCK_UP',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
+        }}
+        onMoveDown={() => {
+          if (window.parent)
+            postToEditor({
+              type: 'MOVE_BLOCK_DOWN',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
+        }}
+        onDuplicate={() => {
+          if (window.parent)
+            postToEditor({
+              type: 'DUPLICATE_BLOCK',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
+        }}
+        onToggleVisibility={() => {
+          if (window.parent)
+            postToEditor({
+              type: 'TOGGLE_BLOCK_VISIBILITY',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
+        }}
+        onDelete={() => {
+          if (window.parent)
+            postToEditor({
+              type: 'DELETE_BLOCK',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
+        }}
+        onRename={(newLabel) => {
+          if (window.parent)
+            postToEditor({
+              type: 'RENAME_BLOCK',
+              data: {
+                placeholderId,
+                sectionId: section.id,
+                blockId: block.id,
+                label: newLabel
+              }
+            });
+        }}
+      />
+    );
   };
 
   useEffect(() => {
     if (!containerRef.current) return;
-    
+
     setContainerWidth(containerRef.current.offsetWidth);
 
     const observer = new ResizeObserver((entries) => {
@@ -87,32 +133,33 @@ export default function BeforeAfterSection({
         setContainerWidth(entry.contentRect.width);
       }
     });
-    
+
     observer.observe(containerRef.current);
-    
+
     return () => observer.disconnect();
   }, []);
 
   const handleStart = (clientX: number) => {
-      setIsResizing(true);
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-        setSliderPosition((x / rect.width) * 100);
-      }
+    setIsResizing(true);
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      setSliderPosition((x / rect.width) * 100);
+    }
   };
 
   const handleMouseDown = (e: React.MouseEvent) => handleStart(e.clientX);
-  const handleTouchStart = (e: React.TouchEvent) => handleStart(e.touches[0].clientX);
+  const handleTouchStart = (e: React.TouchEvent) =>
+    handleStart(e.touches[0].clientX);
 
   const handleMove = useCallback(
     (clientX: number) => {
       if (!isResizing || !containerRef.current) return;
-      
+
       const rect = containerRef.current.getBoundingClientRect();
       const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
       const percentage = (x / rect.width) * 100;
-      
+
       setSliderPosition(percentage);
     },
     [isResizing]
@@ -121,42 +168,43 @@ export default function BeforeAfterSection({
   const handleMouseMove = (e: React.MouseEvent) => {
     if (isResizing) handleMove(e.clientX);
   };
-  
+
   const handleTouchMove = (e: React.TouchEvent) => {
     if (isResizing) handleMove(e.touches[0].clientX);
   };
-  
+
   useEffect(() => {
     const handleGlobalEnd = () => setIsResizing(false);
     const handleGlobalMove = (e: MouseEvent) => {
-        if (isResizing) {
-            e.preventDefault();
-            handleMove(e.clientX);
-        }
+      if (isResizing) {
+        e.preventDefault();
+        handleMove(e.clientX);
+      }
     };
-    
+
     const handleGlobalTouchMove = (e: TouchEvent) => {
-        if (isResizing) {
-            handleMove(e.touches[0].clientX);
-        }
-    }
+      if (isResizing) {
+        handleMove(e.touches[0].clientX);
+      }
+    };
 
     if (isResizing) {
-        window.addEventListener('mouseup', handleGlobalEnd);
-        window.addEventListener('touchend', handleGlobalEnd);
-        window.addEventListener('mousemove', handleGlobalMove);
-        window.addEventListener('touchmove', handleGlobalTouchMove, { passive: false });
+      window.addEventListener('mouseup', handleGlobalEnd);
+      window.addEventListener('touchend', handleGlobalEnd);
+      window.addEventListener('mousemove', handleGlobalMove);
+      window.addEventListener('touchmove', handleGlobalTouchMove, {
+        passive: false
+      });
     }
 
     return () => {
-        window.removeEventListener('mouseup', handleGlobalEnd);
-        window.removeEventListener('touchend', handleGlobalEnd);
-        window.removeEventListener('mousemove', handleGlobalMove);
-        window.removeEventListener('touchmove', handleGlobalTouchMove);
+      window.removeEventListener('mouseup', handleGlobalEnd);
+      window.removeEventListener('touchend', handleGlobalEnd);
+      window.removeEventListener('mousemove', handleGlobalMove);
+      window.removeEventListener('touchmove', handleGlobalTouchMove);
     };
   }, [isResizing, handleMove]);
 
-
   const maxWidthClass =
     maxWidth === 'narrow'
       ? 'max-w-4xl'
@@ -165,81 +213,88 @@ export default function BeforeAfterSection({
       : maxWidth === 'full'
       ? 'w-full'
       : '';
-      
+
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
   return (
-    <div 
-        className={twMerge(
-            clsx(
-            'relative mx-auto select-none overflow-hidden group/before-after',
-            hasMaxWidth && 'mx-auto',
-            maxWidthClass
-            )
-        )}
-        style={{ 
-            height: typeof height === 'number' ? `${height}px` : height,
-            width: width === 'fill' ? '100%' : width,
-            maxWidth: maxWidth === 'none' ? 'none' : undefined
-        }}
-        ref={containerRef}
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}
-        onMouseMove={handleMouseMove}
-        onTouchMove={handleTouchMove}
+    <div
+      className={twMerge(
+        clsx(
+          'relative mx-auto select-none overflow-hidden group/before-after',
+          hasMaxWidth && 'mx-auto',
+          maxWidthClass
+        )
+      )}
+      style={{
+        height: typeof height === 'number' ? `${height}px` : height,
+        width: width === 'fill' ? '100%' : width,
+        maxWidth: maxWidth === 'none' ? 'none' : undefined
+      }}
+      ref={containerRef}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onMouseMove={handleMouseMove}
+      onTouchMove={handleTouchMove}
     >
-        <div className="absolute inset-0 w-full h-full">
-            {afterBlock ? (
-                <div className="w-full h-full pointer-events-none">
-                    {renderBlock(afterBlock)}
-                </div>
-            ) : (
-                <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 select-none pointer-events-none">
-                    No After Image
-                </div>
-            )}
-        </div>
+      <div className="absolute inset-0 w-full h-full">
+        {afterBlock ? (
+          <div className="w-full h-full pointer-events-none">
+            {renderBlock(afterBlock)}
+          </div>
+        ) : (
+          <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 select-none pointer-events-none">
+            No After Image
+          </div>
+        )}
+      </div>
 
-        <div 
-            className="absolute top-0 left-0 h-full overflow-hidden border-r"
-            style={{ 
-                width: `${sliderPosition}%`,
-                borderColor: sliderColor
-            }}
+      <div
+        className="absolute top-0 left-0 h-full overflow-hidden border-r"
+        style={{
+          width: `${sliderPosition}%`,
+          borderColor: sliderColor
+        }}
+      >
+        <div
+          className="relative h-full"
+          style={{ width: containerWidth ? `${containerWidth}px` : '100%' }}
         >
-            <div 
-                className="relative h-full" 
-                style={{ width: containerWidth ? `${containerWidth}px` : '100%' }}
-            >
-                 {beforeBlock ? (
-                     <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
-                        {renderBlock(beforeBlock)}
-                     </div>
-                 ) : (
-                    <div className="absolute top-0 left-0 w-full h-full bg-gray-300 flex items-center justify-center text-gray-500 select-none pointer-events-none">
-                        No Before Image
-                    </div>
-                 )}
+          {beforeBlock ? (
+            <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
+              {renderBlock(beforeBlock)}
             </div>
+          ) : (
+            <div className="absolute top-0 left-0 w-full h-full bg-gray-300 flex items-center justify-center text-gray-500 select-none pointer-events-none">
+              No Before Image
+            </div>
+          )}
         </div>
+      </div>
 
-        <div 
-            className={clsx(
-                "absolute top-0 bottom-0 w-1 z-20 cursor-ew-resize"
-            )}
-            style={{ 
-                left: `${sliderPosition}%`, 
-                backgroundColor: sliderColor,
-                transform: 'translateX(-50%)'
-            }}
-        >
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 pointer-events-none">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M10 15l-3-3 3-3" />
-                    <path d="M14 15l3-3-3-3" />
-                </svg>
-            </div>
+      <div
+        className={clsx('absolute top-0 bottom-0 w-1 z-20 cursor-ew-resize')}
+        style={{
+          left: `${sliderPosition}%`,
+          backgroundColor: sliderColor,
+          transform: 'translateX(-50%)'
+        }}
+      >
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 pointer-events-none">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M10 15l-3-3 3-3" />
+            <path d="M14 15l3-3-3-3" />
+          </svg>
         </div>
+      </div>
     </div>
   );
 }