meno-core 1.0.53 → 1.0.54

package/lib/server/astro/nodeToAstro.ts

@@ -37,7 +37,13 @@ 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 {
+  transformCMSTemplate,
+  isTemplateExpression,
+  transformItemTemplate,
+  replaceItemMetaVars,
+  rewriteItemVar,
+} from './templateTransformer';
 import type { SlugMap } from '../../shared/slugTranslator';
 import { buildSlugIndex, translatePath } from '../../shared/slugTranslator';
 import { stripRawHtmlPrefixDeep, astroComponentName } from './astroEmitHelpers';
@@ -177,20 +183,12 @@ function localizeHref(href: string, ctx: AstroEmitContext): string {
 
 function isStyleMapping(value: unknown): value is StyleMapping {
   return (
-    typeof value === 'object' &&
-    value !== null &&
-    '_mapping' in value &&
-    (value as StyleMapping)._mapping === true
+    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
-  );
+  return typeof value === 'object' && value !== null && '_mapping' in value && (value as LinkMapping)._mapping === true;
 }
 
 /**
@@ -199,14 +197,12 @@ function isLinkMapping(value: unknown): value is LinkMapping {
 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 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()}`)}}`
-    );
+    const replaced = value.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fp) => `\${${w(`${b}.data.${fp.trim()}`)}}`);
     return `${key}={\`${replaced}\`}`;
   }
   if (ctx.listItemBinding && /\{\{/.test(value)) {
@@ -229,17 +225,10 @@ function emitAttrValue(key: string, value: string, ctx: AstroEmitContext): strin
 }
 
 function isHtmlMapping(value: unknown): value is HtmlMapping {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    '_mapping' in value &&
-    (value as HtmlMapping)._mapping === true
-  );
+  return typeof value === 'object' && value !== null && '_mapping' in value && (value as HtmlMapping)._mapping === true;
 }
 
-function isResponsiveStyle(
-  style: StyleObject | ResponsiveStyleObject
-): style is ResponsiveStyleObject {
+function isResponsiveStyle(style: StyleObject | ResponsiveStyleObject): style is ResponsiveStyleObject {
   return 'base' in style || 'tablet' in style || 'mobile' in style;
 }
 
@@ -266,7 +255,7 @@ function escapeTemplateLiteral(s: string): string {
  * Get all style mappings from a style value, collecting { prop, property, values } tuples
  */
 function collectStyleMappings(
-  style: StyleObject | ResponsiveStyleObject | undefined
+  style: StyleObject | ResponsiveStyleObject | undefined,
 ): Array<{ property: string; mapping: StyleMapping; breakpoint?: string }> {
   if (!style) return [];
   const result: Array<{ property: string; mapping: StyleMapping; breakpoint?: string }> = [];
@@ -299,14 +288,21 @@ function mappingToClassListEntries(
   mapping: StyleMapping,
   property: string,
   breakpointPrefix: string,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): string[] {
   const entries: string[] = [];
   const values = Object.entries(mapping.values);
   if (values.length === 0) return entries;
 
+  // Mappings reference component props by bare identifier. Those identifiers
+  // only exist inside a component definition — on a page the reference would
+  // be an undefined variable (an Astro build error). Mirror the runtime, where
+  // resolveStyleMapping() receives no props at page scope and drops the
+  // property: emit no conditional entries outside a component def.
+  if (!ctx.isComponentDef) return entries;
+
   // Generate utility class for each possible value
-  const propRef = ctx.isComponentDef ? mapping.prop : mapping.prop;
+  const propRef = mapping.prop;
 
   if (values.length === 2) {
     const [[val1, css1], [val2, css2]] = values;
@@ -342,11 +338,7 @@ function coerceValue(val: string): string | boolean {
 /**
  * Generate a Tailwind class name for a single property:value pair
  */
-function getClassForValue(
-  property: string,
-  value: string | number,
-  breakpointPrefix: string
-): string | null {
+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;
@@ -360,7 +352,7 @@ function buildClassAndStyleExpression(
   style: StyleObject | ResponsiveStyleObject | undefined,
   interactiveStyles: InteractiveStyles | undefined,
   elementClass: string | null,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): { classExpr: string; styleAttr: string } {
   // Static Tailwind classes from non-mapping styles
   const result = style
@@ -379,11 +371,12 @@ function buildClassAndStyleExpression(
   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 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);
@@ -392,17 +385,6 @@ function buildClassAndStyleExpression(
   // 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) => {
-        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)) {
@@ -418,7 +400,12 @@ function buildClassAndStyleExpression(
   }
 
   // Handle interactive style mappings: emit --is-N CSS variables as inline style
-  if (interactiveStyles && interactiveStyles.length > 0 && ctx.isComponentDef && hasInteractiveStyleMappings(interactiveStyles)) {
+  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
@@ -430,7 +417,9 @@ function buildClassAndStyleExpression(
 
         if (entries.length === 2) {
           const [[val1, css1], [val2, css2]] = entries;
-          varParts.push(`'${varName}': ${mapping.prop} === ${JSON.stringify(coerceValue(val1))} ? '${css1}' : '${css2}'`);
+          varParts.push(
+            `'${varName}': ${mapping.prop} === ${JSON.stringify(coerceValue(val1))} ? '${css1}' : '${css2}'`,
+          );
         } else {
           // Build a lookup object inline
           const lookupEntries = entries
@@ -443,9 +432,7 @@ function buildClassAndStyleExpression(
 
       // Merge with existing dynamic styles
       if (varParts.length > 0) {
-        const existingStyleParts = styleAttr
-          ? styleAttr.replace(/^ style=\{`/, '').replace(/`\}$/, '')
-          : '';
+        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(';') }\`}`;
@@ -516,10 +503,7 @@ function hasTemplates(text: string): boolean {
 /**
  * Build element class name for interactive styles
  */
-function buildElementClass(
-  ctx: AstroEmitContext,
-  label: string | undefined
-): string {
+function buildElementClass(ctx: AstroEmitContext, label: string | undefined): string {
   return generateElementClassName({
     fileType: ctx.fileType,
     fileName: ctx.fileName,
@@ -528,9 +512,7 @@ function buildElementClass(
   });
 }
 
-function isResponsiveStyleObject(
-  style: StyleObject | ResponsiveStyleObject
-): style is ResponsiveStyleObject {
+function isResponsiveStyleObject(style: StyleObject | ResponsiveStyleObject): style is ResponsiveStyleObject {
   return 'base' in style || 'tablet' in style || 'mobile' in style;
 }
 
@@ -539,14 +521,10 @@ function isResponsiveStyleObject(
  * link roots, or `props.style` for a component/link-instance root. Used to
  * replicate SSR's per-breakpoint merge of an instance override into the root.
  */
-function getComponentRootStyle(
-  def: ComponentDefinition | undefined
-): StyleObject | ResponsiveStyleObject | undefined {
-  const root = def?.component?.structure as
-    | { style?: unknown; props?: { style?: unknown } }
-    | undefined;
+function getComponentRootStyle(def: ComponentDefinition | undefined): StyleObject | ResponsiveStyleObject | undefined {
+  const root = def?.component?.structure as { style?: unknown; props?: { style?: unknown } } | undefined;
   if (!root || typeof root !== 'object') return undefined;
-  const s = (root.style ?? root.props?.style);
+  const s = root.style ?? root.props?.style;
   return s && typeof s === 'object' ? (s as StyleObject | ResponsiveStyleObject) : undefined;
 }
 
@@ -559,7 +537,7 @@ function getComponentRootStyle(
 function hasNonEmptyStyle(style: StyleObject | ResponsiveStyleObject): boolean {
   if (isResponsiveStyleObject(style)) {
     return Object.values(style).some(
-      (branch) => !!branch && typeof branch === 'object' && Object.keys(branch as object).length > 0
+      (branch) => !!branch && typeof branch === 'object' && Object.keys(branch as object).length > 0,
     );
   }
   return Object.keys(style).length > 0;
@@ -583,22 +561,19 @@ function stripTemplateExpressionStyle<T extends StyleObject | ResponsiveStyleObj
   if (isResponsiveStyleObject(style)) {
     const out: Record<string, unknown> = {};
     for (const [bp, branch] of Object.entries(style as Record<string, unknown>)) {
-      out[bp] = branch && typeof branch === 'object'
-        ? cleanFlat(branch as Record<string, unknown>)
-        : branch;
+      out[bp] = branch && typeof branch === 'object' ? cleanFlat(branch as Record<string, unknown>) : branch;
     }
     return out as T;
   }
   return cleanFlat(style as Record<string, unknown>) as T;
 }
 
-
 /**
  * Build HTML attributes string from node attributes
  */
 function buildAttributesString(
   attributes: Record<string, string | number | boolean> | undefined,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): string {
   if (!attributes) return '';
   const parts: string[] = [];
@@ -651,7 +626,7 @@ function buildAttributesString(
       } 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 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()}`)}}`);
@@ -702,7 +677,7 @@ function resolveI18n(value: unknown, ctx: AstroEmitContext): unknown {
  */
 export function nodeToAstro(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): string {
   if (node === null || node === undefined) return '';
 
@@ -718,6 +693,18 @@ export function nodeToAstro(
       ctx.needsI18nResolver = true;
       return `${ind(ctx)}{r(${JSON.stringify(stripRawHtmlPrefixDeep(resolved))})}\n`;
     }
+    // Page context without a locale: resolve through the default locale
+    // (resolveTranslation falls back exact → default → first available →
+    // empty) instead of stringifying the i18n object to "[object Object]".
+    if (isI18nValue(resolved)) {
+      const config = ctx.i18nConfig ?? DEFAULT_I18N_CONFIG;
+      const fallbackLocale = ctx.defaultLocale ?? config.defaultLocale;
+      const fallbackResolved = resolveI18nValue(resolved, fallbackLocale, config);
+      if (typeof fallbackResolved === 'string') {
+        return nodeToAstro(fallbackResolved, ctx);
+      }
+      return `${ind(ctx)}${String(fallbackResolved ?? '')}\n`;
+    }
     // If resolution returned a non-string (e.g. array), stringify it
     return `${ind(ctx)}${String(resolved ?? '')}\n`;
   }
@@ -726,7 +713,12 @@ export function nodeToAstro(
   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);
+      const transformed = transformCMSTemplate(
+        node,
+        ctx.cmsEntryBinding || 'entry',
+        ctx.cmsRichTextFields,
+        ctx.cmsWrapFn,
+      );
       return `${ind(ctx)}${transformed}\n`;
     }
     // List item binding: transform {{item.field}} expressions
@@ -821,7 +813,7 @@ function splitImageClasses(allClasses: string[]): { pictureClasses: string[]; im
   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)) {
+    if (IMG_TAILWIND_PREFIXES.some((p) => baseCls.startsWith(p)) || IMG_OPACITY_PATTERN.test(baseCls)) {
       imgClasses.push(cls);
     } else {
       pictureClasses.push(cls);
@@ -852,7 +844,7 @@ function extractPxWidth(val: unknown): number | null {
  */
 function computeSizesAttribute(
   style: StyleObject | ResponsiveStyleObject | undefined,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
 ): string {
   if (!style) return DEFAULT_SIZES;
 
@@ -868,9 +860,7 @@ function computeSizesAttribute(
 
   // Walk breakpoints from smallest to largest so the emitted media queries
   // are ordered from narrowest to widest, with the unconditional base last.
-  const bpEntries = Object.entries(breakpoints).sort(
-    (a, b) => a[1].breakpoint - b[1].breakpoint
-  );
+  const bpEntries = Object.entries(breakpoints).sort((a, b) => a[1].breakpoint - b[1].breakpoint);
 
   const parts: string[] = [];
   // Track the "effective" width as we walk up: if a breakpoint doesn't set its
@@ -905,13 +895,34 @@ function computeSizesAttribute(
 }
 
 /**
- * Merge additional CSS declarations into an existing ` style="..."` attribute
- * string. If no style attribute exists yet, builds one. The inputs are raw CSS
- * already escaped for HTML attribute context.
+ * Merge additional CSS declarations into an existing ` style` attribute
+ * string. If no style attribute exists yet, builds a static one. Handles all
+ * three attr shapes the emitter produces: static `style="..."`, dynamic
+ * template-literal `style={\`...\`}`, and dynamic expression `style={...}`.
+ * The inputs are raw CSS already escaped for HTML attribute context.
  */
 function injectInlineStyle(styleAttr: string, extraCss: string): string {
   if (!extraCss) return styleAttr;
   if (!styleAttr) return ` style="${extraCss}"`;
+
+  // Dynamic template-literal style attr (` style={`...`}`): append the extra
+  // declarations inside the template literal so they survive the merge.
+  const dynLiteralMatch = styleAttr.match(/^ style=\{`([\s\S]*)`\}$/);
+  if (dynLiteralMatch) {
+    const existing = dynLiteralMatch[1];
+    const trimmed = existing.trimEnd();
+    const sep = trimmed.length > 0 && !trimmed.endsWith(';') ? ';' : '';
+    return ` style={\`${existing}${sep}${extraCss}\`}`;
+  }
+
+  // Dynamic expression style attr (` style={expr}`, e.g. the Object.entries()
+  // form for interactive style mappings): wrap the expression in a template
+  // literal and append the extra declarations after it.
+  const dynExprMatch = styleAttr.match(/^ style=\{([\s\S]*)\}$/);
+  if (dynExprMatch) {
+    return ` style={\`\${${dynExprMatch[1]}};${extraCss}\`}`;
+  }
+
   return styleAttr.replace(/style="([^"]*)"/, (_, existing: string) => {
     const trimmed = existing.trimEnd();
     const sep = trimmed.length > 0 && !trimmed.endsWith(';') ? ';' : '';
@@ -932,7 +943,10 @@ const PICTURE_WIDTHS = [500, 800, 1080, 1600, 2400];
  * identifier (`imgSubHeroPhoto`) for use as an ESM import variable.
  */
 function imagePathToVarName(srcPath: string): string {
-  const stripped = srcPath.replace(/^\/+/, '').replace(/^images\//, '').replace(/\.[^.]+$/, '');
+  const stripped = srcPath
+    .replace(/^\/+/, '')
+    .replace(/^images\//, '')
+    .replace(/\.[^.]+$/, '');
   const parts = stripped.split(/[/_\-\s.]+/).filter(Boolean);
   if (parts.length === 0) return 'imgAsset';
   const camel = parts
@@ -1003,9 +1017,7 @@ function registerStaticImageImport(src: string, ctx: AstroEmitContext): string {
  * object-cover / opacity-* keep landing on the <img>. Returns null when the
  * class expression is dynamic (class:list) — callers fall back to div wrap.
  */
-function splitStaticClassExpr(
-  classExpr: string
-): { outerClasses: string[]; innerClasses: string[] } | null {
+function splitStaticClassExpr(classExpr: string): { outerClasses: string[]; innerClasses: string[] } | null {
   if (classExpr.includes('class:list=')) return null;
   const classMatch = classExpr.match(/class="([^"]*)"/);
   if (!classMatch) return { outerClasses: [], innerClasses: [] };
@@ -1018,10 +1030,7 @@ function splitStaticClassExpr(
  * Format a static class+style pair as an Astro `pictureAttributes={{...}}`
  * prop. `classValue` comes pre-split (outer layout classes only).
  */
-function formatPictureAttributesProp(
-  classValue: string,
-  styleAttr: string
-): string {
+function formatPictureAttributesProp(classValue: string, styleAttr: string): string {
   const styleMatch = styleAttr.match(/style="([^"]*)"/);
   const parts: string[] = [];
   if (classValue) parts.push(`class: ${JSON.stringify(classValue)}`);
@@ -1045,7 +1054,7 @@ function emitStaticPictureImage(
   ifExpr: string,
   ifClose: string,
   blurHash: string | undefined,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): string {
   const varName = registerStaticImageImport(src, ctx);
 
@@ -1093,9 +1102,7 @@ function emitStaticPictureImage(
   // on the <picture>, inner img-specific classes as `class` on <Picture>.
   if (split) {
     const outerClassValue = split.outerClasses.join(' ');
-    const innerClassAttr = split.innerClasses.length > 0
-      ? ` class="${split.innerClasses.join(' ')}"`
-      : '';
+    const innerClassAttr = split.innerClasses.length > 0 ? ` class="${split.innerClasses.join(' ')}"` : '';
     const pictureAttrs = formatPictureAttributesProp(outerClassValue, styleAttr);
     return `${ifExpr}${ind(ctx)}<Picture${pictureAttrs} src={${varName}}${altAttr}${innerClassAttr} formats={['avif','webp']} widths={${widthsLiteral}} sizes="${escapeJSX(sizesValue)}"${loadingAttr}${fetchpriorityAttr} />\n${ifClose}`;
   }
@@ -1113,10 +1120,7 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
 
   // Element class for interactive styles
   let elementClass: string | null = null;
-  if (
-    (node.interactiveStyles && node.interactiveStyles.length > 0) ||
-    node.generateElementClass
-  ) {
+  if ((node.interactiveStyles && node.interactiveStyles.length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, node.label);
     if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
@@ -1127,7 +1131,7 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
     style,
     node.interactiveStyles as InteractiveStyles | undefined,
     elementClass,
-    ctx
+    ctx,
   );
 
   // Extract image-specific attributes
@@ -1166,7 +1170,7 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
       emitIfOpen(node, ctx),
       emitIfClose(node, ctx),
       metadata?.blurHash,
-      ctx
+      ctx,
     );
   }
 
@@ -1198,12 +1202,8 @@ function emitImageNode(node: HtmlNode, ctx: AstroEmitContext): string {
   // is a replaced element and doesn't paint CSS backgrounds reliably).
   // Once the real image loads we clear the background on the wrapper so the
   // low-quality placeholder disappears.
-  const blurWrapperCss = hasBlur
-    ? `background-image:url(${escapeJSX(metadata!.blurHash!)});background-size:cover`
-    : '';
-  const blurOnload = hasBlur
-    ? ` onload="this.parentElement.style.backgroundImage=''"`
-    : '';
+  const blurWrapperCss = hasBlur ? `background-image:url(${escapeJSX(metadata!.blurHash!)});background-size:cover` : '';
+  const blurOnload = hasBlur ? ` onload="this.parentElement.style.backgroundImage=''"` : '';
 
   // Conditional rendering
   const ifExpr = emitIfOpen(node, ctx);
@@ -1302,17 +1302,19 @@ function emitHtmlNode(node: HtmlNode, ctx: AstroEmitContext): string {
 
   // Element class for interactive styles
   let elementClass: string | null = null;
-  if (
-    (node.interactiveStyles && node.interactiveStyles.length > 0) ||
-    node.generateElementClass
-  ) {
+  if ((node.interactiveStyles && node.interactiveStyles.length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, label);
     if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
     }
   }
 
-  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  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)
@@ -1369,7 +1371,7 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
         }
       } 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 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()}`)}}`);
@@ -1433,9 +1435,9 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
         // root are dropped downstream (styleObjectToCSS skips mappings) /
         // stripped here, falling back to the component's own emission.
         const rootStyle = getComponentRootStyle(ctx.globalComponents[node.component]);
-        const merged = (rootStyle
-          ? deepMergeStyles(rootStyle, instanceStyle!)
-          : instanceStyle!) as StyleObject | ResponsiveStyleObject;
+        const merged = (rootStyle ? deepMergeStyles(rootStyle, instanceStyle!) : instanceStyle!) as
+          | StyleObject
+          | ResponsiveStyleObject;
         const cssSafe = stripTemplateExpressionStyle(merged);
         if (hasNonEmptyStyle(cssSafe)) rules.push({ style: cssSafe }); // no prefix/postfix → `.cls {…}`
       }
@@ -1460,22 +1462,14 @@ function emitComponentInstance(node: ComponentInstanceNode, ctx: AstroEmitContex
     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)}`
-  );
+  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 (ComponentNode | string)[] | string | undefined, ctx);
     if (defaultContent.trim()) {
-      return (
-        `${ind(ctx)}<slot>\n` +
-        defaultContent +
-        `${ind(ctx)}</slot>\n`
-      );
+      return `${ind(ctx)}<slot>\n` + defaultContent + `${ind(ctx)}</slot>\n`;
     }
   }
   return `${ind(ctx)}<slot />\n`;
@@ -1486,17 +1480,19 @@ function emitEmbedNode(node: EmbedNode, 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
-  ) {
+  if ((node.interactiveStyles && node.interactiveStyles.length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, node.label);
     if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
     }
   }
 
-  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  const { classExpr, styleAttr } = buildClassAndStyleExpression(
+    style,
+    node.interactiveStyles as InteractiveStyles | undefined,
+    elementClass,
+    ctx,
+  );
   const attrs = buildAttributesString(node.attributes, ctx);
 
   // Handle HTML mapping (prop-dependent content)
@@ -1561,10 +1557,7 @@ function emitLinkNode(node: LinkNode, 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
-  ) {
+  if ((node.interactiveStyles && node.interactiveStyles.length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, node.label);
     if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
@@ -1572,7 +1565,12 @@ function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
   }
 
   // Build class expression with olink base class
-  const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles as InteractiveStyles | undefined, elementClass, ctx);
+  const { classExpr, styleAttr } = buildClassAndStyleExpression(
+    style,
+    node.interactiveStyles as InteractiveStyles | undefined,
+    elementClass,
+    ctx,
+  );
   let finalClassExpr = classExpr;
   if (!classExpr.includes('olink')) {
     if (classExpr) {
@@ -1622,7 +1620,7 @@ function emitLinkNode(node: LinkNode, ctx: AstroEmitContext): string {
       }
     } else if (ctx.cmsMode && /\{\{cms\./.test(href)) {
       const b = ctx.cmsEntryBinding || 'entry';
-      const w = (expr: string) => ctx.cmsWrapFn ? `${ctx.cmsWrapFn}(${expr})` : expr;
+      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()}`)}}`;
@@ -1660,10 +1658,7 @@ 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
-  ) {
+  if ((node.interactiveStyles && node.interactiveStyles.length > 0) || node.generateElementClass) {
     elementClass = buildElementClass(ctx, node.label);
     if (elementClass && node.interactiveStyles?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
@@ -1674,7 +1669,7 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
     style,
     node.interactiveStyles as InteractiveStyles | undefined,
     elementClass,
-    ctx
+    ctx,
   );
 
   const src = node.src as string | undefined;
@@ -1694,7 +1689,7 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
       '',
       '',
       staticMeta.blurHash,
-      ctx
+      ctx,
     );
   }
 
@@ -1718,12 +1713,8 @@ function emitImageTypeNode(node: any, ctx: AstroEmitContext): string {
   const hasBlur = !!metadata.blurHash;
   const useWrapper = hasAvif || hasBlur;
 
-  const blurWrapperCss = hasBlur
-    ? `background-image:url(${escapeJSX(metadata.blurHash!)});background-size:cover`
-    : '';
-  const blurOnload = hasBlur
-    ? ` onload="this.parentElement.style.backgroundImage=''"`
-    : '';
+  const blurWrapperCss = hasBlur ? `background-image:url(${escapeJSX(metadata.blurHash!)});background-size:cover` : '';
+  const blurOnload = hasBlur ? ` onload="this.parentElement.style.backgroundImage=''"` : '';
 
   if (useWrapper) {
     const imgFillClasses = IMG_FILL_CLASSES.slice();
@@ -1812,19 +1803,17 @@ function emitListNode(node: ListNode, ctx: AstroEmitContext): string {
   };
 
   const children = node.children
-    ? (node.children as (ComponentNode | string)[]).map((child, i) => {
-        const childCtx = { ...innerCtx, elementPath: [...ctx.elementPath, i] };
-        const out = nodeToAstro(child, childCtx);
-        if (childCtx.needsI18nResolver) ctx.needsI18nResolver = true;
-        return out;
-      }).join('')
+    ? (node.children as (ComponentNode | string)[])
+        .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`
-  );
+  return `${ind(ctx)}{${mapSource}.map((${itemAs}, ${indexVar}) => (\n` + children + `${ind(ctx)}))}\n`;
 }
 
 /**
@@ -1876,8 +1865,7 @@ function emitCollectionListNode(node: ListNode, ctx: AstroEmitContext): string {
   // shape the templates expect ({{item.field}} → item.field), and synthesize the
   // `_url`/`_id` meta the CMS data model exposes. Filter/sort above operate on the
   // raw entries (e.data.*); this map runs last so it sees the final set.
-  const urlExpr = ctx.collectionUrlExpr?.get(source)
-    ?? `\`/${source}/\${e.data.slug ?? e.id}\``;
+  const urlExpr = ctx.collectionUrlExpr?.get(source) ?? `\`/${source}/\${e.data.slug ?? e.id}\``;
   queryChain += `.then(items => items.map((e) => ({ ...e.data, _id: e.id, _url: ${urlExpr} })))`;
 
   ctx.frontmatterLines.push(`const ${collectionVar} = ${queryChain};`);
@@ -1896,19 +1884,17 @@ function emitCollectionListNode(node: ListNode, ctx: AstroEmitContext): string {
   };
 
   const children = node.children
-    ? (node.children as (ComponentNode | string)[]).map((child, i) => {
-        const childCtx = { ...innerCtx, elementPath: [...ctx.elementPath, i] };
-        const out = nodeToAstro(child, childCtx);
-        if (childCtx.needsI18nResolver) ctx.needsI18nResolver = true;
-        return out;
-      }).join('')
+    ? (node.children as (ComponentNode | string)[])
+        .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`
-  );
+  return `${ind(ctx)}{${collectionVar}.map((${itemAs}, ${indexVar}) => (\n` + children + `${ind(ctx)}))}\n`;
 }
 
 /**
@@ -1932,7 +1918,10 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
   const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
 
   let elementClass: string | null = null;
-  if ((node.interactiveStyles && (node.interactiveStyles as InteractiveStyles).length > 0) || node.generateElementClass) {
+  if (
+    (node.interactiveStyles && (node.interactiveStyles as InteractiveStyles).length > 0) ||
+    node.generateElementClass
+  ) {
     elementClass = buildElementClass(ctx, node.label);
     if (elementClass && (node.interactiveStyles as InteractiveStyles)?.length && ctx.collectedInteractiveStyles) {
       ctx.collectedInteractiveStyles.set(elementClass, node.interactiveStyles as InteractiveStyles);
@@ -1943,22 +1932,28 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
     style,
     node.interactiveStyles as InteractiveStyles | undefined,
     elementClass,
-    ctx
+    ctx,
   );
 
   // Build item classes
   const itemStyle = node.itemStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const itemResult = itemStyle ? responsiveStylesToTailwind(itemStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
+  const itemResult = itemStyle
+    ? responsiveStylesToTailwind(itemStyle, ctx.breakpoints, ctx.responsiveScales)
+    : { 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, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
+  const activeResult = activeItemStyle
+    ? responsiveStylesToTailwind(activeItemStyle, ctx.breakpoints, ctx.responsiveScales)
+    : { 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, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
+  const sepResult = separatorStyle
+    ? responsiveStylesToTailwind(separatorStyle, ctx.breakpoints, ctx.responsiveScales)
+    : { classes: [], dynamicStyles: {} };
   const separatorClasses = sepResult.classes;
 
   // Build locale icon map
@@ -1971,7 +1966,9 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
 
   // Flag classes
   const flagStyle = node.flagStyle as StyleObject | ResponsiveStyleObject | undefined;
-  const flagResult = flagStyle ? responsiveStylesToTailwind(flagStyle, ctx.breakpoints, ctx.responsiveScales) : { classes: [], dynamicStyles: {} };
+  const flagResult = flagStyle
+    ? responsiveStylesToTailwind(flagStyle, ctx.breakpoints, ctx.responsiveScales)
+    : { classes: [], dynamicStyles: {} };
   const flagClasses = flagResult.classes;
 
   // Build links
@@ -1993,9 +1990,16 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
     // 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;
+      case 'code':
+        displayText = code.toUpperCase();
+        break;
+      case 'name':
+        displayText = localeConfig.name;
+        break;
+      case 'nativeName':
+      default:
+        displayText = localeConfig.nativeName;
+        break;
     }
 
     // Build link content
@@ -2007,7 +2011,9 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
     }
     linkContent += `<div>${escapeJSX(displayText)}</div>`;
 
-    links.push(`${ind(ctx)}  <a href="${escapeJSX(path)}"${hreflangAttr}${currentAttr} data-locale="${escapeJSX(code)}"${classAttr}>${linkContent}</a>`);
+    links.push(
+      `${ind(ctx)}  <a href="${escapeJSX(path)}"${hreflangAttr}${currentAttr} data-locale="${escapeJSX(code)}"${classAttr}>${linkContent}</a>`,
+    );
   }
 
   // Join with separator
@@ -2023,7 +2029,8 @@ function emitLocaleListNode(node: LocaleListNode, ctx: AstroEmitContext): string
 
   return (
     `${ind(ctx)}<div data-locale-list="true"${containerClassExpr}${containerStyleAttr}${attrs}>\n` +
-    linksContent + '\n' +
+    linksContent +
+    '\n' +
     `${ind(ctx)}</div>\n`
   );
 }
@@ -2111,6 +2118,10 @@ function emitIfClose(node: ComponentNode, ctx: AstroEmitContext): string {
   if (typeof ifValue === 'boolean') return '';
 
   if (typeof ifValue === 'object' && ifValue._mapping && ctx.isComponentDef) {
+    // Degenerate mapping (no true values): emitIfOpen emitted only a
+    // `{/* hidden */}` comment, not a `{cond && (` opener — close nothing.
+    const hasTrueValue = Object.values(ifValue.values).some((v) => v === true);
+    if (!hasTrueValue) return '';
     return `${ind(ctx)})}\n`;
   }
 
@@ -2139,7 +2150,7 @@ function emitIfClose(node: ComponentNode, ctx: AstroEmitContext): string {
 
 function emitChildren(
   children: (ComponentNode | string)[] | string | ComponentNode | null | undefined,
-  ctx: AstroEmitContext
+  ctx: AstroEmitContext,
 ): string {
   if (!children) return '';