@akinon/pz-theme 2.0.0-beta.21

package/src/dynamic-font-loader.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface DynamicFontLoaderProps {
+  fontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+}
+
+/**
+ * Client-side component to dynamically load Google Fonts
+ * Used for theme editor buttons that use custom fonts
+ */
+export function DynamicFontLoader({
+  fontFamily,
+  fontWeight,
+  fontSubsets
+}: DynamicFontLoaderProps) {
+  useEffect(() => {
+    if (!fontFamily || fontFamily === 'inherit') return;
+
+    // Clean font family name (remove quotes and extra spaces)
+    const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
+
+    // Skip if it's a system font
+    const systemFonts = [
+      'Arial',
+      'Helvetica',
+      'Times New Roman',
+      'Georgia',
+      'Courier New',
+      'Verdana'
+    ];
+    if (systemFonts.includes(cleanFontFamily)) return;
+
+    // Build Google Fonts URL
+    const params = new URLSearchParams();
+
+    // Font family with weights
+    const weights = fontWeight || '100;300;400;500;600;700;800;900';
+    const fontParam = `${cleanFontFamily.replace(/\s+/g, '+')}:wght@${weights}`;
+    params.append('family', fontParam);
+
+    // Subsets
+    if (fontSubsets) {
+      params.append('subset', fontSubsets);
+    }
+
+    // Display swap for better performance
+    params.append('display', 'swap');
+
+    const fontUrl = `https://fonts.googleapis.com/css2?${params.toString()}`;
+
+    // Check if link already exists
+    const existingLink = document.querySelector(`link[href="${fontUrl}"]`);
+    if (existingLink) return;
+
+    // Create and append link element
+    const link = document.createElement('link');
+    link.href = fontUrl;
+    link.rel = 'stylesheet';
+    link.id = `google-font-${cleanFontFamily
+      .replace(/\s+/g, '-')
+      .toLowerCase()}`;
+
+    document.head.appendChild(link);
+
+    // Cleanup on unmount
+    return () => {
+      const linkToRemove = document.getElementById(link.id);
+      if (linkToRemove) {
+        document.head.removeChild(linkToRemove);
+      }
+    };
+  }, [fontFamily, fontWeight, fontSubsets]);
+
+  return null;
+}

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { useCallback } from 'react';
+
+interface BlockInfo {
+  id: string;
+  type: string;
+  label: string;
+}
+
+interface UseDesignerFeaturesProps {
+  blockId: string;
+  placeholderId: string;
+  sectionId: string;
+  isDesigner: boolean;
+  blockInfo?: BlockInfo;
+}
+
+export function useDesignerFeatures({
+  blockId,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  blockInfo
+}: UseDesignerFeaturesProps) {
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'SELECT_BLOCK',
+              data: {
+                placeholderId,
+                sectionId,
+                blockId,
+                blockType: blockInfo?.type,
+                blockLabel: blockInfo?.label
+              }
+            },
+            '*'
+          );
+        }
+      }
+    },
+    [isDesigner, blockId, placeholderId, sectionId, blockInfo]
+  );
+
+  const createActionHandler = useCallback(
+    (actionType: string) => () => {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: actionType,
+            data: {
+              placeholderId,
+              sectionId,
+              blockId
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [blockId, placeholderId, sectionId]
+  );
+
+  const handleRename = useCallback(
+    (newLabel: string) => {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'RENAME_BLOCK',
+            data: {
+              placeholderId,
+              sectionId,
+              blockId,
+              label: newLabel
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [blockId, placeholderId, sectionId]
+  );
+
+  return {
+    handleClick,
+    onMoveUp: createActionHandler('MOVE_BLOCK_UP'),
+    onMoveDown: createActionHandler('MOVE_BLOCK_DOWN'),
+    onDuplicate: createActionHandler('DUPLICATE_BLOCK'),
+    onToggleVisibility: createActionHandler('TOGGLE_BLOCK_VISIBILITY'),
+    onDelete: createActionHandler('DELETE_BLOCK'),
+    onRename: handleRename
+  };
+}

package/src/hooks/use-visibility-context.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useSession } from 'next-auth/react';
+
+import { useLocalization } from '@akinon/next/hooks/use-localization';
+
+export const useVisibilityContext = (currentBreakpoint = 'desktop') => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { status } = useSession();
+  const { locale, currency } = useLocalization();
+
+  return {
+    authState:
+      status === 'authenticated'
+        ? ('authenticated' as const)
+        : status === 'loading'
+        ? ('loading' as const)
+        : ('guest' as const),
+    breakpoint: currentBreakpoint,
+    locale: String(locale || ''),
+    currency: String(currency || ''),
+    pathname: String(pathname || ''),
+    searchParams
+  };
+};

package/src/index.ts

@@ -0,0 +1,21 @@
+// Main entry - re-exports common APIs
+// For specific path-based imports use e.g., '@akinon/pz-theme/src/theme-placeholder'
+
+export { default as ThemePlaceholder } from './theme-placeholder';
+export { default as ThemeSection } from './theme-section';
+export { default as ThemeBlock } from './theme-block';
+export { ThemeSettingsProvider, useThemeSettingsContext } from './theme-settings-context';
+export { ThemePageContextProvider, useThemePageContext } from './theme-page-context';
+export {
+  registerPlaceholder,
+  unregisterPlaceholder
+} from './placeholder-registry';
+
+export * from './utils';
+export * from './hooks/use-designer-features';
+export * from './hooks/use-visibility-context';
+
+export { WithDesignerFeatures } from './components/with-designer-features';
+
+export type { Section } from './theme-section';
+export type { Block } from './theme-block';

package/src/placeholder-registry.ts

@@ -0,0 +1,31 @@
+const placeholderRegistry = new Set<string>();
+let registryTimeout: NodeJS.Timeout | null = null;
+
+export const registerPlaceholder = (slug: string) => {
+  placeholderRegistry.add(slug);
+
+  if (registryTimeout) {
+    clearTimeout(registryTimeout);
+  }
+
+  registryTimeout = setTimeout(() => {
+    if (
+      typeof window !== 'undefined' &&
+      window.parent &&
+      window.self !== window.top
+    ) {
+      const availablePlaceholders = Array.from(placeholderRegistry);
+      window.parent.postMessage(
+        {
+          type: 'PLACEHOLDERS_AVAILABLE',
+          data: { placeholders: availablePlaceholders }
+        },
+        '*'
+      );
+    }
+  }, 100);
+};
+
+export const unregisterPlaceholder = (slug: string) => {
+  placeholderRegistry.delete(slug);
+};

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

@@ -0,0 +1,245 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
+import { Section } from '../theme-section';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import ThemeBlock from '../theme-block';
+
+interface BeforeAfterSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  isDesigner?: boolean;
+  placeholderId?: string;
+  selectedBlockId?: string | null;
+}
+
+export default function BeforeAfterSection({
+  section,
+  currentBreakpoint = 'desktop',
+  isDesigner = false,
+  placeholderId = '',
+  selectedBlockId = null
+}: BeforeAfterSectionProps) {
+  const themeSettings = useThemeSettingsContext();
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  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 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,
+    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 } }, '*');
+            }}
+          />
+      );
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    setContainerWidth(containerRef.current.offsetWidth);
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        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);
+      }
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => handleStart(e.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]
+  );
+
+  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);
+        }
+    };
+    
+    const handleGlobalTouchMove = (e: TouchEvent) => {
+        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 });
+    }
+
+    return () => {
+        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'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : 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="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="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>
+                 )}
+            </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>
+    </div>
+  );
+}