meno-core 1.0.39 → 1.0.40

package/lib/server/astro/nodeToAstro.ts

@@ -14,8 +14,11 @@ import type {
   EmbedNode,
   LinkNode,
   LocaleListNode,
+  I18nConfig,
+  CMSSchema,
+  ListNode,
 } from '../../shared/types';
-import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
+import { singularize } from '../../shared/types';
 import type {
   StyleObject,
   ResponsiveStyleObject,
@@ -28,8 +31,13 @@ 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 { NODE_TYPE, RAW_HTML_PREFIX } from '../../shared/constants';
 import { extractInteractiveStyleMappings, hasInteractiveStyleMappings } from '../../shared/interactiveStyleMappings';
+import type { ImageMetadataMap } from '../ssr/imageMetadata';
+import { isI18nValue, resolveI18nValue, DEFAULT_I18N_CONFIG, buildLocalizedPath } from '../../shared/i18n';
+import { transformCMSTemplate, isTemplateExpression, transformItemTemplate, replaceItemMetaVars, rewriteItemVar } from './templateTransformer';
+import type { SlugMap } from '../../shared/slugTranslator';
+import { buildSlugIndex, translatePath } from '../../shared/slugTranslator';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -58,6 +66,42 @@ export interface AstroEmitContext {
   breakpoints: BreakpointConfig;
   /** Dynamic tag definitions collected during traversal (for frontmatter) */
   dynamicTags?: Map<string, string>;
+  /** Image metadata map for responsive image generation */
+  imageMetadataMap?: ImageMetadataMap;
+  /** Page locale for resolving i18n values */
+  locale?: string;
+  /** CMS mode: transform {{cms.field}} to entry data expressions */
+  cmsMode?: boolean;
+  /** Variable name bound to the CMS entry (default: 'entry') */
+  cmsEntryBinding?: string;
+  /** Rich-text field names for CMS mode (use Fragment set:html) */
+  cmsRichTextFields?: Set<string>;
+  /** Current list item iteration variable name */
+  listItemBinding?: string;
+  /** Extra frontmatter code lines collected during emission */
+  frontmatterLines?: string[];
+  /** Astro API imports needed (e.g., 'getCollection') */
+  astroImports?: Set<string>;
+  /** Full i18n config for locale list emission */
+  i18nConfig?: I18nConfig;
+  /** locale→slug for current page (for locale list links) */
+  currentPageSlugMap?: Record<string, string>;
+  /** CMS schema for rich-text field detection */
+  cmsSchema?: CMSSchema;
+  /** Wrap function name for i18n resolution (e.g., 'r') */
+  cmsWrapFn?: string;
+  /** Default locale for i18n resolver (used in component defs) */
+  defaultLocale?: string;
+  /** Set to true during emission when an i18n object is encountered in a component def */
+  needsI18nResolver?: boolean;
+  /** Index variable name for current list .map() callback (e.g., "itemIndex") */
+  listIndexVar?: string;
+  /** Source array expression for current list (e.g., "items"), used for itemLast */
+  listSourceVar?: string;
+  /** Slug mappings for translating internal links */
+  slugMappings?: SlugMap[];
+  /** I18n default locale (for slug translation) */
+  i18nDefaultLocale?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -68,6 +112,19 @@ function ind(ctx: AstroEmitContext): string {
   return '  '.repeat(ctx.indent);
 }
 
+function localizeHref(href: string, ctx: AstroEmitContext): string {
+  if (!href.startsWith('/') || href.startsWith('//')) return href;
+  const { locale, i18nDefaultLocale, slugMappings } = ctx;
+  if (!locale || !i18nDefaultLocale) return href;
+  if (slugMappings && slugMappings.length > 0) {
+    const slugIndex = buildSlugIndex(slugMappings);
+    return translatePath(href, locale, i18nDefaultLocale, i18nDefaultLocale, slugIndex);
+  } else if (locale !== i18nDefaultLocale) {
+    return buildLocalizedPath(href, locale);
+  }
+  return href;
+}
+
 function isStyleMapping(value: unknown): value is StyleMapping {
   return (
     typeof value === 'object' &&
@@ -86,6 +143,41 @@ function isLinkMapping(value: unknown): value is LinkMapping {
   );
 }
 
+/**
+ * Emit a single attribute key=value, applying CMS/list template transformation if needed.
+ */
+function emitAttrValue(key: string, value: string, ctx: AstroEmitContext): string {
+  if (ctx.cmsMode && /\{\{cms\./.test(value)) {
+    const b = ctx.cmsEntryBinding || 'entry';
+    const w = (expr: string) => ctx.cmsWrapFn ? `${ctx.cmsWrapFn}(${expr})` : expr;
+    const fullMatch = value.match(/^\{\{cms\.([^}]+)\}\}$/);
+    if (fullMatch) {
+      return `${key}={${w(`${b}.data.${fullMatch[1].trim()}`)}}`;
+    }
+    const replaced = value.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fp) =>
+      `\${${w(`${b}.data.${fp.trim()}`)}}`
+    );
+    return `${key}={\`${replaced}\`}`;
+  }
+  if (ctx.listItemBinding && /\{\{/.test(value)) {
+    const fullMatch = value.match(/^\{\{(.+)\}\}$/);
+    if (fullMatch) {
+      let expr = fullMatch[1].trim();
+      expr = rewriteItemVar(expr, ctx.listItemBinding);
+      if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+      return `${key}={${expr}}`;
+    }
+    const replaced = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+      let trimmed = expr.trim();
+      trimmed = rewriteItemVar(trimmed, ctx.listItemBinding!);
+      if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+      return `\${${trimmed}}`;
+    });
+    return `${key}={\`${replaced}\`}`;
+  }
+  return `${key}="${escapeJSX(value)}"`;
+}
+
 function isHtmlMapping(value: unknown): value is HtmlMapping {
   return (
     typeof value === 'object' &&
@@ -167,14 +259,15 @@ function mappingToClassListEntries(
     const cls1 = getClassForValue(property, css1, breakpointPrefix);
     const cls2 = getClassForValue(property, css2, breakpointPrefix);
     if (cls1 && cls2) {
-      entries.push(`${propRef} === ${JSON.stringify(coerceValue(val1))} ? '${cls1}' : '${cls2}'`);
+      // Use String() coercion so number props match string mapping keys (e.g., size=2 matches "2")
+      entries.push(`String(${propRef}) === ${JSON.stringify(String(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}'`);
+        entries.push(`String(${propRef}) === ${JSON.stringify(String(coerceValue(val)))} && '${cls}'`);
       }
     }
   }
@@ -247,13 +340,23 @@ function buildClassAndStyleExpression(
     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()}}`);
+      const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+        let trimmed = expr.trim();
+        if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+        if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+        return `\${${trimmed}}`;
+      });
       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()}}`);
+      const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+        let trimmed = expr.trim();
+        if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+        if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+        return `\${${trimmed}}`;
+      });
       entries.push(`${cssProp}: ${resolved}`);
     }
     styleAttr = ` style={\`${entries.join('; ')}\`}`;
