@akinon/next 2.0.0-beta.20 → 2.0.0-beta.22

package/components/theme-editor/dynamic-font-loader.tsx

@@ -1,79 +0,0 @@
-'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/components/theme-editor/hooks/use-designer-features.tsx

@@ -1,100 +0,0 @@
-'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/components/theme-editor/hooks/use-external-designer.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import {
-  registerPlaceholder,
-  unregisterPlaceholder
-} from '../placeholder-registry';
-
-interface UseExternalDesignerOptions {
-  placeholderId: string;
-}
-
-interface ExternalDesignerState {
-  isDesigner: boolean;
-  selectedSectionId: string | null;
-  selectedBlockId: string | null;
-}
-
-export function useExternalDesigner({
-  placeholderId
-}: UseExternalDesignerOptions): ExternalDesignerState {
-  const [isDesigner, setIsDesigner] = useState(false);
-  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
-    null
-  );
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const isInIframe = window.self !== window.top;
-
-    // Set isDesigner immediately if in iframe (don't wait for SET_THEME_EDITOR_COOKIE)
-    if (isInIframe) {
-      setIsDesigner(true);
-    }
-
-    if (isInIframe && window.parent) {
-      // Only send IFRAME_READY once per page session to prevent re-initialization
-      if (
-        !(window as Window & { __iframeReadySent?: boolean }).__iframeReadySent
-      ) {
-        window.parent.postMessage(
-          {
-            type: 'IFRAME_READY'
-          },
-          '*'
-        );
-        (window as Window & { __iframeReadySent?: boolean }).__iframeReadySent =
-          true;
-      }
-
-      registerPlaceholder(placeholderId);
-    }
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      // Also handle SET_THEME_EDITOR_COOKIE for backwards compatibility
-      if (type === 'SET_THEME_EDITOR_COOKIE' && data) {
-        setIsDesigner(true);
-      }
-
-      if (type === 'SELECT_SECTION' && data?.placeholderId === placeholderId) {
-        setSelectedSectionId(data.sectionId ?? null);
-        setSelectedBlockId(null);
-      }
-
-      if (type === 'SELECT_BLOCK' && data?.placeholderId === placeholderId) {
-        setSelectedSectionId(data.sectionId ?? null);
-        setSelectedBlockId(data.blockId ?? null);
-      }
-
-      if (type === 'CLEAR_SELECTION') {
-        setSelectedSectionId(null);
-        setSelectedBlockId(null);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-      unregisterPlaceholder(placeholderId);
-    };
-  }, [placeholderId]);
-
-  return {
-    isDesigner,
-    selectedSectionId,
-    selectedBlockId
-  };
-}

package/components/theme-editor/hooks/use-native-widget-data.ts

