meno-core 1.0.39 → 1.0.41

package/lib/server/ssr/ssrRenderer.ts

@@ -12,6 +12,7 @@ import type { BreakpointConfig } from '../../shared/breakpoints';
 import { evaluateTemplate, processStructure, isResponsiveStyle, isHtmlMapping, resolveHtmlMapping } from '../../client/templateEngine';
 import { resolvePropsFromDefinition, isRichTextMarker, richTextMarkerToHtml } from '../../shared/propResolver';
 import { loadBreakpointConfig, loadI18nConfig } from '../jsonLoader';
+import { configService } from '../services/configService';
 import type { I18nConfig } from '../../shared/types/components';
 import { extractLocaleFromPath, DEFAULT_I18N_CONFIG, resolveI18nValue, buildLocalizedPath, isI18nValue } from '../../shared/i18n';
 import { NODE_TYPE } from '../../shared/constants';
@@ -116,6 +117,10 @@ 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>;
+  /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> with AVIF+WebP sources */
+  imageFormat?: 'webp' | 'avif';
 }
 
 /**
@@ -364,15 +369,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 +410,13 @@ 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
+    imageFormat: configService.getImageFormat(),
   };
 
   const html = await renderNode(node, ctx);
 
-  return { html, interactiveStylesMap, preloadImages, neededCollections };
+  return { html, interactiveStylesMap, preloadImages, neededCollections, ssrFallbackCollector };
 }
 
 /**
@@ -581,7 +590,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;
 }
 
 /**
@@ -788,7 +804,7 @@ async function renderNode(
       // Check for raw HTML marker (from rich-text fields) - don't escape
       if (text.startsWith(RAW_HTML_PREFIX)) {
         let rawHtml = text.slice(RAW_HTML_PREFIX.length);
-        if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap);
+        if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap, ctx.imageFormat);
         rawHtml = await expandRichTextComponents(rawHtml, ctx);
         rawHtml = localizeRichTextLinks(rawHtml, ctx);
         return rawHtml;
@@ -808,7 +824,7 @@ async function renderNode(
     // Check for raw HTML marker (from rich-text fields) - don't escape
     if (text.startsWith(RAW_HTML_PREFIX)) {
       let rawHtml = text.slice(RAW_HTML_PREFIX.length);
-      if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap);
+      if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap, ctx.imageFormat);
       rawHtml = await expandRichTextComponents(rawHtml, ctx);
       rawHtml = localizeRichTextLinks(rawHtml, ctx);
       return rawHtml;
@@ -875,12 +891,12 @@ 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
-      ? rewriteRichTextImages(sanitizedHtml, ctx.imageMetadataMap)
+      ? rewriteRichTextImages(sanitizedHtml, ctx.imageMetadataMap, ctx.imageFormat)
       : sanitizedHtml;
 
     // Extract attributes from node
@@ -1215,27 +1231,52 @@ async function renderComponent(
     // Merge instance style overrides, className, and attributes
     // processedStructure is typically an HTML node (the component's root element)
     // Handle both component nodes and HTML nodes
-    const rootNode = processedStructure as ComponentNode & { props?: Record<string, unknown> };
+    const rootNode = processedStructure as ComponentNode & { props?: Record<string, unknown>; style?: any; attributes?: Record<string, string | number | boolean> };
     if (isComponentNode(rootNode) || isHtmlNode(rootNode)) {
       if (!rootNode.props) {
         rootNode.props = {};
       }
 
-      if (rootNode.props.style && typeof rootNode.props.style === 'object') {
-        rootNode.props.style = {
-          ...(rootNode.props.style as Record<string, unknown>),
-          ...(propsWithStyleAndAttrs.style as Record<string, unknown> || {})
-        };
-      } else if (propsWithStyleAndAttrs.style) {
-        rootNode.props.style = propsWithStyleAndAttrs.style;
+      // For HTML root nodes, merge styles into node.style (where the renderer reads them)
+      if (isHtmlNode(rootNode)) {
+        if (propsWithStyleAndAttrs.style) {
+          const existingStyle = rootNode.style;
+          if (existingStyle && typeof existingStyle === 'object') {
+            rootNode.style = {
+              ...(existingStyle as Record<string, any>),
+              ...(propsWithStyleAndAttrs.style as Record<string, any>)
+            };
+          } else {
+            rootNode.style = propsWithStyleAndAttrs.style as any;
+          }
+        }
+      } else {
+        // For component root nodes, merge into props.style
+        if (rootNode.props.style && typeof rootNode.props.style === 'object') {
+          rootNode.props.style = {
+            ...(rootNode.props.style as Record<string, unknown>),
+            ...(propsWithStyleAndAttrs.style as Record<string, unknown> || {})
+          };
+        } else if (propsWithStyleAndAttrs.style) {
+          rootNode.props.style = propsWithStyleAndAttrs.style;
+        }
       }
 
       // Merge className from component instance (includes responsive utility classes)
       if (propsWithStyleAndAttrs.className) {
-        const existingClassName = rootNode.props.className || '';
-        rootNode.props.className = existingClassName
-          ? `${existingClassName} ${propsWithStyleAndAttrs.className}`
-          : propsWithStyleAndAttrs.className;
+        if (isHtmlNode(rootNode)) {
+          // For HTML root nodes, merge into attributes where the renderer reads them
+          if (!rootNode.attributes) rootNode.attributes = {};
+          const existingClass = (rootNode.attributes.class || '') as string;
+          rootNode.attributes.class = existingClass
+            ? `${existingClass} ${propsWithStyleAndAttrs.className}`
+            : propsWithStyleAndAttrs.className as string;
+        } else {
+          const existingClassName = rootNode.props.className || '';
+          rootNode.props.className = existingClassName
+            ? `${existingClassName} ${propsWithStyleAndAttrs.className}`
+            : propsWithStyleAndAttrs.className;
+        }
       }
 
       // Merge attributes into props
@@ -1428,8 +1469,8 @@ function renderImageElement(
 
   // Collect high-priority images for preloading in head
   if (fetchpriority === 'high' && metadata && ctx.preloadImages) {
-    // Prefer AVIF, fallback to WebP
-    if (metadata.avifSrcset) {
+    // Prefer AVIF when format allows, fallback to WebP
+    if (metadata.avifSrcset && ctx.imageFormat !== 'webp') {
       ctx.preloadImages.push({
         srcset: metadata.avifSrcset,
         type: 'image/avif',
@@ -1460,9 +1501,9 @@ function renderImageElement(
     blurStyle = ` style="background-image: url(${escapeHtml(metadata.blurHash)}); background-size: cover;" onload="this.style.backgroundImage=''"`;
   }
 
-  // Render as <picture> element if AVIF is available
+  // Render as <picture> element if AVIF is available and imageFormat is 'avif'
   // Layout classes go on <picture> (block container), image-specific classes on <img>
-  if (metadata?.avifSrcset) {
+  if (metadata?.avifSrcset && ctx.imageFormat !== 'webp') {
     // Image-specific class prefixes that should stay on <img>
     const imgClassPrefixes = [
       'objf-', 'objp-', 'flt-', 'tm-', 'bs-',
@@ -1639,7 +1680,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 +1707,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 +1743,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 +1776,6 @@ export async function renderPageSSR(
     interactiveStylesMap,
     preloadImages,
     neededCollections,
+    ssrFallbackCollector,
   };
 }

package/lib/server/webflow/buildWebflow.ts

@@ -0,0 +1,415 @@
+/**
+ * Webflow Export Build Orchestrator
+ * Loads the project, renders all pages, and converts to Webflow payload.
+ * Mirrors the pattern of build-astro.ts.
+ */
+
+import { existsSync, readdirSync } from 'fs';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import {
+  loadJSONFile,
+  loadComponentDirectory,
+  mapPageNameToPath,
+  parseJSON,
+  loadI18nConfig,
+  loadBreakpointConfig,
+  loadResponsiveScalesConfig,
+} from '../jsonLoader';
+import { renderPageSSR } from '../ssr/ssrRenderer';
+import { projectPaths } from '../projectContext';
+import { loadProjectConfig } from '../../shared/fontLoader';
+import { FileSystemCMSProvider } from '../providers/fileSystemCMSProvider';
+import { CMSService } from '../services/cmsService';
+import { isI18nValue, resolveI18nValue } from '../../shared/i18n';
+import { configService } from '../services/configService';
+import { colorService } from '../services/ColorService';
+import { variableService } from '../services/VariableService';
+import { migrateTemplatesDirectory } from '../migrateTemplates';
+import type {
+  ComponentDefinition,
+  JSONPage,
+  CMSSchema,
+  CMSItem,
+  I18nConfig,
+} from '../../shared/types';
+import { isItemDraftForLocale } from '../../shared/types';
+import type { SlugMap } from '../../shared/slugTranslator';
+import type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowStyleClass,
+  WebflowCMSCollection,
+  WebflowCMSField,
+  WebflowAssetRef,
+} from './types';
+import { mapCMSFieldType } from './types';
+import { nodeToWebflow, type WebflowEmitContext } from './nodeToWebflow';
+import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function scanJSONFiles(dir: string, prefix: string = ''): string[] {
+  const results: string[] = [];
+  if (!existsSync(dir)) return results;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.isFile() && entry.name.endsWith('.json')) {
+      results.push(prefix ? `${prefix}/${entry.name}` : entry.name);
+    } else if (entry.isDirectory()) {
+      results.push(...scanJSONFiles(join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name));
+    }
+  }
+  return results;
+}
+
+function isCMSPage(pageData: JSONPage): boolean {
+  return pageData.meta?.source === 'cms' && !!pageData.meta?.cms;
+}
+
+function buildCMSItemPath(
+  urlPattern: string,
+  item: CMSItem,
+  slugField: string,
+  locale: string,
+  i18nConfig: I18nConfig
+): string {
+  let slug = item[slugField] ?? item._slug ?? item._id;
+  if (isI18nValue(slug)) {
+    slug = resolveI18nValue(slug, locale, i18nConfig) as string;
+  }
+  return urlPattern.replace('{{slug}}', String(slug));
+}
+
+function scanAssets(projectRoot: string): WebflowAssetRef[] {
+  const assets: WebflowAssetRef[] = [];
+  const assetDirs: Array<{ dir: string; type: WebflowAssetRef['type'] }> = [
+    { dir: 'images', type: 'image' },
+    { dir: 'fonts', type: 'font' },
+    { dir: 'videos', type: 'video' },
+    { dir: 'assets', type: 'file' },
+  ];
+
+  for (const { dir, type } of assetDirs) {
+    const fullDir = join(projectRoot, dir);
+    if (!existsSync(fullDir)) continue;
+    const files = scanJSONFiles(fullDir).map(f => f.replace('.json', '')); // scanJSONFiles works for any extension
+    // Re-scan properly for all file types
+    const allFiles = scanAllFiles(fullDir);
+    for (const file of allFiles) {
+      assets.push({
+        localPath: `${dir}/${file}`,
+        type,
+        fileName: file.split('/').pop()!,
+      });
+    }
+  }
+
+  return assets;
+}
+
+function scanAllFiles(dir: string, prefix: string = ''): string[] {
+  const results: string[] = [];
+  if (!existsSync(dir)) return results;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const relativePath = prefix ? `${prefix}/${entry.name}` : entry.name;
+    if (entry.isFile()) {
+      results.push(relativePath);
+    } else if (entry.isDirectory()) {
+      results.push(...scanAllFiles(join(dir, entry.name), relativePath));
+    }
+  }
+  return results;
+}
+
+/**
+ * Extract CSS variables from theme and variables config
+ */
+function extractCSSVariables(
+  themeColorCSS: string,
+  variablesCSS: string
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const regex = /--([\w-]+)\s*:\s*([^;]+)/g;
+
+  for (const css of [themeColorCSS, variablesCSS]) {
+    let match;
+    while ((match = regex.exec(css)) !== null) {
+      vars[`--${match[1]}`] = match[2].trim();
+    }
+  }
+
+  return vars;
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+export async function buildWebflowPayload(
+  projectRoot?: string
+): Promise<WebflowExportPayload> {
+  // 1. Setup: load project configuration
+  configService.reset();
+
+  const projectConfig = await loadProjectConfig();
+  const siteUrl = (projectConfig as { siteUrl?: string }).siteUrl?.replace(/\/$/, '') || '';
+  const i18nConfig = await loadI18nConfig();
+
+  await migrateTemplatesDirectory();
+
+  const { components } = await loadComponentDirectory(projectPaths.components());
+  const globalComponents: Record<string, ComponentDefinition> = {};
+  components.forEach((value, key) => { globalComponents[key] = value; });
+
+  const cmsProvider = new FileSystemCMSProvider(projectPaths.templates(), projectPaths.cms());
+  const cmsService = new CMSService(cmsProvider);
+  await cmsService.initialize();
+
+  const themeConfig = await colorService.loadThemeConfig();
+  const variablesConfig = await variableService.loadConfig();
+  const breakpoints = await loadBreakpointConfig();
+  const responsiveScales = await loadResponsiveScalesConfig();
+
+  await configService.load();
+
+  // 2. Scan pages
+  const pagesDir = projectPaths.pages();
+  if (!existsSync(pagesDir)) {
+    return emptyPayload();
+  }
+
+  const pageFiles = scanJSONFiles(pagesDir);
+  if (pageFiles.length === 0) {
+    return emptyPayload();
+  }
+
+  // Collect slug mappings
+  const slugMappings: SlugMap[] = [];
+  for (const file of pageFiles) {
+    const pageName = file.replace('.json', '');
+    const basePath = mapPageNameToPath(pageName);
+    const pageContent = await loadJSONFile(join(pagesDir, file));
+    if (!pageContent) continue;
+    try {
+      const pageData = parseJSON<JSONPage>(pageContent);
+      if (pageData.meta?.slugs) {
+        const pageId = basePath === '/' ? 'index' : basePath.substring(1);
+        slugMappings.push({ pageId, slugs: pageData.meta.slugs });
+      }
+    } catch { /* ignore */ }
+  }
+
+  // 3. Render and convert pages
+  const allPages: WebflowPage[] = [];
+  const allStyleClasses = new Map<string, WebflowStyleClass>();
+
+  // Regular pages
+  for (const file of pageFiles) {
+    const pageName = file.replace('.json', '');
+    const basePath = mapPageNameToPath(pageName);
+    const pageContent = await loadJSONFile(join(pagesDir, file));
+    if (!pageContent) continue;
+
+    try {
+      const pageData = parseJSON<JSONPage>(pageContent);
+      if (pageData.meta?.draft === true) continue;
+
+      const slugs = pageData.meta?.slugs;
+
+      for (const localeConfig of i18nConfig.locales) {
+        const locale = localeConfig.code;
+        const isDefault = locale === i18nConfig.defaultLocale;
+
+        let slug: string;
+        if (slugs && slugs[locale]) {
+          slug = slugs[locale];
+        } else if (basePath === '/') {
+          slug = '';
+        } else {
+          slug = basePath.substring(1);
+        }
+
+        const urlPath = isDefault
+          ? (slug === '' ? '/' : `/${slug}`)
+          : (slug === '' ? `/${locale}` : `/${locale}/${slug}`);
+
+        // Render via SSR to resolve all props
+        const result = await renderPageSSR(
+          pageData,
+          globalComponents,
+          urlPath,
+          siteUrl,
+          locale,
+          i18nConfig,
+          slugMappings,
+          undefined,
+          cmsService,
+          true
+        );
+
+        // Convert node tree to Webflow elements
+        const ctx: WebflowEmitContext = {
+          globalComponents,
+          elementPath: [0],
+          fileType: 'page',
+          fileName: pageName,
+          breakpoints,
+          styleClasses: allStyleClasses,
+        };
+
+        const body = pageData.root || (pageData as any).node;
+        const elements = body ? nodeToWebflow(body, ctx) : [];
+
+        allPages.push({
+          title: result.title,
+          slug: slug || 'index',
+          metaDescription: typeof pageData.meta?.description === 'string' ? pageData.meta.description : undefined,
+          elements,
+          locale,
+        });
+      }
+    } catch (error: any) {
+      console.error(`Error processing ${basePath}:`, error?.message);
+    }
+  }
+
+  // CMS template pages
+  const templatesDir = projectPaths.templates();
+  const cmsCollections: WebflowCMSCollection[] = [];
+
+  if (existsSync(templatesDir)) {
+    const templateFiles = readdirSync(templatesDir).filter(f => f.endsWith('.json'));
+
+    for (const file of templateFiles) {
+      const templateContent = await loadJSONFile(join(templatesDir, file));
+      if (!templateContent) continue;
+
+      try {
+        const pageData = parseJSON<JSONPage>(templateContent);
+        if (pageData.meta?.draft === true) continue;
+        if (!isCMSPage(pageData)) continue;
+
+        const cmsSchema = pageData.meta!.cms as CMSSchema;
+        const items = await cmsService.queryItems({ collection: cmsSchema.id });
+
+        // Build Webflow CMS collection
+        const fields: WebflowCMSField[] = [];
+        if (cmsSchema.fields) {
+          for (const [fieldName, fieldDef] of Object.entries(cmsSchema.fields)) {
+            fields.push({
+              name: fieldDef.label || fieldName,
+              slug: fieldName,
+              type: mapCMSFieldType(fieldDef.type),
+              required: fieldDef.required,
+              options: fieldDef.options,
+            });
+          }
+        }
+
+        // Resolve i18n values in items for default locale
+        const resolvedItems: Record<string, unknown>[] = [];
+        for (const item of items) {
+          const resolved: Record<string, unknown> = {};
+          for (const [key, value] of Object.entries(item)) {
+            if (isI18nValue(value)) {
+              resolved[key] = resolveI18nValue(value, i18nConfig.defaultLocale, i18nConfig);
+            } else {
+              resolved[key] = value;
+            }
+          }
+          resolvedItems.push(resolved);
+        }
+
+        cmsCollections.push({
+          name: cmsSchema.id,
+          slug: cmsSchema.id,
+          urlPattern: cmsSchema.urlPattern,
+          fields,
+          items: resolvedItems,
+        });
+
+        // Render CMS item pages
+        for (const item of items) {
+          for (const localeConfig of i18nConfig.locales) {
+            const locale = localeConfig.code;
+            if (isItemDraftForLocale(item, locale)) continue;
+
+            const itemPath = buildCMSItemPath(cmsSchema.urlPattern, item, cmsSchema.slugField, locale, i18nConfig);
+            const itemWithUrl: CMSItem = { ...item, _url: itemPath };
+
+            const result = await renderPageSSR(
+              pageData,
+              globalComponents,
+              itemPath,
+              siteUrl,
+              locale,
+              i18nConfig,
+              slugMappings,
+              { cms: itemWithUrl },
+              cmsService,
+              true
+            );
+
+            const ctx: WebflowEmitContext = {
+              globalComponents,
+              elementPath: [0],
+              fileType: 'page',
+              fileName: file.replace('.json', ''),
+              breakpoints,
+              styleClasses: allStyleClasses,
+            };
+
+            const body = pageData.root || (pageData as any).node;
+            // Pass CMS item data as props so {{cms.field}} templates resolve
+            const cmsProps = { cms: itemWithUrl };
+            const elements = body ? nodeToWebflow(body, ctx, cmsProps) : [];
+
+            const slug = itemPath.startsWith('/') ? itemPath.substring(1) : itemPath;
+            allPages.push({
+              title: result.title,
+              slug,
+              elements,
+              locale,
+            });
+          }
+        }
+      } catch (error: any) {
+        console.error(`Error processing template ${file}:`, error?.message);
+      }
+    }
+  }
+
+  // 4. Collect CSS variables
+  const themeColorCSS = generateThemeColorVariablesCSS(themeConfig);
+  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
+  const cssVariables = extractCSSVariables(themeColorCSS, variablesCSS);
+
+  // 5. Scan assets
+  const assets = scanAssets(projectPaths.project);
+
+  return {
+    version: 1,
+    exportedAt: new Date().toISOString(),
+    pages: allPages,
+    styles: Array.from(allStyleClasses.values()),
+    cms: cmsCollections,
+    assets,
+    cssVariables: Object.keys(cssVariables).length > 0 ? cssVariables : undefined,
+  };
+}
+
+function emptyPayload(): WebflowExportPayload {
+  return {
+    version: 1,
+    exportedAt: new Date().toISOString(),
+    pages: [],
+    styles: [],
+    cms: [],
+    assets: [],
+  };
+}
+

package/lib/server/webflow/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Webflow Export Module
+ * Re-exports the main build function and types.
+ */
+
+export { buildWebflowPayload } from './buildWebflow';
+export { nodeToWebflow } from './nodeToWebflow';
+export { mapStylesToWebflow } from './styleMapper';
+export type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowElement,
+  WebflowStyleClass,
+  WebflowCMSCollection,
+  WebflowCMSField,
+  WebflowAssetRef,
+  WebflowBreakpoint,
+  WebflowPseudoState,
+  WebflowFieldType,
+  CSSProperties,
+} from './types';
+export { mapCMSFieldType } from './types';