meno-core 1.0.38 → 1.0.39

package/lib/server/astro/nodeToAstro.ts

@@ -0,0 +1,771 @@
+/**
+ * Core converter: ComponentNode → Astro template markup
+ * Recursively walks JSON node trees and emits Astro template syntax.
+ */
+
+import type {
+  ComponentNode,
+  ComponentDefinition,
+  StructuredComponentDefinition,
+  PropDefinition,
+  HtmlNode,
+  ComponentInstanceNode,
+  SlotMarker,
+  EmbedNode,
+  LinkNode,
+  LocaleListNode,
+} from '../../shared/types';
+import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
+import type {
+  StyleObject,
+  ResponsiveStyleObject,
+  StyleMapping,
+  InteractiveStyles,
+  LinkMapping,
+  HtmlMapping,
+} from '../../shared/types/styles';
+import { responsiveStylesToTailwind, propertyToTailwind } from './tailwindMapper';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import { generateElementClassName, type ElementClassContext } from '../../shared/elementClassName';
+import { isVoidElement } from '../../shared/nodeUtils';
+import { NODE_TYPE } from '../../shared/constants';
+import { extractInteractiveStyleMappings, hasInteractiveStyleMappings } from '../../shared/interactiveStyleMappings';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AstroEmitContext {
+  /** Component names collected for import statements */
+  imports: Set<string>;
+  /** true = inside component definition (use prop refs) */
+  isComponentDef: boolean;
+  /** Available props when in component */
+  componentProps: Record<string, PropDefinition>;
+  /** All global components */
+  globalComponents: Record<string, ComponentDefinition>;
+  /** Current indentation level */
+  indent: number;
+  /** node path → SSR HTML for complex nodes */
+  ssrFallbacks: Map<string, string>;
+  /** Current element path for element class generation */
+  elementPath: number[];
+  /** File type for element class context */
+  fileType: 'component' | 'page';
+  /** File name for element class context */
+  fileName: string;
+  /** Breakpoint config for responsive Tailwind classes */
+  breakpoints: BreakpointConfig;
+  /** Dynamic tag definitions collected during traversal (for frontmatter) */
+  dynamicTags?: Map<string, string>;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function ind(ctx: AstroEmitContext): string {
+  return '  '.repeat(ctx.indent);
+}
+
+function isStyleMapping(value: unknown): value is StyleMapping {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '_mapping' in value &&
+    (value as StyleMapping)._mapping === true
+  );
+}
+
+function isLinkMapping(value: unknown): value is LinkMapping {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '_mapping' in value &&
+    (value as LinkMapping)._mapping === true
+  );
+}
+
+function isHtmlMapping(value: unknown): value is HtmlMapping {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '_mapping' in value &&
+    (value as HtmlMapping)._mapping === true
+  );
+}
+
+function isResponsiveStyle(
+  style: StyleObject | ResponsiveStyleObject
+): style is ResponsiveStyleObject {
+  return 'base' in style || 'tablet' in style || 'mobile' in style;
+}
+
+/**
+ * Escape a string for use in Astro JSX attribute
+ */
+function escapeJSX(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/**
+ * Escape a string for use inside a JS template literal
+ */
+function escapeTemplateLiteral(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+
+/**
+ * Get all style mappings from a style value, collecting { prop, property, values } tuples
+ */
+function collectStyleMappings(
+  style: StyleObject | ResponsiveStyleObject | undefined
+): Array<{ property: string; mapping: StyleMapping; breakpoint?: string }> {
+  if (!style) return [];
+  const result: Array<{ property: string; mapping: StyleMapping; breakpoint?: string }> = [];
+
+  if (isResponsiveStyle(style)) {
+    const responsive = style as ResponsiveStyleObject;
+    for (const [bp, bpStyle] of Object.entries(responsive)) {
+      if (!bpStyle) continue;
+      for (const [prop, value] of Object.entries(bpStyle)) {
+        if (isStyleMapping(value)) {
+          result.push({ property: prop, mapping: value, breakpoint: bp });
+        }
+      }
+    }
+  } else {
+    for (const [prop, value] of Object.entries(style)) {
+      if (isStyleMapping(value)) {
+        result.push({ property: prop, mapping: value });
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Convert a style mapping to class:list conditional entries.
+ * For each value in the mapping, generates the utility class name and a ternary.
+ */
+function mappingToClassListEntries(
+  mapping: StyleMapping,
+  property: string,
+  breakpointPrefix: string,
+  ctx: AstroEmitContext
+): string[] {
+  const entries: string[] = [];
+  const values = Object.entries(mapping.values);
+  if (values.length === 0) return entries;
+
+  // Generate utility class for each possible value
+  const propRef = ctx.isComponentDef ? mapping.prop : mapping.prop;
+
+  if (values.length === 2) {
+    const [[val1, css1], [val2, css2]] = values;
+    // Generate Tailwind classes for each possible mapping value
+    const cls1 = getClassForValue(property, css1, breakpointPrefix);
+    const cls2 = getClassForValue(property, css2, breakpointPrefix);
+    if (cls1 && cls2) {
+      entries.push(`${propRef} === ${JSON.stringify(coerceValue(val1))} ? '${cls1}' : '${cls2}'`);
+    }
+  } else {
+    // Multiple values: use a lookup object or multiple ternaries
+    for (const [val, cssValue] of values) {
+      const cls = getClassForValue(property, cssValue, breakpointPrefix);
+      if (cls) {
+        entries.push(`${propRef} === ${JSON.stringify(coerceValue(val))} && '${cls}'`);
+      }
+    }
+  }
+
+  return entries;
+}
+
+/**
+ * Convert a mapping key to the right JS type (booleans stay booleans)
+ */
+function coerceValue(val: string): string | boolean {
+  if (val === 'true') return true as any;
+  if (val === 'false') return false as any;
+  return val;
+}
+
+/**
+ * Generate a Tailwind class name for a single property:value pair
+ */
+function getClassForValue(
+  property: string,
+  value: string | number,
+  breakpointPrefix: string
+): string | null {
+  const twClass = propertyToTailwind(property, value);
+  if (!twClass) return null;
+  return breakpointPrefix ? `${breakpointPrefix}${twClass}` : twClass;
+}
+
+/**
+ * Build the class list for a node, handling static Tailwind classes and mapping-based conditionals.
+ * Also returns a style attribute string for dynamic (template-expression) styles.
+ */
+function buildClassAndStyleExpression(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  interactiveStyles: InteractiveStyles | undefined,
+  elementClass: string | null,
+  ctx: AstroEmitContext
+): { classExpr: string; styleAttr: string } {
+  // Static Tailwind classes from non-mapping styles
+  const result = style
+    ? responsiveStylesToTailwind(style, ctx.breakpoints)
+    : { classes: [], dynamicStyles: {} };
+  const staticClasses = result.classes;
+  const dynamicStyles = result.dynamicStyles;
+
+  // Add element class for interactive styles
+  if (elementClass) {
+    staticClasses.unshift(elementClass);
+  }
+
+  // Collect mapping-based conditionals
+  const conditionals: string[] = [];
+  const mappings = collectStyleMappings(style);
+
+  for (const { property, mapping, breakpoint } of mappings) {
+    const bpValue = breakpoint === 'tablet'
+      ? ctx.breakpoints.tablet?.breakpoint ?? 1024
+      : breakpoint === 'mobile'
+        ? ctx.breakpoints.mobile?.breakpoint ?? 540
+        : 0;
+    const prefix = bpValue ? `max-[${bpValue}px]:` : '';
+    const entries = mappingToClassListEntries(mapping, property, prefix, ctx);
+    conditionals.push(...entries);
+  }
+
+  // Build style attribute for dynamic (template expression) styles
+  let styleAttr = '';
+  if (Object.keys(dynamicStyles).length > 0 && ctx.isComponentDef) {
+    const styleParts: string[] = [];
+    for (const [cssProp, value] of Object.entries(dynamicStyles)) {
+      // Convert {{propName}} to Astro expression in style
+      const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+      styleParts.push(`${cssProp}: \${${resolved.includes('${') ? resolved.replace(/\$\{(.+?)\}/g, '$1') : `'${resolved}'`}}`);
+    }
+    // Build as template literal style attribute
+    const entries: string[] = [];
+    for (const [cssProp, value] of Object.entries(dynamicStyles)) {
+      const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+      entries.push(`${cssProp}: ${resolved}`);
+    }
+    styleAttr = ` style={\`${entries.join('; ')}\`}`;
+  }
+
+  // Handle interactive style mappings: emit --is-N CSS variables as inline style
+  if (interactiveStyles && interactiveStyles.length > 0 && ctx.isComponentDef && hasInteractiveStyleMappings(interactiveStyles)) {
+    const { mappings } = extractInteractiveStyleMappings(interactiveStyles);
+    if (mappings.length > 0) {
+      // Group mappings by prop for efficient ternary generation
+      const varParts: string[] = [];
+      for (const extracted of mappings) {
+        const { mapping, variableIndex } = extracted;
+        const varName = `--is-${variableIndex}`;
+        const entries = Object.entries(mapping.values);
+
+        if (entries.length === 2) {
+          const [[val1, css1], [val2, css2]] = entries;
+          varParts.push(`'${varName}': ${mapping.prop} === ${JSON.stringify(coerceValue(val1))} ? '${css1}' : '${css2}'`);
+        } else {
+          // Build a lookup object inline
+          const lookupEntries = entries
+            .filter(([, v]) => v !== '')
+            .map(([k, v]) => `${JSON.stringify(coerceValue(k))}: '${v}'`)
+            .join(', ');
+          varParts.push(`'${varName}': ({${lookupEntries}})[${mapping.prop}] || ''`);
+        }
+      }
+
+      // Merge with existing dynamic styles
+      if (varParts.length > 0) {
+        const existingStyleParts = styleAttr
+          ? styleAttr.replace(/^ style=\{`/, '').replace(/`\}$/, '')
+          : '';
+        const varStyleExpr = varParts.join(', ');
+        if (existingStyleParts) {
+          styleAttr = ` style={\`${existingStyleParts}; \${ Object.entries({${varStyleExpr}}).map(([k,v]) => \`\${k}:\${v}\`).join(';') }\`}`;
+        } else {
+          styleAttr = ` style={Object.entries({${varStyleExpr}}).map(([k,v]) => \`\${k}:\${v}\`).join(';')}`;
+        }
+      }
+    }
+  }
+
+  let classExpr: string;
+  if (conditionals.length === 0) {
+    // Pure static classes
+    if (staticClasses.length === 0) {
+      classExpr = '';
+    } else {
+      classExpr = ` class="${staticClasses.join(' ')}"`;
+    }
+  } else {
+    // Use class:list with both static and dynamic
+    const parts: string[] = [];
+    if (staticClasses.length > 0) {
+      parts.push(`'${staticClasses.join(' ')}'`);
+    }
+    parts.push(...conditionals);
+    classExpr = ` class:list={[${parts.join(', ')}]}`;
+  }
+
+  return { classExpr, styleAttr };
+}
+
+/**
+ * Convert {{propName}} template to Astro expression
+ */
+function resolveTemplate(text: string, ctx: AstroEmitContext): string {
+  if (!ctx.isComponentDef) {
+    // In page context, templates can't be resolved - return literal
+    return text;
+  }
+  // Check if entire text is a single {{expression}}
+  const fullMatch = text.match(/^\{\{(.+)\}\}$/);
+  if (fullMatch) {
+    return `{${fullMatch[1].trim()}}`;
+  }
+  // Mixed content: replace each {{expr}} with {expr}
+  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => `{${expr.trim()}}`);
+}
+
+/**
+ * Check if text contains template expressions
+ */
+function hasTemplates(text: string): boolean {
+  return /\{\{.+?\}\}/.test(text);
+}
+
+/**
+ * Build element class name for interactive styles
+ */
+function buildElementClass(
+  ctx: AstroEmitContext,
+  label: string | undefined
+): string {
+  return generateElementClassName({
+    fileType: ctx.fileType,
+    fileName: ctx.fileName,
+    label,
+    path: ctx.elementPath,
+  });
+}
+
+/**
+ * Build HTML attributes string from node attributes
+ */
+function buildAttributesString(
+  attributes: Record<string, string | number | boolean> | undefined,
+  ctx: AstroEmitContext
+): string {
+  if (!attributes) return '';
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(attributes)) {
+    if (typeof value === 'boolean') {
+      if (value) parts.push(key);
+    } else {
+      const strVal = String(value);
+      if (hasTemplates(strVal) && ctx.isComponentDef) {
+        // Check if entire value is a single {{expression}}
+        const fullMatch = strVal.match(/^\{\{(.+)\}\}$/);
+        if (fullMatch) {
+          parts.push(`${key}={${fullMatch[1].trim()}}`);
+        } else {
+          // Mixed content: use template literal
+          const resolved = strVal.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+          parts.push(`${key}={\`${resolved}\`}`);
+        }
+      } else {
+        parts.push(`${key}="${escapeJSX(strVal)}"`);
+      }
+    }
+  }
+  return parts.length > 0 ? ' ' + parts.join(' ') : '';
+}
+
+/**
+ * Format a prop value for Astro template usage
+ */
+function formatPropValue(value: unknown): string {
+  if (typeof value === 'string') return `"${escapeJSX(value)}"`;
+  if (typeof value === 'number') return `{${value}}`;
+  if (typeof value === 'boolean') return `{${value}}`;
+  if (value === null || value === undefined) return `{undefined}`;
+  // Objects/arrays
+  return `{${JSON.stringify(value)}}`;
+}
+
+// ---------------------------------------------------------------------------
+// Main recursive converter
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert a ComponentNode tree to Astro template markup
+ */
+export function nodeToAstro(
+  node: ComponentNode | ComponentNode[] | string | number | null | undefined,
+  ctx: AstroEmitContext
+): string {
+  if (node === null || node === undefined) return '';
+
+  // Text/number
+  if (typeof node === 'string') {
+    if (hasTemplates(node) && ctx.isComponentDef) {
+      return `${ind(ctx)}${resolveTemplate(node, ctx)}\n`;
+    }
+    return `${ind(ctx)}${escapeJSX(node)}\n`;
+  }
+  if (typeof node === 'number') {
+    return `${ind(ctx)}${node}\n`;
+  }
+
+  // Array of nodes
+  if (Array.isArray(node)) {
+    let result = '';
+    for (let i = 0; i < node.length; i++) {
+      const child = node[i];
+      const savedPath = [...ctx.elementPath];
+      ctx.elementPath = [...ctx.elementPath, i];
+      result += nodeToAstro(child, ctx);
+      ctx.elementPath = savedPath;
+    }
+    return result;
+  }
+
+  // Dispatch by node type
+  switch (node.type) {
+    case NODE_TYPE.NODE:
+      return emitHtmlNode(node as HtmlNode, ctx);
+    case NODE_TYPE.COMPONENT:
+      return emitComponentInstance(node as ComponentInstanceNode, ctx);
+    case NODE_TYPE.SLOT:
+      return emitSlotMarker(node as SlotMarker, ctx);
+    case NODE_TYPE.EMBED:
+      return emitEmbedNode(node as EmbedNode, ctx);
+    case NODE_TYPE.LINK:
+      return emitLinkNode(node as LinkNode, ctx);
+    case NODE_TYPE.LOCALE_LIST:
+      return emitFallback(ctx);
+    case NODE_TYPE.LIST:
+    case 'cms-list' as any:
+      return emitFallback(ctx);
+    default:
+      return emitFallback(ctx);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Node type emitters
+// ---------------------------------------------------------------------------
+
+function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
+  let tag = node.tag;
+  const label = node.label;
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+
+  // Handle dynamic tags: <h{{size}}> → define Tag variable in frontmatter, use <Tag> in template
+  let isDynamic = false;
+  let dynamicTagVar = '';
+  if (hasTemplates(tag) && ctx.isComponentDef) {
+    isDynamic = true;
+    // Generate a unique variable name based on element path
+    dynamicTagVar = `Tag_${ctx.elementPath.join('_')}`;
+    const resolved = tag.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+    // Register dynamic tag for frontmatter emission
+    if (!ctx.dynamicTags) ctx.dynamicTags = new Map();
+    ctx.dynamicTags.set(dynamicTagVar, resolved);
+    tag = dynamicTagVar;
+  }
+
+  // Conditional rendering
+  const ifExpr = emitIfOpen(node, ctx);
+
+  // Element class for interactive styles
+  let elementClass: string | null = null;
+  if (
+    (node.interactiveStyles && node.interactiveStyles.length > 0) ||
+    node.generateElementClass
+  ) {
+    elementClass = buildElementClass(ctx, label);
+  }
+
+  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  const attrs = buildAttributesString(node.attributes, ctx);
+
+  // Dynamic tags use the variable name directly (capitalized, defined in frontmatter)
+  const openClose = isDynamic ? dynamicTagVar : tag;
+
+  if (!isDynamic && isVoidElement(tag)) {
+    return `${ifExpr}${ind(ctx)}<${tag}${classExpr}${styleAttr}${attrs} />\n${emitIfClose(node, ctx)}`;
+  }
+
+  const children = emitChildren(node.children, ctx);
+
+  if (!children.trim() && !isDynamic) {
+    return `${ifExpr}${ind(ctx)}<${tag}${classExpr}${styleAttr}${attrs} />\n${emitIfClose(node, ctx)}`;
+  }
+
+  return (
+    `${ifExpr}${ind(ctx)}<${openClose}${classExpr}${styleAttr}${attrs}>\n` +
+    children +
+    `${ind(ctx)}</${openClose}>\n${emitIfClose(node, ctx)}`
+  );
+}
+
+function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContext): string {
+  const name = node.component;
+  ctx.imports.add(name);
+
+  const ifExpr = emitIfOpen(node, ctx);
+
+  // Build prop expressions
+  const propParts: string[] = [];
+  if (node.props) {
+    for (const [key, value] of Object.entries(node.props)) {
+      if (key === 'children') continue;
+      // Resolve template expressions in string props when inside component def
+      if (typeof value === 'string' && hasTemplates(value) && ctx.isComponentDef) {
+        const fullMatch = value.match(/^\{\{(.+)\}\}$/);
+        if (fullMatch) {
+          propParts.push(`${key}={${fullMatch[1].trim()}}`);
+        } else {
+          const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+          propParts.push(`${key}={\`${resolved}\`}`);
+        }
+      } else {
+        propParts.push(`${key}=${formatPropValue(value)}`);
+      }
+    }
+  }
+
+  // Instance-level style overrides as className (Tailwind)
+  if (node.style) {
+    const { classes: instanceClasses } = responsiveStylesToTailwind(node.style as StyleObject | ResponsiveStyleObject, ctx.breakpoints);
+    if (instanceClasses.length > 0) {
+      propParts.push(`class="${instanceClasses.join(' ')}"`);
+    }
+  }
+
+  const propsStr = propParts.length > 0 ? ' ' + propParts.join(' ') : '';
+
+  const children = emitChildren(node.children, ctx);
+
+  if (!children.trim()) {
+    return `${ifExpr}${ind(ctx)}<${name}${propsStr} />\n${emitIfClose(node, ctx)}`;
+  }
+
+  return (
+    `${ifExpr}${ind(ctx)}<${name}${propsStr}>\n` +
+    children +
+    `${ind(ctx)}</${name}>\n${emitIfClose(node, ctx)}`
+  );
+}
+
+function emitSlotMarker(node: SlotMarker, ctx: AstroEmitContext): string {
+  if (node.default) {
+    const defaultContent = emitChildren(node.default as any, ctx);
+    if (defaultContent.trim()) {
+      return (
+        `${ind(ctx)}<slot>\n` +
+        defaultContent +
+        `${ind(ctx)}</slot>\n`
+      );
+    }
+  }
+  return `${ind(ctx)}<slot />\n`;
+}
+
+function emitEmbedNode(node: EmbedNode, ctx: AstroEmitContext): string {
+  const ifExpr = emitIfOpen(node, ctx);
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+
+  let elementClass: string | null = null;
+  if (
+    (node.interactiveStyles && node.interactiveStyles.length > 0) ||
+    node.generateElementClass
+  ) {
+    elementClass = buildElementClass(ctx, node.label);
+  }
+
+  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  const attrs = buildAttributesString(node.attributes, ctx);
+
+  // Handle HTML mapping (prop-dependent content)
+  if (isHtmlMapping(node.html)) {
+    if (ctx.isComponentDef) {
+      const propRef = node.html.prop;
+      return (
+        `${ifExpr}${ind(ctx)}<div${classExpr.replace('"', '"oem ') || ' class="oem"'}${attrs}>\n` +
+        `${ind(ctx)}  <Fragment set:html={${propRef}} />\n` +
+        `${ind(ctx)}</div>\n${emitIfClose(node, ctx)}`
+      );
+    }
+  }
+
+  const htmlStr = typeof node.html === 'string' ? node.html : '';
+  const escapedHtml = escapeTemplateLiteral(htmlStr);
+
+  // Ensure oem class is present
+  let finalClassExpr = classExpr;
+  if (!classExpr.includes('oem')) {
+    if (classExpr) {
+      finalClassExpr = classExpr.replace(/class="/, 'class="oem ').replace(/class:list={\['/, "class:list={['oem ");
+    } else {
+      finalClassExpr = ' class="oem"';
+    }
+  }
+
+  return (
+    `${ifExpr}${ind(ctx)}<div${finalClassExpr}${attrs}>\n` +
+    `${ind(ctx)}  <Fragment set:html={\`${escapedHtml}\`} />\n` +
+    `${ind(ctx)}</div>\n${emitIfClose(node, ctx)}`
+  );
+}
+
+function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
+  const ifExpr = emitIfOpen(node, ctx);
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+
+  let elementClass: string | null = null;
+  if (
+    (node.interactiveStyles && node.interactiveStyles.length > 0) ||
+    node.generateElementClass
+  ) {
+    elementClass = buildElementClass(ctx, node.label);
+  }
+
+  // Build class expression with olink base class
+  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  let finalClassExpr = classExpr;
+  if (!classExpr.includes('olink')) {
+    if (classExpr) {
+      finalClassExpr = classExpr.replace(/class="/, 'class="olink ').replace(/class:list={\['/, "class:list={['olink ");
+    } else {
+      finalClassExpr = ' class="olink"';
+    }
+  }
+
+  // Handle href
+  let hrefAttr: string;
+  if (isLinkMapping(node.href)) {
+    if (ctx.isComponentDef) {
+      const propRef = node.href.prop;
+      // Link props are objects with {href, target?}
+      hrefAttr = ` href={${propRef}.href}`;
+    } else {
+      hrefAttr = ' href="#"';
+    }
+  } else {
+    const href = typeof node.href === 'string' ? node.href : '#';
+    if (hasTemplates(href) && ctx.isComponentDef) {
+      const fullMatch = href.match(/^\{\{(.+)\}\}$/);
+      if (fullMatch) {
+        hrefAttr = ` href={${fullMatch[1].trim()}}`;
+      } else {
+        const resolved = href.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+        hrefAttr = ` href={\`${resolved}\`}`;
+      }
+    } else {
+      hrefAttr = ` href="${escapeJSX(href)}"`;
+    }
+  }
+
+  const attrs = buildAttributesString(node.attributes, ctx);
+  const children = emitChildren(node.children, ctx);
+
+  if (!children.trim()) {
+    return `${ifExpr}${ind(ctx)}<a${hrefAttr}${finalClassExpr}${styleAttr}${attrs} />\n${emitIfClose(node, ctx)}`;
+  }
+
+  return (
+    `${ifExpr}${ind(ctx)}<a${hrefAttr}${finalClassExpr}${styleAttr}${attrs}>\n` +
+    children +
+    `${ind(ctx)}</a>\n${emitIfClose(node, ctx)}`
+  );
+}
+
+/**
+ * Emit SSR fallback for complex nodes (list, locale-list)
+ */
+function emitFallback(ctx: AstroEmitContext): string {
+  const pathKey = ctx.elementPath.join('.');
+  const ssrHtml = ctx.ssrFallbacks.get(pathKey);
+  if (ssrHtml) {
+    const escaped = escapeTemplateLiteral(ssrHtml);
+    return `${ind(ctx)}<Fragment set:html={\`${escaped}\`} />\n`;
+  }
+  return `${ind(ctx)}{/* Complex node - SSR fallback not available */}\n`;
+}
+
+// ---------------------------------------------------------------------------
+// Conditional rendering helpers
+// ---------------------------------------------------------------------------
+
+function emitIfOpen(node: ComponentNode, ctx: AstroEmitContext): string {
+  const ifValue = (node as any).if;
+  if (ifValue === undefined || ifValue === true) return '';
+
+  if (typeof ifValue === 'boolean') {
+    return ifValue ? '' : `${ind(ctx)}{/* hidden */}\n`;
+  }
+
+  if (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) {
+    return `${ind(ctx)}{${ifValue.prop} && (\n`;
+  }
+
+  if (typeof ifValue === 'string' && ctx.isComponentDef) {
+    // Check if entire string is a single {{expression}}
+    const fullMatch = ifValue.match(/^\{\{(.+)\}\}$/);
+    const expr = fullMatch ? fullMatch[1].trim() : ifValue.replace(/\{\{(.+?)\}\}/g, '$1');
+    return `${ind(ctx)}{${expr} && (\n`;
+  }
+
+  return '';
+}
+
+function emitIfClose(node: ComponentNode, ctx: AstroEmitContext): string {
+  const ifValue = (node as any).if;
+  if (ifValue === undefined || ifValue === true) return '';
+
+  if (typeof ifValue === 'boolean') return '';
+
+  if (
+    (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) ||
+    (typeof ifValue === 'string' && ctx.isComponentDef)
+  ) {
+    return `${ind(ctx)})}\n`;
+  }
+
+  return '';
+}
+
+// ---------------------------------------------------------------------------
+// Children helper
+// ---------------------------------------------------------------------------
+
+function emitChildren(
+  children: (ComponentNode | string)[] | string | ComponentNode | null | undefined,
+  ctx: AstroEmitContext
+): string {
+  if (!children) return '';
+
+  const innerCtx = { ...ctx, indent: ctx.indent + 1, elementPath: [...ctx.elementPath] };
+
+  if (typeof children === 'string') {
+    return nodeToAstro(children, innerCtx);
+  }
+
+  if (Array.isArray(children)) {
+    return nodeToAstro(children as ComponentNode[], innerCtx);
+  }
+
+  // Single node
+  return nodeToAstro(children, innerCtx);
+}