@@ -1,188 +0,0 @@
-'use client';
-
-import { useEffect, useState, useCallback, useRef } from 'react';
-import {
-  useGetWidgetQuery,
-  useGetWidgetSchemaQuery
-} from '../../../data/client/misc';
-
-export interface NativeWidgetBlock {
-  id: string;
-  type?: string;
-  label?: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-  value?: unknown;
-  blocks?: NativeWidgetBlock[];
-}
-
-export interface NativeWidgetData {
-  blocks: Map<string, NativeWidgetBlock>;
-  sectionStyles: Record<string, unknown>;
-  sectionProperties: Record<string, unknown>;
-  isLoading: boolean;
-  getBlock: (blockId: string) => NativeWidgetBlock | undefined;
-  getSectionStyle: (key: string) => unknown;
-  getSectionProperty: (key: string) => unknown;
-}
-
-interface UseNativeWidgetDataOptions {
-  widgetSlug: string;
-  sectionId: string;
-  skip?: boolean;
-  blockMeta?: Array<{ id: string; type: string; label: string }>;
-}
-
-function parseAttributeValue(attrData: unknown): unknown {
-  if (attrData === undefined || attrData === null) return undefined;
-
-  if (typeof attrData === 'string') {
-    try {
-      return JSON.parse(attrData);
-    } catch {
-      return attrData;
-    }
-  }
-
-  if (typeof attrData === 'object' && attrData !== null && 'value' in attrData) {
-    const value = (attrData as { value?: unknown }).value;
-    if (typeof value === 'string') {
-      try {
-        return JSON.parse(value);
-      } catch {
-        return value;
-      }
-    }
-    return value;
-  }
-
-  return attrData;
-}
-
-function extractResponsiveValue(value: unknown): unknown {
-  if (typeof value === 'object' && value !== null && 'desktop' in value) {
-    return (value as Record<string, unknown>).desktop;
-  }
-  return value;
-}
-
-export function useNativeWidgetData({
-  widgetSlug,
-  sectionId,
-  skip = false,
-  blockMeta = []
-}: UseNativeWidgetDataOptions): NativeWidgetData {
-  const [blockMap, setBlockMap] = useState<Map<string, NativeWidgetBlock>>(
-    () => new Map()
-  );
-  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>({});
-  const [sectionProperties, setSectionProperties] = useState<Record<string, unknown>>({});
-  const blockMapRef = useRef(blockMap);
-
-  const { data: widgetData, isLoading: isWidgetLoading } = useGetWidgetQuery(
-    widgetSlug,
-    { skip }
-  );
-
-  const { data: schemaData, isLoading: isSchemaLoading } = useGetWidgetSchemaQuery(
-    widgetSlug,
-    { skip }
-  );
-
-  useEffect(() => {
-    if (skip) return;
-
-    const schema = schemaData?.schema;
-    const attributes = widgetData?.attributes;
-
-    const sectionMeta = schema?.[sectionId]?.metadata;
-    if (sectionMeta) {
-      if (sectionMeta.styles) {
-        setSectionStyles(sectionMeta.styles);
-      }
-      if (sectionMeta.properties) {
-        setSectionProperties(sectionMeta.properties);
-      }
-    }
-
-    const newBlockMap = new Map<string, NativeWidgetBlock>();
-
-    blockMeta.forEach((meta) => {
-      newBlockMap.set(meta.id, {
-        id: meta.id,
-        type: meta.type,
-        label: meta.label
-      });
-    });
-
-    if (schema) {
-      Object.entries(schema).forEach(([blockId, blockSchema]: [string, any]) => {
-        if (blockId === sectionId) return;
-
-        const metadata = blockSchema?.metadata || {};
-        const existing = newBlockMap.get(blockId);
-        const value = attributes ? parseAttributeValue(attributes[blockId]) : undefined;
-
-        newBlockMap.set(blockId, {
-          ...existing,
-          id: blockId,
-          type: metadata.type || existing?.type,
-          label: blockSchema.label || existing?.label,
-          styles: metadata.styles || {},
-          properties: metadata.properties || {},
-          value
-        });
-      });
-    } else if (attributes) {
-      Object.keys(attributes).forEach((blockId) => {
-        const existing = newBlockMap.get(blockId);
-        const parsed = parseAttributeValue(attributes[blockId]);
-
-        if (typeof parsed === 'object' && parsed !== null) {
-          const payload = parsed as Record<string, unknown>;
-          newBlockMap.set(blockId, {
-            ...existing,
-            id: blockId,
-            styles: (payload.styles as Record<string, unknown>) || existing?.styles,
-            properties: (payload.properties as Record<string, unknown>) || existing?.properties,
-            value: payload.value !== undefined ? payload.value : existing?.value
-          });
-        } else {
-          newBlockMap.set(blockId, {
-            ...existing,
-            id: blockId,
-            value: parsed
-          });
-        }
-      });
-    }
-
-    setBlockMap(newBlockMap);
-    blockMapRef.current = newBlockMap;
-  }, [skip, widgetData, schemaData, sectionId, blockMeta]);
-
-  const getBlock = useCallback(
-    (blockId: string) => blockMapRef.current.get(blockId),
-    []
-  );
-
-  const getSectionStyle = useCallback(
-    (key: string) => extractResponsiveValue(sectionStyles[key]),
-    [sectionStyles]
-  );
-
-  const getSectionProperty = useCallback(
-    (key: string) => extractResponsiveValue(sectionProperties[key]),
-    [sectionProperties]
-  );
-
-  return {
-    blocks: blockMap,
-    sectionStyles,
-    sectionProperties,
-    isLoading: isWidgetLoading || isSchemaLoading,
-    getBlock,
-    getSectionStyle,
-    getSectionProperty
-  };
-}

package/components/theme-editor/hooks/use-visibility-context.ts

@@ -1,27 +0,0 @@
-'use client';
-
-import { usePathname, useSearchParams } from 'next/navigation';
-import { useSession } from 'next-auth/react';
-
-import { useLocalization } from '../../../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/components/theme-editor/placeholder-registry.ts

@@ -1,31 +0,0 @@
-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);
-};