meno-core 1.0.0

package/lib/client/templateEngine.ts

@@ -0,0 +1,667 @@
+/**
+ * Template Engine
+ * Handles template evaluation with {{expression}} syntax and style mappings
+ */
+
+import type { StyleMapping, ComponentDefinition, StructuredComponentDefinition, ComponentNode, HtmlNode, ComponentInstanceNode, EmbedNode, StyleObject, ResponsiveStyleObject, StyleValue, TemplateContext } from '../shared/types';
+import { isResponsiveStyle } from '../shared/styleUtils';
+import { normalizeStyle as normalizeStyleShared, mergeResponsiveStyles } from '../shared/responsiveStyleUtils';
+import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
+import { NODE_TYPE } from '../shared/constants';
+import { isValidNodeType, isComponentNode, isHtmlNode, isSlotMarker, isEmbedNode, isLocaleListNode, isObjectLinkNode } from '../shared/nodeUtils';
+import { applyStylesToNode } from '../shared/styleNodeUtils';
+
+// Re-export for backward compatibility
+export { isResponsiveStyle };
+
+/**
+ * Normalize a style value - if it's responsive, merge it; if it's flat, return as-is
+ * Uses 'all' strategy for editor compatibility (merges all breakpoints)
+ */
+export function normalizeStyle(style: StyleValue | null | undefined): StyleObject | null {
+  return normalizeStyleShared(style, 'all');
+}
+
+/**
+ * Helper to add a processed item to an array, handling both single items and arrays
+ * Converts numbers to strings to match ComponentNode['children'] type
+ */
+function addProcessedItemToArray(
+  item: ComponentNode | ComponentNode[] | string | number | null,
+  array: Array<ComponentNode | string>
+): void {
+  if (item === null) return;
+  
+  if (Array.isArray(item)) {
+    array.push(...item);
+  } else if (typeof item === 'number') {
+    // Convert numbers to strings to match ComponentNode['children'] type
+    array.push(String(item));
+  } else {
+    array.push(item as ComponentNode | string);
+  }
+}
+
+/**
+ * Link mapping interface for object-link nodes
+ */
+export interface LinkMapping {
+  _mapping: true;
+  prop: string;
+  values?: Record<string, { href: string; target?: string }>;
+}
+
+/**
+ * Type guard for link mappings
+ */
+export function isLinkMapping(value: unknown): value is LinkMapping {
+  if (!value || typeof value !== 'object') return false;
+  const obj = value as Record<string, unknown>;
+  // values is optional - when empty/missing, acts as passthrough for link-type props
+  return obj._mapping === true && typeof obj.prop === 'string' && (obj.values === undefined || typeof obj.values === 'object');
+}
+
+/**
+ * Resolves a link mapping object to its actual value based on current props
+ *
+ * Supports two modes:
+ * 1. Value mapping: Maps a prop value to a predefined link object
+ *    { _mapping: true, prop: "variant", values: { primary: { href: "/products" } } }
+ *
+ * 2. Passthrough: When values is empty/missing, uses the prop directly if it's a link object
+ *    { _mapping: true, prop: "link" } - uses props.link directly
+ *
+ * @example
+ * // Value mapping
+ * resolveLinkMapping(
+ *   { _mapping: true, prop: "variant", values: { primary: { href: "/products" } } },
+ *   { variant: "primary" }
+ * ) // { href: "/products" }
+ *
+ * @example
+ * // Passthrough mode
+ * resolveLinkMapping(
+ *   { _mapping: true, prop: "link" },
+ *   { link: { href: "/about", target: "_blank" } }
+ * ) // { href: "/about", target: "_blank" }
+ */
+export function resolveLinkMapping(
+  mappingObj: unknown,
+  props: Record<string, unknown> | undefined
+): { href: string; target?: string } | undefined {
+  if (!isLinkMapping(mappingObj)) {
+    return undefined;
+  }
+
+  // Guard against undefined props
+  if (!props) {
+    return undefined;
+  }
+
+  const { prop, values } = mappingObj;
+  const propValue = props[prop];
+  if (propValue === undefined || propValue === null) {
+    return undefined;
+  }
+
+  // Passthrough mode: if prop value is already a link object, use it directly
+  if (typeof propValue === 'object' && propValue !== null && 'href' in propValue) {
+    return propValue as { href: string; target?: string };
+  }
+
+  // Value mapping mode: look up the prop value in the values map
+  if (values) {
+    const mappedValue = values[String(propValue)];
+    return mappedValue;
+  }
+
+  return undefined;
+}
+
+/**
+ * Resolves a style mapping object to its actual value based on current props
+ *
+ * @example
+ * resolveStyleMapping(
+ *   { _mapping: true, prop: "variant", values: { primary: "#0070f3", secondary: "#f3f4f6" } },
+ *   { variant: "primary" }
+ * ) // "#0070f3"
+ */
+export function resolveStyleMapping(
+  mappingObj: unknown,
+  props: Record<string, unknown> | undefined
+): string | number | undefined {
+  if (!mappingObj || typeof mappingObj !== 'object') {
+    return undefined;
+  }
+
+  const mapping = mappingObj as StyleMapping;
+  if (!mapping || !mapping._mapping) {
+    return undefined;
+  }
+
+  const { prop, values } = mapping;
+  if (!prop || !values || typeof values !== 'object') {
+    return undefined;
+  }
+
+  // Guard against undefined props
+  if (!props) {
+    return undefined;
+  }
+
+  const propValue = props[prop];
+  if (propValue === undefined || propValue === null) {
+    return undefined;
+  }
+
+  const mappedValue = values[String(propValue)];
+  return mappedValue !== undefined ? mappedValue : undefined;
+}
+
+/**
+ * Evaluates a template string with the given context
+ * Template format: {{expression}}
+ * Handles undefined variables gracefully by returning undefined instead of throwing
+ * 
+ * @example
+ * evaluateTemplate("{{name}}", { name: "John" }) // "John"
+ * evaluateTemplate("{{count + 1}}", { count: 5 }) // 6
+ * evaluateTemplate("{{undefinedVar}}", {}) // undefined (no error thrown)
+ */
+export function evaluateTemplate(
+  template: string,
+  context: Record<string, unknown>
+): unknown {
+  if (typeof template !== 'string') return template;
+  
+  const templateMatch = template.match(/^\{\{(.+)\}\}$/);
+  if (!templateMatch) return template;
+  
+  const expression = templateMatch[1].trim();
+  
+  try {
+    // Create function with context variables as parameters
+    // Wrap in try-catch to handle undefined variables gracefully
+    const func = new Function(
+      ...Object.keys(context),
+      `
+      try {
+        return ${expression};
+      } catch (e) {
+        if (e instanceof ReferenceError) {
+          return undefined;
+        }
+        throw e;
+      }
+    `
+    );
+    const result = func(...Object.values(context));
+    // If result is undefined (ReferenceError or actual undefined), return template string for backward compatibility
+    return result === undefined ? template : result;
+  } catch (error) {
+    console.error('Template evaluation error:', error, 'Expression:', expression, 'Context:', context);
+    // Return original template string on error for backward compatibility
+    return template;
+  }
+}
+
+/**
+ * Checks if a code string contains any template patterns {{...}}
+ */
+export function hasTemplates(code: string): boolean {
+  if (typeof code !== 'string') return false;
+  return /\{\{[^}]+\}\}/.test(code);
+}
+
+/**
+ * Processes template strings in JavaScript or CSS code
+ * Replaces {{propName}} or {{expression}} with evaluated values
+ * 
+ * @example
+ * processCodeTemplates("console.log('{{name}}');", { name: "John" })
+ * // "console.log('John');"
+ * 
+ * processCodeTemplates(".card { color: {{color}}; }", { color: "#ff0000" })
+ * // ".card { color: #ff0000; }"
+ */
+export function processCodeTemplates(
+  code: string,
+  context: Record<string, unknown> | undefined
+): string {
+  if (typeof code !== 'string') return code;
+
+  // Guard against undefined context
+  if (!context) {
+    return code;
+  }
+
+  // Match all {{...}} patterns in the code
+  return code.replace(/\{\{([^}]+)\}\}/g, (match, expression) => {
+    const trimmedExpr = expression.trim();
+
+    try {
+      // Filter context keys to only valid JavaScript identifiers
+      const validIdentifierPattern = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+      const validKeys = Object.keys(context).filter(key => validIdentifierPattern.test(key));
+      const validValues = validKeys.map(key => context[key]);
+
+      // Create a function that evaluates the expression with valid context
+      const func = new Function(...validKeys, `return ${trimmedExpr}`);
+      const result = func(...validValues);
+
+      // Convert result to string, handling various types
+      if (result === null || result === undefined) {
+        return '';
+      }
+      if (typeof result === 'string') {
+        return result;
+      }
+      if (typeof result === 'number' || typeof result === 'boolean') {
+        return String(result);
+      }
+      // For objects/arrays, stringify them
+      return JSON.stringify(result);
+    } catch (error) {
+      // ReferenceError means a variable (like cms) isn't available yet
+      // Return empty string for graceful degradation during loading
+      if (error instanceof ReferenceError) {
+        return '';
+      }
+      console.error('Code template evaluation error:', error, 'Expression:', trimmedExpr, 'Context:', context);
+      // Return original template if evaluation fails
+      return match;
+    }
+  });
+}
+
+/**
+ * Processes a component structure recursively, evaluating templates
+ * @param context - Template context containing props, componentDef, and extensible namespaces (e.g., cms, page)
+ * @param viewportWidth - Optional viewport width for responsive style resolution. If provided, uses 'viewport' strategy; otherwise uses 'all' strategy.
+ * @param instanceChildren - Optional children from component instance to replace { type: "children" } markers
+ */
+export function processStructure(
+  structure: ComponentNode | ComponentNode[] | string | number | null | undefined,
+  context: TemplateContext,
+  viewportWidth?: number,
+  instanceChildren?: ComponentNode['children'],
+  preserveResponsiveStyles: boolean = false
+): ComponentNode | ComponentNode[] | string | number | null {
+  try {
+    // Handle null/undefined
+    if (structure === null || structure === undefined) return null;
+
+    // Preserve boolean values (don't convert false to null)
+    if (typeof structure === 'boolean') {
+      return structure as any;
+    }
+
+    if (typeof structure === 'string') {
+      // Build evaluation context from TemplateContext
+      // Start with props, then merge componentDef for backward compatibility
+      const evalContext: Record<string, unknown> = { ...context.props };
+
+      // Add componentDef properties to context (for backward compatibility)
+      if (context.componentDef && typeof context.componentDef === 'object') {
+        Object.assign(evalContext, context.componentDef as Record<string, unknown>);
+      }
+      // Future: Add context.cms, context.page, etc.
+
+      // Check if entire string is a complete template {{expr}}
+      // Use evaluateTemplate to preserve type (objects, arrays, numbers)
+      if (/^\{\{.+\}\}$/.test(structure)) {
+        const result = evaluateTemplate(structure, evalContext);
+        if (typeof result === 'string' || typeof result === 'number') {
+          return result;
+        }
+        if (result === undefined || result === null) {
+          return '';
+        }
+        return String(result);
+      }
+
+      // Check if string contains partial templates like "heading-{{size}}"
+      // Use processCodeTemplates for string interpolation
+      if (hasTemplates(structure)) {
+        return processCodeTemplates(structure, evalContext);
+      }
+
+      // No templates - return as-is
+      return structure;
+    }
+    
+    if (Array.isArray(structure)) {
+      const processed: Array<ComponentNode | string> = [];
+      for (const item of structure) {
+        // Check if this is a slot marker
+        if (isSlotMarker(item)) {
+          // Replace marker with instance children (if provided)
+          if (instanceChildren) {
+            const childrenArray = Array.isArray(instanceChildren) ? instanceChildren : [instanceChildren];
+            for (const child of childrenArray) {
+              const processedChild = processStructure(child, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+              addProcessedItemToArray(processedChild, processed);
+            }
+          }
+          // If no instance children, marker renders nothing (skip it)
+        } else {
+          // Regular item - process normally
+          const processedItem = processStructure(item, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+          addProcessedItemToArray(processedItem, processed);
+        }
+      }
+      return processed;
+    }
+    
+    if (typeof structure === 'object' && !Array.isArray(structure) && structure !== null) {
+      // Check if this is a slot marker (shouldn't happen here since we handle it in array processing, but guard anyway)
+      if (isSlotMarker(structure)) {
+        // This shouldn't happen in object processing, but if it does, return instance children
+        if (instanceChildren) {
+          const processed: Array<ComponentNode | string> = [];
+          const childrenArray = Array.isArray(instanceChildren) ? instanceChildren : [instanceChildren];
+          for (const child of childrenArray) {
+            const processedChild = processStructure(child, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+            addProcessedItemToArray(processedChild, processed);
+          }
+          return processed.length === 1 ? processed[0] : processed;
+        }
+        return null;
+      }
+      
+      // Preserve type from input structure, default to "node" if not present or invalid
+      const inputNode = structure as ComponentNode;
+      const preservedType = inputNode.type && isValidNodeType(inputNode.type)
+        ? inputNode.type
+        : NODE_TYPE.NODE;
+
+      // Create base processed object based on type
+      let processed: ComponentNode;
+      if (preservedType === NODE_TYPE.COMPONENT) {
+        processed = {
+          type: NODE_TYPE.COMPONENT,
+          component: '',
+          props: {},
+          children: [] as Array<ComponentNode | string>
+        } as ComponentInstanceNode;
+      } else if (preservedType === NODE_TYPE.EMBED) {
+        // Handle embed nodes - they have html content, not children
+        processed = {
+          type: NODE_TYPE.EMBED,
+          html: '',
+        } as any;
+      } else if (preservedType === NODE_TYPE.OBJECT_LINK) {
+        // Handle object-link nodes - they have href property
+        processed = {
+          type: NODE_TYPE.OBJECT_LINK,
+          href: '',
+          children: [] as Array<ComponentNode | string>
+        } as any;
+      } else if (preservedType === NODE_TYPE.LOCALE_LIST) {
+        // Handle locale-list nodes - they have style, itemStyle, activeItemStyle properties
+        processed = {
+          type: NODE_TYPE.LOCALE_LIST,
+        } as any;
+      } else {
+        processed = {
+          type: NODE_TYPE.NODE,
+          tag: 'div',
+          children: [] as Array<ComponentNode | string>
+        } as HtmlNode;
+      }
+      
+      // First pass: process all keys and resolve style mappings
+      let resolvedStyle: Record<string, string | number> | null = null;
+      
+      for (const [key, value] of Object.entries(structure)) {
+        try {
+          if (key === 'children') {
+            const processedChildren = processStructure(value, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+            if (Array.isArray(processedChildren)) {
+              processed.children = processedChildren;
+            } else if (processedChildren !== null && processedChildren !== undefined) {
+              processed.children = [processedChildren as ComponentNode | string];
+            }
+          } else if (key === 'tag') {
+            if (isHtmlNode(processed)) {
+              if (typeof value === 'string') {
+                // Process template in tag (e.g., "h{{size}}" -> "h1")
+                const evalContext: Record<string, unknown> = { ...context.props };
+                if (context.componentDef && typeof context.componentDef === 'object') {
+                  Object.assign(evalContext, context.componentDef as Record<string, unknown>);
+                }
+                // Use processCodeTemplates to handle partial templates like "h{{size}}"
+                processed.tag = processCodeTemplates(value, evalContext);
+              } else {
+                processed.tag = String(value);
+              }
+            }
+          } else if (key === 'component') {
+            if (isComponentNode(processed)) {
+              if (typeof value === 'string') {
+                processed.component = value;
+              } else {
+                processed.component = String(value);
+              }
+            }
+          } else if (key === 'html') {
+            // Handle html property for embed nodes
+            if (preservedType === NODE_TYPE.EMBED) {
+              if (typeof value === 'string') {
+                (processed as any).html = value;
+              } else {
+                (processed as any).html = String(value);
+              }
+            }
+          } else if (key === 'type') {
+            // Preserve type field if valid - but don't change the structure type
+            if (typeof value === 'string' && isValidNodeType(value)) {
+              // Only update if type actually changed
+              if (value === NODE_TYPE.COMPONENT && !isComponentNode(processed)) {
+                // Convert to component node
+                const newProcessed: ComponentInstanceNode = {
+                  type: NODE_TYPE.COMPONENT,
+                  component: '',
+                  props: (processed as any).props || {},
+                  children: processed.children,
+                  style: processed.style
+                };
+                processed = newProcessed;
+              } else if (value === NODE_TYPE.NODE && !isHtmlNode(processed)) {
+                // Convert to HTML node
+                const newProcessed: HtmlNode = {
+                  type: NODE_TYPE.NODE,
+                  tag: (processed as any).component || 'div',
+                  children: processed.children,
+                  style: processed.style
+                };
+                processed = newProcessed;
+              }
+            }
+          } else if (key === 'style' && typeof value === 'object' && value !== null) {
+            // Process style at top level - DO NOT recursively call processStructure
+            // as it would mangle style mapping objects { _mapping: true, prop: "size", values: {...} }
+            // into ComponentNode structures. Style objects need special handling.
+            const processedStyle = value as Record<string, unknown>;
+            if (processedStyle && typeof processedStyle === 'object' && !Array.isArray(processedStyle)) {
+              // Check if it's a responsive style object
+              if (isResponsiveStyle(processedStyle)) {
+                if (preserveResponsiveStyles) {
+                  // Preserve responsive styles as-is (for SSR)
+                  // Just resolve templates and mappings within each breakpoint
+                  const resolvedResponsive: ResponsiveStyleObject = {};
+                  for (const [bkeyName, bkeyValue] of Object.entries(processedStyle)) {
+                    if (typeof bkeyValue === 'object' && bkeyValue !== null) {
+                      resolvedResponsive[bkeyName] = {};
+                      for (const [styleKey, styleValue] of Object.entries(bkeyValue)) {
+                        const resolved = resolveStyleMapping(styleValue, context.props);
+                        if (resolved !== undefined) {
+                          resolvedResponsive[bkeyName]![styleKey] = resolved;
+                        } else if (typeof styleValue === 'string') {
+                          if (hasTemplates(styleValue)) {
+                            const evaluated = processCodeTemplates(styleValue, context.props);
+                            resolvedResponsive[bkeyName]![styleKey] = evaluated;
+                          } else {
+                            resolvedResponsive[bkeyName]![styleKey] = styleValue;
+                          }
+                        } else if (typeof styleValue === 'number') {
+                          resolvedResponsive[bkeyName]![styleKey] = styleValue;
+                        }
+                      }
+                    }
+                  }
+                  resolvedStyle = resolvedResponsive as StyleObject;
+                } else {
+                  // Preserve responsive styles for editor (same as SSR)
+                  // responsiveStylesToClasses will generate prefixed classes (t-, mob-)
+                  // CSS media queries will handle displaying the correct styles based on viewport
+                  const resolvedResponsive: ResponsiveStyleObject = {};
+                  for (const [bkeyName, bkeyValue] of Object.entries(processedStyle)) {
+                    if (typeof bkeyValue === 'object' && bkeyValue !== null) {
+                      resolvedResponsive[bkeyName] = {};
+                      for (const [styleKey, styleValue] of Object.entries(bkeyValue)) {
+                        const resolved = resolveStyleMapping(styleValue, context.props);
+                        if (resolved !== undefined) {
+                          resolvedResponsive[bkeyName]![styleKey] = resolved;
+                        } else if (typeof styleValue === 'string') {
+                          if (hasTemplates(styleValue)) {
+                            const evaluated = processCodeTemplates(styleValue, context.props);
+                            resolvedResponsive[bkeyName]![styleKey] = evaluated;
+                          } else {
+                            resolvedResponsive[bkeyName]![styleKey] = styleValue;
+                          }
+                        } else if (typeof styleValue === 'number') {
+                          resolvedResponsive[bkeyName]![styleKey] = styleValue;
+                        }
+                      }
+                    }
+                  }
+                  resolvedStyle = resolvedResponsive as StyleObject;
+                }
+              } else {
+                // Legacy flat style object - resolve mappings and evaluate templates
+                resolvedStyle = {};
+                for (const [styleKey, styleValue] of Object.entries(processedStyle)) {
+                  // First resolve style mappings
+                  const resolved = resolveStyleMapping(styleValue, context.props);
+                  if (resolved !== undefined) {
+                    resolvedStyle[styleKey] = resolved;
+                  } else if (typeof styleValue === 'string') {
+                    // Evaluate template strings in style values (supports partial templates like "{{size}}px")
+                    // Use processCodeTemplates to handle templates with text before/after
+                    if (hasTemplates(styleValue)) {
+                      const evaluated = processCodeTemplates(styleValue, context.props);
+                      resolvedStyle[styleKey] = evaluated;
+                    } else {
+                      // No templates, keep original value
+                      resolvedStyle[styleKey] = styleValue;
+                    }
+                  } else if (typeof styleValue === 'number') {
+                    resolvedStyle[styleKey] = styleValue;
+                  }
+                }
+              }
+            }
+          } else if (key === 'props' && typeof value === 'object' && value !== null) {
+            // Process non-style props (for instance props only)
+            const processedProps = processStructure(value, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+            // Merge non-style props (style is handled separately at top level)
+            if (typeof processedProps === 'object' && !Array.isArray(processedProps) && processedProps !== null && processed.props) {
+              const propsObj = processedProps as unknown as Record<string, unknown>;
+              Object.assign(processed.props, propsObj);
+              // Remove style from props since we handle it at top level
+              if (processed.props) {
+                delete processed.props.style;
+              }
+            }
+          } else if (key === 'hover') {
+            // Skip hover for now - it's not a standard React prop
+            // Could be implemented with onMouseEnter/onMouseLeave
+          } else if (key === 'href' && preservedType === NODE_TYPE.OBJECT_LINK) {
+            // Special handling for href in object-link nodes - resolve link mappings
+            if (isLinkMapping(value)) {
+              const resolved = resolveLinkMapping(value, context.props);
+              if (resolved) {
+                (processed as any).href = resolved.href;
+                if (resolved.target) {
+                  (processed as any).attributes = {
+                    ...((processed as any).attributes || {}),
+                    target: resolved.target
+                  };
+                }
+              } else {
+                (processed as any).href = '#';
+              }
+            } else {
+              // Regular href value - process as template
+              const processedValue = processStructure(value, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+              if (processedValue !== null && processedValue !== undefined) {
+                (processed as any).href = processedValue;
+              }
+            }
+          } else if (key === 'attributes' && typeof value === 'object' && value !== null) {
+            // Special handling for attributes - process templates but don't treat as node structure
+            // This preserves type="checkbox" etc. which would otherwise be caught by node type handling
+            const processedAttributes: Record<string, unknown> = {};
+            const evalContext: Record<string, unknown> = { ...context.props };
+            if (context.componentDef && typeof context.componentDef === 'object') {
+              Object.assign(evalContext, context.componentDef as Record<string, unknown>);
+            }
+            for (const [attrKey, attrValue] of Object.entries(value)) {
+              if (typeof attrValue === 'string' && hasTemplates(attrValue)) {
+                // Check if entire string is a complete template {{expr}} - preserve type (boolean, number)
+                if (/^\{\{.+\}\}$/.test(attrValue)) {
+                  const result = evaluateTemplate(attrValue, evalContext);
+                  // Keep the original type (boolean, number, string)
+                  processedAttributes[attrKey] = result === attrValue ? attrValue : result;
+                } else {
+                  // Partial template like "prefix-{{value}}" - always string
+                  processedAttributes[attrKey] = processCodeTemplates(attrValue, evalContext);
+                }
+              } else {
+                processedAttributes[attrKey] = attrValue;
+              }
+            }
+            (processed as unknown as Record<string, unknown>).attributes = processedAttributes;
+          } else if (key !== 'type' && key !== 'children' && key !== 'style' && key !== 'props') {
+            const processedValue = processStructure(value, context, viewportWidth, instanceChildren, preserveResponsiveStyles);
+            // Only assign if it's a valid value
+            if (processedValue !== null && processedValue !== undefined) {
+              // Store extra properties on the node object
+              (processed as unknown as Record<string, unknown>)[key] = processedValue;
+            }
+          }
+        } catch (error) {
+          console.error(`Error processing key "${key}":`, error);
+          // Continue processing other keys
+        }
+      }
+      
+      // Apply resolved styles to the processed node based on its type
+      // Both SSR and Editor now preserve responsive styles for proper utility class generation
+      if (resolvedStyle && Object.keys(resolvedStyle).length > 0) {
+        if (isResponsiveStyle(resolvedStyle)) {
+          // Apply responsive styles directly to node.style or props.style
+          if (isComponentNode(processed)) {
+            processed.props = processed.props || {};
+            processed.props.style = resolvedStyle as ResponsiveStyleObject;
+          } else if (isHtmlNode(processed) || isEmbedNode(processed) || isLocaleListNode(processed) || isObjectLinkNode(processed)) {
+            processed.style = resolvedStyle as ResponsiveStyleObject;
+          }
+        } else {
+          // Legacy flat style object
+          applyStylesToNode(processed, resolvedStyle);
+        }
+      }
+      
+      return processed;
+    }
+    
+    return structure;
+  } catch (error) {
+    console.error('Error in processStructure:', error);
+    throw error; // Re-throw so it can be caught by error boundary
+  }
+}
+