@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.21

package/app-template/src/views/header/header-language-registrar.tsx

@@ -1,348 +0,0 @@
-'use client';
-
-/**
- * Header Language Section Registrar
- *
- * This component registers the "Language Select" section for the header placeholder.
- * The language section is a native widget that can be added via "Add Section" button.
- */
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  PropsWithChildren
-} from 'react';
-
-// Constants
-export const HEADER_LANGUAGE_PLACEHOLDER_ID = 'header';
-export const HEADER_LANGUAGE_SECTION_ID = 'header-language';
-export const HEADER_LANGUAGE_WIDGET_SLUG = 'header-language-settings-2';
-
-// Global flag to track if registration has been done
-declare global {
-  interface Window {
-    __headerLanguageRegistered?: boolean;
-  }
-}
-
-/**
- * Check if running inside designer iframe
- */
-function isInDesignerMode(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.self !== window.top;
-}
-
-interface ThemeSection {
-  id: string;
-  visible?: boolean;
-  properties?: Record<string, unknown>;
-  styles?: Record<string, unknown>;
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-export interface HeaderLanguageProperties {
-  showIcon?: boolean;
-  visible?: boolean;
-  labelFormat?: 'full' | 'short' | 'code';
-  /** Custom SVG icon content */
-  icon?: string;
-}
-
-interface HeaderLanguageContextValue {
-  isDesigner: boolean;
-  isLanguageSectionSelected: boolean;
-  isSectionVisible: boolean;
-  properties: HeaderLanguageProperties;
-  sectionStyles: Record<string, unknown>;
-}
-
-const HeaderLanguageContext = createContext<HeaderLanguageContextValue>({
-  isDesigner: false,
-  isLanguageSectionSelected: false,
-  isSectionVisible: false, // Not visible by default, must be added via Add Section
-  properties: { showIcon: true },
-  sectionStyles: {}
-});
-
-export const useHeaderLanguage = () => useContext(HeaderLanguageContext);
-
-interface HeaderLanguageRegistrarProps extends PropsWithChildren {
-  /**
-   * Initial settings from server-side parsing (to avoid flash)
-   */
-  initialSettings?: {
-    sectionStyles?: Record<string, unknown>;
-    properties?: HeaderLanguageProperties;
-  };
-}
-
-/**
- * HeaderLanguageRegistrar
- *
- * Registers the Language Select native section with Theme Editor.
- * The section can be added via "Add Section" button in the header placeholder.
- */
-export default function HeaderLanguageRegistrar({
-  children,
-  initialSettings = {}
-}: HeaderLanguageRegistrarProps) {
-  const isDesignerRef = useRef(false);
-  const [sectionProperties, setSectionProperties] =
-    useState<HeaderLanguageProperties>(
-      initialSettings.properties || { showIcon: true }
-    );
-  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
-    initialSettings.sectionStyles || {}
-  );
-  const [isLanguageSelected, setIsLanguageSelected] = useState(false);
-  // Initialize visibility from server-side settings - defaults to false if no settings
-  const [isSectionVisible, setIsSectionVisible] = useState(
-    initialSettings.properties?.visible ?? false
-  );
-  const hasRegisteredNativeWidget = useRef(false);
-
-  const hasInitialSettings = !!(
-    (initialSettings.sectionStyles &&
-      Object.keys(initialSettings.sectionStyles).length > 0) ||
-    (initialSettings.properties &&
-      Object.keys(initialSettings.properties).length > 0)
-  );
-
-  useEffect(() => {
-    isDesignerRef.current = isInDesignerMode();
-  }, []);
-
-  const isDesigner = isDesignerRef.current;
-
-  // Register native widget
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    // Skip if already registered
-    if (
-      typeof window !== 'undefined' &&
-      window.__headerLanguageRegistered &&
-      hasRegisteredNativeWidget.current
-    ) {
-      return;
-    }
-
-    // Send native widget registration to Theme Editor
-    // autoAdd: false means this section won't be auto-inserted when registered
-    // It must be manually added via "Add Section" button
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_LANGUAGE_PLACEHOLDER_ID,
-      autoAdd: false,
-      section: {
-        id: HEADER_LANGUAGE_SECTION_ID,
-        type: 'native',
-        label: 'Language Select',
-        blocks: [],
-        properties: sectionProperties,
-        styles: sectionStyles
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    // Mark as registered
-    window.__headerLanguageRegistered = true;
-    hasRegisteredNativeWidget.current = true;
-  }, [sectionProperties, sectionStyles]);
-
-  // Apply highlight style to language container when section is selected
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const languageContainer = document.querySelector(
-      '[data-section-id="header-language"]'
-    );
-    if (!languageContainer) return;
-
-    if (isLanguageSelected) {
-      (languageContainer as HTMLElement).style.outline = '2px solid #3b82f6';
-      (languageContainer as HTMLElement).style.outlineOffset = '-2px';
-    } else {
-      (languageContainer as HTMLElement).style.outline = '';
-      (languageContainer as HTMLElement).style.outlineOffset = '';
-    }
-
-    return () => {
-      (languageContainer as HTMLElement).style.outline = '';
-      (languageContainer as HTMLElement).style.outlineOffset = '';
-    };
-  }, [isLanguageSelected]);
-
-  // Listen for theme updates and selection changes from Theme Editor
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      // Handle theme updates
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders?.find(
-          (p: ThemePlaceholder) => p.slug === HEADER_LANGUAGE_PLACEHOLDER_ID
-        );
-
-        const languageSection = placeholder?.sections?.find(
-          (s: ThemeSection) => s.id === HEADER_LANGUAGE_SECTION_ID
-        );
-
-        if (languageSection) {
-          // Check section visibility from properties first
-          // Section properties.visible determines if section should be shown
-          const sectionVisible = languageSection.properties?.visible;
-          if (sectionVisible !== undefined) {
-            // Handle responsive format { desktop: bool, mobile: bool } or direct boolean
-            const isVisible =
-              typeof sectionVisible === 'boolean'
-                ? sectionVisible
-                : sectionVisible?.desktop === true ||
-                  sectionVisible?.mobile === true;
-            setIsSectionVisible(isVisible);
-          } else if (typeof languageSection.visible === 'boolean') {
-            // Fallback to section.visible flag
-            setIsSectionVisible(languageSection.visible);
-          } else {
-            // Section exists in theme without explicit visibility, show it
-            setIsSectionVisible(true);
-          }
-
-          // In designer mode, always apply updates from Theme Editor
-          // In standalone mode, only apply if no initial settings (to avoid flash)
-          const shouldApplyUpdates = isDesigner || !hasInitialSettings;
-
-          if (shouldApplyUpdates) {
-            // Update section properties
-            if (languageSection.properties) {
-              setSectionProperties(
-                languageSection.properties as HeaderLanguageProperties
-              );
-            }
-
-            // Update section styles
-            if (languageSection.styles) {
-              setSectionStyles(languageSection.styles);
-            }
-          }
-        } else if (placeholder) {
-          // Section not in placeholder, hide it
-          setIsSectionVisible(false);
-        }
-      }
-
-      // Handle property updates
-      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
-        const { sectionId, key, value, properties } = data || {};
-
-        if (sectionId === HEADER_LANGUAGE_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionProperties((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (properties) {
-            setSectionProperties(properties as HeaderLanguageProperties);
-          }
-        }
-      }
-
-      // Handle style updates for the section
-      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
-        const { sectionId, key, value, styles } = data || {};
-
-        if (sectionId === HEADER_LANGUAGE_SECTION_ID) {
-          if (key && value !== undefined) {
-            setSectionStyles((prev) => ({
-              ...prev,
-              [key]: value
-            }));
-          }
-          if (styles) {
-            setSectionStyles(styles);
-          }
-        }
-      }
-
-      // Handle selection changes
-      if (type === 'SELECT_SECTION') {
-        const { placeholderId, sectionId } = data || {};
-
-        const isSelected =
-          placeholderId === HEADER_LANGUAGE_PLACEHOLDER_ID &&
-          sectionId === HEADER_LANGUAGE_SECTION_ID;
-
-        setIsLanguageSelected(isSelected);
-      }
-
-      // Handle block selection
-      if (type === 'SELECT_BLOCK') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_LANGUAGE_SECTION_ID) {
-          setIsLanguageSelected(true);
-        } else {
-          setIsLanguageSelected(false);
-        }
-      }
-
-      // Handle deselection
-      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
-        setIsLanguageSelected(false);
-      }
-
-      // Handle visibility toggle
-      if (type === 'TOGGLE_SECTION_VISIBILITY') {
-        const { sectionId } = data || {};
-        if (sectionId === HEADER_LANGUAGE_SECTION_ID) {
-          setIsSectionVisible((prev) => !prev);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [hasInitialSettings, isDesigner]);
-
-  // If no children, just return null (registration-only mode)
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <HeaderLanguageContext.Provider
-      value={{
-        isDesigner,
-        isLanguageSectionSelected: isLanguageSelected,
-        isSectionVisible,
-        properties: sectionProperties,
-        sectionStyles
-      }}
-    >
-      {children}
-    </HeaderLanguageContext.Provider>
-  );
-}

