meno-core 1.0.1 → 1.0.3

package/lib/client/core/ComponentBuilder.ts

@@ -14,28 +14,37 @@ import { NODE_TYPE } from "../../shared/constants";
 import { ErrorBoundary } from "../ErrorBoundary";
 import type { ComponentNode, StyleValue } from "../../shared/types";
 import { isComponentNode, extractNodeProperties, isSlotMarker, isEmbedNode, isObjectLinkNode, isLocaleListNode, isCMSListNode, markAsSlotContent } from "../../shared/nodeUtils";
-import DOMPurify from "isomorphic-dompurify";
 import { mergeNodeStyles } from "../../shared/styleNodeUtils";
 import { extractAttributesFromNode } from "../../shared/attributeNodeUtils";
-import { resolvePropsFromDefinition, convertRichTextInProps } from "../../shared/propResolver";
+import { resolvePropsFromDefinition } from "../../shared/propResolver";
 import { ElementRegistry } from "../elementRegistry";
 import { InteractiveStylesRegistry } from "../InteractiveStylesRegistry";
 import type { Path } from "../../shared/pathArrayUtils";
 import type { I18nConfig } from "../../shared/types/components";
-import type { CMSItem, ItemContext, TemplateContext } from "../../shared/types/cms";
-import { singularize } from "../../shared/types/cms";
-import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, buildTemplateContext, resolveItemsTemplate, type ValueResolver } from "../../shared/itemTemplateUtils";
+import type { ItemContext, TemplateContext } from "../../shared/types/cms";
+import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, type ValueResolver } from "../../shared/itemTemplateUtils";
 import { DEFAULT_I18N_CONFIG, resolveI18nValue } from "../../shared/i18n";
 import { getChildPath, pathToString } from "../../shared/pathArrayUtils";
-import { navigateTo } from "../navigation";
 import { responsiveStylesToClasses } from "../../shared/utilityClassMapper";
 import { processCMSTemplate, processCMSPropsTemplate } from "./cmsTemplateProcessor";
 import type { PrefetchService } from "../services/PrefetchService";
-import type { PrefetchStrategy } from "../../shared/types/prefetch";
 import { generateElementClassName, type ElementClassContext } from "../../shared/elementClassName";
 import type { InteractiveStyles } from "../../shared/types/styles";
 import { extractInteractiveStyleMappings, resolveExtractedMappings, hasInteractiveStyleMappings } from "../../shared/interactiveStyleMappings";
 
