meno-core 1.0.39 → 1.0.40

package/lib/server/astro/pageEmitter.ts

@@ -3,10 +3,12 @@
  * Generates .astro page files that import and compose components
  */
 
-import type { JSONPage, ComponentDefinition } from '../../shared/types';
+import type { JSONPage, ComponentDefinition, I18nConfig } from '../../shared/types';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+import type { ImageMetadataMap } from '../ssr/imageMetadata';
+import type { SlugMap } from '../../shared/slugTranslator';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -41,6 +43,14 @@ export interface PageEmitOptions {
   pageName: string;
   /** Breakpoint config for responsive Tailwind classes */
   breakpoints?: BreakpointConfig;
+  /** Image metadata map for responsive image generation */
+  imageMetadataMap?: ImageMetadataMap;
+  /** I18n config for locale list rendering */
+  i18nConfig?: I18nConfig;
+  /** Locale→slug map for current page (for locale list links) */
+  currentPageSlugMap?: Record<string, string>;
+  /** Slug mappings for translating internal link hrefs */
+  slugMappings?: SlugMap[];
 }
 
 // ---------------------------------------------------------------------------
@@ -88,6 +98,10 @@ export function emitAstroPage(options: PageEmitOptions): string {
     ssrFallbacks,
     pageName,
     breakpoints: breakpointsOpt,
+    imageMetadataMap,
+    i18nConfig,
+    currentPageSlugMap,
+    slugMappings,
   } = options;
 
   const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
@@ -110,6 +124,14 @@ export function emitAstroPage(options: PageEmitOptions): string {
     fileType: 'page',
     fileName: pageName,
     breakpoints,
+    imageMetadataMap,
+    locale,
+    i18nConfig,
+    currentPageSlugMap,
+    frontmatterLines: [],
+    astroImports: new Set<string>(),
+    slugMappings,
+    i18nDefaultLocale: i18nConfig?.defaultLocale,
   };
 
   // Emit the template body
