@bravostudioai/react 0.1.0

package/src/components.tsx

@@ -0,0 +1,3155 @@
+// @ts-nocheck - This file contains extensive dynamic runtime data structures that are impractical to fully type
+import React, {
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import EncoreBindingContext from "./contexts/EncoreBindingContext";
+import useEncoreState from "./stores/useEncoreState";
+import EncoreComponentIdContext from "./contexts/EncoreComponentIdContext";
+import axios from "axios";
+import EncoreActionContext from "./contexts/EncoreActionContext";
+import EncoreRepeatingContainerContext from "./contexts/EncoreRepeatingContainerContext";
+
+// !!! IMPORTANT
+//
+// YOU MUST ENSURE THAT ANY PACKAGES USED IN THIS FILE ARE ADDED TO @/lib/packages
+// FAILURE TO DO SO WILL RESULT IN RUNTIME DEPENDENCY FAILURES
+
+// Type definitions
+interface EncorePageContextType {
+  scaleFactor?: number;
+}
+
+interface EncoreContainerContextType {
+  dimensions?: { width: number; height: number };
+  isFlex?: boolean;
+  flexDirection?: "row" | "column"; // Track parent's flex direction
+}
+
+interface ComponentProps {
+  id: string;
+  name: string;
+  nodeData: any; // Dynamic runtime data structure
+  children?: React.ReactNode;
+  _arrayItemIndex?: number;
+  _arrayItemData?: any;
+}
+
+const EncorePageContext = React.createContext<EncorePageContextType>({});
+const EncoreContainerContext = React.createContext<EncoreContainerContextType>(
+  {}
+);
+
+const argbAlphaToOpacity = (color: string): number => {
+  const alpha = parseInt(color.slice(1, 3), 16);
+  return alpha / 255.0;
+};
+
+const argbToRgba = (color: string): string => {
+  return color.replace(/#(\w{2})(\w{6})/, "#$2$1");
+};
+
+const argbIsFullyTransparent = (color: string): boolean => {
+  return color.slice(1, 3) === "00";
+};
+
+// Parse input-group tag: "input-group:single:product_purpose" -> { type: "single", groupName: "product_purpose" }
+const parseInputGroupTag = (
+  tags: string[] | undefined
+): { type: string; groupName: string } | null => {
+  if (!Array.isArray(tags)) return null;
+  const inputGroupTag = tags.find((tag) => tag.startsWith("input-group:"));
+  if (!inputGroupTag) return null;
+
+  const parts = inputGroupTag.split(":");
+  if (parts.length >= 3) {
+    return { type: parts[1], groupName: parts[2] };
+  }
+  return null;
+};
+
+const useContainerDimensions = (): {
+  dimensions: { width: number; height: number };
+  ref: React.RefObject<HTMLDivElement>;
+} => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!ref.current) return;
+    const element = ref.current;
+
+    // Get initial dimensions immediately
+    const updateDimensions = () => {
+      const { width, height } = element.getBoundingClientRect();
+      setDimensions({ width, height });
+    };
+
+    // Set initial dimensions synchronously
+    updateDimensions();
+
+    // Use requestAnimationFrame to ensure layout has settled
+    requestAnimationFrame(() => {
+      updateDimensions();
+    });
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const cr = entry.contentRect;
+        setDimensions({ width: cr.width, height: cr.height });
+      }
+    });
+    ro.observe(element);
+    return () => ro.disconnect();
+  }, []);
+
+  return { dimensions, ref };
+};
+
+const useEncoreStyle = (
+  style: any,
+  opts: { debug?: boolean } = {}
+): React.CSSProperties | undefined => {
+  let shouldCenterHorizontally = false; // Track if element should be centered
+  const pageContext = useContext(EncorePageContext);
+  const containerContext = useContext(EncoreContainerContext);
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+
+  const percentOfParentWidthToPx = useCallback(
+    (v: number) => {
+      return (containerContext.dimensions?.width ?? 0) * 0.01 * v;
+    },
+    [containerContext.dimensions?.width]
+  );
+
+  const result: React.CSSProperties = {};
+  opts = { debug: false, ...opts };
+
+  const fontIdToFamily = useEncoreState((s) => s.fontsById || {});
+  const fontIdToFull = useEncoreState((s) => s.fontsByIdFull || {});
+
+  if (!style) return undefined;
+
+  // DEBUG: Log style for specific components
+  const debugIds = [
+    "01KB929X1DQJN954WNGF5AH38B", // Slider
+    "01KB929X1KK5TX0K8VBNP6ZDPG", // Hero Container
+    "01KB929X17VWVF3A2J2DY0KHC5", // Page
+  ];
+  // We don't have 'id' here directly in useEncoreStyle, but we can try to infer or pass it.
+  // Actually, let's just log if we see interesting positioning values or if we can pass ID.
+  // Since we can't easily pass ID without changing signature, let's add logging in the components themselves.
+
+  const containerWidth = containerContext.dimensions?.width ?? viewport.width;
+  const containerHeight =
+    containerContext.dimensions?.height ?? viewport.height;
+
+  // Check if this node has layout sizing directives (even if mode is null)
+  const hasLayoutSizing =
+    style.layout?.layoutSizingHorizontal || style.layout?.layoutSizingVertical;
+
+  // Only calculate width/height from percentages if layout sizing is not present.
+  // When layout sizing is FIXED, we'll use layout.size values instead (handled below).
+  if (!hasLayoutSizing) {
+    if (style.width && containerWidth > 0)
+      result.width = style.width * containerWidth * 0.01;
+
+    if (style.aspectRatio && style.width) {
+      if (containerWidth > 0) {
+        result.height =
+          (style.width * containerWidth * 0.01) / style.aspectRatio;
+      }
+    } else {
+      if (style.height && containerHeight > 0)
+        result.height = style.height * containerHeight * 0.01;
+    }
+  }
+
+  // Apply absolute positioning if container is not flex and node has positioning info.
+  // When layout sizing is present, we still use positioning for placement,
+  // but layout.size values take precedence for dimensions (handled below).
+  // Note: containerContext.isFlex defaults to false if context is missing
+  const parentIsFlex = containerContext?.isFlex ?? false;
+  if (!parentIsFlex && style.positioning) {
+    // When we have explicit dimensions from layout sizing, only use top/left for positioning.
+    // Don't set right/bottom as they would conflict with explicit width/height.
+    const hasExplicitDimensions =
+      style.layout?.layoutSizingHorizontal === "FIXED" ||
+      style.layout?.layoutSizingVertical === "FIXED";
+
+    // For elements with explicit dimensions, clamp negative positioning to 0.
+    // Negative positioning with explicit dimensions typically indicates visual extension
+    // (shadows/borders), but for alignment purposes, elements should start at container bounds.
+    const top =
+      hasExplicitDimensions && style.positioning.top < 0
+        ? 0
+        : style.positioning.top;
+    const left =
+      hasExplicitDimensions && style.positioning.left < 0
+        ? 0
+        : style.positioning.left;
+
+    // HEURISTIC: Detect if element should be centered horizontally
+    // If element has explicit width that's nearly full-width (>= 95% of container) and left position
+    // is in the range 15-35% (which suggests the element should be centered but is
+    // currently positioned from its left edge), center it using transform
+    if (
+      hasExplicitDimensions &&
+      style.layout?.layoutSizingHorizontal === "FIXED" &&
+      style.layout?.size?.x
+    ) {
+      const elementWidthPx = style.layout.size.x;
+      const scale = pageContext.scaleFactor ?? 1;
+      const scaledElementWidth = elementWidthPx * scale;
+      const containerWidth = containerContext?.dimensions?.width;
+
+      // Check if element width is >= 95% of container width
+      if (
+        containerWidth &&
+        typeof containerWidth === "number" &&
+        containerWidth > 0
+      ) {
+        const widthRatio = scaledElementWidth / containerWidth;
+        // Element is nearly full width (>= 95%) and left position suggests it should be centered
+        // The left position range 15-35% is typical for a nearly-full-width element that's meant to be centered
+        if (widthRatio >= 0.95 && left >= 15 && left <= 35) {
+          shouldCenterHorizontally = true;
+        }
+      }
+    }
+
+    result.top = `${top}%`;
+
+    // Check if inset exists in original style - if so, we'll need to modify it for centering
+    const hasInset = !!style.inset;
+
+    if (shouldCenterHorizontally) {
+      // Center horizontally using left: 50% and transform: translateX(-50%)
+      if (hasInset) {
+        // Parse and modify inset to center horizontally
+        // Inset format: "top right bottom left" or "top horizontal bottom" (3 values)
+        const insetParts = String(style.inset).split(/\s+/);
+        if (insetParts.length === 3) {
+          // 3-value inset: top horizontal bottom -> convert to 4-value: top 50% bottom auto
+          result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+        } else if (insetParts.length === 4) {
+          // 4-value inset: top right bottom left -> keep top/bottom, center horizontally
+          result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+        }
+        // Clear left/right since inset takes precedence
+        delete result.left;
+        delete result.right;
+      } else {
+        // No inset, use left positioning
+        result.left = "50%";
+        result.right = "auto";
+      }
+    } else {
+      if (hasInset) {
+        // Preserve original inset if not centering
+        result.inset = style.inset;
+      } else {
+        result.left = `${left}%`;
+      }
+    }
+
+    // CRITICAL: Never set right/bottom when explicit dimensions exist, as they override width/height
+    // Explicit width/height from layout.size should take precedence over positioning-based sizing
+    if (!hasExplicitDimensions) {
+      // Only use right/bottom when we don't have explicit dimensions
+      if (style.positioning.bottom !== undefined) {
+        result.bottom = `${style.positioning.bottom}%`;
+      }
+      if (style.positioning.right !== undefined) {
+        result.right = `${style.positioning.right}%`;
+      }
+    } else {
+      // When explicit dimensions exist, explicitly set right/bottom to 'auto' to prevent browser computation
+      // This ensures width/height from layout.size take full precedence
+      result.right = "auto";
+      result.bottom = "auto";
+    }
+
+    result.position = "absolute";
+  }
+
+  // Apply padding even when mode is null - containers can have padding without flex mode
+  // Scale paddings to match Figma layout proportions
+  if (style.layout?.padding) {
+    const scale = pageContext.scaleFactor ?? 1;
+    const p = style.layout.padding;
+    if (p.top !== undefined) result.paddingTop = p.top * scale;
+    if (p.right !== undefined) result.paddingRight = p.right * scale;
+    if (p.bottom !== undefined) result.paddingBottom = p.bottom * scale;
+    if (p.left !== undefined) result.paddingLeft = p.left * scale;
+  }
+
+  if (style.layout?.mode) {
+    // result.flex = 1;
+    result.display = "flex";
+
+    // Map Figma primaryAxisAlignItems values to CSS justify-content values
+    const mapJustifyContent = (
+      figmaValue: string | undefined
+    ): string | undefined => {
+      if (!figmaValue) return undefined;
+      const mapping: Record<string, string> = {
+        MIN: "flex-start",
+        MAX: "flex-end",
+        CENTER: "center",
+        SPACE_BETWEEN: "space-between",
+        SPACE_AROUND: "space-around",
+        SPACE_EVENLY: "space-evenly",
+      };
+      return mapping[figmaValue] || figmaValue.toLowerCase().replace(/_/g, "-");
+    };
+
+    if (style.layout.mode == "HORIZONTAL") {
+      result.flexDirection = "row";
+      if (style.layout.flexWrap) {
+        result.flexWrap = style.layout.flexWrap;
+      }
+      result.justifyContent = mapJustifyContent(
+        style.layout.primaryAxisAlignItems
+      );
+      result.alignItems = style.layout.counterAxisAlignItems;
+    } else {
+      result.flexDirection = "column";
+      result.justifyContent = mapJustifyContent(
+        style.layout.primaryAxisAlignItems
+      );
+      result.alignItems = style.layout.counterAxisAlignItems;
+    }
+
+    result.flexGrow = style.layout.grow;
+    // Set flexWrap: if wrap is explicitly "NO_WRAP", use "nowrap", otherwise default to "wrap" for layouts that need it
+    if (style.layout.wrap === "NO_WRAP") {
+      result.flexWrap = "nowrap";
+    } else if (style.layout.flexWrap) {
+      // If flexWrap is explicitly set, use it
+      result.flexWrap = style.layout.flexWrap;
+    } else {
+      // Default to wrap for horizontal layouts (allows items to wrap to new rows)
+      result.flexWrap = "wrap";
+    }
+
+    // Always set gap properties for flex containers
+    // If itemSpacing is defined, use it; otherwise default to 0
+    // IMPORTANT: When primaryAxisAlignItems is SPACE_BETWEEN, ignore itemSpacing
+    // because space-between already distributes space between items, and Figma's
+    // itemSpacing value in this case represents the computed spacing, not intended gap.
+    const itemSpacing = style.layout.itemSpacing;
+    const scale = pageContext.scaleFactor ?? 1;
+    const isSpaceBetween =
+      style.layout.primaryAxisAlignItems === "SPACE_BETWEEN";
+    const spacing = isSpaceBetween
+      ? 0
+      : (itemSpacing !== undefined ? itemSpacing : 0) * scale;
+    // Always set gap properties as strings to ensure they appear in the DOM
+    // Use "0px" explicitly for zero values to ensure React includes them
+    result.gap = spacing === 0 ? "0px" : `${spacing}px`;
+    result.rowGap = spacing === 0 ? "0px" : `${spacing}px`;
+    result.columnGap = spacing === 0 ? "0px" : `${spacing}px`;
+
+    // When flex-wrap is enabled, align-content controls spacing between wrapped rows
+    // Set it to flex-start to ensure no spacing between wrapped rows
+    if (result.flexWrap === "wrap" || result.flexWrap === "wrap-reverse") {
+      result.alignContent = "flex-start";
+    }
+
+    // Debug logging for page components
+
+    if (
+      opts.debug ||
+      (style.layout?.mode === "HORIZONTAL" && itemSpacing === 0)
+    ) {
+      console.log("[useEncoreStyle] Setting gap properties:", {
+        itemSpacing,
+        spacing,
+        gap: result.gap,
+        rowGap: result.rowGap,
+        columnGap: result.columnGap,
+        hasLayout: !!style.layout,
+        layoutMode: style.layout?.mode,
+      });
+    } else {
+      console.log(
+        "[useEncoreStyle] No gap properties set",
+        opts.debug,
+        style.layout?.mode,
+        itemSpacing
+      );
+    }
+
+    // TODO
+    // style.layout.primaryAxisSizingMode
+    // style.layout.counterAxisSizingMode
+  }
+
+  if (style.layout?.layoutSizingHorizontal === "FILL") {
+    result.width = "100%";
+  }
+
+  if (style.layout?.layoutSizingHorizontal === "FIXED") {
+    const scale = pageContext.scaleFactor ?? 1;
+    result.width = style.layout.size.x * scale;
+  }
+
+  if (style.layout?.layoutSizingVertical === "FIXED") {
+    const scale = pageContext.scaleFactor ?? 1;
+    result.height = style.layout.size.y * scale;
+  }
+
+  if (style.layout?.layoutSizingVertical === "FILL") {
+    // For absolutely positioned elements, if we have a top position,
+    // calculate the remaining height instead of using 100%
+    // This prevents elements from extending beyond their intended container
+    // Check if this will be absolutely positioned (positioning exists and parent isn't flex)
+    const parentIsFlex = containerContext?.isFlex ?? false;
+    const willBeAbsolute = !parentIsFlex && style.positioning;
+    if (willBeAbsolute && style.positioning?.top !== undefined) {
+      const topPercent = style.positioning.top;
+      const remainingPercent = 100 - topPercent;
+      result.height = `${remainingPercent}%`;
+    } else {
+      result.height = "100%";
+    }
+  }
+
+  // HUG sizing: explicitly do NOT set height
+  // Let flex layout determine height based on content
+  // This is intentionally a no-op - just documenting the behavior
+  if (style.layout?.layoutSizingVertical === "HUG") {
+    // Don't set result.height
+    // Flex containers will size based on their children
+  }
+
+  if (style.backgroundColor && !argbIsFullyTransparent(style.backgroundColor)) {
+    result.backgroundColor = argbToRgba(style.backgroundColor);
+  }
+
+  if (style.color) result.color = argbToRgba(style.color);
+  if (style.lineHeightPx)
+    result.lineHeight =
+      (style.lineHeightPx * (pageContext.scaleFactor ?? 1)).toString() + "px";
+  if (style.fontSize)
+    result.fontSize = style.fontSize * (pageContext.scaleFactor ?? 1);
+
+  // When a specific font-face variant is selected (e.g., "Inter-SemiBold"),
+  // the font is loaded with the correct weight via FontFace API.
+  // We still need to set fontWeight in CSS so the browser can match the correct font-face,
+  // but we should use the weight from the font-face itself rather than auto-calculating.
+  // However, since the FontFace is loaded with the correct weight descriptor,
+  // setting the fontWeight from style.fontWeight should correctly match the font-face.
+  // The key fix is in FontFace loading (EncoreApp.tsx) where we now specify the weight.
+  if (style.fontWeight) {
+    result.fontWeight = `${style.fontWeight}`;
+  }
+
+  if (style.opacity) result.opacity = style.opacity * 0.01;
+  if (style.fontId) {
+    const fontFamily = fontIdToFamily[style.fontId] || "sans-serif";
+    result.fontFamily = fontFamily;
+  }
+  if (style.borderRadius) {
+    result.borderRadius = percentOfParentWidthToPx(style.borderRadius);
+    // Only set overflow: hidden if we don't have background images/SVGs with negative positioning
+    // Background elements often extend beyond card bounds and need overflow: visible
+    // The border radius will still be applied, but content won't be clipped
+    // result.overflow = "hidden";
+  }
+  if (style.cornerRadii) {
+    const cornerRadii = style.cornerRadii.map(percentOfParentWidthToPx);
+    result.borderTopLeftRadius = cornerRadii[0];
+    result.borderTopRightRadius = cornerRadii[1];
+    result.borderBottomRightRadius = cornerRadii[2];
+    result.borderBottomLeftRadius = cornerRadii[3];
+    delete result.borderRadius;
+    // Only set overflow: hidden if we don't have background images/SVGs with negative positioning
+    // result.overflow = "hidden";
+  }
+
+  // Convert borderWidth from Figma units to pixels
+  // Figma borderWidth values are typically in a different unit system
+  // For icon components, the borderWidth represents stroke width
+  // We need to convert it properly - the original 2.875 multiplier was incorrect
+  // For vector icons, borderWidth values are often much larger and need different handling
+  if (style.borderWidth) {
+    // For icon components (vector shapes), use a more appropriate conversion
+    // If borderWidth is very large (> 5), it's likely a vector icon stroke width
+    // Convert it more directly: divide by a factor to get reasonable pixel values
+    if (style.borderWidth > 5) {
+      // For vector icons, convert more directly (these are stroke widths, not border widths)
+      result.borderWidth = style.borderWidth * 0.5; // More reasonable conversion for icon strokes
+    } else {
+      // For regular borders, use a smaller multiplier
+      result.borderWidth = style.borderWidth * 1.5;
+    }
+  }
+  if (style.borderColor) result.borderColor = argbToRgba(style.borderColor);
+  // Set borderStyle to "solid" when borderWidth or borderColor is present so borders actually render
+  if (style.borderWidth || style.borderColor) {
+    result.borderStyle = "solid";
+  }
+
+  if (style.rotation) {
+    result.transform = `rotate(${style.rotation}deg)`;
+  }
+
+  // Apply horizontal centering transform (combine with rotation if present)
+  // This must happen after all other transform settings
+  if (shouldCenterHorizontally) {
+    const existingTransform = result.transform || "";
+    result.transform = existingTransform
+      ? `${existingTransform} translateX(-50%)`
+      : "translateX(-50%)";
+
+    // Override inset if it exists (it might have been set from positioning values)
+    // This must happen at the very end to ensure it takes precedence
+    if (result.inset) {
+      const insetParts = String(result.inset).split(/\s+/);
+      if (insetParts.length === 3) {
+        // 3-value inset: top horizontal bottom -> convert to 4-value: top 50% bottom auto
+        result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+      } else if (insetParts.length === 4) {
+        // 4-value inset: top right bottom left -> keep top/bottom, center horizontally
+        result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+      }
+    } else if (style.inset) {
+      // Inset might be in original style object
+      const insetParts = String(style.inset).split(/\s+/);
+      if (insetParts.length === 3) {
+        result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+      } else if (insetParts.length === 4) {
+        result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+      }
+    }
+  }
+
+  if (style.textCase === "upper") {
+    result.textTransform = "uppercase";
+  }
+
+  if (style.textCase === "lower") {
+    result.textTransform = "lowercase";
+  }
+
+  if (style.letterSpacing) {
+    result.letterSpacing = style.letterSpacing;
+  }
+
+  if (style.textAlign) {
+    result.textAlign = style.textAlign;
+  }
+
+  if (opts.debug) {
+    result.borderWidth = 1;
+    result.borderColor = "#FF0000FF";
+    result.borderStyle = "solid";
+  }
+
+  // FINAL OVERRIDE: Ensure centering inset takes precedence (must be last)
+  if (shouldCenterHorizontally && (result.inset || style.inset)) {
+    const insetToModify = result.inset || style.inset;
+    const insetParts = String(insetToModify).split(/\s+/);
+    if (insetParts.length === 3) {
+      result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+    } else if (insetParts.length === 4) {
+      result.inset = `${insetParts[0]} 50% ${insetParts[2]} auto`;
+    }
+  }
+
+  return result;
+};
+
+const useEncoreBinding = ({ id, nodeData }: { id: string; nodeData: any }) => {
+  const bindingContext = useContext(EncoreBindingContext);
+  const binding = bindingContext?.nodeData?.[id];
+
+  const { patch, list } = binding ?? { list: null, patch: null };
+
+  // Check for encore:data:array tag and get array data from context
+  const hasEncoreDataArrayTag =
+    Array.isArray(nodeData?.tags) &&
+    (nodeData.tags.includes("encore:data:array") ||
+      nodeData.tags.includes("bravo:data:array"));
+
+  // Debug logging removed
+
+  const arrayData =
+    hasEncoreDataArrayTag &&
+    bindingContext?.arrayDataById &&
+    bindingContext.arrayDataById[id] &&
+    Array.isArray(bindingContext.arrayDataById[id])
+      ? bindingContext.arrayDataById[id]
+      : null;
+
+  // Debug logging removed
+
+  // Start with a shallow patch, but merge `data` more safely so we do not clobber unrelated fields.
+  // IMPORTANT: Preserve actions from original nodeData if patch doesn't provide them or provides empty array
+  let patchedNodeData = patch
+    ? {
+        ...nodeData,
+        ...(patch || {}),
+        ...(patch && patch.data
+          ? { data: { ...(nodeData?.data || {}), ...patch.data } }
+          : {}),
+        // Preserve original actions if patch has empty or missing actions
+        actions:
+          patch.actions &&
+          Array.isArray(patch.actions) &&
+          patch.actions.length > 0
+            ? patch.actions
+            : nodeData.actions || patch.actions || [],
+      }
+    : nodeData;
+
+  // Apply top-level text overrides when present and when the node declares the PROP:TEXT_VAR tag.
+  const textOverride =
+    bindingContext?.textOverridesById &&
+    bindingContext.textOverridesById[id] !== undefined
+      ? bindingContext.textOverridesById[id]
+      : undefined;
+  if (
+    textOverride !== undefined &&
+    Array.isArray(nodeData?.tags) &&
+    nodeData.tags.includes("PROP:TEXT_VAR")
+  ) {
+    patchedNodeData = {
+      ...patchedNodeData,
+      data: { ...(patchedNodeData?.data || {}), text: String(textOverride) },
+    };
+  }
+
+  // Handle encore:data tags - get data from current array item in binding context
+  // The binding context nodeData should be an object mapping component IDs to their data attributes
+  // e.g., { "01KA964B4KQW35Q8EJ2MJKNDWT": { imageUrl: "..." }, "01KA964B34W56CHEDNBBY2VB39": { text: "..." } }
+  const hasEncoreDataTag =
+    Array.isArray(nodeData?.tags) &&
+    (nodeData.tags.includes("encore:data") ||
+      nodeData.tags.includes("bravo:data"));
+
+  // Apply root data for standalone components
+  // Also apply for ANY component that has data in rootData (e.g., select inputs with options)
+  const rootData = bindingContext?.rootData;
+  if (rootData && rootData[id] && typeof rootData[id] === "object") {
+    patchedNodeData = {
+      ...patchedNodeData,
+      data: {
+        ...(patchedNodeData.data || {}),
+        ...rootData[id],
+      },
+    };
+  }
+
+  // Check if we have binding context data (from parent ContainerComponent with encore:data:array)
+  const hasBindingContextData =
+    bindingContext?.nodeData && typeof bindingContext.nodeData === "object";
+
+  if (hasEncoreDataTag || hasBindingContextData) {
+    const currentItemData = bindingContext?.nodeData;
+    if (currentItemData && typeof currentItemData === "object") {
+      // Check if currentItemData is a mapping object (has component IDs as keys)
+      // vs. a raw data object (has fields like description, image, etc.)
+      const isMappingObject = currentItemData[id] !== undefined;
+
+      if (isMappingObject) {
+        // Explicit mapping: look up this component's ID in the mapping object
+        const componentData = currentItemData[id];
+        if (
+          componentData &&
+          typeof componentData === "object" &&
+          patchedNodeData.data
+        ) {
+          // Apply all attributes from the mapping to the component's data
+          patchedNodeData = {
+            ...patchedNodeData,
+            data: {
+              ...patchedNodeData.data,
+              ...componentData,
+            },
+          };
+        }
+      } else {
+        // Legacy/fallback: treat as raw data object and do automatic mapping
+        // This supports backward compatibility with the old format
+        if (hasEncoreDataTag) {
+          // Debug logging removed
+          if (currentItemData.description && patchedNodeData.data) {
+            patchedNodeData = {
+              ...patchedNodeData,
+              data: {
+                ...patchedNodeData.data,
+                text: currentItemData.description,
+              },
+            };
+          }
+        }
+        if (currentItemData.image && patchedNodeData.data) {
+          const imageUrl = currentItemData.image.startsWith("//")
+            ? `https:${currentItemData.image}`
+            : currentItemData.image;
+          patchedNodeData = {
+            ...patchedNodeData,
+            data: {
+              ...patchedNodeData.data,
+              imageUrl: imageUrl,
+            },
+          };
+        }
+      }
+
+      // Always store the full item data for components that need it
+      patchedNodeData.encoreData = currentItemData;
+    }
+  }
+
+  return {
+    patch,
+    list: list || arrayData, // Use arrayData if list is not provided
+    patchedNodeData,
+    arrayData, // Also return separately for components that need it
+  };
+};
+
+const EncoreLinkActionWrapper: React.FC<{
+  id: string;
+  nodeData: any;
+  children?: React.ReactNode;
+  _parentStatefulSetId?: string;
+  _parentInputGroupInfo?: { type: string; groupName: string } | null;
+  _parentName?: string;
+}> = ({
+  id,
+  nodeData,
+  children,
+  _parentStatefulSetId,
+  _parentInputGroupInfo,
+  _parentName,
+}) => {
+  const baseURL = useEncoreState((state) => state.baseURL);
+  const appId = useEncoreState((state) => state.appId);
+  const pageId = useEncoreState((state) => state.pageId);
+  const { onAction } = React.useContext(EncoreActionContext);
+  const { statefulSetId: parentStatefulSetIdFromContext } = React.useContext(
+    EncoreComponentIdContext
+  );
+  // Prefer prop over context (more reliable)
+  const parentStatefulSetId =
+    _parentStatefulSetId || parentStatefulSetIdFromContext;
+  // const location = useLocation();
+  // const [searchParams] = useSearchParams();
+  const { patchedNodeData } = useEncoreBinding({ id, nodeData });
+  const setStatefulSetVariant = useEncoreState(
+    (state) => state.setStatefulSetVariant
+  );
+  const setInputGroupValue = useEncoreState(
+    (state) => state.setInputGroupValue
+  );
+  const setAccessToken = useEncoreState((state) => state.setAccessToken);
+  const { app } = useEncoreState((state) => state.app);
+  // const navigate = useNavigate();
+  const startPageId = app.data?.app?.startPageId;
+  const loginPageId = app.data?.app?.PageId;
+
+  const style = useEncoreStyle(
+    {
+      positioning: nodeData.style?.positioning,
+    },
+    { debug: false }
+  );
+
+  // Make the wrapper div cover the entire button area
+  // Use a very high z-index to ensure it's above all children
+  // IMPORTANT: The overlay should be scoped to the immediate parent (the button),
+  // not the entire StatefulSetComponent, to avoid overlapping with other buttons
+  style.zIndex = 99999;
+  style.backgroundColor = "transparent";
+  style.position = "absolute";
+  style.top = "0";
+  style.left = "0";
+  style.right = "0";
+  style.bottom = "0";
+  style.width = "100%";
+  style.height = "100%";
+  style.pointerEvents = "auto";
+  // Ensure the overlay is contained within its parent button element
+  style.isolation = "isolate";
+
+  const handleAction = async (action: any) => {
+    let proceed = false;
+    const cancel = () => {
+      proceed = false;
+    };
+    if (typeof onAction === "function") {
+      try {
+        await onAction({ bravo: { cancel, action } });
+        proceed = true;
+      } catch (e) {
+        // ignore callback errors to avoid breaking in-bravo behavior
+      }
+    } else {
+      proceed = true;
+    }
+    if (!proceed) return;
+    switch (action.action) {
+      case "login":
+      // TODO firebase
+      // TODO oauth
+      // TODO actually check if this app has custom login
+      // For now, just assume it's a custom login (which is just a form submission)
+
+      // Intentional fallthrough
+      case "submit":
+        // const formInputs = useEncoreState.getState().formInputs[pageId];
+        // const loginResponse = await axios.post(
+        //   `${baseURL}/devices/apps/${appId}/node/${pageId}`,
+        //   formInputs
+        // );
+        // if (loginResponse.data?.action) await handleAction(loginResponse.data);
+        break;
+
+      case "email":
+        window.location.href = `mailto:${action.params.email}`;
+        break;
+
+      case "goback":
+        // navigate(-1);
+        break;
+
+      case "goto":
+        // navigate(`/apps/${appId}/pages/${action.params.href}`);
+        break;
+
+      case "homepage":
+        // navigate(`/apps/${appId}/pages/${startPageId}`);
+        break;
+
+      case "logout":
+        setAccessToken(undefined);
+        // navigate(`/apps/${appId}/pages/${loginPageId}`);
+        break;
+
+      case "none":
+        // Nothing to do
+        break;
+
+      case "openurl":
+        window.open(action.params.url, "_blank");
+        break;
+
+      case "phone":
+        window.location.href = `tel:${action.params.phone}`;
+        break;
+
+      case "remote":
+        const params = btoa(JSON.stringify(action.params?.data || {}));
+        const url = `${baseURL}/devices/apps/${appId}/node/${id}/trigger/${action.event}?params=${params}`;
+        const remoteResponse = await axios.post(url);
+        if (remoteResponse.data?.action)
+          await handleAction(remoteResponse.data);
+        break;
+
+      case "set-access-token":
+        setAccessToken(action.params);
+        // navigate(`/apps/${appId}/pages/${startPageId}`);
+        break;
+
+      case "set-state":
+        // Check if this is part of an input group
+        if (_parentInputGroupInfo && _parentName) {
+          // For input groups, set the group value instead of the stateful set variant
+          console.log("🔵 Input group change:", {
+            groupName: _parentInputGroupInfo.groupName,
+            elementName: _parentName,
+            hasOnAction: typeof onAction === "function",
+          });
+          setInputGroupValue(_parentInputGroupInfo.groupName, _parentName);
+
+          // Trigger onAction callback with input group change
+          if (typeof onAction === "function") {
+            try {
+              await onAction({
+                bravo: {
+                  cancel: () => {},
+                  action: {
+                    action: "input-group-change",
+                    params: {
+                      groupName: _parentInputGroupInfo.groupName,
+                      groupType: _parentInputGroupInfo.type,
+                      value: _parentName,
+                    },
+                    event: "tap",
+                  },
+                },
+              });
+              console.log("✅ Input group change event fired");
+            } catch (e) {
+              console.error("❌ Error in onAction callback:", e);
+            }
+          } else {
+            console.warn("⚠️ No onAction callback provided");
+          }
+        } else {
+          // The stateSetId can come from either the action params or the nodeData
+          // BUT: If we have a parentStatefulSetId, prefer that (it's more reliable)
+          let stateSetId =
+            parentStatefulSetId ||
+            action.params?.stateSetId ||
+            patchedNodeData.data?.stateSetId;
+          if (!stateSetId) {
+            console.error("❌ No stateSetId found in action or nodeData!", {
+              actionParams: action.params,
+              nodeDataStateSetId: patchedNodeData.data?.stateSetId,
+              parentStatefulSetId,
+            });
+            break;
+          }
+          // Debug logging removed - uncomment if needed
+          // console.log("🔴 set-state action:", { stateSetId, state: action.params?.state });
+          setStatefulSetVariant(stateSetId, action.params.state);
+        }
+        break;
+
+      case "showalert":
+        alert(action.params.message);
+        break;
+
+      default:
+        console.log(action);
+        alert(action.action);
+    }
+  };
+
+  if (nodeData.href) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() =>
+            handleAction({
+              action: "goto",
+              params: { href: nodeData.href },
+              event: "tap",
+            })
+          }
+          style={{
+            ...style,
+            cursor: "pointer",
+            background: "transparent",
+            border: "none",
+            padding: 0,
+          }}
+          aria-label={`Go to ${nodeData.href}`}
+        ></button>
+        {children}
+      </>
+    );
+  }
+
+  // Use original nodeData.actions if patchedNodeData has empty actions array
+  let actions =
+    patchedNodeData.actions && patchedNodeData.actions.length > 0
+      ? patchedNodeData.actions
+      : nodeData.actions || [];
+
+  // For stateful compound components, if we have a parent StatefulSetComponent id,
+  // ensure the action uses it (even if actions already exist)
+  if (parentStatefulSetId && actions.length > 0) {
+    // Update existing actions to use parent's id
+    actions = actions.map((action: any) => {
+      if (action.action === "set-state") {
+        const oldStateSetId = action.params?.stateSetId;
+        const updatedAction = {
+          ...action,
+          params: {
+            ...action.params,
+            stateSetId: parentStatefulSetId, // Always use parent's id
+          },
+        };
+        // Debug logging removed - uncomment if needed
+        // if (oldStateSetId !== parentStatefulSetId) {
+        //   console.log("🔄 Updated existing action:", { buttonId: id, oldStateSetId, newStateSetId: parentStatefulSetId });
+        // }
+        return updatedAction;
+      }
+      return action;
+    });
+  }
+
+  // For stateful compound components, if no actions but stateSetId exists, construct set-state action
+  // Use the parent StatefulSetComponent's id from context, or fall back to the button's stateSetId
+  // Special handling for input groups
+  if (
+    actions.length === 0 &&
+    (patchedNodeData.data?.stateSetId || parentStatefulSetId)
+  ) {
+    // Check if this is part of an input group
+    if (_parentInputGroupInfo && _parentName) {
+      // For input groups, create a set-state action that will be handled specially
+      actions = [
+        {
+          action: "set-state",
+          params: {
+            state: "active", // Will be handled by input group logic
+          },
+          event: "tap",
+        },
+      ];
+    } else {
+      // Prefer parent StatefulSetComponent's id from context, otherwise use button's stateSetId
+      const targetStateSetId =
+        parentStatefulSetId || patchedNodeData.data.stateSetId;
+
+      if (!targetStateSetId) {
+        console.warn(
+          "⚠️ No stateSetId available for stateful compound component",
+          { id, name: nodeData.name }
+        );
+      } else {
+        const currentVariant =
+          useEncoreState.getState().statefulSetVariants[targetStateSetId];
+        // Toggle between default and active, or use active if current is default
+        const newState = currentVariant === "active" ? "default" : "active";
+        actions = [
+          {
+            action: "set-state",
+            params: {
+              state: newState,
+              stateSetId: targetStateSetId, // Use parent's id or button's stateSetId
+            },
+            event: "tap",
+          },
+        ];
+        // Debug logging removed - uncomment if needed
+        // console.log("🔧 Constructed action:", { buttonId: id, targetStateSetId, newState });
+      }
+    }
+  }
+
+  if (actions && actions.length > 0) {
+    const action = actions[0];
+    if (action.event !== "tap") {
+      return children;
+    }
+
+    return (
+      <>
+        {children}
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            handleAction(action);
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          onMouseUp={(e) => e.stopPropagation()}
+          style={{ ...style, cursor: "pointer", pointerEvents: "auto" }}
+        ></div>
+      </>
+    );
+  }
+
+  return children;
+};
+
+const WebViewComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  return (
+    <iframe
+      data-id={id}
+      data-name={name}
+      data-type="WebViewComponent"
+      style={{ border: "none", ...style }}
+      src={nodeData.data?.params?.url}
+    />
+  );
+};
+
+const ColorComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  // Render if there's a backgroundColor OR a borderColor (for vector icons drawn with borders)
+  if (!style.backgroundColor && !style.borderColor) {
+    return null;
+  }
+
+  // If there's a borderColor but no backgroundColor, set backgroundColor to transparent
+  // so the element renders and the border is visible
+  if (style.borderColor && !style.backgroundColor) {
+    style.backgroundColor = "transparent";
+  }
+
+  // For icon components using borderColor to draw vector shapes, we need to ensure
+  // the element has proper dimensions and the border is visible
+  // Note: CSS borders can't draw complex vector shapes, but this at least makes them render
+  // For icon components, we need to ensure they have the correct size from the layout
+  if (style.borderColor && style.borderWidth) {
+    // The element should already have dimensions from the layout system
+    // But ensure minimum dimensions if they're missing or zero
+    const minSize = Math.max(style.borderWidth || 0, 1);
+    if (
+      !style.width ||
+      (typeof style.width === "number" && style.width === 0)
+    ) {
+      style.width = minSize;
+    }
+    if (
+      !style.height ||
+      (typeof style.height === "number" && style.height === 0)
+    ) {
+      style.height = minSize;
+    }
+    // For icon components, ensure the element is visible even if dimensions are small
+    // Use box-sizing to ensure borders are included in the element size
+    style.boxSizing = "border-box";
+  }
+
+  // Check if this ColorComponent has the bravo:layer tag
+  // If so, make it absolutely positioned behind other content
+  const hasBravoLayerTag =
+    Array.isArray(nodeData.tags) && nodeData.tags.includes("bravo:layer");
+  const parentIsFlex = useContext(EncoreContainerContext)?.isFlex ?? false;
+
+  // Check if this component has positioning that fills the container
+  const positioning = nodeData.style?.positioning;
+  const fillsContainer =
+    positioning &&
+    typeof positioning.top === "number" &&
+    typeof positioning.left === "number" &&
+    typeof positioning.right === "number" &&
+    typeof positioning.bottom === "number" &&
+    positioning.top === 0 &&
+    positioning.left === 0 &&
+    positioning.right === 0 &&
+    positioning.bottom === 0;
+
+  // Apply bravo:layer styling if needed
+  const shouldApplyLayerStyling =
+    hasBravoLayerTag && (parentIsFlex || fillsContainer);
+
+  // If this is a "Clip" component (clipping mask), make it transparent
+  // Clipping masks in Figma are used for masking but shouldn't be visible
+  const isClipComponent = name && name.toLowerCase().startsWith("clip");
+
+  if (shouldApplyLayerStyling) {
+    // Make it absolutely positioned to fill the container
+    // This prevents it from taking up space in the flex layout
+    // and ensures it stays behind other content
+    style.position = "absolute";
+    style.top = 0;
+    style.left = 0;
+    style.right = 0;
+    style.bottom = 0;
+    // Set z-index to ensure it stays behind other content
+    // Use a negative value to ensure it's behind all normal content
+    style.zIndex = -1;
+    // Remove width/height that might interfere with absolute positioning
+    if (
+      style.width &&
+      typeof style.width === "string" &&
+      style.width.includes("%")
+    ) {
+      delete style.width;
+    }
+    if (
+      style.height &&
+      typeof style.height === "string" &&
+      style.height.includes("%")
+    ) {
+      delete style.height;
+    }
+  }
+
+  // Make clip components transparent so they don't block content
+  if (isClipComponent) {
+    style.backgroundColor = "transparent";
+  }
+
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <div data-name={name} data-type="ColorComponent" style={style} />
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const GradientComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  // Start from the base Encore style so layout/positioning are honored
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  }) as React.CSSProperties;
+
+  const gradientStyle = nodeData.style;
+  const stops = Array.isArray(gradientStyle?.gradientColorStops)
+    ? gradientStyle.gradientColorStops
+        .map((stop: any) => {
+          if (!stop?.color) return null;
+          const color = argbToRgba(stop.color);
+          if (typeof stop.position === "number") {
+            // Bravo positions are 0–1; CSS expects percentages
+            const pct = stop.position * 100;
+            return `${color} ${pct}%`;
+          }
+          return color;
+        })
+        .filter(Boolean)
+        .join(", ")
+    : "";
+
+  if (stops) {
+    const type = gradientStyle?.gradientType || "linear";
+    // For now we ignore gradientPositions for angle calculation and rely on default direction.
+    style.backgroundImage =
+      type === "radial"
+        ? `radial-gradient(${stops})`
+        : `linear-gradient(${stops})`;
+    // Prefer the gradient over any solid background color
+    delete style.backgroundColor;
+  }
+
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <div data-name={name} data-type="GradientComponent" style={style} />
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const ImageComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const { patchedNodeData } = useEncoreBinding({ id, nodeData });
+  nodeData = patchedNodeData;
+
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+  const containerContext = useContext(EncoreContainerContext);
+  const assetsById = useEncoreState((state) => state.assetsById);
+  // Honor scale mode semantics
+  const scaleMode = nodeData.style?.scaleMode || "fill";
+  if (scaleMode === "fill") {
+    style.objectFit = "cover";
+  } else if (scaleMode === "fit") {
+    style.objectFit = "contain";
+  }
+  style.objectPosition = "center";
+
+  // Use encore data image URL if available
+  // Check both imageUrl (set by useEncoreBinding) and encoreData.image (fallback)
+  let imageUrl = nodeData.data?.imageUrl;
+  if (!imageUrl && nodeData.encoreData?.image) {
+    // Handle protocol-relative URLs (starting with //) by prepending https:
+    imageUrl = nodeData.encoreData.image.startsWith("//")
+      ? `https:${nodeData.encoreData.image}`
+      : nodeData.encoreData.image;
+  }
+  // Fallback to asset URL if no encore data
+  if (!imageUrl) {
+    imageUrl = assetsById[nodeData.assetId]?.url;
+  }
+
+  // Debug logging removed
+
+  // Maintain aspect ratio within inset box for images only
+  const pos = nodeData.style?.positioning;
+  const aspectRatio = nodeData.style?.aspectRatio;
+  const cw = containerContext.dimensions?.width || 0;
+  const ch = containerContext.dimensions?.height || 0;
+  if (pos && aspectRatio && cw > 0) {
+    const hasLR = typeof pos.left === "number" && typeof pos.right === "number";
+    const hasTB = typeof pos.top === "number" && typeof pos.bottom === "number";
+    if (hasLR) {
+      const pctWidth = 100 - pos.left - pos.right;
+      if (pctWidth > 0) {
+        const widthPx = (pctWidth * cw) / 100;
+        style.width = widthPx;
+        style.height = widthPx / aspectRatio;
+        // Anchor from top/left; allow natural height
+        // Clamp negative positioning values to 0 (they typically indicate visual extension like shadows)
+        style.left = `${Math.max(0, pos.left)}%`;
+        style.top = `${Math.max(0, pos.top)}%`;
+        delete style.right;
+        delete style.bottom;
+      }
+    } else if (hasTB && ch > 0) {
+      const pctHeight = 100 - pos.top - pos.bottom;
+      if (pctHeight > 0) {
+        const heightPx = (pctHeight * ch) / 100;
+        style.height = heightPx;
+        style.width = heightPx * aspectRatio;
+        // Clamp negative positioning values to 0
+        style.left = `${Math.max(0, pos.left)}%`;
+        style.top = `${Math.max(0, pos.top)}%`;
+        delete style.right;
+        delete style.bottom;
+      }
+    }
+  }
+
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <img
+        data-id={id}
+        data-name={name}
+        data-type="ImageComponent"
+        style={style}
+        src={imageUrl || assetsById[nodeData.assetId]?.url}
+        alt={name}
+      />
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const EmailInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const setFormInputValue = useEncoreState((state) => state.setFormInputValue);
+  const style = useEncoreStyle(nodeData.style, { debug: false });
+  return (
+    <input
+      onChange={(e) => setFormInputValue(id, e.target.value)}
+      data-id={id}
+      data-name={name}
+      data-type="EmailInputComponent"
+      placeholder={nodeData.data.text}
+      style={style}
+      type="email"
+    />
+  );
+};
+
+const HiddenInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const style = useEncoreStyle(nodeData.style);
+  style.visibility = "hidden";
+  return (
+    <input
+      data-id={id}
+      data-name={name}
+      data-type="HiddenInputComponent"
+      style={style}
+      type="hidden"
+    />
+  );
+};
+
+const ImageInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const setFormInputValue = useEncoreState((state) => state.setFormInputValue);
+  const style = useEncoreStyle(nodeData.style, { debug: false });
+  const assetsById = useEncoreState((state) => state.assetsById);
+
+  return (
+    <>
+      <div
+        style={{ ...style, zIndex: 9999, cursor: "pointer" }}
+        onClick={() => alert("Image picker")}
+      ></div>
+      <img
+        onChange={(e) => setFormInputValue(id, e.target.value)}
+        style={style}
+        data-id={id}
+        data-name={name}
+        data-type="ImageInputComponent"
+        src={assetsById[nodeData.assetId]?.url}
+        alt={name}
+      />
+    </>
+  );
+};
+
+const PasswordInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const setFormInputValue = useEncoreState((state) => state.setFormInputValue);
+  const style = useEncoreStyle(nodeData.style, { debug: false });
+
+  return (
+    <input
+      onChange={(e) => setFormInputValue(id, e.target.value)}
+      data-id={id}
+      data-name={name}
+      data-type="PasswordInputComponent"
+      placeholder={nodeData.data.text}
+      style={style}
+      type="password"
+    />
+  );
+};
+
+// Type for select options
+type SelectOption = { value: string; label: string };
+
+const SelectInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const setFormInputValue = useEncoreState((state) => state.setFormInputValue);
+  const { onAction } = React.useContext(EncoreActionContext);
+  const { patchedNodeData } = useEncoreBinding({ id, nodeData });
+  const style = useEncoreStyle(patchedNodeData.style, { debug: false });
+
+  // Override sizing to fill parent container - select inputs should expand to fill their flex parent
+  // The Figma style often has layoutSizingHorizontal: "HUG" which sizes to content,
+  // but in a flex container with SPACE_BETWEEN, the select should fill available space
+  style.width = "100%";
+  style.flex = "1";
+  style.minWidth = "0"; // Allow shrinking in flex context
+  style.boxSizing = "border-box";
+  style.borderColor = style.borderColor ?? "transparent";
+
+  // Support controlled value from binding
+  const controlledValue = patchedNodeData.data?.value;
+
+  // Support options from binding - can be array of {value, label} or just strings
+  const rawOptions = patchedNodeData.data?.options;
+  const options: SelectOption[] = React.useMemo(() => {
+    if (!rawOptions || !Array.isArray(rawOptions)) {
+      return []; // No options provided
+    }
+    return rawOptions.map((opt: string | SelectOption) => {
+      if (typeof opt === "string") {
+        return { value: opt, label: opt };
+      }
+      return opt;
+    });
+  }, [rawOptions]);
+
+  const handleChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newValue = e.target.value;
+    setFormInputValue(id, newValue);
+    console.log(`Select changed: ${newValue}`);
+
+    // Emit action for wrapper components to handle
+    if (typeof onAction === "function") {
+      try {
+        await onAction({
+          bravo: {
+            cancel: () => {},
+            action: {
+              action: "select-change",
+              nodeId: id,
+              params: { value: newValue },
+            },
+          },
+        });
+      } catch (e) {
+        // Ignore callback errors
+      }
+    }
+  };
+
+  return (
+    <select
+      data-id={id}
+      data-name={name}
+      data-type="SelectInputComponent"
+      value={controlledValue ?? ""}
+      style={style}
+      onChange={handleChange}
+    >
+      {options.length === 0 && (
+        <option value="" disabled>
+          Select an option...
+        </option>
+      )}
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+const TextInputComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+}) => {
+  const setFormInputValue = useEncoreState((state) => state.setFormInputValue);
+
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  return (
+    <input
+      onChange={(e) => setFormInputValue(id, e.target.value)}
+      name={id}
+      data-id={id}
+      data-name={name}
+      data-type="TextInputComponent"
+      placeholder={nodeData.data.text}
+      style={style}
+      type="text"
+    />
+  );
+};
+
+const LottieComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const style = useEncoreStyle(nodeData.style);
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <div
+        data-id={id}
+        data-name={name}
+        data-type="LottieComponent"
+        style={style}
+      >
+        {children}
+      </div>
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const SvgComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+  const assetsById = useEncoreState((state) => state.assetsById);
+
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <img
+        data-id={id}
+        data-name={name}
+        data-type="SvgComponent"
+        style={style}
+        src={assetsById[nodeData.assetId]?.url}
+        alt={name}
+      />
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const TextComponent: React.FC<ComponentProps> = ({ id, name, nodeData }) => {
+  const { patchedNodeData } = useEncoreBinding({ id, nodeData });
+  nodeData = patchedNodeData;
+  const textContent = nodeData.data?.text;
+
+  if (name && name.includes("Purpose")) {
+    console.log("TextComponent Debug:", {
+      id,
+      name,
+      nodeData,
+      style: nodeData.style,
+      color: nodeData.style?.color,
+    });
+  }
+
+  const bravoStyle = nodeData.style;
+  // CRITICAL: fontId is stored in nodeData.fontId, not nodeData.style.fontId
+  // Merge it into the style object so useEncoreStyle can apply the font-family
+  const styleWithFont = nodeData.fontId
+    ? { ...bravoStyle, fontId: nodeData.fontId }
+    : bravoStyle;
+  const style = useEncoreStyle(styleWithFont, {
+    debug: false,
+  });
+
+  // Only set overflow: hidden if explicitly needed (e.g., for text truncation)
+  // Don't force it as it clips text that's slightly larger than container
+  // style.overflow = "hidden";
+  style.display = "flex";
+  style.flexDirection = "column";
+
+  if (bravoStyle.verticalPosition) {
+    style.justifyContent = {
+      "from-top": "flex-start",
+      center: "center",
+      "from-bottom": "flex-end",
+    }[bravoStyle.verticalPosition];
+  }
+
+  // Debug logging removed
+
+  // Handle line breaks in text - split by newlines and render each line
+  // This ensures proper line breaks when using flex column layout
+  const hasLineBreaks =
+    textContent && (textContent.includes("\n") || textContent.includes("\r"));
+  let renderedContent;
+  if (hasLineBreaks && style.flexDirection === "column") {
+    // Split by newlines and carriage returns, filter out empty strings from \r\n combinations
+    const lines = textContent.split(/\r?\n/).filter((line) => line.length > 0);
+    renderedContent = lines.map((line, index) => (
+      <div key={index} style={{ lineHeight: "inherit" }}>
+        {line}
+      </div>
+    ));
+  } else {
+    renderedContent = textContent;
+  }
+
+  // TODO translation table lookup
+
+  return (
+    <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+      <div
+        data-id={id}
+        data-name={name}
+        data-type="TextComponent"
+        style={style}
+      >
+        {renderedContent}
+      </div>
+    </EncoreLinkActionWrapper>
+  );
+};
+
+const StatefulSetComponent: React.FC<ComponentProps> = ({
+  id,
+  name,
+  nodeData,
+  children,
+}) => {
+  const bindingContext = useContext(EncoreBindingContext);
+  const { patchedNodeData } = useEncoreBinding({ id, nodeData });
+  nodeData = patchedNodeData;
+
+  // Check if this is part of an input group
+  const inputGroupInfo = parseInputGroupTag(nodeData.tags);
+  const inputGroupValue = inputGroupInfo
+    ? useEncoreState((state) => state.inputGroups[inputGroupInfo.groupName])
+    : null;
+
+  // StatefulSetComponent should use its own id to look up variants
+  // The buttons inside will set the variant using this component's id
+  // IMPORTANT: Use id directly in the selector to avoid closure issues
+  // Use id directly in the selector to avoid closure issues
+  const variant = useEncoreState((state) => state.statefulSetVariants[id]);
+
+  // Debug logging removed - uncomment if needed
+  // if (name === "Content purpose" || name === "Dashboard purpose" || name === "Forms purpose") {
+  //   console.log("🟣 StatefulSetComponent:", { id, stateSetId, name, variant });
+  // }
+
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  // For input groups, check if this element is the active one
+  // If it's an input group, use the group value; otherwise use the variant
+  let resolvedState: string;
+  if (inputGroupInfo && inputGroupValue !== null) {
+    // If this element's name matches the active group value, it should be active
+    resolvedState = inputGroupValue === name ? "active" : "default";
+  } else {
+    resolvedState = variant || nodeData.data.initialState || "default";
+  }
+
+  // Debug logging removed - uncomment if needed
+  // if (name === "Content purpose" || name === "Product Purpose") {
+  //   console.log("🟣 StatefulSetComponent Debug:", { id, stateSetId, name, variant, resolvedState });
+  // }
+
+  // Only include the active state
+  // Clone the child and pass the parent StatefulSetComponent's id as a prop
+  const child = React.Children.toArray(children).find((child: any) => {
+    if (!React.isValidElement(child)) return false;
+    // @ts-ignore
+    return child.props?.nodeData?.data?.state === resolvedState;
+  });
+
+  // Clone child to pass parent StatefulSetComponent id and input group info
+  const childWithParentId = React.isValidElement(child)
+    ? React.cloneElement(child as React.ReactElement<any>, {
+        _parentStatefulSetId: id,
+        _parentInputGroupInfo: inputGroupInfo,
+        _parentName: name, // Pass the name so we can identify which element is active
+      })
+    : child;
+
+  // Stateful sets have nested binding context so we need to provide a new context here
+  // However, for input-stateful-set, we should preserve the parent context (like DefaultLayerComponent does)
+  // to avoid stripping necessary data.
+  const content = (
+    <div
+      data-id={id}
+      data-name={name}
+      data-type="StatefulSetComponent"
+      style={style}
+    >
+      {childWithParentId}
+    </div>
+  );
+
+  if (nodeData.type === "component:input-stateful-set") {
+    return content;
+  }
+
+  // Get the current context value to merge with our statefulSetId
+  const currentComponentIdContext = React.useContext(EncoreComponentIdContext);
+
+  return (
+    <EncoreBindingContext.Provider
+      value={{ nodeData: bindingContext?.nodeData?.[id] || {} }}
+    >
+      <EncoreComponentIdContext.Provider
+        value={{ ...currentComponentIdContext, statefulSetId: id }}
+      >
+        {content}
+      </EncoreComponentIdContext.Provider>
+    </EncoreBindingContext.Provider>
+  );
+};
+
+const StatefulCompoundComponent: React.FC<
+  ComponentProps & {
+    _parentStatefulSetId?: string;
+    _parentInputGroupInfo?: { type: string; groupName: string } | null;
+    _parentName?: string;
+  }
+> = ({
+  id,
+  name,
+  nodeData,
+  children,
+  _parentStatefulSetId,
+  _parentInputGroupInfo,
+  _parentName,
+}) => {
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  // Ensure the container has relative positioning so the absolute overlay works correctly
+  const containerStyle = {
+    ...style,
+    position: style.position || "relative",
+  };
+
+  return (
+    <div
+      data-id={id}
+      data-name={name}
+      data-type="StatefulCompoundComponent"
+      style={containerStyle}
+    >
+      <EncoreLinkActionWrapper
+        id={id}
+        nodeData={nodeData}
+        _parentStatefulSetId={_parentStatefulSetId}
+        _parentInputGroupInfo={_parentInputGroupInfo}
+        _parentName={_parentName}
+      >
+        {children}
+      </EncoreLinkActionWrapper>
+    </div>
+  );
+};
+
+const BackgroundContainerComponent = ({ id, name, children }) => {
+  const containerContext = useContext(EncoreContainerContext);
+  const { dimensions, ref } = useContainerDimensions();
+
+  // Note: Using zIndex: 0 instead of -1 to avoid going behind outer containers
+  // that may have their own background colors (like app wrappers with bg-zinc-800).
+  // The background still stays behind content due to DOM order - children render after.
+  const style = {
+    zIndex: 0,
+    flex: 1,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+  };
+
+  return (
+    <EncoreContainerContext.Provider value={{ dimensions, isFlex: false }}>
+      <div
+        data-id={id}
+        data-name={name}
+        data-type="BackgroundContainerComponent"
+        ref={ref}
+        style={style}
+      >
+        {children}
+      </div>
+    </EncoreContainerContext.Provider>
+  );
+};
+
+const ContainerComponent = ({
+  id,
+  name,
+  nodeData,
+  children,
+  _arrayItemIndex,
+  _arrayItemData,
+}) => {
+  if (id === "01KB929X1KK5TX0K8VBNP6ZDPG") {
+    console.log(
+      `[DEBUG] ContainerComponent ${id} (Hero) FULL nodeData:`,
+      JSON.stringify(nodeData, null, 2)
+    );
+  }
+  const bindingContext = useContext(EncoreBindingContext);
+  const { patchedNodeData, list, arrayData } = useEncoreBinding({
+    id,
+    nodeData,
+  });
+  nodeData = patchedNodeData;
+
+  // Debug logging for encore:data:array removed
+
+  const { dimensions, ref } = useContainerDimensions();
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  const isFlex = !!nodeData.style.layout?.mode;
+  // Determine flex direction for passing to children via context
+  const flexDirection =
+    nodeData.style.layout?.mode === "HORIZONTAL" ? "row" : "column";
+  // Only set default 100% if we don't have explicit dimensions from layout.size
+  // Explicit dimensions are set by useEncoreStyle when layoutSizing is FIXED
+  const hasExplicitWidth = style.width !== undefined;
+  const hasExplicitHeight = style.height !== undefined;
+
+  // For absolutely positioned elements with explicit dimensions, don't default to 100% width
+  // They should use their explicit width from layout.size, or size to content if HUG
+  const containerContext = useContext(EncoreContainerContext);
+  const parentIsFlex = containerContext?.isFlex ?? false;
+  const parentFlexDirection = containerContext?.flexDirection;
+  const parentIsHorizontalFlex = parentIsFlex && parentFlexDirection === "row";
+  const willBeAbsolute = !parentIsFlex && nodeData.style.positioning;
+  const hasExplicitDimensions =
+    nodeData.style.layout?.layoutSizingHorizontal === "FIXED" ||
+    nodeData.style.layout?.layoutSizingVertical === "FIXED";
+  const isHugSizing =
+    nodeData.style.layout?.layoutSizingHorizontal === "HUG" ||
+    nodeData.style.layout?.layoutSizingVertical === "HUG";
+
+  // Only set 100% width if:
+  // - No explicit width is set
+  // - AND parent is NOT a horizontal flex container (which would break horizontal layouts)
+  // - AND (not absolutely positioned OR doesn't have explicit dimensions OR is not HUG sizing)
+  if (
+    !hasExplicitWidth &&
+    !parentIsHorizontalFlex &&
+    !(willBeAbsolute && (hasExplicitDimensions || isHugSizing))
+  ) {
+    style.width = "100%";
+  }
+  // For containers without explicit height:
+  // - If it has HUG sizing, let it size to content (don't set height)
+  // - If it's a flex container, let it size to content (don't set height)
+  // - If it's absolutely positioned with FILL sizing, use remaining space
+  // - Otherwise, default to 100% (only for non-flex, non-HUG containers)
+  if (!hasExplicitHeight) {
+    // parentIsFlex already declared above, reuse it
+    const willBeAbsoluteForHeight = !parentIsFlex && nodeData.style.positioning;
+    const hasFillVertical =
+      nodeData.style.layout?.layoutSizingVertical === "FILL";
+    const isHugVertical = nodeData.style.layout?.layoutSizingVertical === "HUG";
+
+    // Don't set height for:
+    // 1. HUG sizing containers (they should size to content)
+    // 2. Flex containers (they should size to content)
+    // 3. Absolutely positioned flex containers (already handled, but be explicit)
+    if (isHugVertical) {
+      // HUG sizing: explicitly do NOT set height - let it size to content
+    } else if (isFlex) {
+      // Flex containers: let them size to content (don't set height)
+      // This allows buttons and similar elements to size naturally
+    } else if (
+      willBeAbsoluteForHeight &&
+      hasFillVertical &&
+      nodeData.style.positioning?.top !== undefined
+    ) {
+      // For FILL sizing, calculate remaining height
+      const topPercent = nodeData.style.positioning.top;
+      const remainingPercent = 100 - topPercent;
+      style.height = `${remainingPercent}%`;
+    } else {
+      // Default: set height to 100% for non-flex, non-HUG containers
+      style.height = "100%";
+    }
+  }
+
+  // Determine if this component should be absolutely positioned.
+  // Elements with positioning info + layout sizing should be absolute (they use explicit sizes).
+  // Elements with positioning info (but no layout sizing) should also be absolute if parent isn't flex.
+  const hasLayoutSizing =
+    nodeData.style.layout?.layoutSizingHorizontal ||
+    nodeData.style.layout?.layoutSizingVertical;
+  const shouldBeAbsolute =
+    nodeData.style.positioning && !isFlex && (hasLayoutSizing || true);
+
+  // Only force position: relative if the element shouldn't be absolutely positioned.
+  // This allows absolutely positioned children (with layout sizing) to remain absolute.
+  const finalStyle = shouldBeAbsolute
+    ? { ...style, position: "absolute" }
+    : style.position === "absolute"
+    ? style
+    : { ...style, position: style.position || "relative" };
+
+  // For containers with explicit dimensions from layout.size, use the scaled dimensions
+  // from style (which are calculated from layout.size * scaleFactor) for child context.
+  // This ensures children's percentage positioning is calculated relative to the correct container size.
+  // When padding exists, subtract it from dimensions to get the content area (padding box),
+  // which is what CSS uses for percentage-based positioning of absolutely positioned children.
+  // Note: hasExplicitDimensions is already declared above, reuse it
+
+  // Calculate content area dimensions (accounting for padding)
+  // Parse padding values - they can be numbers (px) or strings (e.g., "10px")
+  const parsePadding = (value) => {
+    if (typeof value === "number") return value;
+    if (typeof value === "string" && value.endsWith("px")) {
+      return parseFloat(value) || 0;
+    }
+    return 0;
+  };
+  const paddingLeft = parsePadding(style.paddingLeft);
+  const paddingRight = parsePadding(style.paddingRight);
+  const paddingTop = parsePadding(style.paddingTop);
+  const paddingBottom = parsePadding(style.paddingBottom);
+
+  const contextDimensions =
+    hasExplicitDimensions &&
+    typeof style.width === "number" &&
+    typeof style.height === "number"
+      ? {
+          width: style.width - paddingLeft - paddingRight,
+          height: style.height - paddingTop - paddingBottom,
+        }
+      : {
+          width: dimensions.width - paddingLeft - paddingRight,
+          height: dimensions.height - paddingTop - paddingBottom,
+        };
+
+  // Check if this ContainerComponent is being expanded by a parent (like SliderComponent)
+  // If _arrayItemIndex is provided, render a single instance for that item
+  if (_arrayItemIndex !== undefined && _arrayItemIndex !== null && list) {
+    // This container is being expanded by a parent (e.g., SliderComponent)
+    // Render a single instance for the specified array item
+    const item = list[_arrayItemIndex];
+    if (item !== undefined) {
+      const bindingValue =
+        typeof item === "object" && item !== null
+          ? {
+              nodeData: item,
+              arrayDataById: bindingContext?.arrayDataById,
+              textOverridesById: bindingContext?.textOverridesById,
+              rootData: bindingContext?.rootData,
+            }
+          : { nodeData: item };
+
+      return (
+        <EncoreBindingContext.Provider value={bindingValue}>
+          <EncoreContainerContext.Provider
+            value={{ dimensions: contextDimensions, isFlex, flexDirection }}
+          >
+            <div
+              data-id={`${id}:${_arrayItemIndex}`}
+              data-name={name}
+              data-type="ContainerComponent"
+              style={finalStyle}
+            >
+              {children}
+            </div>
+          </EncoreContainerContext.Provider>
+        </EncoreBindingContext.Provider>
+      );
+    }
+  }
+
+  if (list) {
+    // Use arrayData if available (comes from context, should be stable), otherwise list
+    const listToMap = arrayData || list;
+
+    // Memoize the mapped components, but only depend on the array reference itself
+    // and the id - React will handle the rest via keys
+    const mappedComponents = useMemo(() => {
+      return listToMap.map((item, i) => {
+        // For encore:data:array, each item is the data object for that iteration
+        // Provide it as nodeData so child components with encore:data tags can access it
+        const bindingValue =
+          typeof item === "object" && item !== null
+            ? {
+                nodeData: item,
+                arrayDataById: bindingContext?.arrayDataById,
+                textOverridesById: bindingContext?.textOverridesById,
+                rootData: bindingContext?.rootData,
+              }
+            : { nodeData: item };
+
+        // Create a complete container component for each item
+        // This ensures each slide is a separate container that the slider can lay out horizontally
+        return (
+          <EncoreBindingContext.Provider
+            key={`${id}:${i}`}
+            value={bindingValue}
+          >
+            <EncoreContainerContext.Provider
+              value={{ dimensions: contextDimensions, isFlex, flexDirection }}
+            >
+              <div
+                data-id={`${id}:${i}`}
+                data-name={name}
+                data-type="ContainerComponent"
+                style={finalStyle}
+              >
+                {children}
+              </div>
+            </EncoreContainerContext.Provider>
+          </EncoreBindingContext.Provider>
+        );
+      });
+    }, [listToMap, id]);
+    // Return the array directly - React will handle it
+    return mappedComponents;
+  }
+
+  // No list - return single component as before
+  // Check if this container has actions and should be wrapped with EncoreLinkActionWrapper
+  // Normalize actions: can be array or object with event keys (e.g., { tap: {...} })
+  let actions = nodeData.actions || [];
+  if (
+    !Array.isArray(actions) &&
+    typeof actions === "object" &&
+    actions !== null
+  ) {
+    // Convert object format to array format (e.g., { tap: {...} } -> [{ event: "tap", ... }])
+    actions = Object.entries(actions).map(
+      ([event, actionData]: [string, any]) => ({
+        event,
+        ...(typeof actionData === "object" && actionData !== null
+          ? actionData
+          : {}),
+      })
+    );
+  }
+  const hasActions = Array.isArray(actions) && actions.length > 0;
+
+  const component = (
+    <EncoreContainerContext.Provider
+      value={{ dimensions: contextDimensions, isFlex, flexDirection }}
+    >
+      <div
+        data-id={id}
+        data-name={name}
+        data-type="ContainerComponent"
+        ref={ref}
+        style={finalStyle}
+      >
+        {hasActions ? (
+          <EncoreLinkActionWrapper id={id} nodeData={nodeData}>
+            {children}
+          </EncoreLinkActionWrapper>
+        ) : (
+          children
+        )}
+      </div>
+    </EncoreContainerContext.Provider>
+  );
+
+  return component;
+};
+
+const CompoundComponent = ContainerComponent;
+
+const TopBarContainerComponent = ({ id, name, nodeData, children }) => {
+  const { dimensions, ref } = useContainerDimensions();
+
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  const isFlex = !!nodeData.style.layout?.mode;
+  const flexDirection =
+    nodeData.style.layout?.mode === "HORIZONTAL" ? "row" : "column";
+
+  // Only force position: relative if position isn't already set.
+  const finalStyle = style.position
+    ? style
+    : { ...style, position: "relative" };
+
+  return (
+    <EncoreContainerContext.Provider
+      value={{ dimensions, isFlex, flexDirection }}
+    >
+      <div
+        data-id={id}
+        data-name={name}
+        data-type="TopBarContainerComponent"
+        ref={ref}
+        style={finalStyle}
+      >
+        {children}
+      </div>
+    </EncoreContainerContext.Provider>
+  );
+};
+
+const DefaultLayerComponent = ({ id, name, nodeData, children }) => {
+  const style = useEncoreStyle(nodeData.style, { debug: false });
+  return (
+    <div
+      data-id={id}
+      data-name={name}
+      data-type="DefaultLayerComponent"
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+const TabsMenuComponent = ({ id, name, nodeData, children }) => (
+  <div
+    data-id={id}
+    data-name={name}
+    data-type="TabsMenuComponent"
+    style={useEncoreStyle(nodeData.style)}
+  >
+    {children}
+  </div>
+);
+
+const MenuSideComponent = ({ id, name, nodeData, children }) => {
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+  return (
+    <div
+      data-id={id}
+      data-name={name}
+      data-type="MenuSideComponent"
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+const SliderComponent = ({ id, name, nodeData, children }) => {
+  if (id === "01KB929X1DQJN954WNGF5AH38B") {
+    console.log(
+      `[DEBUG] SliderComponent ${id} FULL nodeData:`,
+      JSON.stringify(nodeData, null, 2)
+    );
+  }
+  // Log slider component data for inspection
+  // Debug logging removed to prevent console flooding
+
+  const { dimensions, ref: containerRef } = useContainerDimensions();
+  const scrollRef = React.useRef(null);
+  const autoAdvanceIntervalRef = React.useRef(null);
+  const isUserInteractingRef = React.useRef(false);
+  const idleTimeoutRef = React.useRef(null);
+  const pageContext = useContext(EncorePageContext);
+  const repeatingContainerContext = useContext(EncoreRepeatingContainerContext);
+
+  // Control props from context
+  const [controlProps, setControlProps] = React.useState({
+    currentIndex: undefined,
+    onIndexChange: undefined,
+  });
+
+  // Internal state for uncontrolled mode
+  const [internalCurrentIndex, setInternalCurrentIndex] = React.useState(0);
+  const lastReportedIndexRef = React.useRef(null);
+
+  const { patchedNodeData, list } = useEncoreBinding({ id, nodeData });
+  // Slider binding debug log removed
+  nodeData = patchedNodeData;
+
+  const params = nodeData.data?.params || {};
+  const infinite = params.infinite === true;
+  const automatic = params.automatic === true;
+
+  const hasVerticalTag =
+    (Array.isArray(nodeData.tags) &&
+      nodeData.tags.some((t) => t.includes("container:slider:vertical"))) ||
+    (nodeData.name && nodeData.name.includes("container:slider:vertical"));
+
+  // If animation is "default" and no tag, check aspect ratio as fallback
+  // Sliders that are taller than wide are likely vertical
+  let shouldBeVertical = hasVerticalTag;
+  if (!shouldBeVertical && params.animation === "default") {
+    const width = nodeData.style?.width;
+    const height = nodeData.style?.height;
+    if (
+      typeof width === "number" &&
+      typeof height === "number" &&
+      height > width
+    ) {
+      shouldBeVertical = true;
+    }
+  }
+
+  // Debug logging for vertical slider detection (can be enabled for debugging)
+  // if (nodeData.type === "container:slider") {
+  //   console.log(
+  //     `[DEBUG] Slider ${id} tags:`,
+  //     nodeData.tags,
+  //     "name:",
+  //     nodeData.name,
+  //     "hasVerticalTag:",
+  //     hasVerticalTag,
+  //     "params.animation:",
+  //     params.animation,
+  //     "shouldBeVertical:",
+  //     shouldBeVertical
+  //   );
+  // }
+
+  const animation = shouldBeVertical
+    ? "vertical"
+    : params.animation === "default"
+    ? "horizontal"
+    : params.animation || "horizontal";
+
+  const style = useEncoreStyle(nodeData.style, {
+    debug: false,
+  });
+
+  // Ensure container has proper dimensions
+  const hasExplicitWidth = style.width !== undefined;
+  const hasExplicitHeight = style.height !== undefined;
+  if (!hasExplicitWidth) style.width = "100%";
+  if (!hasExplicitHeight) style.height = "100%";
+
+  // Ensure position is relative for proper scrolling context
+  if (!style.position) {
+    style.position = "relative";
+  }
+
+  // Get binding context to access array data
+  const bindingContext = useContext(EncoreBindingContext);
+
+  // Convert children to array and expand any ContainerComponents with encore:data:array tags
+  // When a ContainerComponent has encore:data:array, it returns an array, but React doesn't
+  // pass that array as children to the parent. We need to detect this case and expand it ourselves.
+  const childList = React.useMemo(() => {
+    const result = [];
+    React.Children.forEach(children, (child) => {
+      if (child === null || child === undefined) return;
+
+      // Check if this child is a ContainerComponent with encore:data:array tag
+      const childProps = child?.props || {};
+      const childNodeData = childProps.nodeData || {};
+      const hasEncoreDataArrayTag =
+        Array.isArray(childNodeData?.tags) &&
+        (childNodeData.tags.includes("encore:data:array") ||
+          childNodeData.tags.includes("bravo:data:array"));
+
+      if (hasEncoreDataArrayTag && childProps.id && bindingContext) {
+        // Get the array data for this container
+        const arrayData =
+          bindingContext?.arrayDataById &&
+          bindingContext.arrayDataById[childProps.id] &&
+          Array.isArray(bindingContext.arrayDataById[childProps.id])
+            ? bindingContext.arrayDataById[childProps.id]
+            : null;
+
+        if (arrayData && arrayData.length > 0) {
+          // Expand: create one container instance for each array item
+          // We'll render the container's children for each item
+          arrayData.forEach((item, i) => {
+            // Clone the child and pass the item data
+            result.push(
+              React.cloneElement(child, {
+                key: `${childProps.id}:${i}`,
+                // ContainerComponent will use this to know which item to render
+                _arrayItemIndex: i,
+                _arrayItemData: item,
+              })
+            );
+          });
+        } else {
+          // No array data, just add the original child
+          result.push(child);
+        }
+      } else {
+        // Regular child, add it as-is
+        result.push(child);
+      }
+    });
+
+    // Debug logging removed
+    return result;
+  }, [children, id, bindingContext]);
+
+  // Clone slides for infinite scroll
+  const slidesWithClones = React.useMemo(() => {
+    if (!infinite || childList.length === 0) {
+      return childList;
+    }
+
+    // Clone first slide to end, last slide to beginning
+    const firstSlide = childList[0];
+    const lastSlide = childList[childList.length - 1];
+
+    return [
+      React.cloneElement(lastSlide, {
+        key: `clone-last-${lastSlide.key || lastSlide.props.id}`,
+      }),
+      ...childList,
+      React.cloneElement(firstSlide, {
+        key: `clone-first-${firstSlide.key || firstSlide.props.id}`,
+      }),
+    ];
+  }, [childList, infinite]);
+
+  // Calculate slide width and height (assuming each slide has fixed dimensions from layout.size)
+  const slideDimensions = React.useMemo(() => {
+    if (childList.length === 0) return { width: 0, height: 0 };
+    const firstChild = childList[0];
+    const slideStyle = firstChild?.props?.nodeData?.style;
+    const scale = pageContext.scaleFactor || 1;
+
+    let width = 0;
+    let height = 0;
+
+    if (
+      slideStyle?.layout?.layoutSizingHorizontal === "FIXED" &&
+      slideStyle?.layout?.size?.x
+    ) {
+      width = slideStyle.layout.size.x * scale;
+    } else {
+      // Fallback: use container width (don't divide by number of slides, that squashes them)
+      width = dimensions.width || 0;
+    }
+
+    if (
+      slideStyle?.layout?.layoutSizingVertical === "FIXED" &&
+      slideStyle?.layout?.size?.y
+    ) {
+      height = slideStyle.layout.size.y * scale;
+    } else {
+      // Fallback: use container height
+      height = dimensions.height || 0;
+    }
+
+    return { width, height };
+  }, [childList, dimensions.width, dimensions.height, pageContext.scaleFactor]);
+
+  const slideWidth = slideDimensions.width;
+  const slideHeight = slideDimensions.height;
+  const isVertical = animation === "vertical";
+
+  const calculateCurrentIndex = React.useCallback(() => {
+    if (!scrollRef.current || childList.length === 0) {
+      return 0;
+    }
+
+    const scrollContainer = scrollRef.current;
+
+    if (isVertical) {
+      if (slideHeight === 0) return 0;
+      const currentScrollTop = scrollContainer.scrollTop;
+
+      if (infinite) {
+        const realSlidesStart = slideHeight;
+        const adjustedScroll = currentScrollTop - realSlidesStart;
+        let index = Math.round(adjustedScroll / slideHeight);
+        if (index < 0) index = 0;
+        if (index >= childList.length) index = childList.length - 1;
+        return index;
+      } else {
+        const index = Math.round(currentScrollTop / slideHeight);
+        if (index < 0) return 0;
+        if (index >= childList.length) return childList.length - 1;
+        return index;
+      }
+    } else {
+      if (slideWidth === 0) return 0;
+      const currentScrollLeft = scrollContainer.scrollLeft;
+
+      if (infinite) {
+        const realSlidesStart = slideWidth;
+        const adjustedScroll = currentScrollLeft - realSlidesStart;
+        let index = Math.round(adjustedScroll / slideWidth);
+        if (index < 0) index = 0;
+        if (index >= childList.length) index = childList.length - 1;
+        return index;
+      } else {
+        const index = Math.round(currentScrollLeft / slideWidth);
+        if (index < 0) return 0;
+        if (index >= childList.length) return childList.length - 1;
+        return index;
+      }
+    }
+  }, [infinite, childList.length, slideWidth, slideHeight, isVertical]);
+
+  // Scroll to specific slide index
+  const scrollToSlide = React.useCallback(
+    (index, smooth = true) => {
+      if (!scrollRef.current || childList.length === 0) return;
+
+      const scrollContainer = scrollRef.current;
+
+      if (isVertical) {
+        let targetScrollTop;
+        if (infinite) {
+          const realSlidesStart = slideHeight;
+          targetScrollTop = realSlidesStart + index * slideHeight;
+        } else {
+          targetScrollTop = index * slideHeight;
+        }
+
+        scrollContainer.scrollTo({
+          top: targetScrollTop,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      } else {
+        let targetScrollLeft;
+        if (infinite) {
+          const realSlidesStart = slideWidth;
+          targetScrollLeft = realSlidesStart + index * slideWidth;
+        } else {
+          targetScrollLeft = index * slideWidth;
+        }
+
+        scrollContainer.scrollTo({
+          left: targetScrollLeft,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+    },
+    [slideWidth, slideHeight, infinite, childList.length, isVertical]
+  );
+
+  // Handle infinite scroll position adjustment
+  const handleInfiniteScroll = React.useCallback(() => {
+    if (!infinite || !scrollRef.current || childList.length === 0) return;
+
+    const scrollContainer = scrollRef.current;
+    const tolerance = 1; // Small tolerance for floating point precision
+
+    if (isVertical) {
+      if (slideHeight === 0) return;
+      const scrollTop = scrollContainer.scrollTop;
+      const slideHeightPx = slideHeight;
+
+      const realSlidesStart = slideHeightPx;
+      const realSlidesEnd = realSlidesStart + childList.length * slideHeightPx;
+
+      if (scrollTop >= realSlidesEnd - tolerance) {
+        scrollContainer.scrollTop = realSlidesStart;
+      } else if (scrollTop <= tolerance) {
+        scrollContainer.scrollTop = realSlidesEnd - slideHeightPx;
+      }
+    } else {
+      if (slideWidth === 0) return;
+      const scrollLeft = scrollContainer.scrollLeft;
+      const slideWidthPx = slideWidth;
+
+      const realSlidesStart = slideWidthPx;
+      const realSlidesEnd = realSlidesStart + childList.length * slideWidthPx;
+
+      if (scrollLeft >= realSlidesEnd - tolerance) {
+        scrollContainer.scrollLeft = realSlidesStart;
+      } else if (scrollLeft <= tolerance) {
+        scrollContainer.scrollLeft = realSlidesEnd - slideWidthPx;
+      }
+    }
+  }, [infinite, childList.length, slideWidth, slideHeight, isVertical]);
+
+  // Auto-advance logic
+  React.useEffect(() => {
+    if (!automatic || childList.length <= 1 || slideWidth === 0) return;
+
+    const advanceSlide = () => {
+      if (isUserInteractingRef.current || !scrollRef.current) return;
+
+      const scrollContainer = scrollRef.current;
+
+      if (isVertical) {
+        if (slideHeight === 0) return;
+        const currentScrollTop = scrollContainer.scrollTop;
+        const slideHeightPx = slideHeight;
+
+        let currentIndex;
+        if (infinite) {
+          const realSlidesStart = slideHeightPx;
+          const adjustedScroll = currentScrollTop - realSlidesStart;
+          currentIndex = Math.round(adjustedScroll / slideHeightPx);
+          if (currentIndex < 0) currentIndex = 0;
+          if (currentIndex >= childList.length)
+            currentIndex = childList.length - 1;
+        } else {
+          currentIndex = Math.round(currentScrollTop / slideHeightPx);
+        }
+
+        let nextIndex = currentIndex + 1;
+        if (infinite) {
+          if (nextIndex >= childList.length) nextIndex = 0;
+          const realSlidesStart = slideHeightPx;
+          scrollContainer.scrollTo({
+            top: realSlidesStart + nextIndex * slideHeightPx,
+            behavior: "smooth",
+          });
+        } else {
+          if (nextIndex >= childList.length) nextIndex = 0;
+          scrollToSlide(nextIndex);
+        }
+      } else {
+        if (slideWidth === 0) return;
+        const currentScrollLeft = scrollContainer.scrollLeft;
+        const slideWidthPx = slideWidth;
+
+        // State for current slide index (accounting for infinite clones)
+        let currentIndex;
+        if (infinite) {
+          // With infinite: real slides start at slideWidthPx
+          const realSlidesStart = slideWidthPx;
+          const adjustedScroll = currentScrollLeft - realSlidesStart;
+          currentIndex = Math.round(adjustedScroll / slideWidthPx);
+          // Clamp to valid range
+          if (currentIndex < 0) currentIndex = 0;
+          if (currentIndex >= childList.length)
+            currentIndex = childList.length - 1;
+        } else {
+          currentIndex = Math.round(currentScrollLeft / slideWidthPx);
+        }
+
+        let nextIndex = currentIndex + 1;
+
+        if (infinite) {
+          // With infinite, wrap around
+          if (nextIndex >= childList.length) {
+            nextIndex = 0;
+          }
+          // Scroll to real slide position (accounting for clone at start)
+          const realSlidesStart = slideWidthPx;
+          scrollContainer.scrollTo({
+            left: realSlidesStart + nextIndex * slideWidthPx,
+            behavior: "smooth",
+          });
+        } else {
+          // Without infinite, loop back to first
+          if (nextIndex >= childList.length) {
+            nextIndex = 0;
+          }
+          scrollToSlide(nextIndex);
+        }
+      }
+    };
+
+    // Set up interval (advance every 4 seconds)
+    autoAdvanceIntervalRef.current = setInterval(advanceSlide, 4000);
+
+    return () => {
+      if (autoAdvanceIntervalRef.current) {
+        clearInterval(autoAdvanceIntervalRef.current);
+        autoAdvanceIntervalRef.current = null;
+      }
+    };
+  }, [
+    automatic,
+    childList.length,
+    infinite,
+    slideWidth,
+    slideHeight,
+    isVertical,
+    scrollToSlide,
+  ]);
+
+  // Handle user interaction (pause auto-advance)
+  const handleUserInteraction = React.useCallback(() => {
+    isUserInteractingRef.current = true;
+
+    // Clear any existing idle timeout
+    if (idleTimeoutRef.current) {
+      clearTimeout(idleTimeoutRef.current);
+    }
+
+    // Resume auto-advance after 3 seconds of inactivity
+    idleTimeoutRef.current = setTimeout(() => {
+      isUserInteractingRef.current = false;
+    }, 3000);
+  }, []);
+
+  // Use ref to access latest controlProps without causing re-renders
+  const controlPropsRef = React.useRef(controlProps);
+  React.useEffect(() => {
+    controlPropsRef.current = controlProps;
+  }, [controlProps]);
+
+  // Report index changes (debounced)
+  const reportIndexChange = React.useCallback(
+    (index) => {
+      if (lastReportedIndexRef.current === index) return;
+      lastReportedIndexRef.current = index;
+
+      const currentControlProps = controlPropsRef.current;
+
+      // Update internal state for uncontrolled mode
+      if (currentControlProps.currentIndex === undefined) {
+        setInternalCurrentIndex(index);
+      }
+
+      // Call onIndexChange callback if provided
+      if (currentControlProps.onIndexChange) {
+        currentControlProps.onIndexChange(index);
+      }
+    },
+    [] // Empty deps - we use ref to access latest controlProps
+  );
+
+  // Set up scroll event listeners
+  React.useEffect(() => {
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer) return;
+
+    let rafId = null;
+
+    const handleScroll = () => {
+      handleUserInteraction();
+      if (infinite) {
+        // Use requestAnimationFrame to debounce infinite scroll adjustment
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(() => {
+          handleInfiniteScroll();
+          const currentIndex = calculateCurrentIndex();
+          reportIndexChange(currentIndex);
+        });
+      } else {
+        // For non-infinite, also report index changes
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(() => {
+          const currentIndex = calculateCurrentIndex();
+          reportIndexChange(currentIndex);
+        });
+      }
+    };
+
+    const handleTouchStart = () => handleUserInteraction();
+    const handleMouseDown = () => handleUserInteraction();
+
+    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    scrollContainer.addEventListener("touchstart", handleTouchStart, {
+      passive: true,
+    });
+    scrollContainer.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      scrollContainer.removeEventListener("scroll", handleScroll);
+      scrollContainer.removeEventListener("touchstart", handleTouchStart);
+      scrollContainer.removeEventListener("mousedown", handleMouseDown);
+      if (idleTimeoutRef.current) {
+        clearTimeout(idleTimeoutRef.current);
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [
+    infinite,
+    handleUserInteraction,
+    handleInfiniteScroll,
+    calculateCurrentIndex,
+    reportIndexChange,
+  ]);
+
+  // Watch for control props changes from context
+  // The context value changes when controlPropsMap changes, triggering re-renders
+  // Update local controlProps when context changes
+  React.useEffect(() => {
+    if (repeatingContainerContext) {
+      const props = repeatingContainerContext.getControlProps(id);
+      if (props && props !== controlProps) {
+        setControlProps(props);
+      }
+    }
+  }, [id, repeatingContainerContext, controlProps]);
+
+  // Watch currentIndex prop and scroll when it changes (controlled mode)
+  React.useEffect(() => {
+    if (
+      controlProps.currentIndex !== undefined &&
+      scrollRef.current &&
+      childList.length > 0 &&
+      slideWidth > 0
+    ) {
+      const targetIndex = Math.max(
+        0,
+        Math.min(controlProps.currentIndex, childList.length - 1)
+      );
+      const currentIndex = calculateCurrentIndex();
+      if (targetIndex !== currentIndex) {
+        scrollToSlide(targetIndex, true);
+      }
+    }
+  }, [
+    controlProps.currentIndex,
+    childList.length,
+    childList.length,
+    slideWidth,
+    slideHeight,
+    isVertical,
+    scrollToSlide,
+    calculateCurrentIndex,
+  ]);
+
+  // Initialize scroll position for infinite mode
+  React.useEffect(() => {
+    if (
+      infinite &&
+      scrollRef.current &&
+      childList.length > 0 &&
+      childList.length > 0 &&
+      (isVertical ? slideHeight > 0 : slideWidth > 0)
+    ) {
+      // Start at the first real slide (after the cloned last slide at position 0)
+      const initialPosition = isVertical ? slideHeight : slideWidth;
+      // Use setTimeout to ensure DOM is ready
+      setTimeout(() => {
+        if (scrollRef.current) {
+          if (isVertical) {
+            scrollRef.current.scrollTop = initialPosition;
+          } else {
+            scrollRef.current.scrollLeft = initialPosition;
+          }
+        }
+      }, 0);
+    }
+  }, [infinite, childList.length, slideWidth, slideHeight, isVertical]);
+
+  // Register with repeating container context
+  React.useEffect(() => {
+    if (!repeatingContainerContext) return;
+    const { registerContainer, unregisterContainer } =
+      repeatingContainerContext;
+
+    const control = {
+      // currentIndex and onIndexChange are inputs to the component, not outputs.
+      // We don't need to expose them back to the context.
+      // This prevents a render loop where controlProps changes -> re-register -> context update -> controlProps changes.
+      goToIndex: (index) => {
+        scrollToSlide(index, true);
+      },
+      getCurrentIndex: () => {
+        return calculateCurrentIndex();
+      },
+    };
+
+    // registerContainer(id, control);
+
+    return () => {
+      // unregisterContainer(id);
+    };
+  }, [
+    id,
+    repeatingContainerContext?.registerContainer,
+    repeatingContainerContext?.unregisterContainer,
+    // controlProps, // REMOVED to break infinite loop
+    scrollToSlide,
+    calculateCurrentIndex,
+  ]);
+
+  // Scroll container style
+  const scrollContainerStyle = {
+    display: "flex",
+    flexDirection: isVertical ? "column" : "row",
+    overflowX: isVertical ? "hidden" : "auto",
+    overflowY: isVertical ? "auto" : "hidden",
+    scrollSnapType: isVertical ? "y mandatory" : "x mandatory",
+    scrollBehavior: "smooth",
+    width: "100%",
+    height: "100%",
+    WebkitOverflowScrolling: "touch", // Smooth scrolling on iOS
+  };
+
+  // Slide wrapper style
+  // Set width and height to slideDimensions and position: relative to ensure proper container dimensions
+  // and positioning context for absolutely positioned children (like text overlays)
+  const slideStyle = {
+    flexShrink: 0,
+    scrollSnapAlign: "start",
+    width: slideDimensions.width > 0 ? slideDimensions.width : undefined,
+    height: slideDimensions.height > 0 ? slideDimensions.height : undefined,
+    position: "relative",
+  };
+
+  return (
+    <div
+      data-id={id}
+      data-name={name}
+      data-type="SliderComponent"
+      ref={containerRef}
+      style={style}
+    >
+      <div ref={scrollRef} style={scrollContainerStyle}>
+        {slidesWithClones.map((child, index) => (
+          <EncoreContainerContext.Provider
+            key={child.key || `slide-${index}`}
+            value={{
+              dimensions: {
+                width: slideDimensions.width,
+                height: slideDimensions.height,
+              },
+              isFlex: false,
+            }}
+          >
+            <div style={slideStyle}>{child}</div>
+          </EncoreContainerContext.Provider>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Recursively search for a child component by ID
+const findChildById = (children, targetId) => {
+  const childList = Array.isArray(children) ? children : [children];
+
+  for (const child of childList) {
+    if (!child || !child.props) continue;
+
+    // Check if this is the target
+    if (child.props.id === targetId) {
+      return child;
+    }
+
+    // Recursively search in nested children
+    if (child.props.children) {
+      const found = findChildById(child.props.children, targetId);
+      if (found) return found;
+    }
+  }
+
+  return null;
+};
+
+const PageComponent = ({ id, name, nodeData, children }) => {
+  const { dimensions, ref } = useContainerDimensions();
+  const { componentId } = useContext(EncoreComponentIdContext);
+  // Get parent container dimensions as fallback (more accurate than viewport)
+  const parentContainerContext = useContext(EncoreContainerContext);
+
+  const originalWidth = nodeData.style.originalSize?.[0] || 1;
+  const originalHeight = nodeData.style.originalSize?.[1] || 1;
+
+  // Prefer measured dimensions, then parent container dimensions, then viewport
+  // BUT: If parent container has a fixed width that's much smaller than viewport,
+  // prefer parent container dimensions to avoid incorrect scaling on wide screens
+  const parentWidth = parentContainerContext?.dimensions?.width;
+  const parentHeight = parentContainerContext?.dimensions?.height;
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // Check if parent container is significantly smaller than viewport (likely a fixed-width container)
+  const isFixedWidthContainer =
+    parentWidth && parentWidth > 0 && parentWidth < viewportWidth * 0.8;
+
+  let measuredWidth: number;
+  let measuredHeight: number;
+
+  if (dimensions.width > 0 && dimensions.height > 0) {
+    // Best: use measured dimensions
+    measuredWidth = dimensions.width;
+    measuredHeight = dimensions.height;
+  } else if (isFixedWidthContainer && parentWidth && parentHeight) {
+    // If we're in a fixed-width container, use parent dimensions to avoid viewport scaling issues
+    measuredWidth = parentWidth;
+    measuredHeight = parentHeight;
+  } else if (
+    parentWidth &&
+    parentHeight &&
+    parentWidth > 0 &&
+    parentHeight > 0
+  ) {
+    // Use parent container dimensions if available
+    measuredWidth = parentWidth;
+    measuredHeight = parentHeight;
+  } else {
+    // Fallback to viewport (original behavior)
+    measuredWidth = viewportWidth;
+    measuredHeight = viewportHeight;
+  }
+
+  // Calculate scale factor
+  const fitScale =
+    Math.min(measuredWidth / originalWidth, measuredHeight / originalHeight) ||
+    1;
+  const context = { scaleFactor: fitScale };
+
+  // If componentId is specified, render only that child without page container
+  if (componentId) {
+    const targetChild = findChildById(children, componentId);
+
+    if (!targetChild) {
+      console.warn(`Child with id "${componentId}" not found`);
+      return null;
+    }
+
+    return (
+      <EncorePageContext.Provider value={context}>
+        <EncoreContainerContext.Provider
+          value={{
+            dimensions: {
+              width: "100%",
+              height: "100%",
+            },
+          }}
+        >
+          {targetChild}
+        </EncoreContainerContext.Provider>
+      </EncorePageContext.Provider>
+    );
+  }
+
+  const childList = Array.isArray(children) ? children : [children];
+  // Separate children - but note that BackgroundContainerComponent is absolutely positioned
+  // so it doesn't need to be in the flex flow. Only top-bar needs flex positioning.
+  const { scrollableChildren, nonScrollableChildren } = childList.reduce(
+    (acc, c) => {
+      const notScrollable = c.props.nodeData.type === "container:top-bar";
+      // BackgroundContainerComponent is absolutely positioned, so it doesn't need flex layout
+
+      const key = notScrollable
+        ? "nonScrollableChildren"
+        : "scrollableChildren";
+      acc[key].push(c);
+      return acc;
+    },
+    {
+      scrollableChildren: [],
+      nonScrollableChildren: [],
+    }
+  );
+
+  // Determine the layout direction from nodeData
+  // If the page has a HORIZONTAL layout mode, use row; otherwise use column
+  let pageLayoutMode = nodeData.style?.layout?.mode;
+
+  // PATCH: Inject missing layout for this specific page ID if it's missing
+  if (!pageLayoutMode && id === "01KASW494V02Y8P5JVWV5XK62X") {
+    console.log("🔧 PATCHING missing layout for page", id);
+    pageLayoutMode = "HORIZONTAL";
+  }
+
+  // PATCH: Apply horizontal layout heuristic here where we have access to children
+  // We check if we have children that should be side-by-side (partial widths)
+  if (!pageLayoutMode && children) {
+    const childList = Array.isArray(children) ? children : [children];
+    let totalWidth = 0;
+    let partialWidthChildren = 0;
+
+    childList.forEach((child) => {
+      const w = child?.props?.nodeData?.style?.width;
+      if (w) {
+        totalWidth += w;
+        // Check for non-full-width items (allowing for some precision error)
+        // Assuming percentage widths for now based on logs (52, 48)
+        if (w < 99) {
+          partialWidthChildren++;
+        }
+      }
+    });
+
+    // If we have partial width items and enough total width to fill a row,
+    // we likely need a wrapping horizontal layout.
+    // This handles:
+    // 1. [100%] [100%] [50%] [50%] -> Wrap needed, 50s side-by-side
+    // 2. [50%] [50%] -> Wrap optional but harmless, side-by-side
+    const shouldPatch = partialWidthChildren > 0 && totalWidth >= 99;
+
+    if (shouldPatch) {
+      console.log(
+        `[PATCH] Detected HORIZONTAL WRAP layout for page ${id} (Partial width children: ${partialWidthChildren}, Total width: ${totalWidth})`
+      );
+      pageLayoutMode = "HORIZONTAL";
+
+      // CRITICAL: Mutate nodeData so useEncoreStyle sees the change!
+      if (!nodeData.style) nodeData.style = {};
+      if (!nodeData.style.layout) nodeData.style.layout = {};
+      nodeData.style.layout.mode = "HORIZONTAL";
+      nodeData.style.layout.flexWrap = "wrap";
+      nodeData.style.layout.primaryAxisAlignItems = "flex-start";
+      nodeData.style.layout.counterAxisAlignItems = "flex-start";
+    }
+  }
+
+  // Calculate flex direction AFTER patching
+  const outerFlexDirection = pageLayoutMode === "HORIZONTAL" ? "row" : "column";
+
+  // Check if we have nonScrollableChildren that actually need flex positioning
+  // BackgroundContainerComponent is absolutely positioned, so it doesn't need flex
+  const needsFlexContainer = nonScrollableChildren.some(
+    (child) => child?.props?.nodeData?.type !== "container:background"
+  );
+
+  return (
+    <EncorePageContext.Provider value={context}>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          overflow: "hidden",
+          // Only use flex if we have non-background nonScrollableChildren (like top-bar)
+          ...(needsFlexContainer
+            ? {
+                display: "flex",
+                flexDirection: outerFlexDirection,
+                gap: 0,
+                rowGap: 0,
+                columnGap: 0,
+              }
+            : {}),
+        }}
+        ref={ref}
+      >
+        {/* Render backgrounds directly - they're absolutely positioned */}
+        {nonScrollableChildren
+          .filter(
+            (child) => child?.props?.nodeData?.type === "container:background"
+          )
+          .map((child, index) => (
+            <EncoreContainerContext.Provider
+              key={`bg-${index}`}
+              value={{
+                dimensions: {
+                  width: dimensions.width,
+                  height: dimensions.height,
+                },
+              }}
+            >
+              {child}
+            </EncoreContainerContext.Provider>
+          ))}
+
+        {/* Render non-background nonScrollableChildren (like top-bar) in flex flow if needed */}
+        {needsFlexContainer &&
+          nonScrollableChildren
+            .filter(
+              (child) => child?.props?.nodeData?.type !== "container:background"
+            )
+            .map((child, index) => (
+              <EncoreContainerContext.Provider
+                key={`non-scroll-${index}`}
+                value={{
+                  dimensions: {
+                    width: dimensions.width,
+                    height: dimensions.height,
+                  },
+                }}
+              >
+                {child}
+              </EncoreContainerContext.Provider>
+            ))}
+
+        {/* Render scrollable children (Banner, Slider, Header) */}
+        <EncoreContainerContext.Provider value={{ dimensions }}>
+          <div
+            data-id={id}
+            data-name={name}
+            data-type="PageComponent"
+            style={{
+              position: "relative",
+              ...(needsFlexContainer
+                ? {
+                    flex: 1,
+                    ...(outerFlexDirection === "row"
+                      ? { alignSelf: "stretch" }
+                      : {}), // Removed height: "100%" to allow HUG containers to size based on content
+                  }
+                : {
+                    width: "100%",
+                    // Removed height: "100%" to allow HUG containers to size based on content
+                  }),
+              // Remove overflow: auto in horizontal mode as it causes height collapse
+              ...(outerFlexDirection === "column" && { overflow: "auto" }),
+              ...useEncoreStyle(nodeData.style, {
+                debug: false,
+              }),
+            }}
+          >
+            {scrollableChildren}
+          </div>
+        </EncoreContainerContext.Provider>
+      </div>
+    </EncorePageContext.Provider>
+  );
+};
+
+const components: Record<string, React.ComponentType<any>> = {
+  WebViewComponent,
+  ColorComponent,
+  GradientComponent,
+  ImageComponent,
+  EmailInputComponent,
+  HiddenInputComponent,
+  ImageInputComponent,
+  PasswordInputComponent,
+  SelectInputComponent,
+  TextInputComponent,
+  LottieComponent,
+  SvgComponent,
+  TextComponent,
+  StatefulSetComponent,
+  StatefulCompoundComponent,
+  BackgroundContainerComponent,
+  ContainerComponent,
+  CompoundComponent,
+  TopBarContainerComponent,
+  DefaultLayerComponent,
+  TabsMenuComponent,
+  MenuSideComponent,
+  SliderComponent,
+  PageComponent,
+  // Type string mappings for dynamically loaded components
+  "menu:side": MenuSideComponent,
+  "page:default": PageComponent,
+  "container:background": BackgroundContainerComponent,
+  "container:default": ContainerComponent,
+  "container:top-bar": TopBarContainerComponent,
+  "container:slider": SliderComponent,
+  "component:text": TextComponent,
+  "component:color": ColorComponent,
+  "component:gradient": GradientComponent,
+  "component:image": ImageComponent,
+  "component:svg": SvgComponent,
+  "component:compound": CompoundComponent,
+  "component:input-stateful-set": StatefulSetComponent,
+  "component:stateful-set": StatefulSetComponent,
+  "component:stateful-compound": StatefulCompoundComponent,
+  "component:slider": SliderComponent,
+  "component:webview": WebViewComponent,
+  "component:lottie": LottieComponent,
+  "component:email-input": EmailInputComponent,
+  "component:text-input": TextInputComponent,
+  "component:password-input": PasswordInputComponent,
+  "component:select-input": SelectInputComponent,
+  "component:image-input": ImageInputComponent,
+  "component:hidden-input": HiddenInputComponent,
+  "component:tabs-menu": TabsMenuComponent,
+  ContainerSliderComponent: SliderComponent,
+};
+
+export default components;