@@ -330,10 +433,22 @@ function resolveTemplate(text: string, ctx: AstroEmitContext): string {
   // Check if entire text is a single {{expression}}
   const fullMatch = text.match(/^\{\{(.+)\}\}$/);
   if (fullMatch) {
-    return `{${fullMatch[1].trim()}}`;
+    let propName = fullMatch[1].trim();
+    if (ctx.listItemBinding) propName = rewriteItemVar(propName, ctx.listItemBinding);
+    if (ctx.listIndexVar) propName = replaceItemMetaVars(propName, ctx.listIndexVar, ctx.listSourceVar);
+    // Rich-text props contain HTML - render unescaped via set:html
+    if (ctx.componentProps[propName]?.type === 'rich-text') {
+      return `<Fragment set:html={${propName}} />`;
+    }
+    return `{${propName}}`;
   }
   // Mixed content: replace each {{expr}} with {expr}
-  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => `{${expr.trim()}}`);
+  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+    let trimmed = expr.trim();
+    if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+    if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+    return `{${trimmed}}`;
+  });
 }
 
 /**
@@ -376,12 +491,56 @@ function buildAttributesString(
         // Check if entire value is a single {{expression}}
         const fullMatch = strVal.match(/^\{\{(.+)\}\}$/);
         if (fullMatch) {
-          parts.push(`${key}={${fullMatch[1].trim()}}`);
+          let expr = fullMatch[1].trim();
+          if (ctx.listItemBinding) expr = rewriteItemVar(expr, ctx.listItemBinding);
+          if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+          const propDef = ctx.componentProps[expr];
+          if (propDef && propDef.type === 'link') {
+            parts.push(`${key}={${expr}?.href ?? "#"}`);
+          } else {
+            parts.push(`${key}={${expr} || undefined}`);
+          }
         } else {
           // Mixed content: use template literal
-          const resolved = strVal.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+          const resolved = strVal.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+            let trimmed = expr.trim();
+            if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+            if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+            const pd = ctx.componentProps[trimmed];
+            return pd?.type === 'link' ? `\${${trimmed}?.href ?? "#"}` : `\${${trimmed}}`;
+          });
+          parts.push(`${key}={\`${resolved}\`}`);
+        }
+      } else if (ctx.listItemBinding && hasTemplates(strVal)) {
+        // List item binding: transform {{item.field}} in attributes
+        const fullMatch = strVal.match(/^\{\{(.+)\}\}$/);
+        if (fullMatch) {
+          let expr = fullMatch[1].trim();
+          expr = rewriteItemVar(expr, ctx.listItemBinding);
+          if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+          parts.push(`${key}={${expr} || undefined}`);
+        } else {
+          const resolved = strVal.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+            let trimmed = expr.trim();
+            trimmed = rewriteItemVar(trimmed, ctx.listItemBinding!);
+            if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+            return `\${${trimmed}}`;
+          });
           parts.push(`${key}={\`${resolved}\`}`);
         }
+      } else if (ctx.cmsMode && /\{\{cms\./.test(strVal)) {
+        // CMS mode: transform {{cms.field}} in attributes
+        const b = ctx.cmsEntryBinding || 'entry';
+        const w = (expr: string) => ctx.cmsWrapFn ? `${ctx.cmsWrapFn}(${expr})` : expr;
+        const fullMatch = strVal.match(/^\{\{cms\.([^}]+)\}\}$/);
+        if (fullMatch) {
+          parts.push(`${key}={${w(`${b}.data.${fullMatch[1].trim()}`)}}`);
+        } else {
+          const replaced = strVal.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fieldPath) => {
+            return `\${${w(`${b}.data.${fieldPath.trim()}`)}}`;
+          });
+          parts.push(`${key}={\`${replaced}\`}`);
+        }
       } else {
         parts.push(`${key}="${escapeJSX(strVal)}"`);
       }
@@ -406,6 +565,17 @@ function formatPropValue(value: unknown): string {
 // Main recursive converter
 // ---------------------------------------------------------------------------
 
+/**
+ * Resolve an i18n value to a locale string using the context locale.
+ * Returns the original value unchanged if it's not an i18n object or no locale is set.
+ */
+function resolveI18n(value: unknown, ctx: AstroEmitContext): unknown {
+  if (ctx.locale && isI18nValue(value)) {
+    return resolveI18nValue(value, ctx.locale, DEFAULT_I18N_CONFIG);
+  }
+  return value;
+}
+
 /**
  * Convert a ComponentNode tree to Astro template markup
  */
