meno-core 1.0.0

package/lib/client/core/ComponentBuilder.ts

@@ -0,0 +1,660 @@
+/**
+ * Component Builder
+ * Builds React elements from component tree nodes with support for custom components,
+ * responsive styles, event handlers, and element registration.
+ */
+
+import { createElement as h } from "react";
+import type { ReactElement } from "react";
+
+// Component registry and utilities
+import { ComponentRegistry } from "../componentRegistry";
+import { processStructure } from "../templateEngine";
+import { NODE_TYPE } from "../../shared/constants";
+import { ErrorBoundary } from "../ErrorBoundary";
+import type { ComponentNode, StyleValue } from "../../shared/types";
+import { isComponentNode, extractNodeProperties, isSlotMarker, isEmbedNode, isObjectLinkNode, isLocaleListNode } from "../../shared/nodeUtils";
+import DOMPurify from "isomorphic-dompurify";
+import { mergeNodeStyles } from "../../shared/styleNodeUtils";
+import { extractAttributesFromNode } from "../../shared/attributeNodeUtils";
+import { resolvePropsFromDefinition } from "../../shared/propResolver";
+import { ElementRegistry } from "../elementRegistry";
+import type { Path } from "../../shared/pathArrayUtils";
+import type { I18nConfig } from "../../shared/types/components";
+import { DEFAULT_I18N_CONFIG } from "../../shared/i18n";
+import { getChildPath, pathToString } from "../../shared/pathArrayUtils";
+import { navigateTo } from "../navigation";
+import { responsiveStylesToClasses } from "../../shared/utilityClassMapper";
+import { processCMSTemplate, processCMSPropsTemplate } from "./cmsTemplateProcessor";
+
+type ComponentProps = Record<string, unknown>;
+
+export interface ComponentBuilderConfig {
+  componentRegistry: ComponentRegistry;
+  elementRegistry: ElementRegistry;
+}
+
+export interface BuildComponentOptions {
+  node: ComponentNode | ComponentNode[] | string | number | null | undefined;
+  key?: number;
+  customProps?: ComponentProps;
+  elementPath?: Path;
+  parentComponentName?: string | null;
+  viewportWidth?: number;
+  componentContext?: string | null;
+  locale?: string;
+  i18nConfig?: I18nConfig;
+  cmsContext?: Record<string, unknown> | null;
+  /** CMS locale for i18n field resolution */
+  cmsLocale?: string | null;
+}
+
+/**
+ * ComponentBuilder class for building React elements from component tree nodes
+ */
+export class ComponentBuilder {
+  private componentRegistry: ComponentRegistry;
+  private elementRegistry: ElementRegistry;
+
+  constructor(config: ComponentBuilderConfig) {
+    this.componentRegistry = config.componentRegistry;
+    this.elementRegistry = config.elementRegistry;
+  }
+
+  /**
+   * Helper function to create onClick handlers from JSON-defined onClick values
+   */
+  private createOnClickHandler(onClickValue: unknown): () => void {
+    return () => {
+      alert(String(onClickValue));
+    };
+  }
+
+  /**
+   * 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,
+    parentComponentName: string | null,
+    componentName: string | null
+  ): string | null {
+    return componentContext || parentComponentName || componentName || null;
+  }
+
+  /**
+   * Determines the effective parent component name when building children.
+   * Uses componentContext if available, otherwise falls back to parentComponentName.
+   */
+  private getEffectiveParentComponentName(
+    componentContext: string | null,
+    parentComponentName: string | null
+  ): string | null {
+    return componentContext || parentComponentName;
+  }
+
+  /**
+   * 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;
+    if (!nodeChildren || !Array.isArray(nodeChildren)) return null;
+
+    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;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Builds children elements recursively with proper component context tracking.
+   */
+  buildChildren(
+    children: (string | ComponentNode)[] | string | ComponentNode | undefined,
+    elementPath: Path,
+    parentComponentName: string | null,
+    viewportWidth: number,
+    componentContext: string | null,
+    locale?: string,
+    i18nConfig?: I18nConfig,
+    cmsContext?: Record<string, unknown> | null,
+    cmsLocale?: string | null
+  ): ReactElement | ReactElement[] | string | number | null {
+    if (Array.isArray(children)) {
+      return children
+        .map((child, index) =>
+          this.buildComponent({
+            node: child,
+            key: index,
+            customProps: {},
+            elementPath: getChildPath(elementPath, index),
+            parentComponentName,
+            viewportWidth,
+            componentContext,
+            locale,
+            i18nConfig,
+            cmsContext,
+            cmsLocale
+          })
+        )
+        .filter((item): item is ReactElement | string | number => item !== null) as ReactElement[];
+    }
+    return this.buildComponent({
+      node: children,
+      key: 0,
+      customProps: {},
+      elementPath: getChildPath(elementPath, 0),
+      parentComponentName,
+      viewportWidth,
+      componentContext,
+      locale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale
+    });
+  }
+
+  /**
+   * 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 {
+    const {
+      node,
+      key = 0,
+      customProps = {},
+      elementPath = [0],
+      parentComponentName = null,
+      viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920,
+      componentContext = null,
+      locale,
+      i18nConfig,
+      cmsContext = null,
+      cmsLocale = null
+    } = options;
+
+    if (!node) return null;
+
+    // Handle text nodes - process CMS templates if context is available
+    if (typeof node === 'string') {
+      if (cmsContext && node.includes('{{cms.')) {
+        // Use cmsLocale for i18n resolution if available, otherwise use page locale
+        return processCMSTemplate(node, cmsContext, cmsLocale || locale);
+      }
+      return node;
+    }
+
+    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
+        });
+      }).filter(
+        (item): item is ReactElement | string | number => item !== null
+      );
+      return result as ReactElement[];
+    }
+    
+    // Handle new format: style at top level (not props.style)
+    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)
+    if (nodeType === NODE_TYPE.EMBED && isEmbedNode(node)) {
+      // Sanitize HTML with allowlist for SVG 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'],
+        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 }
+      };
+
+      // 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;
+      }
+
+      return h('div', embedProps);
+    }
+
+    // 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)
+      };
+
+      // 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, effectiveParentComponentName, viewportWidth, componentContext, locale, i18nConfig, cmsContext, cmsLocale);
+
+      return h('div', objectLinkProps, objectLinkChildren);
+    }
+
+    // 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)
+      };
+
+      // 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
+          }));
+        }
+        linkContent.push(h('div', { key: 'text' }, localeConfig.nativeName));
+
+        // 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);
+    }
+
+    // Extract node properties based on type
+    const { tag, componentName, props: nodeProps } = extractNodeProperties(node);
+
+    // 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
+    const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height'];
+    const internalProps = ['type', 'tag', 'component', 'props', 'children', 'html', 'style', ...imageOnlyProps];
+    let 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;
+      }
+    }
+
+    // Extract styles from node and convert to utility classes
+    const nodeStyle = node.style || (isComponentNode(node) ? node.props?.style : undefined);
+
+    if (nodeStyle) {
+      // Convert style objects to utility classes
+      const utilityClasses = responsiveStylesToClasses(nodeStyle);
+      if (utilityClasses.length > 0) {
+        const existingClassName = (props.className || '') as string;
+        const classArray = existingClassName ? existingClassName.split(/\s+/) : [];
+        props.className = [...classArray, ...utilityClasses].filter(Boolean).join(' ');
+      }
+    }
+    
+    // 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
+    const extractedAttributes = extractAttributesFromNode(node);
+    if (Object.keys(extractedAttributes).length > 0) {
+      props = { ...props, ...extractedAttributes };
+    }
+    
+    // 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)
+        const resolvedProps = resolvePropsFromDefinition(
+          structuredComponentDef,
+          props,
+          children,
+          locale,
+          i18nConfig
+        );
+        
+        // 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
+        const processedStructure = processStructure(
+          structuredComponentDef.structure,
+          { props: resolvedProps, componentDef: structuredComponentDef },
+          viewportWidth,
+          children
+        );
+        
+        // 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,
+          locale,
+          i18nConfig,
+          cmsContext,
+          cmsLocale
+        });
+        return h(ErrorBoundary, {
+          key,
+          componentName: componentName,
+          level: 'component',
+        }, componentElement);
+        
+      } catch (error) {
+        return h(ErrorBoundary, {
+          key,
+          componentName: tag,
+          level: 'component',
+        }, null);
+      }
+    }
+
+    // Handle Link component for navigation (only for HTML nodes)
+    if (tag === 'Link') {
+      const { to, ...restProps } = props;
+      const href = typeof to === 'string' ? to : '#';
+      
+      // Use effective parent component name for consistency with regular HTML elements
+      const effectiveParentComponentName = this.getEffectiveParentComponentName(componentContext, parentComponentName);
+      
+      // Navigation click handler
+      const navigationOnClick = (e: any) => {
+        e.preventDefault();
+        if (typeof to === 'string' && to) {
+          navigateTo(to);
+        }
+      };
+
+      return h('a', {
+        ...restProps,
+        key,
+        href,
+        // Add data attributes for selection overlay
+        'data-element-path': pathToString(elementPath),
+        // 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) => this.elementRegistry.register(elementPath, el, effectiveParentComponentName, false),
+        onClick: navigationOnClick,
+        style: {
+          textDecoration: 'none',
+          color: '#0070f3',
+          cursor: 'pointer',
+          ...(props.style && typeof props.style === 'object' ? props.style : {}),
+        }
+      }, this.buildChildren(children, elementPath, effectiveParentComponentName, viewportWidth, componentContext, locale, i18nConfig, cmsContext, cmsLocale));
+    }
+
+    // Prepare element props
+    // Remove __componentProps from customProps before spreading (it's only for registry, not DOM)
+    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
+    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 (isComponentRoot) el.setAttribute('data-component-root', 'true');
+        if (parentComponentName) el.setAttribute('data-parent-component', parentComponentName);
+        if (componentContext) el.setAttribute('data-component-context', componentContext);
+      }
+
+      // 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
+      };
+
+      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;
+    }
+
+    // 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
+    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;
+      return h(finalTag, voidElementProps);
+    }
+
+    // Build children recursively with proper component context
+    const childElements = this.buildChildren(children, elementPath, effectiveParentComponentName, viewportWidth, componentContext, locale, i18nConfig, cmsContext, cmsLocale);
+    return h(finalTag, processedProps, childElements);
+  }
+}
+