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

package/src/sections/pre-order-launch-banner-section.tsx

@@ -10,6 +10,7 @@ import { safeDeepClone } from '../utils/safe-clone';
 import { Section } from '../theme-section';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
 interface PreOrderLaunchBannerSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -497,9 +498,7 @@ export default function PreOrderLaunchBannerSection({
         properties: block.properties
           ? { ...block.properties }
           : block.properties,
-        styles: block.styles
-          ? safeDeepClone(block.styles)
-          : block.styles,
+        styles: block.styles ? safeDeepClone(block.styles) : block.styles,
         blocks: undefined
       };
 
@@ -611,73 +610,55 @@ export default function PreOrderLaunchBannerSection({
       currentBreakpoint={currentBreakpoint}
       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
+            }
+          });
         }
       }}
     />

package/src/sections/section-wrapper.tsx

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
 import { Section } from '../theme-section';
 
+import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
 interface SectionWrapperProps {
   section: Section;
   placeholderId: string;
@@ -67,6 +68,7 @@ export default function SectionWrapper({
     if (!isDesigner) return;
 
     const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
       if (
         event.data?.type === 'SCROLL_TO_SECTION' &&
         event.data?.data?.sectionId === section.id
@@ -88,16 +90,13 @@ export default function SectionWrapper({
       onSelect(section.id);
 
       if (window.parent) {
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId,
-              sectionId: section.id
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId,
+            sectionId: section.id
+          }
+        });
       }
     }
   };

package/src/sections/shipping-threshold-progress-section.tsx

@@ -18,6 +18,8 @@ import {
   escapeCssAttributeValue
 } from '../utils/css-safety';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface ShippingThresholdProgressSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -132,7 +134,11 @@ const toResponsiveStyle = (
   existing: unknown,
   nextValue: string
 ): Record<string, string> => {
-  if (typeof existing === 'object' && existing !== null && !Array.isArray(existing)) {
+  if (
+    typeof existing === 'object' &&
+    existing !== null &&
+    !Array.isArray(existing)
+  ) {
     const existingObject = existing as Record<string, unknown>;
     const responsiveKeys = Object.keys(existingObject).filter((key) =>
       ['desktop', 'tablet', 'mobile'].includes(key)
@@ -287,7 +293,11 @@ const ShippingThresholdProgressSection: React.FC<
   );
 
   const useLiveBasket = parseBoolean(
-    getResponsiveValue(section.properties?.['use-live-basket'], currentBreakpoint, true),
+    getResponsiveValue(
+      section.properties?.['use-live-basket'],
+      currentBreakpoint,
+      true
+    ),
     true
   );
 
@@ -297,7 +307,11 @@ const ShippingThresholdProgressSection: React.FC<
 
   const targetAmount = Math.max(
     parseAmount(
-      getResponsiveValue(section.properties?.['target-amount'], currentBreakpoint, 1000),
+      getResponsiveValue(
+        section.properties?.['target-amount'],
+        currentBreakpoint,
+        1000
+      ),
       1000
     ),
     1
@@ -326,8 +340,11 @@ const ShippingThresholdProgressSection: React.FC<
 
   const currencySymbol =
     String(
-      getResponsiveValue(section.properties?.['currency-symbol'], currentBreakpoint, 'TL') ||
+      getResponsiveValue(
+        section.properties?.['currency-symbol'],
+        currentBreakpoint,
         'TL'
+      ) || 'TL'
     ).trim() || 'TL';
 
   const tokenContext = {
@@ -379,13 +396,21 @@ const ShippingThresholdProgressSection: React.FC<
     ) || 'Continue to checkout'
   );
   const showStartLabel = parseBoolean(
-    getResponsiveValue(section.properties?.['show-start-label'], currentBreakpoint, false),
+    getResponsiveValue(
+      section.properties?.['show-start-label'],
+      currentBreakpoint,
+      false
+    ),
     false
   );
 
   const progressTrackColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['progress-track-color'], currentBreakpoint, '#e2e8f0')
+      getResponsiveValue(
+        section.styles?.['progress-track-color'],
+        currentBreakpoint,
+        '#e2e8f0'
+      )
     ),
     themeSettings
   );
@@ -412,7 +437,11 @@ const ShippingThresholdProgressSection: React.FC<
   const progressBarHeight = Math.min(
     Math.max(
       parseAmount(
-        getResponsiveValue(section.styles?.['progress-bar-height'], currentBreakpoint, 14),
+        getResponsiveValue(
+          section.styles?.['progress-bar-height'],
+          currentBreakpoint,
+          14
+        ),
         14
       ),
       8
@@ -448,10 +477,11 @@ const ShippingThresholdProgressSection: React.FC<
     progressPercent
   );
 
-  const { fillBlockId, markerBlockId, wrapperBlockId, startLabelBlockId } = useMemo(
-    () => findProgressBlockIds(sortedBlocks, currentBreakpoint),
-    [sortedBlocks, currentBreakpoint]
-  );
+  const { fillBlockId, markerBlockId, wrapperBlockId, startLabelBlockId } =
+    useMemo(
+      () => findProgressBlockIds(sortedBlocks, currentBreakpoint),
+      [sortedBlocks, currentBreakpoint]
+    );
 
   const dynamicProgressCss = useMemo(() => {
     const rules: string[] = [];
@@ -477,12 +507,16 @@ const ShippingThresholdProgressSection: React.FC<
 
     if (markerBlockId) {
       const escapedMarkerId = escapeCssAttributeValue(markerBlockId);
-      rules.push(`[data-block-id="${escapedMarkerId}"]{display:none !important;}`);
+      rules.push(
+        `[data-block-id="${escapedMarkerId}"]{display:none !important;}`
+      );
     }
 
     if (startLabelBlockId && !showStartLabel) {
       const escapedStartLabelId = escapeCssAttributeValue(startLabelBlockId);
-      rules.push(`[data-block-id="${escapedStartLabelId}"]{display:none !important;}`);
+      rules.push(
+        `[data-block-id="${escapedStartLabelId}"]{display:none !important;}`
+      );
     }
 
     // Neutralize any </style> breakout from editor-controlled color/radius
@@ -529,22 +563,27 @@ const ShippingThresholdProgressSection: React.FC<
     )
   );
 
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
 
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
+  const postBlockAction = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type,
+      data: {
+        placeholderId,
+        sectionId: section.id,
+        blockId,
+        ...(label ? { label } : {})
+      }
+    });
   };
 
   const renderBlock = (block: Block) => (
@@ -560,9 +599,13 @@ const ShippingThresholdProgressSection: React.FC<
       onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
       onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
       onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
+      onToggleVisibility={() =>
+        postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)
+      }
       onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