@@ -415,24 +585,54 @@ export function nodeToAstro(
 ): string {
   if (node === null || node === undefined) return '';
 
+  // Resolve i18n objects to locale strings before further processing
+  if (typeof node === 'object' && !Array.isArray(node) && isI18nValue(node)) {
+    const resolved = resolveI18n(node, ctx);
+    if (typeof resolved === 'string') {
+      return `${ind(ctx)}${escapeJSX(resolved)}\n`;
+    }
+    // In component def without locale: wrap with r() resolver
+    if (ctx.isComponentDef && isI18nValue(resolved)) {
+      ctx.needsI18nResolver = true;
+      return `${ind(ctx)}{r(${JSON.stringify(resolved)})}\n`;
+    }
+    // If resolution returned a non-string (e.g. array), stringify it
+    return `${ind(ctx)}${String(resolved ?? '')}\n`;
+  }
+
   // Text/number
   if (typeof node === 'string') {
+    // CMS mode: transform {{cms.field}} expressions to entry data access
+    if (ctx.cmsMode && isTemplateExpression(node) && /\{\{cms\./.test(node)) {
+      const transformed = transformCMSTemplate(node, ctx.cmsEntryBinding || 'entry', ctx.cmsRichTextFields, ctx.cmsWrapFn);
+      return `${ind(ctx)}${transformed}\n`;
+    }
+    // List item binding: transform {{item.field}} expressions
+    if (ctx.listItemBinding && isTemplateExpression(node)) {
+      const transformed = transformItemTemplate(node, ctx.listItemBinding, ctx.listIndexVar, ctx.listSourceVar);
+      return `${ind(ctx)}${transformed}\n`;
+    }
     if (hasTemplates(node) && ctx.isComponentDef) {
       return `${ind(ctx)}${resolveTemplate(node, ctx)}\n`;
     }
+    // Raw HTML marker (from rich-text fields) - render unescaped via set:html
+    if (node.startsWith(RAW_HTML_PREFIX)) {
+      const rawHtml = node.slice(RAW_HTML_PREFIX.length);
+      return `${ind(ctx)}<Fragment set:html={\`${escapeTemplateLiteral(rawHtml)}\`} />\n`;
+    }
     return `${ind(ctx)}${escapeJSX(node)}\n`;
   }
   if (typeof node === 'number') {
     return `${ind(ctx)}${node}\n`;
   }
 
-  // Array of nodes
+  // Array of nodes – replace the last path segment (matches SSR renderer's top-level array convention)
   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];
+      ctx.elementPath = [...ctx.elementPath.slice(0, -1), i];
       result += nodeToAstro(child, ctx);
       ctx.elementPath = savedPath;
     }
@@ -452,10 +652,12 @@ export function nodeToAstro(
     case NODE_TYPE.LINK:
       return emitLinkNode(node as LinkNode, ctx);
     case NODE_TYPE.LOCALE_LIST:
-      return emitFallback(ctx);
+      return emitLocaleListNode(node as LocaleListNode, ctx);
     case NODE_TYPE.LIST:
     case 'cms-list' as any:
-      return emitFallback(ctx);
+      return emitListNode(node as ListNode, ctx);
+    case 'image' as any:
+      return emitImageTypeNode(node, ctx);
     default:
       return emitFallback(ctx);
   }
@@ -465,8 +667,167 @@ export function nodeToAstro(
 // Node type emitters
 // ---------------------------------------------------------------------------
 
+/**
+ * Tailwind class prefixes that belong on the <img> element (not the <picture> wrapper).
+ * These correspond to image-specific visual properties.
+ */
+const IMG_TAILWIND_PREFIXES = ['object-', 'rounded', 'border', 'shadow', '[filter', '[transform', 'mix-blend'];
+const IMG_OPACITY_PATTERN = /^opacity-/;
+
+/**
+ * Default sizes attribute for responsive images
+ */
+const DEFAULT_SIZES = '100vw';
+
+/**
+ * Split Tailwind classes into picture (layout) and img (visual) groups.
+ * Layout classes go on <picture>, image-specific classes go on <img>.
+ */
+function splitImageClasses(allClasses: string[]): { pictureClasses: string[]; imgClasses: string[] } {
+  const imgClasses: string[] = [];
+  const pictureClasses: string[] = [];
+
+  for (const cls of allClasses) {
+    // Strip responsive prefix (e.g., "md:object-cover" -> "object-cover") for matching
+    const baseCls = cls.includes(':') ? cls.split(':').pop()! : cls;
+    if (IMG_TAILWIND_PREFIXES.some(p => baseCls.startsWith(p)) || IMG_OPACITY_PATTERN.test(baseCls)) {
+      imgClasses.push(cls);
+    } else {
+      pictureClasses.push(cls);
+    }
+  }
+
+  return { pictureClasses, imgClasses };
+}
+
+/**
+ * Emit an <img> node as a <picture> element with AVIF/WebP sources when
+ * image metadata is available, or as a plain <img> with srcset otherwise.
+ */
+function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+
+  // Element class for interactive styles
+  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
+  );
+
+  // Extract image-specific attributes
+  const attrs = node.attributes || {};
+  const src = attrs.src as string | undefined;
+  const alt = attrs.alt as string | undefined;
+  const loading = attrs.loading as string | undefined;
+  const fetchpriority = attrs.fetchpriority as string | undefined;
+  let width = attrs.width as string | number | undefined;
+  let height = attrs.height as string | number | undefined;
+  const sizes = attrs.sizes as string | undefined;
+
+  // Look up image metadata
+  const metadata = src ? ctx.imageMetadataMap?.get(String(src)) : undefined;
+
+  // Use dimensions from metadata if not explicitly set
+  if (metadata) {
+    if (width === undefined && metadata.width) width = metadata.width;
+    if (height === undefined && metadata.height) height = metadata.height;
+  }
+
+  const sizesValue = sizes || DEFAULT_SIZES;
+
+  // Build remaining attributes (exclude image-specific ones we handle manually)
+  const imageSpecificKeys = new Set(['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority']);
+  const otherAttrs: Record<string, string | number | boolean> = {};
+  if (node.attributes) {
+    for (const [k, v] of Object.entries(node.attributes)) {
+      if (!imageSpecificKeys.has(k)) otherAttrs[k] = v;
+    }
+  }
+  const otherAttrsStr = buildAttributesString(otherAttrs, ctx);
+
+  // Build core img attributes (with CMS/list template support)
+  let imgAttrs = '';
+  if (src) imgAttrs += ` ${emitAttrValue('src', String(src), ctx)}`;
+  if (alt !== undefined) imgAttrs += ` ${emitAttrValue('alt', String(alt), ctx)}`;
+  if (fetchpriority) imgAttrs += ` fetchpriority="${escapeJSX(String(fetchpriority))}"`;
+  if (loading) imgAttrs += ` loading="${escapeJSX(String(loading))}"`;
+  if (width !== undefined) imgAttrs += ` width="${escapeJSX(String(width))}"`;
+  if (height !== undefined) imgAttrs += ` height="${escapeJSX(String(height))}"`;
+
+  // Blur placeholder style
+  let blurStyle = '';
+  if (metadata?.blurHash) {
+    blurStyle = ` style="background-image: url(${escapeJSX(metadata.blurHash)}); background-size: cover;" onload="this.style.backgroundImage=''"`;
+  }
+
+  // Conditional rendering
+  const ifExpr = emitIfOpen(node, ctx);
+  const ifClose = emitIfClose(node, ctx);
+
+  // If we have AVIF srcset, render as <picture> with split classes
+  if (metadata?.avifSrcset) {
+    // Extract static classes from classExpr for splitting
+    const classMatch = classExpr.match(/class="([^"]*)"/);
+    const classListMatch = classExpr.match(/class:list={\[(.+)\]}/);
+
+    if (classListMatch) {
+      // Dynamic class:list - put it all on the picture, img gets none
+      // (splitting dynamic classes is too complex; layout on picture is the safer default)
+      return (
+        `${ifExpr}${ind(ctx)}<picture${classExpr}${styleAttr}>\n` +
+        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <img${imgAttrs}${blurStyle}${otherAttrsStr} />\n` +
+        `${ind(ctx)}</picture>\n${ifClose}`
+      );
+    }
+
+    const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+    const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
+
+    const pictureClassAttr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
+    const imgClassAttr = imgClasses.length > 0 ? ` class="${imgClasses.join(' ')}"` : '';
+
+    return (
+      `${ifExpr}${ind(ctx)}<picture${pictureClassAttr}${styleAttr}>\n` +
+      `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+      `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+      `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurStyle}${otherAttrsStr} />\n` +
+      `${ind(ctx)}</picture>\n${ifClose}`
+    );
+  }
+
+  // Fallback: regular img with WebP srcset if available
+  if (metadata?.srcset) {
+    imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
+    imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
+  }
+
+  return `${ifExpr}${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs}${blurStyle}${otherAttrsStr} />\n${ifClose}`;
+}
+
 function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
   let tag = node.tag;
+
+  // Astro treats capitalized tags as component imports — lowercase custom tags to avoid this
+  if (tag && /^[A-Z]/.test(tag)) {
+    tag = tag.toLowerCase();
+  }
+
+  // Delegate img tags to the image-specific emitter when metadata is available
+  if (tag === 'img' && ctx.imageMetadataMap) {
+    return emitImageNode(node, ctx);
+  }
+
   const label = node.label;
   const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
 
@@ -528,17 +889,45 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
   // Build prop expressions
   const propParts: string[] = [];
   if (node.props) {
-    for (const [key, value] of Object.entries(node.props)) {
+    for (const [key, rawValue] of Object.entries(node.props)) {
       if (key === 'children') continue;
+
+      // Resolve i18n values to the page locale
+      const value = resolveI18n(rawValue, ctx);
+
       // 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()}}`);
+          let expr = fullMatch[1].trim();
+          if (ctx.listItemBinding) expr = rewriteItemVar(expr, ctx.listItemBinding);
+          if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+          propParts.push(`${key}={${expr}}`);
         } else {
-          const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+          const resolved = value.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+            let trimmed = expr.trim();
+            if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+            if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+            return `\${${trimmed}}`;
+          });
           propParts.push(`${key}={\`${resolved}\`}`);
         }