@@ -117,6 +139,13 @@ export function emitAstroPage(options: PageEmitOptions): string {
 
   // Build frontmatter with imports
   const importLines: string[] = [];
+
+  // Add Astro API imports (e.g., getCollection) if collected during emission
+  if (ctx.astroImports && ctx.astroImports.size > 0) {
+    const astroImports = Array.from(ctx.astroImports);
+    importLines.push(`import { ${astroImports.join(', ')} } from 'astro:content';`);
+  }
+
   importLines.push(`import BaseLayout from '${layoutImportPath}';`);
 
   // Sort component imports alphabetically
@@ -137,8 +166,13 @@ export function emitAstroPage(options: PageEmitOptions): string {
   const escapedMeta = escapeTemplateLiteral(meta);
   const escapedFontPreloads = escapeTemplateLiteral(fontPreloads);
 
+  // Collect frontmatter lines from list emission (e.g., getCollection calls)
+  const extraFrontmatter = ctx.frontmatterLines && ctx.frontmatterLines.length > 0
+    ? '\n' + ctx.frontmatterLines.join('\n')
+    : '';
+
   return `---
-${importLines.join('\n')}
+${importLines.join('\n')}${extraFrontmatter}
 ---
 <BaseLayout
   title="${escapeJSX(title)}"
@@ -149,7 +183,9 @@ ${importLines.join('\n')}
   fontPreloads={\`${escapedFontPreloads}\`}
   libraryTags={${libraryTagsLiteral}}
 >
-${templateBody}</BaseLayout>
+  <div id="root">
+${templateBody}  </div>
+</BaseLayout>
 `;
 }
 

package/lib/server/astro/tailwindMapper.ts

@@ -263,6 +263,10 @@ const singleValueMatches: Record<string, string> = {
   'right:0': 'right-0',
   'bottom:0': 'bottom-0',
   'left:0': 'left-0',
+  'outline:none': '[outline:none]',
+  'background:none': '[background:none]',
+  'background:transparent': '[background:transparent]',
+  'backgroundColor:transparent': 'bg-transparent',
 };
 
 // ---------------------------------------------------------------------------
@@ -331,7 +335,7 @@ const arbitraryPrefixMap: Record<string, string> = {
   backdropFilter: 'backdrop',
   transform: '[transform]',
   transformOrigin: 'origin',
-  transition: 'transition',
+  transition: '[transition]',
   mixBlendMode: 'mix-blend',
   clipPath: '[clip-path]',
 
@@ -408,16 +412,44 @@ export function propertyToTailwind(
   }
 
   // Color variable handling:
-  // "var(--text)" → "text-[var(--text)]"
-  // Bare color name like "text" → "text-[var(--text)]"
+  // "var(--text)" → "text-[color:var(--text)]" (type hint avoids ambiguity with font-size)
+  // Bare color name like "text" → "text-[color:var(--text)]"
   if (property === 'color' || property === 'backgroundColor' || property === 'borderColor') {
     const prefix = property === 'color' ? 'text' : property === 'backgroundColor' ? 'bg' : 'border';
     if (strValue.includes('var(')) {
-      return `${prefix}-[${strValue}]`;
+      return `${prefix}-[color:${strValue}]`;
     }
     // Bare name (not a hex, rgb, or number-starting value)
     if (!strValue.match(/^[#\d]/) && !strValue.includes('rgb') && !strValue.includes('hsl')) {
-      return `${prefix}-[var(--${strValue})]`;
+      return `${prefix}-[color:var(--${strValue})]`;
+    }
+  }
+
+  // Color properties with actual color values need type hints to avoid ambiguity
+  if (property === 'borderColor' || property === 'color') {
+    const prefix = property === 'color' ? 'text' : 'border';
+    const sanitized = strValue.replace(/\s+/g, '_');
+    return `${prefix}-[color:${sanitized}]`;
+  }
+
+  // Border shorthand (e.g., "1px solid", "2px solid var(--border)") needs arbitrary property syntax
+  // because Tailwind's border-[...] only accepts width values, not compound shorthands
+  if (property === 'border' || property === 'borderTop' || property === 'borderRight' ||
+      property === 'borderBottom' || property === 'borderLeft') {
+    if (strValue.includes('solid') || strValue.includes('dashed') || strValue.includes('dotted') || strValue.includes('none')) {
+      const cssProp = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const sanitized = strValue.replace(/\s+/g, '_');
+      return `[${cssProp}:${sanitized}]`;
+    }
+  }
+
+  // `background` is a CSS shorthand — Tailwind's bg-[...] maps to background-color, not background.
+  // For non-color values (none, transparent, gradients, etc.), use arbitrary property syntax.
+  if (property === 'background') {
+    const isSimpleColor = /^(#[0-9a-fA-F]{3,8}|rgb|hsl|var\()/.test(strValue);
+    if (!isSimpleColor) {
+      const sanitized = strValue.replace(/\s+/g, '_');
+      return `[background:${sanitized}]`;
     }
   }
 
@@ -439,9 +471,16 @@ export function propertyToTailwind(
   // Standard arbitrary value: prefix-[value]
   const sanitized = strValue.replace(/\s+/g, '_');
 
-  // Font family names need quotes in arbitrary syntax for Tailwind to parse correctly
-  if (property === 'fontFamily' && !sanitized.includes(',') && !sanitized.startsWith("'")) {
-    return `${twPrefix}-['${sanitized}']`;
+  // Disambiguate properties that share a Tailwind prefix with another CSS property.
+  // Without type hints, Tailwind guesses wrong (e.g., text-[var(--x)] → color instead of font-size).
+  if (property === 'fontSize') {
+    return `text-[length:${sanitized}]`;
+  }
+  if (property === 'fontFamily') {
+    return `font-[family-name:${sanitized}]`;
+  }
+  if (property === 'fontWeight') {
+    return `font-[number:${sanitized}]`;
   }
 
   return `${twPrefix}-[${sanitized}]`;
@@ -459,6 +498,16 @@ export function stylesToTailwind(
   const classes: string[] = [];
   const dynamicStyles: Record<string, string> = {};
 
+  // When borderColor is present alongside a border shorthand, Tailwind's CSS
+  // ordering can cause the shorthand's arbitrary property `[border:...]` to
+  // override the longhand `border-[color:...]`. To avoid this, decompose
+  // border shorthands into width + style only (dropping the color part) so
+  // borderColor can take effect without conflicts.
+  const hasBorderColor = 'borderColor' in style && !isStyleMapping(style.borderColor);
+  const borderShorthands = new Set([
+    'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
+  ]);
+
   for (const [prop, value] of Object.entries(style)) {
     if (isStyleMapping(value)) continue;
 
@@ -471,6 +520,18 @@ export function stylesToTailwind(
       continue;
     }
 
+    // Decompose border shorthands when borderColor is separately specified
+    if (hasBorderColor && borderShorthands.has(prop)) {
+      const parts = strValue.split(/\s+/);
+      // Parse width and style from shorthand (e.g. "1px solid #ccc" → "1px", "solid")
+      const width = parts.find(p => /^\d/.test(p) || p === '0');
+      const borderStyle = parts.find(p => /^(solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/.test(p));
+      const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      if (width) classes.push(`[${cssProp}-width:${width}]`);
+      if (borderStyle) classes.push(`[${cssProp}-style:${borderStyle}]`);
+      continue;
+    }
+
     const twClass = propertyToTailwind(prop, value);
     if (twClass) {
       classes.push(twClass);

package/lib/server/astro/templateTransformer.ts

@@ -0,0 +1,107 @@
+/**
+ * CMS Template Expression Transformer for Astro Export
+ * Converts {{cms.field}} and {{item.field}} template expressions to Astro expressions
+ */
+
+// CMS template pattern (from cmsSSRProcessor.ts)
+const CMS_TEMPLATE_PATTERN = /\{\{cms\.([^}]+)\}\}/g;
+// Item template pattern for list iteration
+const ITEM_TEMPLATE_PATTERN = /\{\{([^}]+)\}\}/g;
+
+export function isTemplateExpression(text: string): boolean {
+  return /\{\{.+?\}\}/.test(text);
+}
+
+export function transformCMSTemplate(
+  text: string,
+  binding: string = 'entry',
+  richTextFields?: Set<string>,
+  wrapFn?: string
+): string {
+  const w = (expr: string) => wrapFn ? `${wrapFn}(${expr})` : expr;
+
+  // Check if entire text is a single {{cms.field}} expression
+  const fullMatch = text.match(/^\{\{cms\.([^}]+)\}\}$/);
+  if (fullMatch) {
+    const fieldPath = fullMatch[1].trim();
+    const topLevelField = fieldPath.split('.')[0];
+
+    // Rich-text fields use Fragment set:html
+    if (richTextFields?.has(topLevelField)) {
+      return `<Fragment set:html={${w(`${binding}.data.${fieldPath}`)}} />`;
+    }
+
+    return `{${w(`${binding}.data.${fieldPath}`)}}`;
+  }
+
+  // Mixed content: "Hello {{cms.name}}" → {`Hello ${entry.data.name}`}
+  if (CMS_TEMPLATE_PATTERN.test(text)) {
+    CMS_TEMPLATE_PATTERN.lastIndex = 0;
+    const replaced = text.replace(CMS_TEMPLATE_PATTERN, (_, fieldPath) => {
+      return `\${${w(`${binding}.data.${fieldPath.trim()}`)}}`;
+    });
+    return `{\`${replaced}\`}`;
+  }
+
+  return text;
+}
+
+/**
+ * Replace legacy itemIndex/itemFirst/itemLast meta-variables with
+ * the actual .map() callback index parameter name.
+ */
+/**
+ * Rewrite the default `item.` prefix to the actual .map() parameter name
+ * when itemAs differs from 'item' (e.g., itemAs='link' → item.text → link.text).
+ */
+export function rewriteItemVar(expr: string, itemVar: string): string {
+  if (itemVar === 'item') return expr;
+  return expr.replace(/\bitem\./g, `${itemVar}.`);
+}
+
+export function replaceItemMetaVars(expr: string, indexVar: string, sourceVar?: string, itemVar?: string): string {
+  const lastExpr = sourceVar
+    ? `(${indexVar} === ${sourceVar}.length - 1)`
+    : `false /* itemLast not supported */`;
+  let result = expr
+    .replace(/\bitemIndex\b/g, indexVar)
+    .replace(/\bitemFirst\b/g, `(${indexVar} === 0)`)
+    .replace(/\bitemLast\b/g, lastExpr);
+  if (itemVar) result = rewriteItemVar(result, itemVar);
+  return result;
+}
+
+export function transformItemTemplate(
+  text: string,
+  itemVar: string = 'item',
+  indexVar?: string,
+  sourceVar?: string
+): string {
+  // Check if entire text is a single {{expression}}
+  const fullMatch = text.match(/^\{\{(.+)\}\}$/);
+  if (fullMatch) {
+    let expr = fullMatch[1].trim();
+    expr = rewriteItemVar(expr, itemVar);
+    if (indexVar) expr = replaceItemMetaVars(expr, indexVar, sourceVar);
+    // If it contains a dot, it's item.field
+    if (expr.startsWith(`${itemVar}.`)) {
+      return `{${expr}}`;
+    }
+    // Bare expression like {{features}} - keep as prop reference
+    return `{${expr}}`;
+  }
+
+  // Mixed content: replace each {{expr}}
+  if (ITEM_TEMPLATE_PATTERN.test(text)) {
+    ITEM_TEMPLATE_PATTERN.lastIndex = 0;
+    const replaced = text.replace(ITEM_TEMPLATE_PATTERN, (_, expr) => {
+      let trimmed = expr.trim();
+      trimmed = rewriteItemVar(trimmed, itemVar);
+      if (indexVar) trimmed = replaceItemMetaVars(trimmed, indexVar, sourceVar);
+      return `\${${trimmed}}`;
+    });
+    return `{\`${replaced}\`}`;
+  }
+
+  return text;
+}

package/lib/server/index.ts

@@ -65,6 +65,15 @@ export { buildStaticPages } from '../../build-static';
 // Astro export
 export { buildAstroProject } from '../../build-astro';
 
+// Webflow export
+export { buildWebflowPayload } from './webflow';
+export type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowElement,
+  WebflowStyleClass,
+} from './webflow';
+
 // Utilities
 export * from './utils';
 

package/lib/server/routes/api/components.ts

@@ -4,6 +4,8 @@
  */
 
 import type { ComponentService } from '../../services/componentService';
+import type { PageService } from '../../services/pageService';
+import type { ComponentNode } from '../../../shared/types';
 import { createCorsHeaders } from '../../middleware/cors';
 import { jsonResponse } from './shared';
 import { formatJsonErrorMessage } from '../../../shared/jsonRepair';
@@ -96,6 +98,66 @@ export async function handleComponentJavaScriptRoute(
   });
 }
 
+/**
+ * Handle component usage API endpoint - GET /api/component-usage
+ * Returns how many times each component is used across all pages and other components
+ */
+export function handleComponentUsageRoute(
+  pageService: PageService,
+  componentService: ComponentService
+): Response {
+  const usageMap = new Map<string, { count: number; files: Map<string, { name: string; path: string; type: 'page' | 'component' }> }>();
+
+  function walkTree(node: ComponentNode | undefined | null, fileName: string, filePath: string, fileType: 'page' | 'component') {
+    if (!node || typeof node !== 'object') return;
+    if (node.type === 'component' && 'component' in node && (node as any).component) {
+      const compName = (node as any).component as string;
+      if (!usageMap.has(compName)) {
+        usageMap.set(compName, { count: 0, files: new Map() });
+      }
+      const entry = usageMap.get(compName)!;
+      entry.count++;
+      entry.files.set(filePath, { name: fileName, path: filePath, type: fileType });
+    }
+    if ('children' in node && Array.isArray((node as any).children)) {
+      for (const child of (node as any).children) {
+        if (child && typeof child === 'object') {
+          walkTree(child as ComponentNode, fileName, filePath, fileType);
+        }
+      }
+    }
+  }
+
+  // Walk all pages
+  const pagePaths = pageService.getAllPagePaths();
+  for (const path of pagePaths) {
+    const pageData = pageService.getPageData(path);
+    if (pageData && 'root' in pageData && pageData.root) {
+      const name = path === '/' ? 'index' : path.replace(/^\//, '').replace(/\//g, '-');
+      walkTree(pageData.root, name, path, 'page');
+    }
+  }
+
+  // Walk all component structures
+  const allComponents = componentService.getAllComponents();
+  for (const [compName, compDef] of Object.entries(allComponents)) {
+    if (compDef.component?.structure) {
+      walkTree(compDef.component.structure, compName, compName, 'component');
+    }
+  }
+
+  // Convert to plain object
+  const result: Record<string, { count: number; files: Array<{ name: string; path: string; type: 'page' | 'component' }> }> = {};
+  for (const [name, data] of usageMap) {
+    result[name] = {
+      count: data.count,
+      files: Array.from(data.files.values()),
+    };
+  }
+
+  return jsonResponse(result);
+}
+
 // Note: Write handlers (handleSaveComponentRoute, handleSaveComponentJavaScriptRoute,
 // handleSaveComponentCSSRoute, handleComponentCategoryRoute) moved to @meno/studio
 

package/lib/server/routes/api/core-routes.ts

@@ -201,6 +201,14 @@ export async function handleCoreApiRoutes(
     );
   }
 
+  // Component usage API route (read-only)
+  if (url.pathname === API_ROUTES.COMPONENT_USAGE && req.method === 'GET') {
+    return await handleRouteError(
+      () => Promise.resolve(componentsRoutes.handleComponentUsageRoute(pageService, componentService)),
+      'Failed to fetch component usage'
+    );
+  }
+
   // Slug mappings API route (read-only)
   if (url.pathname === '/api/slug-mappings' && req.method === 'GET') {
     return await handleRouteError(

package/lib/server/ssr/ssrRenderer.ts

@@ -116,6 +116,8 @@ interface SSRContext {
   neededCollections?: Set<string>;
   /** When true, draft items are filtered out from CMS lists */
   isProductionBuild?: boolean;
+  /** Collector for SSR fallback HTML of complex nodes (list, locale-list) keyed by element path */
+  ssrFallbackCollector?: Map<string, string>;
 }
 
 /**
@@ -364,15 +366,17 @@ export async function buildComponentHTML(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean
-): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string> }> {
+): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string> }> {
   // Create map to collect interactive styles during render
   const interactiveStylesMap = new Map<string, InteractiveStyles>();
   // Create array to collect high-priority images for preloading
   const preloadImages: PreloadImage[] = [];
   // Create set to track collections that need client-side data injection
   const neededCollections = new Set<string>();
+  // Create map to collect SSR fallback HTML for complex nodes (list, locale-list)
+  const ssrFallbackCollector = new Map<string, string>();
 
-  if (!node) return { html: '', interactiveStylesMap, preloadImages, neededCollections };
+  if (!node) return { html: '', interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector };
 
   // Register components for this render
   ssrComponentRegistry.merge(globalComponents);
@@ -403,11 +407,12 @@ export async function buildComponentHTML(
     preloadImages, // Collect high-priority images for preloading
     neededCollections, // Track collections that need client-side data
     isProductionBuild,
+    ssrFallbackCollector, // Collect SSR fallback HTML for complex nodes
   };
 
   const html = await renderNode(node, ctx);
 
-  return { html, interactiveStylesMap, preloadImages, neededCollections };
+  return { html, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector };
 }
 
 /**
@@ -581,7 +586,14 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   }
 
   // List is a pure repeater - no container element, just children + optional template
-  return childrenHTML + templateHtml;
+  const listResult = childrenHTML + templateHtml;
+
+  // Store SSR fallback for Astro export (list nodes can't be expressed as static Astro components)
+  if (ctx.ssrFallbackCollector && ctx.elementPath) {
+    ctx.ssrFallbackCollector.set(ctx.elementPath.join('.'), listResult);
+  }
+
+  return listResult;
 }
 
 /**
@@ -875,8 +887,8 @@ async function renderNode(
     // Sanitize HTML with allowlist for SVG, rich-text formatting, and common elements (same as client)
     const purify = getDOMPurify();
     const sanitizedHtml = purify ? purify.sanitize(htmlContent, {
-      ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title'],
+      ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'style', 'animate', 'animateTransform', 'animateMotion', 'set'],
+      ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title', 'attributeName', 'values', 'dur', 'begin', 'end', 'repeatCount', 'repeatDur', 'keyTimes', 'keySplines', 'calcMode', 'from', 'to', 'by', 'additive', 'accumulate', 'type', 'rotate', 'keyPoints', 'path'],
       KEEP_CONTENT: true
     }) : htmlContent;
     const optimizedHtml = ctx.imageMetadataMap
@@ -1639,7 +1651,14 @@ function renderLocaleList(node: import('../../shared/types').LocaleListNode, ctx
     const nodeAttributes = extractAttributesFromNode(node as any);
     const attrsStr = buildAttributes(nodeAttributes);
 
-    return `<div data-locale-list="true"${containerClassAttr}${localeListStyleAttr}${attrsStr}>${linksHTML}</div>`;
+    const localeListResult = `<div data-locale-list="true"${containerClassAttr}${localeListStyleAttr}${attrsStr}>${linksHTML}</div>`;
+
+    // Store SSR fallback for Astro export (locale-list nodes can't be expressed as static Astro components)
+    if (ctx.ssrFallbackCollector && ctx.elementPath) {
+      ctx.ssrFallbackCollector.set(ctx.elementPath.join('.'), localeListResult);
+    }
+
+    return localeListResult;
   }
   // If context is missing, return empty div
   return '<div data-locale-list="true"></div>';
@@ -1659,7 +1678,7 @@ export async function renderPageSSR(
   cmsContext?: CMSContext,
   cmsService?: CMSService,
   isProductionBuild?: boolean
-): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string> }> {
+): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[]; neededCollections: Set<string>; ssrFallbackCollector: Map<string, string> }> {
   // Extract page content
   const rootNode = pageData?.root || undefined;
   if (!rootNode) {
@@ -1695,9 +1714,9 @@ export async function renderPageSSR(
 
   // Render the component tree to HTML with i18n and CMS support
   // Also collect interactive styles, preload images, and needed collections during render
-  const { html: contentHTML, interactiveStylesMap, preloadImages, neededCollections } = rootNode
+  const { html: contentHTML, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector } = rootNode
     ? await buildComponentHTML(rootNode, globalComponents, pageComponents, effectiveLocale, config, slugMappings, pagePath, cmsContext, cmsService, isProductionBuild)
-    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [], neededCollections: new Set<string>() };
+    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [], neededCollections: new Set<string>(), ssrFallbackCollector: new Map<string, string>() };
 
   // Collect JavaScript and CSS from all components
   const javascript = await collectComponentJavaScript(globalComponents, pageComponents);
@@ -1728,5 +1747,6 @@ export async function renderPageSSR(
     interactiveStylesMap,
     preloadImages,
     neededCollections,
+    ssrFallbackCollector,
   };
 }