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

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

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

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

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