+      } else if (typeof value === 'string' && ctx.cmsMode && /\{\{cms\./.test(value)) {
+        const b = ctx.cmsEntryBinding || 'entry';
+        const w = (expr: string) => ctx.cmsWrapFn ? `${ctx.cmsWrapFn}(${expr})` : expr;
+        const fullMatch = value.match(/^\{\{cms\.([^}]+)\}\}$/);
+        if (fullMatch) {
+          propParts.push(`${key}={${w(`${b}.data.${fullMatch[1].trim()}`)}}`);
+        } else {
+          const replaced = value.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fieldPath) => {
+            return `\${${w(`${b}.data.${fieldPath.trim()}`)}}`;
+          });
+          propParts.push(`${key}={\`${replaced}\`}`);
+        }
+      } else if (ctx.isComponentDef && isI18nValue(value)) {
+        // i18n object in component def — wrap with r() resolver (resolved at runtime via Astro.currentLocale)
+        ctx.needsI18nResolver = true;
+        propParts.push(`${key}={r(${JSON.stringify(value)})}`);
       } else {
         propParts.push(`${key}=${formatPropValue(value)}`);
       }
@@ -652,28 +1041,59 @@ function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
     }
   }
 
+  // Resolve i18n on href before processing
+  const resolvedHref = resolveI18n(node.href, ctx);
+  const nodeHref = resolvedHref as typeof node.href;
+
   // Handle href
   let hrefAttr: string;
