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

package/app-template/src/views/header/header-content.tsx

@@ -0,0 +1,1026 @@
+'use client';
+
+/**
+ * Header Content Component
+ *
+ * Client component that renders the header content based on the selected layout.
+ * Uses the HeaderLayoutContext to determine which layout to display.
+ */
+
+import {
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+  useRef
+} from 'react';
+import clsx from 'clsx';
+import {
+  useHeaderLayout,
+  HeaderLayoutType,
+  MenuPositionType,
+  SearchPositionType,
+  HEADER_LAYOUT_BLOCKS,
+  HEADER_LAYOUT_PLACEHOLDER_ID,
+  HEADER_LAYOUT_SECTION_ID
+} from './header-layout-registrar';
+import HeaderSearchRegistrar, {
+  useHeaderSearch,
+  InitialSearchSettings
+} from './header-search-registrar';
+import HeaderLanguageRegistrar, {
+  useHeaderLanguage
+} from './header-language-registrar';
+import HeaderCurrencyRegistrar, {
+  useHeaderCurrency
+} from './header-currency-registrar';
+import HeaderTextSliderRegistrar, {
+  useHeaderTextSlider
+} from './header-text-slider-registrar';
+import HeaderAnnouncementRegistrar, {
+  useHeaderAnnouncement
+} from './header-announcement-registrar';
+import InlineSearch from './inline-search';
+import { LanguageSelect } from '@theme/components/language-select';
+import { CurrencySelect } from '@theme/components/currency-select';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import type {
+  HeaderLanguageSettings,
+  HeaderCurrencySettings,
+  HeaderTextSliderSettings,
+  HeaderAnnouncementSettings
+} from './server-settings-parser';
+
+interface HeaderContentProps {
+  logo: ReactNode;
+  navbar: ReactNode;
+  icons: ReactNode;
+  mobileHamburger: ReactNode;
+  mobileMenu: ReactNode;
+  className?: string;
+  menuPosition?: MenuPositionType;
+  searchPosition?: SearchPositionType;
+  /** Initial search settings from server-side parsing (to avoid flash) */
+  initialSearchSettings?: InitialSearchSettings;
+  /** Initial language settings from server-side parsing (to avoid flash) */
+  initialLanguageSettings?: HeaderLanguageSettings;
+  /** Initial currency settings from server-side parsing (to avoid flash) */
+  initialCurrencySettings?: HeaderCurrencySettings;
+  /** Initial text slider settings from server-side parsing (to avoid flash) */
+  initialTextSliderSettings?: HeaderTextSliderSettings;
+  /** Initial announcement bar settings from server-side parsing (to avoid flash) */
+  initialAnnouncementSettings?: HeaderAnnouncementSettings;
+}
+
+/**
+ * Convert block styles to CSS properties
+ */
+function convertBlockStyles(
+  styles: Record<string, unknown> | undefined
+): React.CSSProperties {
+  if (!styles) return {};
+
+  const result: Record<string, unknown> = {};
+
+  // Map theme editor keys to CSS property names
+  const styleMap: Record<string, string> = {
+    'background-color': 'backgroundColor',
+    'border-color': 'borderColor',
+    'border-width': 'borderWidth',
+    'border-radius': 'borderRadius',
+    'border-style': 'borderStyle',
+    'padding-top': 'paddingTop',
+    'padding-bottom': 'paddingBottom',
+    'padding-left': 'paddingLeft',
+    'padding-right': 'paddingRight',
+    'margin-top': 'marginTop',
+    'margin-bottom': 'marginBottom',
+    'margin-left': 'marginLeft',
+    'margin-right': 'marginRight',
+    'min-width': 'minWidth',
+    'max-width': 'maxWidth',
+    'font-size': 'fontSize',
+    'font-weight': 'fontWeight',
+    'font-family': 'fontFamily',
+    'line-height': 'lineHeight',
+    'text-align': 'textAlign',
+    // Theme editor background properties
+    bgColor: 'backgroundColor',
+    BgOpacity: null // Skip, already applied via background
+  };
+
+  // Keys to skip (helper properties that shouldn't be applied directly)
+  const skipKeys = new Set(['bgColor', 'BgOpacity']);
+
+  Object.entries(styles).forEach(([key, value]) => {
+    // Skip helper keys
+    if (skipKeys.has(key)) return;
+
+    const cssKey = styleMap[key] || key;
+    // Skip if explicitly mapped to null
+    if (cssKey === null) return;
+
+    // Extract desktop value if responsive
+    if (value && typeof value === 'object' && 'desktop' in value) {
+      result[cssKey] = (value as Record<string, unknown>).desktop;
+    } else {
+      result[cssKey] = value;
+    }
+  });
+
+  // Auto-add border-style: solid if border-width is set
+  if (result.borderWidth && !result.borderStyle) {
+    result.borderStyle = 'solid';
+  }
+
+  return result as React.CSSProperties;
+}
+
+/**
+ * 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 } = useHeaderLayout();
+
+  const { handleClick } = useDesignerFeatures({
+    blockId,
+    placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
+    sectionId: HEADER_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>
+  );
+}
+
+/**
+ * Search Input Wrapper
+ * Wraps the InlineSearch component with theme editor support
+ */
+function SearchInputWrapper() {
+  const {
+    isSectionVisible,
+    properties,
+    sectionStyles,
+    getBlockStyles,
+    getBlockProperties,
+    isDesigner,
+    selectedBlockId
+  } = useHeaderSearch();
+
+  // Merge width (and potential responsive widths) from properties into styles
+  // Must be called before early return to satisfy React hooks rules
+  const mergedSectionStyles = useMemo(() => {
+    const result = { ...(sectionStyles as Record<string, unknown>) };
+
+    const resolveValue = (value: unknown) => {
+      if (value === null || value === undefined) return undefined;
+      if (typeof value === 'string' || typeof value === 'number') return value;
+      if (typeof value === 'object') {
+        const obj = value as Record<string, string | number>;
+        return obj.desktop ?? obj.mobile ?? Object.values(obj)[0];
+      }
+      return undefined;
+    };
+
+    const width = resolveValue(properties.width);
+    if (width !== undefined) {
+      result.width = width;
+    }
+
+    return result as React.CSSProperties;
+  }, [properties.width, sectionStyles]);
+
+  if (!isSectionVisible) {
+    return null;
+  }
+
+  const placeholder =
+    typeof properties.placeholder === 'object'
+      ? (properties.placeholder as Record<string, string>).desktop ||
+        'Search products...'
+      : properties.placeholder || 'Search products...';
+
+  // Merge block styles and properties for icon
+  const iconBlockStyles = getBlockStyles('header-search-icon') || {};
+  const iconBlockProps = getBlockProperties('header-search-icon') || {};
+  const iconStyles = { ...iconBlockStyles, ...iconBlockProps };
+
+  // Check if custom width is set to avoid w-full overriding it
+  const hasCustomWidth = mergedSectionStyles.width !== undefined;
+
+  return (
+    <div data-section-id="header-search">
+      <InlineSearch
+        placeholder={placeholder}
+        className={hasCustomWidth ? undefined : 'w-full'}
+        style={mergedSectionStyles}
+        iconStyles={iconStyles}
+        blockId="header-search-icon"
+        isDesigner={isDesigner}
+        isSelected={selectedBlockId === 'header-search-icon'}
+      />
+    </div>
+  );
+}
+
+/**
+ * Language Select Wrapper
+ * Wraps the LanguageSelect component with theme editor support
+ */
+function LanguageSelectWrapper() {
+  const {
+    isSectionVisible,
+    properties,
+    sectionStyles,
+    isDesigner,
+    isLanguageSectionSelected
+  } = useHeaderLanguage();
+
+  // Convert styles for CSS using shared function
+  const computedStyles = useMemo(
+    () => convertBlockStyles(sectionStyles),
+    [sectionStyles]
+  );
+
+  // Handle click to select section in designer mode
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner && window.parent) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId: 'header',
+              sectionId: 'header-language'
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [isDesigner]
+  );
+
+  if (!isSectionVisible) {
+    return null;
+  }
+
+  const showIcon =
+    typeof properties.showIcon === 'object'
+      ? (properties.showIcon as Record<string, boolean>).desktop ?? true
+      : properties.showIcon ?? true;
+
+  const labelFormat =
+    typeof properties.labelFormat === 'object'
+      ? (properties.labelFormat as Record<string, string>).desktop ?? 'full'
+      : properties.labelFormat ?? 'full';
+
+  // Custom icon from properties - handle responsive format
+  const customIcon =
+    typeof properties.icon === 'object'
+      ? (properties.icon as Record<string, string>).desktop ?? ''
+      : (properties.icon as string) ?? '';
+
+  return (
+    <div
+      data-section-id="header-language"
+      style={computedStyles}
+      onClick={handleClick}
+      className={clsx(
+        isDesigner && 'cursor-pointer',
+        isLanguageSectionSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+    >
+      <div style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}>
+        <LanguageSelect
+          showIcon={showIcon}
+          labelFormat={labelFormat as 'full' | 'short' | 'code'}
+          customIcon={customIcon}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Currency Select Wrapper
+ * Wraps the CurrencySelect component with theme editor support
+ */
+function CurrencySelectWrapper() {
+  const {
+    isSectionVisible,
+    properties,
+    sectionStyles,
+    isDesigner,
+    isCurrencySectionSelected
+  } = useHeaderCurrency();
+
+  // Convert styles for CSS using shared function
+  const computedStyles = useMemo(
+    () => convertBlockStyles(sectionStyles),
+    [sectionStyles]
+  );
+
+  // Handle click to select section in designer mode
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner && window.parent) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId: 'header',
+              sectionId: 'header-currency'
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [isDesigner]
+  );
+
+  if (!isSectionVisible) {
+    return null;
+  }
+
+  const showIcon =
+    typeof properties.showIcon === 'object'
+      ? (properties.showIcon as Record<string, boolean>).desktop ?? true
+      : properties.showIcon ?? true;
+
+  const labelFormat =
+    typeof properties.labelFormat === 'object'
+      ? (properties.labelFormat as Record<string, string>).desktop ?? 'full'
+      : properties.labelFormat ?? 'full';
+
+  // Custom icon from properties - handle responsive format
+  const customIcon =
+    typeof properties.icon === 'object'
+      ? (properties.icon as Record<string, string>).desktop ?? ''
+      : (properties.icon as string) ?? '';
+
+  return (
+    <div
+      data-section-id="header-currency"
+      style={computedStyles}
+      onClick={handleClick}
+      className={clsx(
+        isDesigner && 'cursor-pointer',
+        isCurrencySectionSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+    >
+      <div style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}>
+        <CurrencySelect
+          showIcon={showIcon}
+          labelFormat={labelFormat as 'full' | 'symbol' | 'code'}
+          customIcon={customIcon}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Text Slider Wrapper
+ * Wraps the Text Slider component with theme editor support
+ * Positioned absolutely centered in the utility bar
+ */
+const DEFAULT_ITEMS: Array<{ text: string; link?: string }> = [
+  { text: 'Welcome to our store!' }
+];
+
+function TextSliderWrapper() {
+  const {
+    isSectionVisible,
+    properties,
+    sectionStyles,
+    isDesigner,
+    isTextSliderSectionSelected
+  } = useHeaderTextSlider();
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [prevIndex, setPrevIndex] = useState<number | null>(null);
+  const [slideDirection, setSlideDirection] = useState<'left' | 'right'>(
+    'left'
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Convert styles for CSS using shared function
+  const computedStyles = useMemo(
+    () => convertBlockStyles(sectionStyles),
+    [sectionStyles]
+  );
+
+  // Handle click to select section in designer mode
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner && window.parent) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId: 'header',
+              sectionId: 'header-text-slider'
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [isDesigner]
+  );
+
+  // Stable reference to items using JSON comparison
+  const itemsJsonRef = useRef<string>('');
+  const itemsRef = useRef(DEFAULT_ITEMS);
+
+  // Only update items ref when the actual data changes
+  const propItemsJson = JSON.stringify(properties.items);
+  if (propItemsJson !== itemsJsonRef.current) {
+    itemsJsonRef.current = propItemsJson;
+    const propItems = properties.items;
+    if (Array.isArray(propItems) && propItems.length > 0) {
+      itemsRef.current = propItems;
+    } else {
+      itemsRef.current = DEFAULT_ITEMS;
+    }
+  }
+
+  const items = itemsRef.current;
+  const autoPlay = properties.autoPlay !== false;
+  const autoPlayInterval = properties.autoPlayInterval || 3000;
+  const showArrows = properties.showArrows !== false;
+
+  // Refs for values needed in effects/intervals
+  const autoPlayRef = useRef(autoPlay);
+  const autoPlayIntervalRef = useRef(autoPlayInterval);
+  const itemsLengthRef = useRef(items.length);
+  const isAnimatingRef = useRef(isAnimating);
+  const currentIndexRef = useRef(currentIndex);
+
+  // Update refs on each render
+  autoPlayRef.current = autoPlay;
+  autoPlayIntervalRef.current = autoPlayInterval;
+  itemsLengthRef.current = items.length;
+  isAnimatingRef.current = isAnimating;
+  currentIndexRef.current = currentIndex;
+
+  // Reset current index if out of bounds
+  useEffect(() => {
+    if (currentIndex >= itemsLengthRef.current) {
+      setCurrentIndex(0);
+    }
+  }, [currentIndex]);
+
+  // Handle slide transition
+  const performSlide = useCallback(
+    (direction: 'left' | 'right', newIndex: number) => {
+      setIsAnimating(true);
+      setSlideDirection(direction);
+      setPrevIndex(currentIndexRef.current);
+      setCurrentIndex(newIndex);
+      setTimeout(() => {
+        setPrevIndex(null);
+        setIsAnimating(false);
+      }, 400);
+    },
+    []
+  );
+
+  // Auto-play functionality
+  useEffect(() => {
+    if (!autoPlayRef.current || itemsLengthRef.current <= 1) return;
+
+    const interval = setInterval(() => {
+      if (
+        !autoPlayRef.current ||
+        itemsLengthRef.current <= 1 ||
+        isAnimatingRef.current
+      )
+        return;
+
+      const newIndex = (currentIndexRef.current + 1) % itemsLengthRef.current;
+      performSlide('left', newIndex);
+    }, autoPlayIntervalRef.current);
+
+    return () => clearInterval(interval);
+  }, [performSlide]);
+
+  // Navigation handlers
+  const goToPrev = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (isAnimating) return;
+      const newIndex = (currentIndex - 1 + items.length) % items.length;
+      performSlide('right', newIndex);
+    },
+    [currentIndex, items.length, isAnimating, performSlide]
+  );
+
+  const goToNext = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (isAnimating) return;
+      const newIndex = (currentIndex + 1) % items.length;
+      performSlide('left', newIndex);
+    },
+    [currentIndex, items.length, isAnimating, performSlide]
+  );
+
+  if (!isSectionVisible) {
+    return null;
+  }
+
+  const currentItem = items[currentIndex];
+
+  return (
+    <div
+      data-section-id="header-text-slider"
+      onClick={handleClick}
+      className={clsx(
+        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+        'flex items-center gap-2',
+        isDesigner && 'cursor-pointer',
+        isTextSliderSectionSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+      style={{
+        ...computedStyles,
+        pointerEvents: isDesigner ? 'auto' : undefined
+      }}
+    >
+      {/* Previous Arrow */}
+      {showArrows && items.length > 1 && (
+        <button
+          onClick={goToPrev}
+          className="flex items-center justify-center w-6 h-6 text-current hover:opacity-70 transition-opacity"
+          style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <polyline points="15,18 9,12 15,6" />
+          </svg>
+        </button>
+      )}
+
+      {/* Text Content with Slide Animation */}
+      {/* Container uses grid to size based on longest item */}
+      <div className="relative overflow-hidden">
+        {/* Hidden items to establish container width - all invisible */}
+        <div className="grid invisible" aria-hidden="true">
+          {items.map((item, index) => (
+            <span
+              key={index}
+              className="col-start-1 row-start-1 whitespace-nowrap"
+            >
+              {item.text}
+            </span>
+          ))}
+        </div>
+        {/* Exiting item (slides out) */}
+        {prevIndex !== null && (
+          <span
+            key={`prev-${prevIndex}`}
+            className={clsx(
+              'absolute inset-0 whitespace-nowrap text-center',
+              slideDirection === 'left'
+                ? 'animate-slide-out'
+                : 'animate-slide-out [animation-direction:reverse]'
+            )}
+          >
+            {items[prevIndex]?.link ? (
+              <a href={items[prevIndex].link} className="hover:underline">
+                {items[prevIndex].text}
+              </a>
+            ) : (
+              items[prevIndex]?.text
+            )}
+          </span>
+        )}
+        {/* Entering item (slides in) */}
+        <span
+          key={`current-${currentIndex}-${
+            prevIndex !== null ? 'animating' : 'static'
+          }`}
+          className={clsx(
+            'absolute inset-0 whitespace-nowrap text-center',
+            prevIndex !== null &&
+              (slideDirection === 'left'
+                ? 'animate-slide-in'
+                : 'animate-slide-in [animation-direction:reverse]')
+          )}
+        >
+          {currentItem?.link ? (
+            <a
+              href={currentItem.link}
+              className="hover:underline"
+              style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
+            >
+              {currentItem.text}
+            </a>
+          ) : (
+            currentItem?.text
+          )}
+        </span>
+      </div>
+
+      {/* Next Arrow */}
+      {showArrows && items.length > 1 && (
+        <button
+          onClick={goToNext}
+          className="flex items-center justify-center w-6 h-6 text-current hover:opacity-70 transition-opacity"
+          style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <polyline points="9,6 15,12 9,18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function AnnouncementBarWrapper() {
+  const {
+    isSectionVisible,
+    properties,
+    sectionStyles,
+    isDesigner,
+    isAnnouncementSectionSelected
+  } = useHeaderAnnouncement();
+
+  const computedStyles = useMemo(
+    () => convertBlockStyles(sectionStyles),
+    [sectionStyles]
+  );
+
+  const resolvePropValue = (value: unknown, fallback = ''): string => {
+    if (typeof value === 'string') return value;
+    if (typeof value === 'object' && value !== null) {
+      const responsiveValue = value as Record<string, string>;
+      return (
+        responsiveValue.desktop ||
+        responsiveValue.mobile ||
+        Object.values(responsiveValue)[0] ||
+        fallback
+      );
+    }
+    return fallback;
+  };
+
+  const text = resolvePropValue(properties.text, '');
+  const link = resolvePropValue(properties.link, '');
+  const target = resolvePropValue(properties.target, '_self');
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner && window.parent) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId: 'header',
+              sectionId: 'header-announcement-bar'
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [isDesigner]
+  );
+
+  if (!isSectionVisible || !text) {
+    return null;
+  }
+
+  return (
+    <div
+      data-section-id="header-announcement-bar"
+      onClick={handleClick}
+      className={clsx(
+        'w-full',
+        isDesigner && 'cursor-pointer',
+        isAnnouncementSectionSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+      style={computedStyles}
+    >
+      <div className="container px-2.5 lg:px-5 xl:px-2.5 text-center">
+        {link ? (
+          <a
+            href={link}
+            target={target}
+            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            className="hover:underline"
+            style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
+          >
+            {text}
+          </a>
+        ) : (
+          <span>{text}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Utility Row Component
+ * Shows Language and Currency selects when added via Theme Editor
+ * Only renders when at least one of them is visible
+ */
+function UtilityRow() {
+  const { isSectionVisible: isLanguageVisible } = useHeaderLanguage();
+  const { isSectionVisible: isCurrencyVisible } = useHeaderCurrency();
+  const { isSectionVisible: isTextSliderVisible } = useHeaderTextSlider();
+  const { getBlockStyles, utilityPosition } = useHeaderLayout();
+
+  // Get block styles for utility row
+  const blockStyles = getBlockStyles(HEADER_LAYOUT_BLOCKS.UTILITY_ROW.id);
+  const computedStyles = useMemo(
+    () => convertBlockStyles(blockStyles),
+    [blockStyles]
+  );
+
+  // Don't render if nothing is visible
+  if (!isLanguageVisible && !isCurrencyVisible && !isTextSliderVisible) {
+    return null;
+  }
+
+  // Determine justify class based on utility position
+  const justifyClass =
+    utilityPosition === 'left' ? 'justify-start' : 'justify-end';
+
+  // Check if custom padding is set to avoid Tailwind class overriding it
+  const hasCustomPaddingY =
+    computedStyles.paddingTop !== undefined ||
+    computedStyles.paddingBottom !== undefined;
+
+  return (
+    <SelectableRow
+      blockId={HEADER_LAYOUT_BLOCKS.UTILITY_ROW.id}
+      blockLabel={HEADER_LAYOUT_BLOCKS.UTILITY_ROW.label}
+      className="w-full bg-gray-100"
+      style={computedStyles}
+    >
+      <div
+        className={clsx(
+          'container relative flex items-center gap-4 px-2.5 lg:px-5 xl:px-2.5',
+          justifyClass
+        )}
+        style={
+          hasCustomPaddingY
+            ? {
+                paddingTop: computedStyles.paddingTop,
+                paddingBottom: computedStyles.paddingBottom
+              }
+            : undefined
+        }
+      >
+        {/* Text Slider - Absolute positioned in center */}
+        <TextSliderWrapper />
+
+        {/* Language and Currency - positioned based on utilityPosition */}
+        <LanguageSelectWrapper />
+        <CurrencySelectWrapper />
+      </div>
+    </SelectableRow>
+  );
+}
+
+/**
+ * Default Layout
+ * Single row: [Logo + Navbar] | [Icons]
+ */
+function DefaultLayout({
+  logo,
+  navbar,
+  icons,
+  mobileHamburger,
+  mobileMenu,
+  initialAnnouncementSettings,
+  initialLanguageSettings,
+  initialCurrencySettings,
+  initialTextSliderSettings
+}: HeaderContentProps) {
+  return (
+    <>
+      <HeaderAnnouncementRegistrar initialSettings={initialAnnouncementSettings}>
+        <AnnouncementBarWrapper />
+      </HeaderAnnouncementRegistrar>
+
+      {/* Utility Row: Language & Currency Selects & Text Slider */}
+      <HeaderTextSliderRegistrar initialSettings={initialTextSliderSettings}>
+        <HeaderLanguageRegistrar initialSettings={initialLanguageSettings}>
+          <HeaderCurrencyRegistrar initialSettings={initialCurrencySettings}>
+            <UtilityRow />
+          </HeaderCurrencyRegistrar>
+        </HeaderLanguageRegistrar>
+      </HeaderTextSliderRegistrar>
+
+      <SelectableRow
+        blockId={HEADER_LAYOUT_BLOCKS.MAIN_ROW.id}
+        blockLabel={HEADER_LAYOUT_BLOCKS.MAIN_ROW.label}
+        className="w-full"
+      >
+        <div className="container flex items-center justify-between px-2.5 lg:px-5 xl:px-2.5 py-5 sm:py-0">
+          {mobileHamburger}
+          <div className="flex items-center sm:gap-16">
+            {logo}
+            {navbar}
+          </div>
+          {icons}
+          {mobileMenu}
+        </div>
+      </SelectableRow>
+    </>
+  );
+}
+
+/**
+ * Two Row Layout
+ * Row 1: Logo | Search Input | Icons
+ * Row 2: Navigation Menu (full width, position configurable)
+ */
+function TwoRowLayout({
+  logo,
+  navbar,
+  icons,
+  mobileHamburger,
+  mobileMenu,
+  menuPosition = 'center',
+  searchPosition = 'center',
+  initialSearchSettings,
+  initialAnnouncementSettings,
+  initialLanguageSettings,
+  initialCurrencySettings,
+  initialTextSliderSettings
+}: HeaderContentProps) {
+  // Map menu position to justify class
+  const menuPositionClass = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end'
+  }[menuPosition];
+
+  const searchPositionClass = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end'
+  }[searchPosition];
+
+  return (
+    <>
+      <HeaderAnnouncementRegistrar initialSettings={initialAnnouncementSettings}>
+        <AnnouncementBarWrapper />
+      </HeaderAnnouncementRegistrar>
+
+      {/* Utility Row: Language & Currency Selects & Text Slider */}
+      <HeaderTextSliderRegistrar initialSettings={initialTextSliderSettings}>
+        <HeaderLanguageRegistrar initialSettings={initialLanguageSettings}>
+          <HeaderCurrencyRegistrar initialSettings={initialCurrencySettings}>
+            <UtilityRow />
+          </HeaderCurrencyRegistrar>
+        </HeaderLanguageRegistrar>
+      </HeaderTextSliderRegistrar>
+
+      {/* Row 1: Logo + Search + Icons */}
+      <SelectableRow
+        blockId={HEADER_LAYOUT_BLOCKS.TOP_ROW.id}
+        blockLabel={HEADER_LAYOUT_BLOCKS.TOP_ROW.label}
+        className="w-full"
+      >
+        <div className="container flex items-center justify-between px-2.5 sm:px-0">
+          {mobileHamburger}
+          <div className="flex items-center">{logo}</div>
+          <div className={`hidden sm:flex flex-1 ${searchPositionClass} mx-8`}>
+            <HeaderSearchRegistrar
+              autoRegister
+              initialSettings={initialSearchSettings}
+            >
+              <SearchInputWrapper />
+            </HeaderSearchRegistrar>
+          </div>
+          {icons}
+        </div>
+      </SelectableRow>
+
+      {/* Row 2: Navigation Menu */}
+      <SelectableRow
+        blockId={HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.id}
+        blockLabel={HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.label}
+        className="hidden sm:block w-full border-t border-gray-200"
+      >
+        <div className={`container flex ${menuPositionClass} px-2.5 sm:px-0`}>
+          {navbar}
+        </div>
+      </SelectableRow>
+
+      {mobileMenu}
+    </>
+  );
+}
+
+/**
+ * Layout Map
+ */
+const LAYOUTS: Record<HeaderLayoutType, React.FC<HeaderContentProps>> = {
+  default: DefaultLayout,
+  'two-row': TwoRowLayout
+};
+
+/**
+ * HeaderContent
+ *
+ * Reads the current layout from context and renders appropriate layout.
+ */
+export default function HeaderContent(props: HeaderContentProps) {
+  const { layout, menuPosition, searchPosition } = useHeaderLayout();
+  const LayoutComponent = LAYOUTS[layout] || LAYOUTS.default;
+
+  return (
+    <LayoutComponent
+      {...props}
+      menuPosition={menuPosition}
+      searchPosition={searchPosition}
+      initialSearchSettings={props.initialSearchSettings}
+      initialAnnouncementSettings={props.initialAnnouncementSettings}
+      initialLanguageSettings={props.initialLanguageSettings}
+      initialCurrencySettings={props.initialCurrencySettings}
+      initialTextSliderSettings={props.initialTextSliderSettings}
+    />
+  );
+}