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

package/app-template/src/views/footer/footer-layout-registrar.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+/**
+ * Footer Layout Section Registrar
+ *
+ * This component registers the "Layout" section for the footer placeholder.
+ * It's a minimal client component that only handles native widget registration
+ * and applies selection highlight to the footer when Layout section is selected.
+ *
+ * When the Layout section is selected in Theme Editor, the entire footer
+ * gets highlighted.
+ *
+ * It also provides the current layout type to child components via context.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  ReactNode
+} from 'react';
+
+// Import constants for use within this component
+import {
+  FOOTER_LAYOUT_PLACEHOLDER_ID,
+  FOOTER_LAYOUT_SECTION_ID,
+  FOOTER_LAYOUT_BLOCKS,
+  type FooterLayoutType
+} from './footer-layout-constants';
+
+// Re-export constants from shared file for backward compatibility
+export {
+  FOOTER_LAYOUT_PLACEHOLDER_ID,
+  FOOTER_LAYOUT_SECTION_ID,
+  FOOTER_LAYOUT_WIDGET_SLUG,
+  FOOTER_LAYOUT_BLOCKS,
+  FOOTER_LAYOUT_BLOCK_IDS,
+  type FooterLayoutType
+} from './footer-layout-constants';
+
+// Global flag to track if registration has been done (survives component remount)
+declare global {
+  interface Window {
+    __footerLayoutRegistered?: boolean;
+  }
+}
+
+export interface FooterLayoutProperties {
+  layout?: FooterLayoutType | Record<string, string>;
+}
+
+// Block styles type
+type BlockStyles = Record<string, Record<string, unknown>>;
+
+// Context for sharing layout type and block styles with other components
+interface FooterLayoutContextValue {
+  layout: FooterLayoutType;
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => Record<string, unknown>;
+}
+
+const FooterLayoutContext = createContext<FooterLayoutContextValue>({
+  layout: 'default',
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlockStyles: () => ({})
+});
+
+export const useFooterLayout = () => useContext(FooterLayoutContext);
+
+/**
+ * FooterLayoutRegistrar
+ *
+ * Registers the Layout native section with Theme Editor so it appears in the sidebar,
+ * handles footer highlight when Layout section is selected, and provides
+ * layout type to children via context.
+ */
+interface FooterLayoutRegistrarProps {
+  children?: ReactNode;
+  /** Initial layout from server to avoid layout flash */
+  initialLayout?: FooterLayoutType;
+  /** Initial block styles from server */
+  initialBlockStyles?: BlockStyles;
+}
+
+export default function FooterLayoutRegistrar({
+  children,
+  initialLayout = 'default',
+  initialBlockStyles = {}
+}: FooterLayoutRegistrarProps) {
+  // Initialize with server-provided value to avoid flash
+  const [sectionProperties, setSectionProperties] =
+    useState<FooterLayoutProperties>({ layout: initialLayout });
+  const [blockStyles, setBlockStyles] =
+    useState<BlockStyles>(initialBlockStyles);
+  const [isLayoutSelected, setIsLayoutSelected] = useState(false);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const [isDesigner, setIsDesigner] = useState(false);
+  const hasReceivedThemeProps = useRef(false);
+
+  // Register native widget with Theme Editor - ONLY ONCE per page session
+  // Properties are managed by Theme Editor, not sent with registration
+  // Uses window flag to survive component remount
+  useEffect(() => {
+    // Check if in iframe (designer mode)
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    setIsDesigner(isInIframe);
+
+    // Skip if already registered in this page session
+    if (typeof window !== 'undefined' && window.__footerLayoutRegistered) {
+      return;
+    }
+
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // Send native widget registration to Theme Editor
+    // Includes row blocks for styling (MAIN_ROW, BOTTOM_ROW)
+    // Properties are NOT included - Theme Editor manages them
+    const nativeWidgetConfig = {
+      placeholderId: FOOTER_LAYOUT_PLACEHOLDER_ID,
+      section: {
+        id: FOOTER_LAYOUT_SECTION_ID,
+        type: 'native',
+        label: 'Layout',
+        blocks: [
+          {
+            id: FOOTER_LAYOUT_BLOCKS.MAIN_ROW.id,
+            type: FOOTER_LAYOUT_BLOCKS.MAIN_ROW.type,
+            label: FOOTER_LAYOUT_BLOCKS.MAIN_ROW.label
+          },
+          {
+            id: FOOTER_LAYOUT_BLOCKS.BOTTOM_ROW.id,
+            type: FOOTER_LAYOUT_BLOCKS.BOTTOM_ROW.type,
+            label: FOOTER_LAYOUT_BLOCKS.BOTTOM_ROW.label
+          }
+        ]
+        // Don't send properties - Theme Editor already has them
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    // Mark as registered in window to survive component remount
+    window.__footerLayoutRegistered = true;
+  }, []);
+
+  // Apply highlight style to footer when Layout section is selected
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const footerElement = document.querySelector('footer');
+    if (!footerElement) return;
+
+    if (isLayoutSelected) {
+      // Apply selection highlight
+      footerElement.style.outline = '2px solid #3b82f6';
+      footerElement.style.outlineOffset = '-2px';
+    } else {
+      // Remove selection highlight
+      footerElement.style.outline = '';
+      footerElement.style.outlineOffset = '';
+    }
+
+    return () => {
+      // Cleanup on unmount
+      footerElement.style.outline = '';
+      footerElement.style.outlineOffset = '';
+    };
+  }, [isLayoutSelected]);
+
+  // 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: { slug: string }) => p.slug === FOOTER_LAYOUT_PLACEHOLDER_ID
+        );
+
+        const layoutSection = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === FOOTER_LAYOUT_SECTION_ID
+        );
+
+        if (layoutSection) {
+          hasReceivedThemeProps.current = true;
+          if (layoutSection.properties) {
+            setSectionProperties(layoutSection.properties);
+          }
+
+          // Extract block styles from section blocks
+          if (layoutSection.blocks) {
+            const newBlockStyles: BlockStyles = {};
+            layoutSection.blocks.forEach(
+              (block: { id: string; styles?: Record<string, unknown> }) => {
+                if (block.styles) {
+                  newBlockStyles[block.id] = block.styles;
+                }
+              }
+            );
+            setBlockStyles(newBlockStyles);
+          }
+        }
+      }
+
+      // Handle property updates (when user changes dropdown in Theme Editor)
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, placeholderId, key, value, properties } = data || {};
+
+        // Check if this is for our section
+        if (
+          sectionId === FOOTER_LAYOUT_SECTION_ID ||
+          placeholderId === FOOTER_LAYOUT_PLACEHOLDER_ID
+        ) {
+          // If we get individual key/value
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          // If we get full properties object
+          if (properties) {
+            setSectionProperties(properties);
+          }
+        }
+      }
+
+      // Handle selection changes
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+
+        // Check if Layout section is selected
+        const isSelected =
+          placeholderId === FOOTER_LAYOUT_PLACEHOLDER_ID &&
+          sectionId === FOOTER_LAYOUT_SECTION_ID;
+
+        setIsLayoutSelected(isSelected);
+        if (isSelected) {
+          setSelectedBlockId(null);
+        }
+      }
+
+      // Handle block selection
+      if (type === 'SELECT_BLOCK') {
+        const { sectionId, blockId } = data || {};
+
+        // If block in our section is selected
+        if (sectionId === FOOTER_LAYOUT_SECTION_ID) {
+          setSelectedBlockId(blockId);
+          setIsLayoutSelected(false);
+        } else {
+          // If a block is selected in another section, deselect our blocks
+          setSelectedBlockId(null);
+          setIsLayoutSelected(false);
+        }
+      }
+
+      // Handle deselection
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsLayoutSelected(false);
+        setSelectedBlockId(null);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Helper to extract layout value from potentially responsive property
+  const extractLayoutValue = (layoutProp: unknown): FooterLayoutType => {
+    if (!layoutProp) return 'default';
+
+    // If it's a direct string value
+    if (typeof layoutProp === 'string') {
+      return layoutProp as FooterLayoutType;
+    }
+
+    // If it's a responsive object (e.g., { desktop: 'compact' })
+    if (typeof layoutProp === 'object' && layoutProp !== null) {
+      const obj = layoutProp as Record<string, string>;
+      // Try desktop first, then mobile, then any first value
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'default') as FooterLayoutType;
+    }
+
+    return 'default';
+  };
+
+  // Get block styles helper
+  const getBlockStyles = useCallback(
+    (blockId: string): Record<string, unknown> => {
+      return blockStyles[blockId] || {};
+    },
+    [blockStyles]
+  );
+
+  // Get the current layout type
+  const currentLayout: FooterLayoutType = extractLayoutValue(
+    sectionProperties.layout
+  );
+
+  // If no children, just return null (registration-only mode)
+  if (!children) {
+    return null;
+  }
+
+  // Provide layout context to children
+  return (
+    <FooterLayoutContext.Provider
+      value={{
+        layout: currentLayout,
+        isDesigner,
+        selectedBlockId,
+        getBlockStyles
+      }}
+    >
+      {children}
+    </FooterLayoutContext.Provider>
+  );
+}