+      onRename={(newLabel) =>
+        postBlockAction('RENAME_BLOCK', block.id, newLabel)
+      }
     />
   );
 

package/src/sections/stats-counter-section.tsx

@@ -9,6 +9,8 @@ import { Section } from '../theme-section';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface StatsCounterSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -167,7 +169,9 @@ const resolveTextValue = (raw: unknown): string | null => {
   return null;
 };
 
-const getCounterTargetFromText = (value: string): Omit<CounterTarget, 'blockId'> | null => {
+const getCounterTargetFromText = (
+  value: string
+): Omit<CounterTarget, 'blockId'> | null => {
   const plain = stripHtml(value);
   const tokenMatch = plain.match(NUMBER_TOKEN_REGEX);
 
@@ -242,7 +246,10 @@ const injectAnimatedValues = (
   blocks: Block[],
   animatedValues: Record<string, string>
 ): Block[] => {
-  const replaceTokenInContent = (content: string, replacement: string): string => {
+  const replaceTokenInContent = (
+    content: string,
+    replacement: string
+  ): string => {
     if (content.includes('<') && content.includes('>')) {
       return content.replace(/>([^<]*)</, (fullMatch, innerText: string) => {
         const nextInner = innerText.replace(NUMBER_TOKEN_REGEX, replacement);
@@ -260,10 +267,7 @@ const injectAnimatedValues = (
       styles: block.styles ? { ...block.styles } : block.styles
     };
 
-    if (
-      cloned.type === 'text' &&
-      animatedValues[cloned.id] !== undefined
-    ) {
+    if (cloned.type === 'text' && animatedValues[cloned.id] !== undefined) {
       const replacement = animatedValues[cloned.id];
 
       if (typeof cloned.value === 'string') {
@@ -327,7 +331,10 @@ const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
     [section.blocks, isDesigner]
   );
 
-  const targets = useMemo(() => collectCounterTargets(sortedBlocks), [sortedBlocks]);
+  const targets = useMemo(
+    () => collectCounterTargets(sortedBlocks),
+    [sortedBlocks]
+  );
   const targetsKey = useMemo(
     () =>
       targets
@@ -340,22 +347,36 @@ const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
   );
 
   const countUpEnabled = parseBoolean(
-    getResponsiveValue(section.properties?.['count-up-enabled'], currentBreakpoint, true),
+    getResponsiveValue(
+      section.properties?.['count-up-enabled'],
+      currentBreakpoint,
+      true
+    ),
     true
   );
   const countUpDuration = clampNumber(
     parseNumber(
-      getResponsiveValue(section.properties?.['count-up-duration'], currentBreakpoint, 1400),
+      getResponsiveValue(
+        section.properties?.['count-up-duration'],
+        currentBreakpoint,
+        1400
+      ),
       1400
     ),
     300,
     10000
   );
   const animationEasing = parseAnimationEasing(
-    getResponsiveValue(section.properties?.['count-up-easing'], currentBreakpoint, 'linear')
+    getResponsiveValue(
+      section.properties?.['count-up-easing'],
+      currentBreakpoint,
+      'linear'
+    )
   );
 
-  const [animatedValues, setAnimatedValues] = useState<Record<string, string>>({});
+  const [animatedValues, setAnimatedValues] = useState<Record<string, string>>(
+    {}
+  );
   const targetsRef = useRef<CounterTarget[]>(targets);
 
   useEffect(() => {
@@ -396,7 +417,9 @@ const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
 
     const tick = (now: number) => {
       const progress = Math.min((now - startTime) / duration, 1);
-      setAnimatedValues(buildValues(applyAnimationEasing(progress, animationEasing)));
+      setAnimatedValues(
+        buildValues(applyAnimationEasing(progress, animationEasing))
+      );
 
       if (progress < 1) {
         rafId = window.requestAnimationFrame(tick);
@@ -432,24 +455,31 @@ const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
   const filteredStyles = Object.fromEntries(
-    Object.entries(section.styles || {}).filter(([key]) => !['max-width'].includes(key))
+    Object.entries(section.styles || {}).filter(
+      ([key]) => !['max-width'].includes(key)
+    )
+  );
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
   );
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
 
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
+  const postBlockAction = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type,
+      data: {
+        placeholderId,
+        sectionId: section.id,
+        blockId,
+        ...(label ? { label } : {})
+      }
+    });
   };
 
   const renderBlock = (block: Block) => (
@@ -465,16 +495,24 @@ const StatsCounterSection: React.FC<StatsCounterSectionProps> = ({
       onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
       onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
       onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
+      onToggleVisibility={() =>
+        postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)
+      }
       onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
+      onRename={(newLabel) =>
+        postBlockAction('RENAME_BLOCK', block.id, newLabel)
+      }
     />
   );
 
   return (
     <div
       className={twMerge(
-        clsx('stats-counter-section w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
+        clsx(
+          'stats-counter-section w-full',
+          hasMaxWidth && 'mx-auto',
+          maxWidthClass
+        )
       )}
       style={sectionStyles}
     >