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

package/src/sections/find-in-store-section.tsx

@@ -28,6 +28,8 @@ import {
   resolveThemeCssVariables
 } from '../utils';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface FindInStoreSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -649,11 +651,15 @@ export default function FindInStoreSection({
       const trimmedInitialProduct = initialProductInput.trim();
       if (!trimmedInitialProduct) return;
 
-      setProductUrlInput(currentValue => currentValue || trimmedInitialProduct);
+      setProductUrlInput(
+        (currentValue) => currentValue || trimmedInitialProduct
+      );
       setIsResolvingProduct(true);
 
       try {
-        const resolvedPk = await resolveProductPkFromInput(trimmedInitialProduct);
+        const resolvedPk = await resolveProductPkFromInput(
+          trimmedInitialProduct
+        );
         if (!cancelled && resolvedPk) {
           setResolvedProductPk(resolvedPk);
           setSearchError('');
@@ -710,10 +716,10 @@ export default function FindInStoreSection({
     maxWidth === 'narrow'
       ? 'max-w-4xl'
       : maxWidth === 'normal'
-        ? 'max-w-7xl'
-        : maxWidth === 'full'
-          ? 'w-full'
-          : '';
+      ? 'max-w-7xl'
+      : maxWidth === 'full'
+      ? 'w-full'
+      : '';
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
   const filteredStyles = Object.fromEntries(
@@ -1045,20 +1051,21 @@ export default function FindInStoreSection({
     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, keyOverride?: string) => {
@@ -1376,7 +1383,10 @@ export default function FindInStoreSection({
   const searchInputStyle = mergeControlStyles(inputStyle, searchInputBlock);
   const citySelectStyle = mergeControlStyles(inputStyle, citySelectBlock);
   const sizeSelectStyle = mergeControlStyles(inputStyle, sizeSelectBlock);
-  const searchButtonControlStyle = mergeControlStyles(buttonStyle, searchButtonBlock);
+  const searchButtonControlStyle = mergeControlStyles(
+    buttonStyle,
+    searchButtonBlock
+  );
   const availabilityButtonControlStyle = mergeControlStyles(
     buttonStyle,
     availabilityButtonBlock
@@ -1608,7 +1618,9 @@ export default function FindInStoreSection({
                     <input
                       type="text"
                       value={productUrlInput}
-                      onChange={(event) => setProductUrlInput(event.target.value)}
+                      onChange={(event) =>
+                        setProductUrlInput(event.target.value)
+                      }
                       placeholder={urlPlaceholder}
                       inputMode="text"
                       style={searchInputStyle}
@@ -1732,7 +1744,7 @@ export default function FindInStoreSection({
                     }
                   )}
 
-                  {sizeOptions.length > 0 && (
+                  {sizeOptions.length > 0 &&
                     renderSelectableElement(
                       sizeSelectBlock,
                       <select
@@ -1756,8 +1768,7 @@ export default function FindInStoreSection({
                       {
                         keyOverride: 'size-select'
                       }
-                    )
-                  )}
+                    )}
                 </div>
 
                 {renderSelectableElement(
@@ -1769,7 +1780,8 @@ export default function FindInStoreSection({
                     onClick={handleSubmit}
                     onMouseEnter={(event) => {
                       if (!stockLoading && isProductResolved) {
-                        event.currentTarget.style.backgroundColor = buttonHoverBg;
+                        event.currentTarget.style.backgroundColor =
+                          buttonHoverBg;
                       }
                     }}
                     onMouseLeave={(event) => {

package/src/sections/hover-showcase-section.tsx

@@ -13,6 +13,8 @@ import {
 import { Section } from '../theme-section';
 import { WithDesignerFeatures } from '../components/with-designer-features';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface HoverShowcaseSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -33,11 +35,13 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
   const themeSettings = useThemeSettingsContext();
 
   const [activeIndex, setActiveIndex] = useState(0);
-  
+
   useEffect(() => {
     if (isDesigner && selectedBlockId && section.blocks) {
       const index = section.blocks.findIndex(
-        (b: Block) => b.id === selectedBlockId || b.blocks?.some((child: Block) => child.id === selectedBlockId)
+        (b: Block) =>
+          b.id === selectedBlockId ||
+          b.blocks?.some((child: Block) => child.id === selectedBlockId)
       );
       if (index !== -1) {
         setActiveIndex(index);
@@ -45,17 +49,15 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
     }
   }, [isDesigner, selectedBlockId, section.blocks]);
 
-  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)) {
       const localized = value as Record<string, unknown>;
 
       if (localized[locale] != null) return String(localized[locale]);
-      if (localized[defaultLocale] != null) return String(localized[defaultLocale]);
+      if (localized[defaultLocale] != null)
+        return String(localized[defaultLocale]);
 
       const responsive = getResponsiveValue(value, currentBreakpoint);
       if (responsive != null && typeof responsive !== 'object') {
@@ -79,7 +81,11 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
     return styles[kebabKey] ?? styles[camelKey];
   };
 
-  const maxWidth = getResponsiveValue(getStyleEntry('max-width'), currentBreakpoint, 'normal');
+  const maxWidth = getResponsiveValue(
+    getStyleEntry('max-width'),
+    currentBreakpoint,
+    'normal'
+  );
   const maxWidthClass =
     maxWidth === 'narrow'
       ? 'max-w-4xl'
@@ -89,43 +95,60 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
   const inactiveColor = resolveThemeCssVariables(
-    String(getResponsiveValue(getStyleEntry('inactive-color'), currentBreakpoint, '#9ca3af')),
+    String(
+      getResponsiveValue(
+        getStyleEntry('inactive-color'),
+        currentBreakpoint,
+        '#9ca3af'
+      )
+    ),
     themeSettings
   );
   const activeColor = resolveThemeCssVariables(
-    String(getResponsiveValue(getStyleEntry('active-color'), currentBreakpoint, '#111827')),
+    String(
+      getResponsiveValue(
+        getStyleEntry('active-color'),
+        currentBreakpoint,
+        '#111827'
+      )
+    ),
     themeSettings
   );
-  
+
   const isMobile = currentBreakpoint === 'mobile';
 
-  const items = (section.blocks || []).filter((b: Block) => b.type === 'hover-showcase-item');
+  const items = (section.blocks || []).filter(
+    (b: Block) => b.type === 'hover-showcase-item'
+  );
 
   if (items.length === 0) {
     if (isDesigner) {
       return (
         <div className="w-full flex items-center justify-center p-8 border border-dashed border-gray-300 rounded-lg">
-          <p className="text-gray-500">Add Hover Showcase Item blocks to see them here.</p>
+          <p className="text-gray-500">
+            Add Hover Showcase Item blocks to see them here.
+          </p>
         </div>
       );
     }
     return null;
   }
 
-  const sendDesignerMessage = (type: string, blockId: string, label?: string) => {
+  const sendDesignerMessage = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (isDesigner && window.parent) {
-      window.parent.postMessage(
-        {
-          type,
-          data: {
-            placeholderId,
-            sectionId: section.id,
-            blockId,
-            ...(label && { label })
-          }
-        },
-        '*'
-      );
+      postToEditor({
+        type,
+        data: {
+          placeholderId,
+          sectionId: section.id,
+          blockId,
+          ...(label && { label })
+        }
+      });
     }
   };
   const renderMobile = isDesigner ? isMobile : true;
@@ -134,23 +157,46 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
   return (
     <div
       className={`w-full mx-auto ${hasMaxWidth ? maxWidthClass : ''}`}
-      style={getCSSStyles(section.styles as Record<string, unknown>, themeSettings as Record<string, unknown>, currentBreakpoint)}
+      style={getCSSStyles(
+        section.styles as Record<string, unknown>,
+        themeSettings as Record<string, unknown>,
+        currentBreakpoint
+      )}
     >
       {renderMobile && (
-        <div className={`flex flex-col gap-6 px-4 ${isDesigner ? '' : 'block md:hidden'}`}>
+        <div
+          className={`flex flex-col gap-6 px-4 ${
+            isDesigner ? '' : 'block md:hidden'
+          }`}
+        >
           {items.map((item: Block, index: number) => {
             const props = item.properties || {};
             const itemStyles = item.styles || {};
-            const title = resolveLocalizedValue(props.title, `Item ${index + 1}`);
+            const title = resolveLocalizedValue(
+              props.title,
+              `Item ${index + 1}`
+            );
             const subtitle = resolveLocalizedValue(props.subtitle, '');
             const link = resolveLocalizedValue(props.link, '');
             const isActive = index === activeIndex;
 
             // Inside mobile render block, force evaluation of values for 'mobile' instead of the generic currentBreakpoint
             const evalBreakpoint = isDesigner ? currentBreakpoint : 'mobile';
-            const mobileLayout = getResponsiveValue(getStyleEntry('mobile-layout'), evalBreakpoint, 'list');
-            const titleFontSize = getResponsiveValue(itemStyles['title-font-size'], evalBreakpoint, '24px');
-            const subtitleFontSize = getResponsiveValue(itemStyles['subtitle-font-size'], evalBreakpoint, '14px');
+            const mobileLayout = getResponsiveValue(
+              getStyleEntry('mobile-layout'),
+              evalBreakpoint,
+              'list'
+            );
+            const titleFontSize = getResponsiveValue(
+              itemStyles['title-font-size'],
+              evalBreakpoint,
+              '24px'
+            );
+            const subtitleFontSize = getResponsiveValue(
+              itemStyles['subtitle-font-size'],
+              evalBreakpoint,
+              '14px'
+            );
 
             return (
               <WithDesignerFeatures
@@ -163,27 +209,70 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
                 currentBreakpoint={currentBreakpoint}
                 className="flex flex-col gap-3 cursor-pointer p-2 rounded relative"
                 onMoveUp={() => sendDesignerMessage('MOVE_BLOCK_UP', item.id)}
-                onMoveDown={() => sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)}
-                onDuplicate={() => sendDesignerMessage('DUPLICATE_BLOCK', item.id)}
-                onToggleVisibility={() => sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)}
+                onMoveDown={() =>
+                  sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)
+                }
+                onDuplicate={() =>
+                  sendDesignerMessage('DUPLICATE_BLOCK', item.id)
+                }
+                onToggleVisibility={() =>
+                  sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)
+                }
                 onDelete={() => sendDesignerMessage('DELETE_BLOCK', item.id)}
-                onRename={(newLabel) => sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)}
+                onRename={(newLabel) =>
+                  sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)
+                }
               >
-                <div className="flex flex-col" onClick={() => setActiveIndex(index)}>
+                <div
+                  className="flex flex-col"
+                  onClick={() => setActiveIndex(index)}
+                >
                   {link ? (
                     <a href={link} className="decoration-none">
-                      <h3 style={{ fontSize: String(titleFontSize), color: activeColor, transition: 'color 0.3s' }} className="font-semibold leading-tight m-0">{title}</h3>
+                      <h3
+                        style={{
+                          fontSize: String(titleFontSize),
+                          color: activeColor,
+                          transition: 'color 0.3s'
+                        }}
+                        className="font-semibold leading-tight m-0"
+                      >
+                        {title}
+                      </h3>
                     </a>
                   ) : (
-                    <h3 style={{ fontSize: String(titleFontSize), color: activeColor, transition: 'color 0.3s' }} className="font-semibold leading-tight m-0">{title}</h3>
+                    <h3
+                      style={{
+                        fontSize: String(titleFontSize),
+                        color: activeColor,
+                        transition: 'color 0.3s'
+                      }}
+                      className="font-semibold leading-tight m-0"
+                    >
+                      {title}
+                    </h3>
                   )}
                   {subtitle && (
-                    <p style={{ fontSize: String(subtitleFontSize), color: inactiveColor }} className="mt-1 mb-0 opacity-80">{subtitle}</p>
+                    <p
+                      style={{
+                        fontSize: String(subtitleFontSize),
+                        color: inactiveColor
+                      }}
+                      className="mt-1 mb-0 opacity-80"
+                    >
+                      {subtitle}
+                    </p>
                   )}
                 </div>
-                
+
                 {mobileLayout === 'accordion' ? (
-                  <div className={`overflow-hidden transition-all duration-300 ${isActive ? 'max-h-[600px] opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
+                  <div
+                    className={`overflow-hidden transition-all duration-300 ${
+                      isActive
+                        ? 'max-h-[600px] opacity-100 mt-2'
+                        : 'max-h-0 opacity-0'
+                    }`}
+                  >
                     {item.blocks?.map((block: Block) => (
                       <ThemeBlock
                         key={block.id}
@@ -197,7 +286,7 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
                     ))}
                   </div>
                 ) : (
-                   <div className="mt-2">
+                  <div className="mt-2">
                     {item.blocks?.map((block: Block) => (
                       <ThemeBlock
                         key={block.id}
@@ -218,21 +307,44 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
       )}
 
       {renderDesktop && (
-        <div className={`px-4 md:px-8 lg:px-12 items-center min-h-[500px] ${isDesigner ? 'flex' : 'hidden md:flex'}`}>
-         <div className="w-1/2 flex flex-col justify-center gap-1 relative z-10 pr-8">
+        <div
+          className={`px-4 md:px-8 lg:px-12 items-center min-h-[500px] ${
+            isDesigner ? 'flex' : 'hidden md:flex'
+          }`}
+        >
+          <div className="w-1/2 flex flex-col justify-center gap-1 relative z-10 pr-8">
             {items.map((item: Block, index: number) => {
               const props = item.properties || {};
               const itemStyles = item.styles || {};
-              const title = resolveLocalizedValue(props.title, `Item ${index + 1}`);
+              const title = resolveLocalizedValue(
+                props.title,
+                `Item ${index + 1}`
+              );
               const subtitle = resolveLocalizedValue(props.subtitle, '');
               const link = resolveLocalizedValue(props.link, '');
               const isActive = index === activeIndex;
 
               const evalBreakpoint = isDesigner ? currentBreakpoint : 'desktop';
-              const titleFontSize = getResponsiveValue(itemStyles['title-font-size'], evalBreakpoint, '32px');
-              const subtitleFontSize = getResponsiveValue(itemStyles['subtitle-font-size'], evalBreakpoint, '16px');
-              const pt = getResponsiveValue(itemStyles['padding-top'], evalBreakpoint, 16);
-              const pb = getResponsiveValue(itemStyles['padding-bottom'], evalBreakpoint, 16);
+              const titleFontSize = getResponsiveValue(
+                itemStyles['title-font-size'],
+                evalBreakpoint,
+                '32px'
+              );
+              const subtitleFontSize = getResponsiveValue(
+                itemStyles['subtitle-font-size'],
+                evalBreakpoint,
+                '16px'
+              );
+              const pt = getResponsiveValue(
+                itemStyles['padding-top'],
+                evalBreakpoint,
+                16
+              );
+              const pb = getResponsiveValue(
+                itemStyles['padding-bottom'],
+                evalBreakpoint,
+                16
+              );
 
               return (
                 <WithDesignerFeatures
@@ -246,42 +358,60 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
                   className="flex flex-col cursor-pointer group w-max rounded px-2 relative"
                   style={{ paddingTop: `${pt}px`, paddingBottom: `${pb}px` }}
                   onMoveUp={() => sendDesignerMessage('MOVE_BLOCK_UP', item.id)}
-                  onMoveDown={() => sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)}
-                  onDuplicate={() => sendDesignerMessage('DUPLICATE_BLOCK', item.id)}
-                  onToggleVisibility={() => sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)}
+                  onMoveDown={() =>
+                    sendDesignerMessage('MOVE_BLOCK_DOWN', item.id)
+                  }
+                  onDuplicate={() =>
+                    sendDesignerMessage('DUPLICATE_BLOCK', item.id)
+                  }
+                  onToggleVisibility={() =>
+                    sendDesignerMessage('TOGGLE_BLOCK_VISIBILITY', item.id)
+                  }
                   onDelete={() => sendDesignerMessage('DELETE_BLOCK', item.id)}
-                  onRename={(newLabel) => sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)}
+                  onRename={(newLabel) =>
+                    sendDesignerMessage('RENAME_BLOCK', item.id, newLabel)
+                  }
                 >
-                  <div 
+                  <div
                     className="flex flex-col relative w-full"
                     onMouseEnter={() => setActiveIndex(index)}
                   >
                     {link ? (
                       <a href={link} className="decoration-none">
-                        <h3 
-                          style={{ fontSize: String(titleFontSize), color: isActive ? activeColor : inactiveColor, transition: 'color 0.4s ease' }} 
+                        <h3
+                          style={{
+                            fontSize: String(titleFontSize),
+                            color: isActive ? activeColor : inactiveColor,
+                            transition: 'color 0.4s ease'
+                          }}
                           className="font-semibold leading-tight m-0 hover:opacity-80"
                         >
                           {title}
                         </h3>
                       </a>
                     ) : (
-                       <h3 
-                        style={{ fontSize: String(titleFontSize), color: isActive ? activeColor : inactiveColor, transition: 'color 0.4s ease' }} 
+                      <h3
+                        style={{
+                          fontSize: String(titleFontSize),
+                          color: isActive ? activeColor : inactiveColor,
+                          transition: 'color 0.4s ease'
+                        }}
                         className="font-semibold leading-tight m-0"
                       >
                         {title}
                       </h3>
                     )}
                     {subtitle && (
-                      <p 
-                        style={{ 
-                          fontSize: String(subtitleFontSize), 
-                          color: inactiveColor, 
-                          opacity: isActive ? 1 : 0, 
+                      <p
+                        style={{
+                          fontSize: String(subtitleFontSize),
+                          color: inactiveColor,
+                          opacity: isActive ? 1 : 0,
                           maxHeight: isActive ? '40px' : '0px',
-                          transform: isActive ? 'translateY(0)' : 'translateY(-10px)'
-                        }} 
+                          transform: isActive
+                            ? 'translateY(0)'
+                            : 'translateY(-10px)'
+                        }}
                         className="mt-2 mb-0 overflow-hidden transition-all duration-400 ease-out"
                       >
                         {subtitle}
@@ -291,32 +421,34 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
                 </WithDesignerFeatures>
               );
             })}
-         </div>
+          </div>
 
-         <div className="w-1/2 relative h-full min-h-[400px] flex items-center justify-center">
+          <div className="w-1/2 relative h-full min-h-[400px] flex items-center justify-center">
             {items.map((item: Block, index: number) => {
-               const isActive = index === activeIndex;
-               
-               return (
-                 <div 
-                   key={item.id}
-                   className={`absolute inset-0 transition-opacity duration-500 ease-in-out flex items-center justify-center ${isActive ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
-                 >
-                    {item.blocks?.map((block: Block) => (
-                       <ThemeBlock
-                         key={block.id}
-                         block={block}
-                         currentBreakpoint={currentBreakpoint}
-                         isDesigner={isDesigner}
-                         placeholderId={placeholderId}
-                         sectionId={section.id}
-                         selectedBlockId={selectedBlockId}
-                       />
-                     ))}
-                 </div>
-               );
+              const isActive = index === activeIndex;
+
+              return (
+                <div
+                  key={item.id}
+                  className={`absolute inset-0 transition-opacity duration-500 ease-in-out flex items-center justify-center ${
+                    isActive ? 'opacity-100 z-10' : 'opacity-0 z-0'
+                  }`}
+                >
+                  {item.blocks?.map((block: Block) => (
+                    <ThemeBlock
+                      key={block.id}
+                      block={block}
+                      currentBreakpoint={currentBreakpoint}
+                      isDesigner={isDesigner}
+                      placeholderId={placeholderId}
+                      sectionId={section.id}
+                      selectedBlockId={selectedBlockId}
+                    />
+                  ))}
+                </div>
+              );
             })}
-         </div>
+          </div>
         </div>
       )}
     </div>