+// Extracted builders
+import {
+  type BuildChildrenContext,
+  type BuildComponentOptions,
+  type BuildResult,
+  type BuilderContext,
+  buildEmbed,
+  buildObjectLink,
+  buildLocaleList,
+  buildCMSList,
+  buildLink,
+} from "./builders";
+
 type ComponentProps = Record<string, unknown>;
 
 export interface ComponentBuilderConfig {
@@ -49,54 +58,8 @@ export interface ComponentBuilderConfig {
   getCurrentFileType?: () => 'page' | 'component';
 }
 
-/**
- * Context object for buildChildren - encapsulates all rendering context
- */
-export interface BuildChildrenContext {
-  elementPath: Path;
-  parentComponentName: string | null;
-  viewportWidth: number;
-  componentContext: string | null;
-  /** Path where the current component started (for calculating component-relative paths) */
-  componentRootPath?: Path;
-  locale?: string;
-  i18nConfig?: I18nConfig;
-  cmsContext?: Record<string, unknown> | null;
-  cmsLocale?: string | null;
-  collectionItemsMap?: Record<string, CMSItem[]>;
-  itemContext?: ItemContext | null;
-  cmsItemIndexPath?: number[] | null;
-  templateContext?: TemplateContext | null;
-  /** Resolved component props for interactive style mapping resolution */
-  componentResolvedProps?: Record<string, unknown> | null;
-}
-
-export interface BuildComponentOptions {
-  node: ComponentNode | ComponentNode[] | string | number | null | undefined;
-  key?: number;
-  customProps?: ComponentProps;
-  elementPath?: Path;
-  parentComponentName?: string | null;
-  viewportWidth?: number;
-  componentContext?: string | null;
-  /** Path where the current component started (for calculating component-relative paths) */
-  componentRootPath?: Path;
-  locale?: string;
-  i18nConfig?: I18nConfig;
-  cmsContext?: Record<string, unknown> | null;
-  /** CMS locale for i18n field resolution */
-  cmsLocale?: string | null;
-  /** Map of collection name to items for CMS List rendering */
-  collectionItemsMap?: Record<string, CMSItem[]>;
-  /** Item context for rendering inside CMS List (contains current item data) */
-  itemContext?: ItemContext | null;
-  /** Template context with named variables for nested CMS lists */
-  templateContext?: TemplateContext | null;
-  /** CMS item index path for elements inside CMS List(s) - supports nested lists (e.g., [0, 2] for outer item 0, inner item 2) */
-  cmsItemIndexPath?: number[] | null;
-  /** Resolved component props for interactive style mapping resolution */
-  componentResolvedProps?: Record<string, unknown> | null;
-}
+// Re-export types for backward compatibility
+export type { BuildChildrenContext, BuildComponentOptions };
 
 /**
  * ComponentBuilder class for building React elements from component tree nodes
@@ -141,7 +104,6 @@ export class ComponentBuilder {
 
   /**
    * Determines the parent component name for nested component instances.
-   * Priority: componentContext (if inside component definition) > parentComponentName (if inside another instance) > componentName (fallback for page-level components)
    */
   private getParentComponentNameForNestedComponent(
     componentContext: string | null,
@@ -153,7 +115,6 @@ export class ComponentBuilder {
 
   /**
    * Determines the effective parent component name when building children.
-   * Uses componentContext if available, otherwise falls back to parentComponentName.
    */
   private getEffectiveParentComponentName(
     componentContext: string | null,
@@ -164,12 +125,9 @@ export class ComponentBuilder {
 
   /**
    * Find the path to the slot marker in a component structure
-   * This helps determine where children should be placed and what paths they should have
    */
   private findSlotMarkerPath(structure: ComponentNode | undefined, currentPath: Path = [0]): Path | null {
     if (!structure) return null;
-
-    // Check if this node has children (SlotMarker doesn't have children)
     if (isSlotMarker(structure)) return null;
 
     const nodeChildren = (structure as any).children;
@@ -177,13 +135,9 @@ export class ComponentBuilder {
 
     for (let i = 0; i < nodeChildren.length; i++) {
       const child = nodeChildren[i];
-
-      // Check if this is a slot marker
       if (isSlotMarker(child)) {
         return getChildPath(currentPath, i);
       }
-
-      // Recursively search in nested structures
       if (typeof child === 'object' && child !== null && !Array.isArray(child) && 'type' in child) {
         const nestedPath = this.findSlotMarkerPath(child as ComponentNode, getChildPath(currentPath, i));
         if (nestedPath) return nestedPath;
@@ -254,9 +208,8 @@ export class ComponentBuilder {
 
   /**
    * Component builder from JSON tree with support for custom components
-   * viewportWidth is passed down to resolve responsive styles based on actual viewport
    */
-  buildComponent(options: BuildComponentOptions): ReactElement | ReactElement[] | string | number | null {
+  buildComponent(options: BuildComponentOptions): BuildResult {
     const {
       node,
       key = 0,
@@ -279,797 +232,436 @@ export class ComponentBuilder {
 
     if (!node) return null;
 
-    // Handle text nodes - process CMS templates and item templates if context is available
-    if (typeof node === 'string') {
-      let result = node;
-
-      // Process CMS templates (e.g., {{cms.title}})
-      if (cmsContext && result.includes('{{cms.')) {
-        result = processCMSTemplate(result, cmsContext, cmsLocale || locale);
-      }
+    // Build context for specialized builders
+    const ctx: BuilderContext = {
+      key, elementPath, parentComponentName, viewportWidth, componentContext, componentRootPath,
+      locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap,
+      itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
+    };
 
-      // Process item templates (e.g., {{item.title}}, {{itemIndex}}, {{post.title}}, {{postIndex}})
-      // Use templateContext if available (supports named contexts), fall back to itemContext
-      const effectiveTemplateContext = templateContext || itemContext;
-      if (effectiveTemplateContext && hasItemTemplates(result)) {
-        // Create i18n resolver if locale and config are available
-        const effectiveLocale = cmsLocale || locale;
-        const config = i18nConfig || DEFAULT_I18N_CONFIG;
-        const i18nResolver: ValueResolver | undefined = effectiveLocale
-          ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
-          : undefined;
-        result = processItemTemplate(result, effectiveTemplateContext, i18nResolver);
-      }
+    // Dependencies for specialized builders
+    const builderDeps = {
+      elementRegistry: this.elementRegistry,
+      prefetchService: this.prefetchService,
+      getCachedStyleClasses: this.getCachedStyleClasses.bind(this),
+      buildChildren: this.buildChildren.bind(this),
+      getEffectiveParentComponentName: this.getEffectiveParentComponentName.bind(this),
+    };
 
-      return result;
+    // Handle text nodes - process CMS templates and item templates
+    if (typeof node === 'string') {
+      return this.processTextNode(node, ctx);
     }
 
     if (typeof node === 'number') {
       return node;
     }
-    
+
     if (Array.isArray(node)) {
-      const result = node.map((child, index) => {
-        const childPath = getChildPath(elementPath, index);
-        return this.buildComponent({
-          node: child,
-          key: index,
-          customProps,
-          elementPath: childPath,
-          parentComponentName,
-          viewportWidth,
-          componentContext,
-          locale,
-          i18nConfig,
-          cmsContext,
-          cmsLocale,
-          collectionItemsMap,
-          itemContext,
-          cmsItemIndexPath,
-          templateContext,
-          componentResolvedProps
-        });
-      }).filter(
-        (item): item is ReactElement | string | number => item !== null
-      );
-      return result as ReactElement[];
+      return this.buildNodeArray(node, options);
     }
-    
-    // Handle new format: style at top level (not props.style)
+
+    // Get node type
     const nodeType = typeof node === 'object' && node !== null && 'type' in node ? node.type : undefined;
     const children = typeof node === 'object' && node !== null && 'children' in node ? (node.children || []) : [];
 
-    // Handle embed nodes early (before property extraction)
+    // Handle specialized node types using extracted builders
     if (nodeType === NODE_TYPE.EMBED && isEmbedNode(node)) {
-      // Sanitize HTML with allowlist for SVG, rich-text formatting, and common elements
-      // Script tags and event handlers are still removed for security
-      const sanitizedHtml = DOMPurify.sanitize(node.html, {
-        ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-        ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity'],
-        KEEP_CONTENT: true
-      });
-      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
-
-      // Extract attributes from node
-      const extractedAttributes = extractAttributesFromNode(node);
-
-      // Build embed node props with all features
-      const embedProps: Record<string, any> = {
-        key,
-        'data-element-path': pathToString(elementPath),
-        'data-embed-node': 'true',
-        ref: (el: HTMLElement | null) => this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false),
-        dangerouslySetInnerHTML: { __html: sanitizedHtml }
-      };
-
-      // Add CMS item index path for elements inside CMS lists
-      if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
-        embedProps['data-cms-item-index'] = cmsItemIndexPath.join('.');
-      }
-
-      // Convert embed styles to utility classes
-      if (node.style) {
-        const utilityClasses = responsiveStylesToClasses(node.style);
-        if (utilityClasses.length > 0) {
-          const existingClassName = (extractedAttributes.className || '') as string;
-          const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-          embedProps.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
-        }
-      }
-
-      // Add extracted attributes (like class, id, data-*, aria-*, etc.)
-      if (Object.keys(extractedAttributes).length > 0) {
-        Object.assign(embedProps, extractedAttributes);
-      }
-
-      // Add parent component context
-      if (effectiveParentComponentName) {
-        embedProps['data-parent-component'] = effectiveParentComponentName;
-      }
-      if (componentContext) {
-        embedProps['data-component-context'] = componentContext;
-      }
-
-      // Use span for inline embeds (rich-text content), div for block embeds (SVG, etc.)
-      const embedTag = (node as any).inline ? 'span' : 'div';
-      return h(embedTag, embedProps);
+      return buildEmbed(node, ctx, builderDeps);
     }
 
-    // Handle object link nodes (render as div in editor)
     if (nodeType === NODE_TYPE.OBJECT_LINK && isObjectLinkNode(node)) {
-      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
-
-      // Extract attributes
-      const extractedAttributes = extractAttributesFromNode(node);
-
-      // Build object link props (renders as div in editor)
-      const objectLinkProps: Record<string, any> = {
-        key,
-        'data-element-path': pathToString(elementPath),
-        'data-object-link-node': 'true',
-        ref: (el: HTMLElement | null) => this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
-      };
-
-      // Add CMS item index path for elements inside CMS lists
-      if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
-        objectLinkProps['data-cms-item-index'] = cmsItemIndexPath.join('.');
-      }
-
-      // Convert object link styles to utility classes
-      if (node.style) {
-        const utilityClasses = responsiveStylesToClasses(node.style);
-        if (utilityClasses.length > 0) {
-          const existingClassName = (extractedAttributes.className || '') as string;
-          const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-          objectLinkProps.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
-        }
-      }
-
-      // Add extracted attributes (like class, id, data-*, aria-*, etc.)
-      if (Object.keys(extractedAttributes).length > 0) {
-        Object.assign(objectLinkProps, extractedAttributes);
-      }
-
-      // Add parent component context
-      if (effectiveParentComponentName) {
-        objectLinkProps['data-parent-component'] = effectiveParentComponentName;
-      }
-      if (componentContext) {
-        objectLinkProps['data-component-context'] = componentContext;
-      }
-
-      // Build children recursively
-      const objectLinkChildren = this.buildChildren(children, {
-        elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-        locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
-      });
-
-      return h('div', objectLinkProps, objectLinkChildren);
+      return buildObjectLink(node, children, ctx, builderDeps);
     }
 
-    // Handle locale-list nodes (render placeholder in editor)
     if (nodeType === NODE_TYPE.LOCALE_LIST && isLocaleListNode(node)) {
-      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
-
-      // Extract attributes
-      const extractedAttributes = extractAttributesFromNode(node);
-
-      // Build locale list props
-      const localeListProps: Record<string, any> = {
-        key,
-        'data-element-path': pathToString(elementPath),
-        'data-locale-list': 'true',
-        ref: (el: HTMLElement | null) => this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
-      };
-
-      // Add CMS item index path for elements inside CMS lists
-      if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
-        localeListProps['data-cms-item-index'] = cmsItemIndexPath.join('.');
-      }
-
-      // Convert container styles to utility classes
-      if (node.style) {
-        const utilityClasses = responsiveStylesToClasses(node.style);
-        if (utilityClasses.length > 0) {
-          const existingClassName = (extractedAttributes.className || '') as string;
-          const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-          localeListProps.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
-        }
-      }
-
-      // Add extracted attributes
-      if (Object.keys(extractedAttributes).length > 0) {
-        Object.assign(localeListProps, extractedAttributes);
-      }
-
-      // Add parent component context
-      if (effectiveParentComponentName) {
-        localeListProps['data-parent-component'] = effectiveParentComponentName;
-      }
-      if (componentContext) {
-        localeListProps['data-component-context'] = componentContext;
-      }
-
-      // Build locale links for editor preview using actual i18n config
-      const showCurrent = node.showCurrent !== false;
-      const showSeparator = node.showSeparator !== false;
-      const showFlag = node.showFlag !== false;
-      // Use actual locales from i18nConfig (LocaleConfig[])
-      const configLocales = i18nConfig?.locales || [];
-      const currentLocaleCode = locale || i18nConfig?.defaultLocale || 'en';
-
-      // Convert item styles, active item styles, separator styles, and flag styles to utility classes
-      const itemClasses = node.itemStyle ? responsiveStylesToClasses(node.itemStyle) : [];
-      const activeItemClasses = node.activeItemStyle ? responsiveStylesToClasses(node.activeItemStyle) : [];
-      const separatorClasses = node.separatorStyle ? responsiveStylesToClasses(node.separatorStyle) : [];
-      const flagClasses = node.flagStyle ? responsiveStylesToClasses(node.flagStyle) : [];
-
-      // Build locale links from config
-      const linkElements: ReactElement[] = [];
-      for (let i = 0; i < configLocales.length; i++) {
-        const localeConfig = configLocales[i];
-        const isCurrent = localeConfig.code === currentLocaleCode;
-        if (!showCurrent && isCurrent) continue;
-
-        // Add separator between links (empty span styled via separatorStyle)
-        if (showSeparator && linkElements.length > 0) {
-          linkElements.push(h('span', {
-            key: `sep-${i}`,
-            className: separatorClasses.length > 0 ? separatorClasses.join(' ') : undefined
-          }));
-        }
-
-        // Build link element content - flag icon (if enabled and exists) + nativeName in span
-        const linkContent: (ReactElement | string)[] = [];
-        if (showFlag && localeConfig.icon) {
-          linkContent.push(h('img', {
-            key: 'flag',
-            src: localeConfig.icon,
-            alt: `${localeConfig.name} flag`,
-            className: flagClasses.length > 0 ? flagClasses.join(' ') : undefined
-          }));
-        }
-        // Get display text based on displayType (mirrors SSR logic)
-        const displayType = node.displayType || 'nativeName';
-        let displayText: string;
-        switch (displayType) {
-          case 'code':
-            displayText = localeConfig.code.toUpperCase();
-            break;
-          case 'name':
-            displayText = localeConfig.name;
-            break;
-          case 'nativeName':
-          default:
-            displayText = localeConfig.nativeName;
-            break;
-        }
-        linkContent.push(h('div', { key: 'text' }, displayText));
-
-        // Current item gets both itemClasses + activeItemClasses (additive/override)
-        const linkClasses = isCurrent ? [...itemClasses, ...activeItemClasses] : itemClasses;
-        linkElements.push(h('div', {
-          key: `locale-${localeConfig.code}`,
-          'data-current': isCurrent ? 'true' : 'false',
-          'data-locale': localeConfig.code,
-          className: linkClasses.length > 0 ? linkClasses.join(' ') : undefined,
-          style: { cursor: 'pointer' }
-        }, ...linkContent));
-      }
-
-      return h('div', localeListProps, linkElements);
+      return buildLocaleList(node, ctx, builderDeps);
     }
 
-    // Handle cms-list nodes (render children for each CMS item)
     if (nodeType === NODE_TYPE.CMS_LIST && isCMSListNode(node)) {
-      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
-
-      // Extract attributes
-      const extractedAttributes = extractAttributesFromNode(node);
+      return buildCMSList(node, children, ctx, builderDeps);
+    }
 
-      // Build CMS list container props
-      const cmsListProps: Record<string, any> = {
-        key,
-        'data-element-path': pathToString(elementPath),
-        'data-cms-list': 'true',
-        'data-collection': node.collection || '',
-        ref: (el: HTMLElement | null) => this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false)
-      };
+    // Extract node properties
+    const { tag, componentName, props: nodeProps } = extractNodeProperties(node);
 
-      // Convert container styles to utility classes (using cache for performance)
-      if (node.style) {
-        const utilityClasses = this.getCachedStyleClasses(node.style);
-        if (utilityClasses.length > 0) {
-          const existingClassName = (extractedAttributes.className || '') as string;
-          const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-          cmsListProps.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
-        }
-      }
+    // Filter internal props
+    const props = this.filterInternalProps(nodeProps, tag);
 
-      // Add extracted attributes
-      if (Object.keys(extractedAttributes).length > 0) {
-        Object.assign(cmsListProps, extractedAttributes);
-      }
+    // Process templates in props
+    const processedProps = this.processPropsTemplates(props, ctx);
 
-      // Add parent component context
-      if (effectiveParentComponentName) {
-        cmsListProps['data-parent-component'] = effectiveParentComponentName;
-      }
-      if (componentContext) {
-        cmsListProps['data-component-context'] = componentContext;
-      }
+    // Convert styles to utility classes
+    const propsWithClasses = this.applyStyleClasses(processedProps, node);
 
-      // Determine variable name for this list's items (use itemAs or singular of collection)
-      const variableName = node.itemAs || singularize(node.collection);
+    // Apply interactive styles
+    const propsWithInteractive = this.applyInteractiveStyles(propsWithClasses, node, ctx);
 
-      // Get items for this collection
-      let itemsToRender: CMSItem[] = [];
+    // Extract and merge attributes
+    const finalProps = this.mergeAttributes(propsWithInteractive, node, ctx);
 
-      // Helper to lookup items by ID or filename
-      const lookupItemsByIds = (ids: string[], collectionItems: CMSItem[]): CMSItem[] => {
-        const itemMap = new Map(collectionItems.map(item => [item._id, item]));
-        const filenameMap = new Map(collectionItems.map(item => [item._filename, item]));
-        return ids
-          .filter(Boolean)
-          .map(id => itemMap.get(id) || filenameMap.get(id))
-          .filter((item): item is CMSItem => item !== undefined);
-      };
+    // Handle custom component
+    if (nodeType === NODE_TYPE.COMPONENT && componentName && this.componentRegistry.has(componentName)) {
+      return this.buildCustomComponent(componentName, nodeProps, children, finalProps, options);
+    }
 
-      // Check if items are specified directly (for nested reference lists)
-      if (node.items) {
-        const collectionItems = node.collection ? (collectionItemsMap[node.collection] || []) : [];
-
-        // If items is a template expression, resolve it from current context
-        if (typeof node.items === 'string' && node.items.startsWith('{{')) {
-          const effectiveTemplateContext = templateContext || {};
-          const resolvedIds = resolveItemsTemplate(node.items, effectiveTemplateContext);
-          if (resolvedIds) {
-            const ids = Array.isArray(resolvedIds) ? resolvedIds : [resolvedIds];
-            itemsToRender = lookupItemsByIds(ids, collectionItems);
-          }
-        } else {
-          // Direct IDs (string or array)
-          const ids = Array.isArray(node.items) ? node.items : [node.items];
-          itemsToRender = lookupItemsByIds(ids, collectionItems);
-        }
-      } else {
-        // Get items for this collection from the map
-        const collectionItems = node.collection ? (collectionItemsMap[node.collection] || []) : [];
+    // Handle Link component
+    if (tag === 'Link') {
+      return buildLink(finalProps, children, ctx, builderDeps);
+    }
 
-        // Apply offset and limit
-        itemsToRender = collectionItems;
-        if (node.offset) {
-          itemsToRender = itemsToRender.slice(node.offset);
-        }
-        if (node.limit) {
-          itemsToRender = itemsToRender.slice(0, node.limit);
-        }
-      }
+    // Build regular HTML element
+    return this.buildHtmlElement(tag, finalProps, children, customProps, options);
+  }
 
-      // If no items, show empty state in editor
-      if (itemsToRender.length === 0) {
-        const emptyState = h('div', {
-          key: 'cms-list-empty',
-          style: {
-            padding: '12px',
-            background: 'rgba(139, 92, 246, 0.05)',
-            border: '1px dashed rgba(139, 92, 246, 0.3)',
-            borderRadius: '4px',
-            color: '#8b5cf6',
-            fontSize: '12px',
-            fontFamily: 'system-ui, sans-serif',
-            textAlign: 'center'
-          }
-        }, `CMS List: ${node.collection || 'No collection'} - No items`);
-        return h('div', cmsListProps, emptyState);
-      }
+  /**
+   * Process text node with CMS and item templates
+   */
+  private processTextNode(text: string, ctx: BuilderContext): string {
+    let result = text;
 
-      // Render children for each item - no wrapper div, cmsItemIndexPath flows to all descendants
-      const renderedItems: (ReactElement | string | number)[] = [];
-      for (let index = 0; index < itemsToRender.length; index++) {
-        const item = itemsToRender[index];
-        // Build template context with named variable (preserves parent context for nested lists)
-        const newTemplateContext = buildTemplateContext(
-          variableName,
-          item,
-          index,
-          itemsToRender.length,
-          templateContext || undefined
-        );
-
-        // Build children with templateContext (contains both named and legacy context)
-        // Append current index to existing path to support nested CMS lists
-        const newIndexPath = [...(cmsItemIndexPath || []), index];
-        const itemChildren = this.buildChildren(children, {
-          elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-          locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap,
-          itemContext: null,  // itemContext no longer needed - templateContext has all data
-          cmsItemIndexPath: newIndexPath,  // Pass updated path - will be applied to all descendants via ref callback
-          templateContext: newTemplateContext,  // Pass named template context for nested lists
-          componentResolvedProps
-        });
-
-        // Add children directly (no wrapper div)
-        // Each child element will have data-cms-item-index attribute via ref callback
-        if (itemChildren === null) continue;
-        if (Array.isArray(itemChildren)) {
-          // Add unique keys by combining original key with item index
-          for (const child of itemChildren) {
-            if (typeof child === 'object' && child !== null && 'key' in child) {
-              renderedItems.push({ ...child, key: `${child.key}-item-${index}` } as ReactElement);
-            } else {
-              renderedItems.push(child);
-            }
-          }
-        } else if (typeof itemChildren === 'object' && itemChildren !== null && 'key' in itemChildren) {
-          // Single child - ensure unique key
-          renderedItems.push({ ...itemChildren, key: `${(itemChildren as ReactElement).key}-item-${index}` } as ReactElement);
-        } else {
-          renderedItems.push(itemChildren);
-        }
-      }
+    // Process CMS templates
+    if (ctx.cmsContext && result.includes('{{cms.')) {
+      result = processCMSTemplate(result, ctx.cmsContext, ctx.cmsLocale || ctx.locale);
+    }
 
-      return h('div', cmsListProps, renderedItems);
+    // Process item templates
+    const effectiveTemplateContext = ctx.templateContext || ctx.itemContext;
+    if (effectiveTemplateContext && hasItemTemplates(result)) {
+      const effectiveLocale = ctx.cmsLocale || ctx.locale;
+      const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
+      const i18nResolver: ValueResolver | undefined = effectiveLocale
+        ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
+        : undefined;
+      result = processItemTemplate(result, effectiveTemplateContext, i18nResolver);
     }
 
-    // Extract node properties based on type
-    const { tag, componentName, props: nodeProps } = extractNodeProperties(node);
+    return result;
+  }
+
+  /**
+   * Build array of nodes
+   */
+  private buildNodeArray(nodes: ComponentNode[], options: BuildComponentOptions): ReactElement[] {
+    const {
+      customProps, elementPath = [0], parentComponentName = null, viewportWidth = 1920,
+      componentContext = null, locale, i18nConfig, cmsContext = null, cmsLocale = null,
+      collectionItemsMap = {}, itemContext = null, cmsItemIndexPath = null,
+      templateContext = null, componentResolvedProps = null
+    } = options;
 
-    // Filter internal props from nodeProps before building props object
-    // This prevents node.type (e.g., "node") from being passed to DOM while allowing
-    // attributes.type (e.g., "text" for inputs) to be preserved when merged later
+    return nodes.map((child, index) => {
+      const childPath = getChildPath(elementPath, index);
+      return this.buildComponent({
+        node: child,
+        key: index,
+        customProps,
+        elementPath: childPath,
+        parentComponentName,
+        viewportWidth,
+        componentContext,
+        locale,
+        i18nConfig,
+        cmsContext,
+        cmsLocale,
+        collectionItemsMap,
+        itemContext,
+        cmsItemIndexPath,
+        templateContext,
+        componentResolvedProps
+      });
+    }).filter((item): item is ReactElement => item !== null && typeof item === 'object');
+  }
+
+  /**
+   * Filter internal props from node props
+   */
+  private filterInternalProps(nodeProps: Record<string, unknown>, tag: string | undefined): Record<string, unknown> {
     const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
     const internalProps = ['type', 'tag', 'component', 'props', 'children', 'html', 'style', ...imageOnlyProps];
-    let props: Record<string, unknown> = {};
+    const props: Record<string, unknown> = {};
+
     for (const [key, value] of Object.entries(nodeProps)) {
       if (internalProps.includes(key)) {
-        // Keep image properties if this is an img tag
         if (tag === 'img' && imageOnlyProps.includes(key)) {
           props[key] = value;
         }
-        // else skip - it's an internal prop
       } else {
         props[key] = value;
       }
     }
 
-    // Process CMS templates in props (e.g., rich-text fields with {{cms.field}} patterns)
-    if (cmsContext && Object.keys(props).length > 0) {
-      props = processCMSPropsTemplate(props, cmsContext, cmsLocale || locale);
+    return props;
+  }
+
+  /**
+   * Process CMS and item templates in props
+   */
+  private processPropsTemplates(props: Record<string, unknown>, ctx: BuilderContext): Record<string, unknown> {
+    let result = props;
+
+    // Process CMS templates
+    if (ctx.cmsContext && Object.keys(result).length > 0) {
+      result = processCMSPropsTemplate(result, ctx.cmsContext, ctx.cmsLocale || ctx.locale);
     }
 
-    // Process item templates in props (e.g., rich-text fields with {{item.field}} patterns)
-    // Use templateContext if available (for named contexts), fall back to itemContext for legacy support
-    const effectiveItemContext = templateContext || itemContext;
-    if (effectiveItemContext && Object.keys(props).length > 0) {
-      const effectiveLocale = cmsLocale || locale;
-      const config = i18nConfig || DEFAULT_I18N_CONFIG;
+    // Process item templates
+    const effectiveItemContext = ctx.templateContext || ctx.itemContext;
+    if (effectiveItemContext && Object.keys(result).length > 0) {
+      const effectiveLocale = ctx.cmsLocale || ctx.locale;
+      const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
       const i18nResolver: ValueResolver | undefined = effectiveLocale
         ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
         : undefined;
-      props = processItemPropsTemplate(props, effectiveItemContext, i18nResolver);
+      result = processItemPropsTemplate(result, effectiveItemContext, i18nResolver);
     }
 
-    // Extract styles from node and convert to utility classes (using cache for performance)
+    return result;
+  }
+
+  /**
+   * Apply style classes to props
+   */
+  private applyStyleClasses(props: Record<string, unknown>, node: ComponentNode): Record<string, unknown> {
     const nodeStyle = node.style || (isComponentNode(node) ? node.props?.style : undefined);
 
     if (nodeStyle && typeof nodeStyle === 'object') {
-      // Use cached utility classes when possible
       const utilityClasses = this.getCachedStyleClasses(nodeStyle);
       if (utilityClasses.length > 0) {
         const existingClassName = (props.className || '') as string;
         const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
-        props.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
+        return { ...props, className: [...classArray, ...utilityClasses].filter(Boolean).join(' ') };
       }
     }
 
-    // Generate element-specific class if node has interactive styles or generateElementClass flag
+    return props;
+  }
+
+  /**
+   * Apply interactive styles and generate element class
+   */
+  private applyInteractiveStyles(props: Record<string, unknown>, node: ComponentNode, ctx: BuilderContext): Record<string, unknown> {
     const nodeInteractiveStyles = (node as any).interactiveStyles as InteractiveStyles | undefined;
     const nodeGenerateElementClass = (node as any).generateElementClass as boolean | undefined;
     const nodeTreeNodeName = (node as any).treeNodeName as string | undefined;
 
-    if ((nodeInteractiveStyles && nodeInteractiveStyles.length > 0) || nodeGenerateElementClass) {
-      // Check if node is slot content (page content passed to component slot)
-      // Slot content should use page context for element class, not component context
-      const isSlotContent = (node as any)._isSlotContent === true;
-
-      // When inside a component (componentContext is set) and NOT slot content, use component-based class names
-      // Slot content uses page context since it's defined in the page, not the component
-      const useComponentContext = componentContext && !isSlotContent;
-      const fileType = useComponentContext ? 'component' : (this.getCurrentFileType?.() || 'page');
-      const fileName = useComponentContext ? componentContext : (this.getCurrentPageName ? this.getCurrentPageName() : 'page');
-      // For component elements, use relative path (from component root) for stable class names
-      // For slot content and page elements, use full path
-      const pathForClass = useComponentContext && componentRootPath
-        ? elementPath.slice(componentRootPath.length)
-        : elementPath;
-      const elementClassCtx: ElementClassContext = {
-        fileType,
-        fileName,
-        treeNodeName: nodeTreeNodeName,
-        path: pathForClass,
-      };
-      const elementClass = generateElementClassName(elementClassCtx);
-
-      // Prepend element class to existing classes for proper CSS specificity
-      const existingClassName = (props.className || '') as string;
-      props.className = [elementClass, existingClassName].filter(Boolean).join(' ');
-
-      // Register interactive styles for CSS generation
-      // StyleInjector will read from the registry to generate interactive CSS
-      if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
-        // Check if interactive styles contain mappings that need resolution
-        if (componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
-          // Extract mappings and replace with CSS variable references
-          const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
-
-          // Resolve CSS variable values from component props
-          const cssVariables = resolveExtractedMappings(mappings, componentResolvedProps);
-
-          // Store resolved styles (with var() references) for CSS generation
-          InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+    if (!((nodeInteractiveStyles && nodeInteractiveStyles.length > 0) || nodeGenerateElementClass)) {
+      return props;
+    }
 
-          // Store CSS variables for this element (to be applied via ref callback)
-          if (Object.keys(cssVariables).length > 0) {
-            InteractiveStylesRegistry.setVariables(elementPath, cssVariables);
-          }
-        } else {
-          // No mappings or no props available - register styles as-is
-          InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
+    // Check if slot content
+    const isSlotContent = (node as any)._isSlotContent === true;
+    const useComponentContext = ctx.componentContext && !isSlotContent;
+    const fileType = useComponentContext ? 'component' : (this.getCurrentFileType?.() || 'page');
+    const fileName = useComponentContext ? ctx.componentContext! : (this.getCurrentPageName ? this.getCurrentPageName() : 'page');
+    const pathForClass = useComponentContext && ctx.componentRootPath
+      ? ctx.elementPath.slice(ctx.componentRootPath.length)
+      : ctx.elementPath;
+
+    const elementClassCtx: ElementClassContext = {
+      fileType,
+      fileName,
+      treeNodeName: nodeTreeNodeName,
+      path: pathForClass,
+    };
+    const elementClass = generateElementClassName(elementClassCtx);
+
+    // Prepend element class
+    const existingClassName = (props.className || '') as string;
+    const result = { ...props, className: [elementClass, existingClassName].filter(Boolean).join(' ') };
+
+    // Register interactive styles
+    if (nodeInteractiveStyles && nodeInteractiveStyles.length > 0) {
+      if (ctx.componentResolvedProps && hasInteractiveStyleMappings(nodeInteractiveStyles)) {
+        const { resolvedStyles, mappings } = extractInteractiveStyleMappings(nodeInteractiveStyles);
+        const cssVariables = resolveExtractedMappings(mappings, ctx.componentResolvedProps);
+        InteractiveStylesRegistry.set(elementClass, resolvedStyles);
+        if (Object.keys(cssVariables).length > 0) {
+          InteractiveStylesRegistry.setVariables(ctx.elementPath, cssVariables);
         }
+      } else {
+        InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
       }
     }
 
-    // Extract attributes from node and merge into props
-    // Attributes override props with the same key
-    // Note: Internal props were already filtered above, so attributes like type="text" are preserved
+    return result;
+  }
+
+  /**
+   * Extract and merge attributes from node
+   */
+  private mergeAttributes(props: Record<string, unknown>, node: ComponentNode, ctx: BuilderContext): Record<string, unknown> {
     let extractedAttributes = extractAttributesFromNode(node);
 
-    // Process item templates in attributes (for CMSList context)
-    // Use templateContext if available (for named contexts), fall back to itemContext for legacy support
+    // Process item templates in attributes
+    const effectiveItemContext = ctx.templateContext || ctx.itemContext;
     if (effectiveItemContext && Object.keys(extractedAttributes).length > 0) {
-      const effectiveLocale = cmsLocale || locale;
-      const config = i18nConfig || DEFAULT_I18N_CONFIG;
+      const effectiveLocale = ctx.cmsLocale || ctx.locale;
+      const config = ctx.i18nConfig || DEFAULT_I18N_CONFIG;
       const i18nResolver: ValueResolver | undefined = effectiveLocale
         ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
         : undefined;
       extractedAttributes = processItemPropsTemplate(extractedAttributes, effectiveItemContext, i18nResolver);
     }
 
-    if (Object.keys(extractedAttributes).length > 0) {
-      // Handle class/className specially - merge with utility classes instead of replacing
-      if (extractedAttributes.class || extractedAttributes.className) {
-        const attrClass = (extractedAttributes.class || extractedAttributes.className || '') as string;
-        const existingClassName = (props.className || '') as string;
-
-        // Merge: existing utility classes + attribute classes
-        props.className = [existingClassName, attrClass].filter(Boolean).join(' ');
+    if (Object.keys(extractedAttributes).length === 0) {
+      return props;
+    }
 
-        // Remove from attributes to prevent overwrite
-        delete extractedAttributes.class;
-        delete extractedAttributes.className;
-      }
+    let result = { ...props };
 
-      props = { ...props, ...extractedAttributes };
+    // Handle class/className specially
+    if (extractedAttributes.class || extractedAttributes.className) {
+      const attrClass = (extractedAttributes.class || extractedAttributes.className || '') as string;
+      const existingClassName = (result.className || '') as string;
+      result.className = [existingClassName, attrClass].filter(Boolean).join(' ');
+      delete extractedAttributes.class;
+      delete extractedAttributes.className;
     }
 
-    // Check if this is a custom component reference
-    if (nodeType === NODE_TYPE.COMPONENT && componentName && this.componentRegistry.has(componentName)) {
-      const componentDef = this.componentRegistry.get(componentName);
-      
-      if (!componentDef) return null;
-      
-      try {
-        // Extract structured component definition
-        const structuredComponentDef = componentDef.component;
-        if (!structuredComponentDef) {
-          return h(ErrorBoundary, {
-            key,
-            componentName: componentName,
-            level: 'component',
-          }, null);
-        }
-        
-        // Resolve props with defaults from interface definition (with i18n support)
-        // Use nodeProps (original extracted props) instead of filtered props
-        // Filtering is for HTML DOM attributes, not component prop templates
-        let resolvedProps = resolvePropsFromDefinition(
-          structuredComponentDef,
-          nodeProps,
-          children,
-          locale,
-          i18nConfig
-        );
-
-        // Process CMS templates in resolved component props
-        if (cmsContext && Object.keys(resolvedProps).length > 0) {
-          resolvedProps = processCMSPropsTemplate(resolvedProps, cmsContext, cmsLocale || locale);
-        }
+    return { ...result, ...extractedAttributes };
+  }
 
-        // Process item templates in resolved component props (for CMSList context)
-        // Use templateContext if available (for named contexts), fall back to itemContext for legacy support
-        if (effectiveItemContext && Object.keys(resolvedProps).length > 0) {
-          const effectiveLocale = cmsLocale || locale;
-          const config = i18nConfig || DEFAULT_I18N_CONFIG;
-          const i18nResolver: ValueResolver | undefined = effectiveLocale
-            ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
-            : undefined;
-          resolvedProps = processItemPropsTemplate(resolvedProps, effectiveItemContext, i18nResolver);
-        }
+  /**
+   * Build a custom component
+   */
+  private buildCustomComponent(
+    componentName: string,
+    nodeProps: Record<string, unknown>,
+    children: unknown,
+    finalProps: Record<string, unknown>,
+    options: BuildComponentOptions
+  ): ReactElement | null {
+    const {
+      key = 0, elementPath = [0], parentComponentName = null, viewportWidth = 1920,
+      componentContext = null, locale, i18nConfig, cmsContext = null, cmsLocale = null,
+      collectionItemsMap = {}, itemContext = null, cmsItemIndexPath = null,
+      templateContext = null
+    } = options;
 
-        // Process the structure with resolved props
-        // processStructure now handles structure.style and merges into props.style
-        // Pass viewportWidth to respect responsive breakpoints in preview
-        // Pass instance children to replace { type: "children" } markers
-        // Mark children as slot content so they use page context for element class generation
-        const markedChildren = children ? markAsSlotContent(children) : undefined;
-        const processedStructure = processStructure(
-          structuredComponentDef.structure,
-          { props: resolvedProps, componentDef: structuredComponentDef },
-          viewportWidth,
-          markedChildren
-        );
-        
-        // Type guard: ensure processedStructure is a ComponentNode
-        if (!processedStructure || typeof processedStructure === 'string' || typeof processedStructure === 'number' || Array.isArray(processedStructure)) {
-          return null;
-        }
-        
-        // Merge instance style overrides (from component instance props) with structure styles
-        if (props.style && typeof props.style === 'object') {
-          mergeNodeStyles(processedStructure, props.style as StyleValue, viewportWidth);
-        }
-        
-        // Add event handlers to props (only for component instances)
-        if (props.onClick && isComponentNode(processedStructure)) {
-          if (!processedStructure.props) {
-            processedStructure.props = {};
-          }
-          processedStructure.props.onClick = this.createOnClickHandler(props.onClick);
-        }
-        
-        // Build the component instance's structure with proper component context tracking
-        // Elements inside this component will have parentComponentName set via closure variables
-        // Component root will have props stored in registry (no DOM attributes needed)
-        const nestedParentComponentName = this.getParentComponentNameForNestedComponent(
-          componentContext,
-          parentComponentName,
-          componentName
-        );
-
-        const componentElement = this.buildComponent({
-          node: processedStructure,
-          key,
-          customProps: {
-            // Store resolved props in a special key to pass to registry (not added to DOM)
-            '__componentProps': resolvedProps
-          },
-          elementPath,
-          parentComponentName: nestedParentComponentName,
-          viewportWidth,
-          componentContext: componentName,
-          // Set componentRootPath to track where this component starts for relative path calculation
-          componentRootPath: elementPath,
-          locale,
-          i18nConfig,
-          cmsContext,
-          cmsLocale,
-          collectionItemsMap,
-          itemContext,
-          cmsItemIndexPath,
-          // Pass resolved props for interactive style mapping resolution
-          componentResolvedProps: resolvedProps
-        });
-        return h(ErrorBoundary, {
-          key,
-          componentName: componentName,
-          level: 'component',
-        }, componentElement);
-        
-      } catch (error) {
-        return h(ErrorBoundary, {
-          key,
-          componentName: tag,
-          level: 'component',
-        }, null);
+    const componentDef = this.componentRegistry.get(componentName);
+    if (!componentDef) return null;
+
+    try {
+      const structuredComponentDef = componentDef.component;
+      if (!structuredComponentDef) {
+        return h(ErrorBoundary, { key, componentName, level: 'component' }, null);
       }
-    }
 
-    // Handle Link component for navigation (only for HTML nodes)
-    if (tag === 'Link') {
-      const { to, prefetch: prefetchAttr, ...restProps } = props;
-      const href = typeof to === 'string' ? to : '#';
+      // Resolve props
+      let resolvedProps = resolvePropsFromDefinition(
+        structuredComponentDef,
+        nodeProps,
+        children,
+        locale,
+        i18nConfig
+      );
 
-      // Use effective parent component name for consistency with regular HTML elements
-      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
+      // Process templates
+      if (cmsContext) {
+        resolvedProps = processCMSPropsTemplate(resolvedProps, cmsContext, cmsLocale || locale);
+      }
 
-      // Navigation click handler
-      const navigationOnClick = (e: any) => {
-        e.preventDefault();
-        if (typeof to === 'string' && to) {
-          navigateTo(to);
-        }
-      };
+      const effectiveItemContext = templateContext || itemContext;
+      if (effectiveItemContext) {
+        const effectiveLocale = cmsLocale || locale;
+        const config = i18nConfig || DEFAULT_I18N_CONFIG;
+        const i18nResolver: ValueResolver | undefined = effectiveLocale
+          ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
+          : undefined;
+        resolvedProps = processItemPropsTemplate(resolvedProps, effectiveItemContext, i18nResolver);
+      }
 
-      // Prefetch handlers (only if prefetchService is available and enabled)
-      const prefetchHandlers: Record<string, unknown> = {};
-      const isInternalLink = href.startsWith('/');
-
-      if (this.prefetchService?.isEnabled() && isInternalLink) {
-        const strategy = (prefetchAttr as PrefetchStrategy) || this.prefetchService.getDefaultStrategy();
-
-        if (strategy === 'hover') {
-          prefetchHandlers.onMouseEnter = () => this.prefetchService?.handleHover(href);
-          prefetchHandlers.onMouseLeave = () => this.prefetchService?.handleHoverLeave(href);
-          prefetchHandlers.onFocus = () => this.prefetchService?.handleHover(href);
-          prefetchHandlers.onBlur = () => this.prefetchService?.handleHoverLeave(href);
-        } else if (strategy === 'tap') {
-          prefetchHandlers.onTouchStart = () => this.prefetchService?.handleTap(href);
-          prefetchHandlers.onMouseDown = () => this.prefetchService?.handleTap(href);
-        }
-        // viewport and load strategies are handled via ref callback below
+      // Process structure
+      const markedChildren = children ? markAsSlotContent(children) : undefined;
+      const processedStructure = processStructure(
+        structuredComponentDef.structure,
+        { props: resolvedProps, componentDef: structuredComponentDef },
+        viewportWidth,
+        markedChildren
+      );
+
+      if (!processedStructure || typeof processedStructure === 'string' || typeof processedStructure === 'number' || Array.isArray(processedStructure)) {
+        return null;
+      }
+
+      // Merge styles
+      if (finalProps.style && typeof finalProps.style === 'object') {
+        mergeNodeStyles(processedStructure, finalProps.style as StyleValue, viewportWidth);
       }
 
-      return h('a', {
-        ...restProps,
+      // Add onClick
+      if (finalProps.onClick && isComponentNode(processedStructure)) {
+        if (!processedStructure.props) processedStructure.props = {};
+        processedStructure.props.onClick = this.createOnClickHandler(finalProps.onClick);
+      }
+
+      const nestedParentComponentName = this.getParentComponentNameForNestedComponent(
+        componentContext,
+        parentComponentName,
+        componentName
+      );
+
+      const componentElement = this.buildComponent({
+        node: processedStructure,
         key,
-        href,
-        // Add data attributes for selection overlay
-        'data-element-path': pathToString(elementPath),
-        // Add prefetch strategy attribute if specified
-        ...(prefetchAttr && { 'data-prefetch': prefetchAttr }),
-        // Add parent component context
-        ...(effectiveParentComponentName && { 'data-parent-component': effectiveParentComponentName }),
-        // Add current component context (when inside component definition)
-        ...(componentContext && { 'data-component-context': componentContext }),
-        ref: (el: HTMLElement | null) => {
-          const pathKey = pathToString(elementPath);
-
-          // Cleanup when element is removed from DOM
-          if (!el) {
-            this.prefetchService?.unobserveLinkByPath(pathKey);
-          }
+        customProps: { '__componentProps': resolvedProps },
+        elementPath,
+        parentComponentName: nestedParentComponentName,
+        viewportWidth,
+        componentContext: componentName,
+        componentRootPath: elementPath,
+        locale,
+        i18nConfig,
+        cmsContext,
+        cmsLocale,
+        collectionItemsMap,
+        itemContext,
+        cmsItemIndexPath,
+        componentResolvedProps: resolvedProps
+      });
 
-          this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false);
+      return h(ErrorBoundary, { key, componentName, level: 'component' }, componentElement);
 
-          // Handle viewport strategy - observe link when it enters DOM
-          if (el && this.prefetchService?.isEnabled() && isInternalLink) {
-            const strategy = (prefetchAttr as PrefetchStrategy) || this.prefetchService.getDefaultStrategy();
-            if (strategy === 'viewport') {
-              this.prefetchService.observeLink(el as HTMLAnchorElement, pathKey);
-            }
-          }
-        },
-        onClick: navigationOnClick,
-        ...prefetchHandlers,
-        style: {
-          textDecoration: 'none',
-          color: '#0070f3',
-          cursor: 'pointer',
-          ...(props.style && typeof props.style === 'object' ? props.style : {}),
-        }
-      }, this.buildChildren(children, {
-        elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
-        locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
-      }));
+    } catch (error) {
+      return h(ErrorBoundary, { key, componentName, level: 'component' }, null);
     }
+  }
+
+  /**
+   * Build a regular HTML element
+   */
+  private buildHtmlElement(
+    tag: string | undefined,
+    props: Record<string, unknown>,
+    children: unknown,
+    customProps: ComponentProps,
+    options: BuildComponentOptions
+  ): ReactElement | null {
+    const {
+      key = 0, elementPath = [0], parentComponentName = null, viewportWidth = 1920,
+      componentContext = null, componentRootPath, locale, i18nConfig,
+      cmsContext = null, cmsLocale = null, collectionItemsMap = {},
+      itemContext = null, cmsItemIndexPath = null, templateContext = null,
+      componentResolvedProps = null
+    } = options;
 
-    // Prepare element props
-    // Remove __componentProps from customProps before spreading (it's only for registry, not DOM)
+    const finalTag = tag || 'div';
+    const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
+
+    // Remove __componentProps from customProps before spreading
     const { __componentProps, ...customPropsForDOM } = customProps || {};
     const isComponentRoot = !!(customProps && '__componentProps' in customProps);
+
     const processedProps: Record<string, unknown> = {
       ...props,
       ...customPropsForDOM,
       key
-      // Note: Data attributes moved to ref callback to avoid rerenders on path changes
     };
 
-    // Register element in registry and set data attributes via DOM (not React props)
-    // Setting attributes in ref callback avoids React rerenders when paths change during drag/reorder
+    // Register element via ref callback
     processedProps.ref = (el: HTMLElement | null) => {
       if (el) {
-        // Set data attributes via DOM (not React props) to avoid rerenders on path changes
         el.setAttribute('data-element-path', pathToString(elementPath));
         if (cmsItemIndexPath && cmsItemIndexPath.length > 0) {
           el.setAttribute('data-cms-item-index', cmsItemIndexPath.join('.'));
@@ -1078,7 +670,7 @@ export class ComponentBuilder {
         if (parentComponentName) el.setAttribute('data-parent-component', parentComponentName);
         if (componentContext) el.setAttribute('data-component-context', componentContext);
 
-        // Add defineVars data attributes for JS prop injection (mirrors SSR behavior)
+        // Add defineVars data attributes
         if (isComponentRoot && componentContext) {
           const componentDef = this.componentRegistry.get(componentContext);
           const defineVars = componentDef?.component?.defineVars;
@@ -1100,8 +692,7 @@ export class ComponentBuilder {
           }
         }
 
-        // Apply CSS variables for interactive style mappings
-        // These are resolved per-instance based on component props
+        // Apply CSS variables
         const cssVariables = InteractiveStylesRegistry.getVariables(elementPath);
         if (cssVariables && Object.keys(cssVariables).length > 0) {
           for (const [varName, value] of Object.entries(cssVariables)) {
@@ -1110,14 +701,11 @@ export class ComponentBuilder {
         }
       }
 
-      // Extract props if this is a component root
       const componentProps = isComponentRoot && customProps.__componentProps
         ? customProps.__componentProps as Record<string, unknown>
         : undefined;
-      // Use componentContext as component name for component roots
       const componentNameForRegistry = isComponentRoot ? componentContext : parentComponentName;
 
-      // Build full metadata for registry
       const metadata = {
         parentComponentName: parentComponentName ?? null,
         componentContext: componentContext ?? null
@@ -1125,35 +713,25 @@ export class ComponentBuilder {
 
       this.elementRegistry.register(elementPath, el, componentNameForRegistry, isComponentRoot, componentProps, metadata);
     };
-    
-    // Add onClick handler - either custom or selection handler
-    const originalOnClick = props.onClick ? this.createOnClickHandler(props.onClick) : undefined;
 
-    // Calculate effective parent component name before using it in onClick handler
-    const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
-
-    // Add onClick handler from props if exists
-    if (originalOnClick) {
-      processedProps.onClick = originalOnClick;
+    // Add onClick handler
+    if (props.onClick) {
+      processedProps.onClick = this.createOnClickHandler(props.onClick);
     }
 
-    // For HTML elements, use tag; components and embed nodes should not reach here (they're handled above)
-    const finalTag = tag || 'div';
-
-    // HTML void elements cannot have children
+    // HTML void elements
     const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
     if (VOID_ELEMENTS.includes(finalTag.toLowerCase())) {
-      // Ensure no children prop is passed to void elements
-      const { children: _ignoredChildren, ...voidElementProps } = processedProps;
+      const { children: _ignored, ...voidElementProps } = processedProps;
       return h(finalTag, voidElementProps);
     }
 
-    // Build children recursively with proper component context
-    const childElements = this.buildChildren(children, {
+    // Build children
+    const childElements = this.buildChildren(children as any, {
       elementPath, parentComponentName: effectiveParentComponentName, viewportWidth, componentContext, componentRootPath,
       locale, i18nConfig, cmsContext, cmsLocale, collectionItemsMap, itemContext, cmsItemIndexPath, templateContext, componentResolvedProps
     });
+
     return h(finalTag, processedProps, childElements);
   }
 }
-