-  if (isLinkMapping(node.href)) {
+  if (isLinkMapping(nodeHref)) {
     if (ctx.isComponentDef) {
-      const propRef = node.href.prop;
+      const propRef = (nodeHref as LinkMapping).prop;
       // Link props are objects with {href, target?}
-      hrefAttr = ` href={${propRef}.href}`;
+      hrefAttr = ` href={${propRef}?.href ?? "#"}`;
     } else {
       hrefAttr = ' href="#"';
     }
   } else {
-    const href = typeof node.href === 'string' ? node.href : '#';
+    const href = typeof nodeHref === 'string' ? nodeHref : '#';
     if (hasTemplates(href) && ctx.isComponentDef) {
       const fullMatch = href.match(/^\{\{(.+)\}\}$/);
       if (fullMatch) {
-        hrefAttr = ` href={${fullMatch[1].trim()}}`;
+        let expr = fullMatch[1].trim();
+        if (ctx.listItemBinding) expr = rewriteItemVar(expr, ctx.listItemBinding);
+        if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+        const propDef = ctx.componentProps[expr];
+        if (propDef && propDef.type === 'link') {
+          hrefAttr = ` href={${expr}?.href ?? "#"}`;
+        } else {
+          hrefAttr = ` href={${expr}}`;
+        }
       } else {
-        const resolved = href.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
+        const resolved = href.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+          let trimmed = expr.trim();
+          if (ctx.listItemBinding) trimmed = rewriteItemVar(trimmed, ctx.listItemBinding);
+          if (ctx.listIndexVar) trimmed = replaceItemMetaVars(trimmed, ctx.listIndexVar, ctx.listSourceVar);
+          const pd = ctx.componentProps[trimmed];
+          return pd?.type === 'link' ? `\${${trimmed}?.href ?? "#"}` : `\${${trimmed}}`;
+        });
         hrefAttr = ` href={\`${resolved}\`}`;
       }
+    } else if (ctx.cmsMode && /\{\{cms\./.test(href)) {
+      const b = ctx.cmsEntryBinding || 'entry';
+      const w = (expr: string) => ctx.cmsWrapFn ? `${ctx.cmsWrapFn}(${expr})` : expr;
+      const fullMatch = href.match(/^\{\{cms\.([^}]+)\}\}$/);
+      if (fullMatch) {
+        hrefAttr = ` href={${w(`${b}.data.${fullMatch[1].trim()}`)}}`;
+      } else {
+        const replaced = href.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fieldPath) => {
+          return `\${${w(`${b}.data.${fieldPath.trim()}`)}}`;
+        });
+        hrefAttr = ` href={\`${replaced}\`}`;
+      }
     } else {
-      hrefAttr = ` href="${escapeJSX(href)}"`;
+      const localizedHref = localizeHref(href, ctx);
+      hrefAttr = ` href="${escapeJSX(localizedHref)}"`;
     }
   }
 
@@ -691,6 +1111,329 @@ function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
   );
 }
 
