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

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

@@ -0,0 +1,348 @@
+'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

@@ -0,0 +1,143 @@
+'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);