package/app-template/src/views/footer/footer-layout-switcher.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * Footer Layout Switcher
+ *
+ * A client component that switches between pre-rendered footer layouts
+ * based on the current layout setting from FooterLayoutRegistrar.
+ *
+ * This component receives the layouts as React nodes (pre-rendered by the server)
+ * and simply shows/hides them based on the layout context.
+ */
+
+import { ReactNode, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import {
+  useFooterLayout,
+  FOOTER_LAYOUT_BLOCKS,
+  FOOTER_LAYOUT_PLACEHOLDER_ID,
+  FOOTER_LAYOUT_SECTION_ID
+} from './footer-layout-registrar';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import { convertBlockStyles } from './footer-utils';
+
+/**
+ * Selectable Row Container
+ * Wraps row content with theme editor selection support
+ */
+interface SelectableRowProps {
+  blockId: string;
+  blockLabel: string;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+function SelectableRow({
+  blockId,
+  blockLabel,
+  children,
+  className,
+  style
+}: SelectableRowProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useFooterLayout();
+
+  const { handleClick } = useDesignerFeatures({
+    blockId,
+    placeholderId: FOOTER_LAYOUT_PLACEHOLDER_ID,
+    sectionId: FOOTER_LAYOUT_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: blockId,
+      type: 'container',
+      label: blockLabel
+    }
+  });
+
+  const isSelected = selectedBlockId === blockId;
+  const blockStyles = getBlockStyles(blockId);
+  const computedStyles = useMemo(
+    () => convertBlockStyles(blockStyles),
+    [blockStyles]
+  );
+
+  const handleContainerClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClick(e);
+      }
+    },
+    [isDesigner, handleClick]
+  );
+
+  return (
+    <div
+      data-block-id={blockId}
+      onClick={handleContainerClick}
+      className={clsx(
+        className,
+        isDesigner && 'cursor-pointer',
+        isSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+      style={{ ...style, ...computedStyles }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface FooterLayoutSwitcherProps {
+  defaultLayout: ReactNode;
+  compactLayout: ReactNode;
+}
+
+export default function FooterLayoutSwitcher({
+  defaultLayout,
+  compactLayout
+}: FooterLayoutSwitcherProps) {
+  const { layout } = useFooterLayout();
+
+  return (
+    <SelectableRow
+      blockId={FOOTER_LAYOUT_BLOCKS.MAIN_ROW.id}
+      blockLabel={FOOTER_LAYOUT_BLOCKS.MAIN_ROW.label}
+    >
+      {layout === 'compact' ? compactLayout : defaultLayout}
+    </SelectableRow>
+  );
+}

package/app-template/src/views/footer/footer-menu-context.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_MENU_SECTION_ID,
+  FOOTER_MENU_WIDGET_SLUG,
+  FOOTER_MENU_HEADING_BLOCK_ID,
+  FOOTER_MENU_LINK_BLOCK_ID,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export { FOOTER_MENU_HEADING_BLOCK_ID, FOOTER_MENU_LINK_BLOCK_ID };
+
+type FooterMenuBlockState = FooterNativeWidgetBlock;
+
+interface FooterMenuContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterMenuBlockState | undefined;
+  blockVersion: number;
+}
+
+const FooterMenuContext = createContext<FooterMenuContextValue>({
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlock: () => undefined,
+  blockVersion: 0
+});
+
+const BLOCK_META = [
+  { id: FOOTER_MENU_HEADING_BLOCK_ID, type: 'text', label: 'Menu Headings' },
+  { id: FOOTER_MENU_LINK_BLOCK_ID, type: 'text', label: 'Menu Links' }
+];
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>
+): FooterMenuBlockState => {
+  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
+  return {
+    id: block.id ?? fallback?.id ?? '',
+    type: block.type ?? fallback?.type,
+    label: block.label ?? fallback?.label,
+    styles: block.styles,
+    properties: block.properties,
+    value: block.value
+  } as FooterMenuBlockState;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterNativeWidgetBlock[]
+): Map<string, FooterMenuBlockState> => {
+  const map = new Map<string, FooterMenuBlockState>();
+  blocks?.forEach((block) => {
+    map.set(block.id, toBlockState(block));
+  });
+
+  BLOCK_META.forEach((meta) => {
+    if (!map.has(meta.id)) {
+      map.set(meta.id, toBlockState(meta));
+    }
+  });
+
+  return map;
+};
+
+interface FooterMenuProviderProps {
+  initialBlocks?: FooterNativeWidgetBlock[];
+}
+
+export function FooterMenuProvider({
+  initialBlocks,
+  children
+}: PropsWithChildren<FooterMenuProviderProps>) {
+  const designerState = useExternalDesigner({
+    placeholderId: FOOTER_PLACEHOLDER_ID
+  });
+
+  const [blockMap, setBlockMap] = useState(() =>
+    mapFromSnapshot(initialBlocks)
+  );
+  const blockMapRef = useRef(blockMap);
+  const [blockVersion, setBlockVersion] = useState(0);
+
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: FOOTER_MENU_WIDGET_SLUG,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const mergeBlocks = useCallback(
+    (blocks: Partial<FooterNativeWidgetBlock>[] | undefined) => {
+      if (!blocks?.length) return;
+
+      setBlockMap((prev) => {
+        const next = new Map(prev);
+        blocks.forEach((block) => {
+          if (!block.id) return;
+          const existing = next.get(block.id);
+
+          next.set(
+            block.id,
+            toBlockState({
+              ...existing,
+              ...block,
+              styles:
+                block.styles && Object.keys(block.styles).length > 0
+                  ? block.styles
+                  : existing?.styles,
+              properties:
+                block.properties && Object.keys(block.properties).length > 0
+                  ? block.properties
+                  : existing?.properties,
+              value: block.value !== undefined ? block.value : existing?.value
+            })
+          );
+        });
+        blockMapRef.current = next;
+        return next;
+      });
+      setBlockVersion((prev) => prev + 1);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
+
+    const blocksToMerge: Partial<FooterNativeWidgetBlock>[] = [];
+    widgetData.blocks.forEach((block) => {
+      blocksToMerge.push(block as FooterNativeWidgetBlock);
+    });
+
+    if (blocksToMerge.length > 0) {
+      mergeBlocks(blocksToMerge);
+    }
+  }, [
+    isDesigner,
+    isDesignerChecked,
+    widgetData.isLoading,
+    widgetData.blocks,
+    mergeBlocks
+  ]);
+
+  useEffect(() => {
+    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 === FOOTER_PLACEHOLDER_ID
+        );
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === FOOTER_MENU_SECTION_ID
+        );
+        mergeBlocks(section?.blocks);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [mergeBlocks]);
+
+  const getBlock = useCallback(
+    (blockId: string) => blockMapRef.current.get(blockId),
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      ...designerState,
+      getBlock,
+      blockVersion
+    }),
+    [designerState, getBlock, blockVersion]
+  );
+
+  return (
+    <FooterMenuContext.Provider value={contextValue}>
+      {children}
+    </FooterMenuContext.Provider>
+  );
+}
+
+export const useFooterMenuDesigner = () => useContext(FooterMenuContext);