+/**
+ * Emit an "image" type node (standalone image, not an HTML img tag)
+ * These have src, alt, style directly on the node.
+ */
+function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
+  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 src = node.src as string | undefined;
+  const alt = node.alt as string | undefined;
+
+  let imgAttrs = '';
+  if (src) imgAttrs += ` src="${escapeJSX(String(src))}"`;
+  if (alt !== undefined) imgAttrs += ` alt="${escapeJSX(String(alt))}"`;
+
+  // Check for image metadata for responsive images
+  const metadata = src ? ctx.imageMetadataMap?.get(String(src)) : undefined;
+
+  if (metadata) {
+    let width = metadata.width;
+    let height = metadata.height;
+    if (width !== undefined) imgAttrs += ` width="${width}"`;
+    if (height !== undefined) imgAttrs += ` height="${height}"`;
+
+    let blurStyle = '';
+    if (metadata.blurHash) {
+      blurStyle = ` style="background-image: url(${escapeJSX(metadata.blurHash)}); background-size: cover;" onload="this.style.backgroundImage=''"`;
+    }
+
+    const sizesValue = DEFAULT_SIZES;
+
+    if (metadata.avifSrcset) {
+      const classMatch = classExpr.match(/class="([^"]*)"/);
+      const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
+      const { pictureClasses, imgClasses } = splitImageClasses(allClasses);
+
+      const pictureClassAttr = pictureClasses.length > 0 ? ` class="${pictureClasses.join(' ')}"` : '';
+      const imgClassAttr = imgClasses.length > 0 ? ` class="${imgClasses.join(' ')}"` : '';
+
+      return (
+        `${ind(ctx)}<picture${pictureClassAttr}${styleAttr}>\n` +
+        `${ind(ctx)}  <source type="image/avif" srcset="${escapeJSX(metadata.avifSrcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <source type="image/webp" srcset="${escapeJSX(metadata.srcset)}" sizes="${escapeJSX(sizesValue)}" />\n` +
+        `${ind(ctx)}  <img${imgClassAttr}${imgAttrs}${blurStyle} />\n` +
+        `${ind(ctx)}</picture>\n`
+      );
+    }
+
+    if (metadata.srcset) {
+      imgAttrs += ` srcset="${escapeJSX(metadata.srcset)}"`;
+      imgAttrs += ` sizes="${escapeJSX(sizesValue)}"`;
+    }
+  }
+
+  return `${ind(ctx)}<img${classExpr}${styleAttr}${imgAttrs} />\n`;
+}
+
+/**
+ * Emit a list node as native Astro .map() call
+ */
+function emitListNode(node: ListNode, ctx: AstroEmitContext): string {
+  const sourceType = node.sourceType || 'prop';
+  const itemAs = node.itemAs || 'item';
+
+  if (sourceType === 'collection') {
+    return emitCollectionListNode(node, ctx);
+  }
+
+  // Prop lists only work inside component definitions where the prop is available
+  // On pages, the data source doesn't exist at template level - use SSR fallback
+  if (!ctx.isComponentDef && !ctx.listItemBinding) {
+    return emitFallback(ctx);
+  }
+
+  // Prop list: emit {items.map((item, index) => (...))}
+  // Resolve source: "{{features}}" → "features"
+  let source = node.source || 'items';
+  const templateMatch = source.match(/^\{\{(.+)\}\}$/);
+  if (templateMatch) {
+    source = templateMatch[1].trim();
+  }
+
+  // Build the .map() source expression (compute before children so ctx has it)
+  let mapSource = source;
+  if (node.offset && node.limit) {
+    mapSource = `${source}.slice(${node.offset}, ${node.offset + node.limit})`;
+  } else if (node.offset) {
+    mapSource = `${source}.slice(${node.offset})`;
+  } else if (node.limit) {
+    mapSource = `${source}.slice(0, ${node.limit})`;
+  }
+
+  // Build children with list item binding context
+  const indexVar = `${itemAs}Index`;
+  const innerCtx: AstroEmitContext = {
+    ...ctx,
+    indent: ctx.indent + 1,
+    listItemBinding: itemAs,
+    listIndexVar: indexVar,
+    listSourceVar: mapSource,
+    elementPath: [...ctx.elementPath, 0],
+  };
+
+  const children = node.children
+    ? (node.children as any[]).map((child, i) => {
+        const childCtx = { ...innerCtx, elementPath: [...ctx.elementPath, i] };
+        const out = nodeToAstro(child, childCtx);
+        if (childCtx.needsI18nResolver) ctx.needsI18nResolver = true;
+        return out;
+      }).join('')
+    : '';
+
+  return (
+    `${ind(ctx)}{${mapSource}.map((${itemAs}, ${indexVar}) => (\n` +
+    children +
+    `${ind(ctx)}))}\n`
+  );
+}
+
+/**
+ * Emit a collection-sourced list node using getCollection() in frontmatter
+ */
+function emitCollectionListNode(node: ListNode, ctx: AstroEmitContext): string {
+  // For collection lists, the data fetching happens in frontmatter
+  const source = node.source || '';
+  const itemAs = node.itemAs || singularize(source);
+
+  // Add frontmatter lines and imports
+  if (!ctx.frontmatterLines) ctx.frontmatterLines = [];
+  if (!ctx.astroImports) ctx.astroImports = new Set();
+
+  ctx.astroImports.add('getCollection');
+
+  // Variable name for the collection data
+  const collectionVar = `${source}List`;
+
+  // Build the collection query with filter/sort/limit
+  let queryChain = `await getCollection('${source}')`;
+
+  if (node.filter) {
+    // Simple filter support
+    if (typeof node.filter === 'object' && !Array.isArray(node.filter) && 'field' in node.filter) {
+      const f = node.filter as { field: string; operator?: string; value: unknown };
+      const op = f.operator || 'eq';
+      if (op === 'eq') {
+        queryChain += `.then(items => items.filter(e => e.data.${f.field} === ${JSON.stringify(f.value)}))`;
+      }
+    }
+  }
+
+  if (node.sort) {
+    const sortConfig = Array.isArray(node.sort) ? node.sort[0] : node.sort;
+    if (sortConfig) {
+      const order = sortConfig.order === 'desc' ? -1 : 1;
+      queryChain += `.then(items => items.sort((a, b) => a.data.${sortConfig.field} > b.data.${sortConfig.field} ? ${order} : ${-order}))`;
+    }
+  }
+
+  if (node.offset || node.limit) {
+    const start = node.offset || 0;
+    const end = node.limit ? start + node.limit : undefined;
+    queryChain += `.then(items => items.slice(${start}${end !== undefined ? `, ${end}` : ''}))`;
+  }
+
+  ctx.frontmatterLines.push(`const ${collectionVar} = ${queryChain};`);
+
+  // Build children with item binding
+  const indexVar = `${itemAs}Index`;
+  const innerCtx: AstroEmitContext = {
+    ...ctx,
+    indent: ctx.indent + 1,
+    listItemBinding: itemAs,
+    listIndexVar: indexVar,
+    listSourceVar: collectionVar,
+    cmsMode: true,
+    cmsEntryBinding: itemAs,
+    elementPath: [...ctx.elementPath, 0],
+  };
+
+  const children = node.children
+    ? (node.children as any[]).map((child, i) => {
+        const childCtx = { ...innerCtx, elementPath: [...ctx.elementPath, i] };
+        const out = nodeToAstro(child, childCtx);
+        if (childCtx.needsI18nResolver) ctx.needsI18nResolver = true;
+        return out;
+      }).join('')
+    : '';
+
+  return (
+    `${ind(ctx)}{${collectionVar}.map((${itemAs}, ${indexVar}) => (\n` +
+    children +
+    `${ind(ctx)}))}\n`
+  );
+}
+
+/**
+ * Emit a locale list node with static locale links
+ * Since locales are known at build time, we emit static HTML
+ */
+function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string {
+  // If we don't have i18n config or slug map, fall back to SSR
+  if (!ctx.i18nConfig || !ctx.currentPageSlugMap) {
+    return emitFallback(ctx);
+  }
+
+  const i18nConfig = ctx.i18nConfig;
+  const slugMap = ctx.currentPageSlugMap;
+  const showCurrent = node.showCurrent !== false;
+  const showSeparator = node.showSeparator !== false;
+  const showFlag = node.showFlag !== false;
+  const displayType = node.displayType || 'nativeName';
+
+  // Build container classes from style
+  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
+
+  let elementClass: string | null = null;
+  if ((node.interactiveStyles && (node.interactiveStyles as any[]).length > 0) || node.generateElementClass) {
+    elementClass = buildElementClass(ctx, node.label);
+  }
+
+  const { classExpr: containerClassExpr, styleAttr: containerStyleAttr } = buildClassAndStyleExpression(
+    style,
+    node.interactiveStyles as InteractiveStyles | undefined,
+    elementClass,
+    ctx
+  );
+
+  // Build item classes
+  const itemStyle = node.itemStyle as StyleObject | ResponsiveStyleObject | undefined;
+  const itemResult = itemStyle ? responsiveStylesToTailwind(itemStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const itemClasses = itemResult.classes;
+
+  // Build active item classes (item + active combined)
+  const activeItemStyle = node.activeItemStyle as StyleObject | ResponsiveStyleObject | undefined;
+  const activeResult = activeItemStyle ? responsiveStylesToTailwind(activeItemStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const activeItemClasses = [...itemClasses, ...activeResult.classes];
+
+  // Build separator classes
+  const separatorStyle = node.separatorStyle as StyleObject | ResponsiveStyleObject | undefined;
+  const sepResult = separatorStyle ? responsiveStylesToTailwind(separatorStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const separatorClasses = sepResult.classes;
+
+  // Build locale icon map
+  const localeIconMap = new Map<string, string>();
+  for (const localeConfig of i18nConfig.locales) {
+    if (localeConfig.icon) {
+      localeIconMap.set(localeConfig.code, localeConfig.icon);
+    }
+  }
+
+  // Flag classes
+  const flagStyle = (node as any).flagStyle as StyleObject | ResponsiveStyleObject | undefined;
+  const flagResult = flagStyle ? responsiveStylesToTailwind(flagStyle, ctx.breakpoints) : { classes: [], dynamicStyles: {} };
+  const flagClasses = flagResult.classes;
+
+  // Build links
+  const links: string[] = [];
+  const currentLocale = ctx.locale || i18nConfig.defaultLocale;
+
+  for (const localeConfig of i18nConfig.locales) {
+    const code = localeConfig.code;
+    const isCurrent = code === currentLocale;
+
+    if (!showCurrent && isCurrent) continue;
+
+    const path = slugMap[code] || '/';
+    const classes = isCurrent ? activeItemClasses : itemClasses;
+    const classAttr = classes.length > 0 ? ` class="${classes.join(' ')}"` : '';
+    const currentAttr = isCurrent ? ' data-current="true"' : ' data-current="false"';
+    const hreflangAttr = ` hreflang="${localeConfig.langTag}"`;
+
+    // Display text
+    let displayText: string;
+    switch (displayType) {
+      case 'code': displayText = code.toUpperCase(); break;
+      case 'name': displayText = localeConfig.name; break;
+      case 'nativeName': default: displayText = localeConfig.nativeName; break;
+    }
+
+    // Build link content
+    let linkContent = '';
+    const localeIcon = localeIconMap.get(code);
+    if (showFlag && localeIcon) {
+      const flagClassAttr = flagClasses.length > 0 ? ` class="${flagClasses.join(' ')}"` : '';
+      linkContent += `<img src="${escapeJSX(localeIcon)}" alt="${escapeJSX(localeConfig.nativeName)} flag"${flagClassAttr}>`;
+    }
+    linkContent += `<div>${escapeJSX(displayText)}</div>`;
+
+    links.push(`${ind(ctx)}  <a href="${escapeJSX(path)}"${hreflangAttr}${currentAttr} data-locale="${escapeJSX(code)}"${classAttr}>${linkContent}</a>`);
+  }
+
+  // Join with separator
+  let linksContent: string;
+  if (showSeparator && links.length > 1) {
+    const sepClassAttr = separatorClasses.length > 0 ? ` class="${separatorClasses.join(' ')}"` : '';
+    linksContent = links.join(`\n${ind(ctx)}  <span${sepClassAttr}></span>\n`);
+  } else {
+    linksContent = links.join('\n');
+  }
+
+  const attrs = buildAttributesString((node as any).attributes, ctx);
+
+  return (
+    `${ind(ctx)}<div data-locale-list="true"${containerClassExpr}${containerStyleAttr}${attrs}>\n` +
+    linksContent + '\n' +
+    `${ind(ctx)}</div>\n`
+  );
+}
+
 /**
  * Emit SSR fallback for complex nodes (list, locale-list)
  */
@@ -716,15 +1459,48 @@ function emitIfOpen(node: ComponentNode, ctx: AstroEmitContext): string {
     return ifValue ? '' : `${ind(ctx)}{/* hidden */}\n`;
   }
 
+  // BooleanMapping → generate conditional from values map
   if (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) {
-    return `${ind(ctx)}{${ifValue.prop} && (\n`;
+    const trueValues = Object.entries(ifValue.values)
+      .filter(([, v]) => v === true)
+      .map(([k]) => `'${k}'`);
+    if (trueValues.length === 0) return `${ind(ctx)}{/* hidden */}\n`;
+    if (trueValues.length === 1) {
+      return `${ind(ctx)}{${ifValue.prop} === ${trueValues[0]} && (\n`;
+    }
+    return `${ind(ctx)}{[${trueValues.join(', ')}].includes(${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`;
+  // String template
+  if (typeof ifValue === 'string') {
+    // CMS mode: {{cms.field}} → entry.data.field
+    if (ctx.cmsMode && ifValue.includes('{{cms.')) {
+      const match = ifValue.match(/^\{\{cms\.([^}]+)\}\}$/);
+      if (match) {
+        const binding = ctx.cmsEntryBinding || 'entry';
+        return `${ind(ctx)}{${binding}.data.${match[1].trim()} && (\n`;
+      }
+    }
+
+    // List item context: {{item.field}} or {{!itemLast}} etc.
+    if (ctx.listItemBinding && /\{\{/.test(ifValue)) {
+      const match = ifValue.match(/^\{\{([^}]+)\}\}$/);
+      if (match) {
+        let expr = match[1].trim();
+        expr = rewriteItemVar(expr, ctx.listItemBinding);
+        if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+        return `${ind(ctx)}{${expr} && (\n`;
+      }
+    }
+
+    // Component prop context
+    if (ctx.isComponentDef) {
+      const fullMatch = ifValue.match(/^\{\{(.+)\}\}$/);
+      let expr = fullMatch ? fullMatch[1].trim() : ifValue.replace(/\{\{(.+?)\}\}/g, '$1');
+      if (ctx.listItemBinding) expr = rewriteItemVar(expr, ctx.listItemBinding);
+      if (ctx.listIndexVar) expr = replaceItemMetaVars(expr, ctx.listIndexVar, ctx.listSourceVar);
+      return `${ind(ctx)}{${expr} && (\n`;
+    }
   }
 
   return '';
@@ -736,13 +1512,18 @@ function emitIfClose(node: ComponentNode, ctx: AstroEmitContext): string {
 
   if (typeof ifValue === 'boolean') return '';
 
-  if (
-    (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) ||
-    (typeof ifValue === 'string' && ctx.isComponentDef)
-  ) {
+  if (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) {
     return `${ind(ctx)})}\n`;
   }
 
+  if (typeof ifValue === 'string') {
+    const hasCmsCondition = ctx.cmsMode && ifValue.includes('{{cms.');
+    const hasItemCondition = ctx.listItemBinding && /\{\{/.test(ifValue);
+    if (hasCmsCondition || hasItemCondition || ctx.isComponentDef) {
+      return `${ind(ctx)})}\n`;
+    }
+  }
+
   return '';
 }
 
@@ -759,13 +1540,25 @@ function emitChildren(
   const innerCtx = { ...ctx, indent: ctx.indent + 1, elementPath: [...ctx.elementPath] };
 
   if (typeof children === 'string') {
-    return nodeToAstro(children, innerCtx);
+    const out = nodeToAstro(children, innerCtx);
+    if (innerCtx.needsI18nResolver) ctx.needsI18nResolver = true;
+    return out;
   }
 
+  // Iterate children arrays inline with appended index (matches SSR renderer's
+  // children iteration which uses [...parentPath, index] for each child)
   if (Array.isArray(children)) {
-    return nodeToAstro(children as ComponentNode[], innerCtx);
+    let result = '';
+    for (let i = 0; i < children.length; i++) {
+      const childCtx = { ...innerCtx, elementPath: [...ctx.elementPath, i] };
+      result += nodeToAstro(children[i], childCtx);
+      if (childCtx.needsI18nResolver) ctx.needsI18nResolver = true;
+    }
+    return result;
   }
 
   // Single node
-  return nodeToAstro(children, innerCtx);
+  const out = nodeToAstro(children, innerCtx);
+  if (innerCtx.needsI18nResolver) ctx.needsI18nResolver = true;
+  return out;
 }