package/app-template/src/views/header/header-layout-context.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-/**
- * Header Layout Designer Context
- *
- * Enables the entire header to be selected via Theme Editor
- * for layout configuration (e.g., layout type dropdown).
- * Uses the native widget pattern - NO blocks, section-level properties only.
- *
- * When this section is selected, the entire header should appear selected.
- */
-
-import {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
-
-// Constants - Header layout is a section within the header placeholder
-export const HEADER_LAYOUT_PLACEHOLDER_ID = 'header';
-export const HEADER_LAYOUT_SECTION_ID = 'header-layout';
-export const HEADER_LAYOUT_WIDGET_SLUG = 'header-layout-settings-2';
-
-// Section properties definition - Layout dropdown options will be added later
-export interface HeaderLayoutProperties {
-  layout?: string;
-}
-
-interface HeaderLayoutContextValue {
-  isDesigner: boolean;
-  selectedSectionId: string | null;
-  isLayoutSectionSelected: boolean;
-  properties: HeaderLayoutProperties;
-}
-
-const HeaderLayoutContext = createContext<HeaderLayoutContextValue>({
-  isDesigner: false,
-  selectedSectionId: null,
-  isLayoutSectionSelected: false,
-  properties: {}
-});
-
-export const HeaderLayoutProvider = ({ children }: PropsWithChildren) => {
-  const designerState = useExternalDesigner({
-    placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID
-  });
-
-  const [sectionProperties, setSectionProperties] =
-    useState<HeaderLayoutProperties>({});
-  const hasReceivedThemeProps = useRef(false);
-
-  // Register native widget with Theme Editor - only once
-  // This section has NO blocks - only section-level properties
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    // Send native widget registration to Theme Editor
-    // Note: blocks array is empty - this is a section-only widget
-    const nativeWidgetConfig = {
-      placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
-      section: {
-        id: HEADER_LAYOUT_SECTION_ID,
-        type: 'native',
-        label: 'Layout',
-        blocks: [] // No blocks - entire header selected when this section is selected
-        // Don't send properties - Theme Editor will load them from widget API
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Only register once
-
-  // Widget data is now fetched server-side and passed via HeaderLayoutRegistrar
-  // This context only handles designer mode selection state
-
-  // Listen for theme updates from Theme Editor
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders?.find(
-          (p: { slug: string }) => p.slug === HEADER_LAYOUT_PLACEHOLDER_ID
-        );
-
-        const layoutSection = placeholder?.sections?.find(
-          (s: { id: string }) => s.id === HEADER_LAYOUT_SECTION_ID
-        );
-
-        if (layoutSection) {
-          hasReceivedThemeProps.current = true;
-
-          // Update section properties
-          if (layoutSection.properties) {
-            setSectionProperties(layoutSection.properties);
-          }
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, []);
-
-  // Check if the layout section is currently selected
-  const isLayoutSectionSelected =
-    designerState.selectedSectionId === HEADER_LAYOUT_SECTION_ID;
-
-  return (
-    <HeaderLayoutContext.Provider
-      value={{
-        isDesigner: designerState.isDesigner,
-        selectedSectionId: designerState.selectedSectionId,
-        isLayoutSectionSelected,
-        properties: sectionProperties
-      }}
-    >
-      {children}
-    </HeaderLayoutContext.Provider>
-  );
-};
-
-export const useHeaderLayoutDesigner = () => useContext(HeaderLayoutContext);