meno-core 1.0.47 → 1.0.49

package/lib/server/utils/jsonLineMapper.ts

@@ -86,6 +86,16 @@ export function buildLineMap(jsonText: string): LineMap {
     return { start: startPos, end: pos };
   }
 
+  function recordTrackedRoot(path: number[]): void {
+    // Parse the root element of the tracked structure and record its own line range
+    // under the empty-string key, so callers can resolve the root selection itself.
+    const { start, end } = parseValue(path, true);
+    lineMap.set('', {
+      startLine: charToLine[start],
+      endLine: charToLine[end - 1] || charToLine[start],
+    });
+  }
+
   function parseObject(path: number[], trackChildren: boolean): void {
     pos++; // skip {
     skipWhitespace();
@@ -98,10 +108,13 @@ export function buildLineMap(jsonText: string): LineMap {
       skipWhitespace();
 
       if (key === 'root' && path.length === 0) {
-        // Track root object - children inside will be tracked
-        parseValue(path, true);
+        // Page format: track from `root`.
+        recordTrackedRoot(path);
+      } else if (key === 'component' && path.length === 0) {
+        // Component format: descend into the component object looking for `structure`.
+        parseComponentWrapper(path);
       } else if (key === 'children' && trackChildren) {
-        // This is a children array - track each child with indices
+        // Children array — track each element with indices
         parseValue(path, true);
       } else {
         // Regular property - don't track individual items
@@ -115,6 +128,33 @@ export function buildLineMap(jsonText: string): LineMap {
     pos++; // skip }
   }
 
+  function parseComponentWrapper(path: number[]): void {
+    // We expect an object value for the `component` key. If it isn't one, just skip it.
+    if (jsonText[pos] !== '{') {
+      parseValue(path, false);
+      return;
+    }
+    pos++; // skip {
+    skipWhitespace();
+    while (pos < jsonText.length && jsonText[pos] !== '}') {
+      skipWhitespace();
+      const key = parseString();
+      skipWhitespace();
+      pos++; // skip :
+      skipWhitespace();
+      if (key === 'structure') {
+        // The component's structure is the root of what we track — same as `root` for pages.
+        recordTrackedRoot(path);
+      } else {
+        parseValue(path, false);
+      }
+      skipWhitespace();
+      if (jsonText[pos] === ',') pos++;
+      skipWhitespace();
+    }
+    pos++; // skip }
+  }
+
   function parseArray(path: number[], trackChildren: boolean): void {
     pos++; // skip [
     skipWhitespace();

package/lib/server/webflow/buildWebflow.ts

@@ -14,7 +14,6 @@ import {
   parseJSON,
   loadI18nConfig,
   loadBreakpointConfig,
-  loadResponsiveScalesConfig,
 } from '../jsonLoader';
 import { renderPageSSR } from '../ssr/ssrRenderer';
 import { projectPaths } from '../projectContext';
@@ -22,6 +21,8 @@ import { loadProjectConfig } from '../../shared/fontLoader';
 import { FileSystemCMSProvider } from '../providers/fileSystemCMSProvider';
 import { CMSService } from '../services/cmsService';
 import { isI18nValue, resolveI18nValue } from '../../shared/i18n';
+import { RAW_HTML_PREFIX } from '../../shared/constants';
+import { extractPageMeta, type PageMeta } from '../ssr/metaTagGenerator';
 import { configService } from '../services/configService';
 import { colorService } from '../services/ColorService';
 import { variableService } from '../services/VariableService';
@@ -32,20 +33,27 @@ import type {
   CMSSchema,
   CMSItem,
   I18nConfig,
+  ThemeConfig,
 } from '../../shared/types';
-import { isItemDraftForLocale } from '../../shared/types';
+import { resolvePaletteColor } from '../../shared/types/colors';
 import type { SlugMap } from '../../shared/slugTranslator';
 import type {
   WebflowExportPayload,
   WebflowPage,
   WebflowStyleClass,
-  WebflowCMSCollection,
-  WebflowCMSField,
   WebflowAssetRef,
+  WebflowScript,
+  WebflowComponentDef,
 } from './types';
-import { mapCMSFieldType } from './types';
-import { nodeToWebflow, type WebflowEmitContext } from './nodeToWebflow';
-import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
+import { nodeToWebflow, normalizeListChildren, type WebflowEmitContext } from './nodeToWebflow';
+import { isWebflowHandledRule } from './styleMapper';
+import { generateInteractiveCSS } from '../../shared/cssGeneration';
+import { generateVariablesCSS } from '../cssGenerator';
+import type { InteractiveStyles } from '../../shared/types/styles';
+import { resolveVariableValueAtBreakpoint } from '../../shared/responsiveScaling';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
+import type { VariablesConfig } from '../../shared/types';
+import type { BreakpointConfig } from '../../shared/breakpoints';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -69,18 +77,73 @@ function isCMSPage(pageData: JSONPage): boolean {
   return pageData.meta?.source === 'cms' && !!pageData.meta?.cms;
 }
 
-function buildCMSItemPath(
-  urlPattern: string,
+/**
+ * Flatten a CMS item for the Webflow emit path: resolve i18n values to the
+ * current locale and unwrap rich-text markers (`{ __richtext__, html }`) into
+ * `RAW_HTML_PREFIX + html` so `nodeToWebflow`'s `resolveTemplate` can flatten
+ * inline HTML to plain text. Mirrors what SSR's `processCMSTemplate`
+ * (`cmsSSRProcessor.ts`) does inline at every interpolation site — but applied
+ * once up front so the simpler Webflow `resolveTemplate` (which only does
+ * `String(value)`) renders meaningful text instead of `[object Object]` /
+ * empty strings.
+ */
+function flattenCMSItemForLocale(
   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;
+): Record<string, unknown> {
+  const flatten = (value: unknown): unknown => {
+    if (value === null || value === undefined) return value;
+    if (isI18nValue(value)) {
+      return flatten(resolveI18nValue(value, locale, i18nConfig));
+    }
+    if (typeof value === 'object' && '__richtext__' in (value as object)) {
+      const html = (value as { html?: unknown }).html;
+      if (typeof html === 'string') return RAW_HTML_PREFIX + html;
+    }
+    return value;
+  };
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(item)) {
+    out[key] = flatten(value);
   }
-  return urlPattern.replace('{{slug}}', String(slug));
+  return out;
+}
+
+/**
+ * Resolve a page-meta value (which may be an i18n object) to a string for the
+ * given locale, or undefined when the field is empty.
+ */
+function resolveMetaString(
+  value: unknown,
+  locale: string,
+  i18nConfig: I18nConfig
+): string | undefined {
+  if (value === undefined || value === null || value === '') return undefined;
+  const resolved = isI18nValue(value)
+    ? resolveI18nValue(value, locale, i18nConfig)
+    : value;
+  if (resolved === undefined || resolved === null || resolved === '') return undefined;
+  return String(resolved);
+}
+
+/**
+ * Lift the structured meta from a page (title, description, OG fields,
+ * keywords) into the per-locale fields of a `WebflowPage`. SSR's `result.title`
+ * is preserved as the canonical title; the rest comes from `extractPageMeta`.
+ */
+function buildPageMetaForLocale(
+  meta: PageMeta,
+  locale: string,
+  i18nConfig: I18nConfig
+): Pick<WebflowPage, 'description' | 'keywords' | 'ogTitle' | 'ogDescription' | 'ogImage'> {
+  return {
+    description: resolveMetaString(meta.description, locale, i18nConfig),
+    keywords: resolveMetaString(meta.keywords, locale, i18nConfig),
+    ogTitle: resolveMetaString(meta.ogTitle, locale, i18nConfig),
+    ogDescription: resolveMetaString(meta.ogDescription, locale, i18nConfig),
+    ogImage: resolveMetaString(meta.ogImage, locale, i18nConfig),
+  };
 }
 
 function scanAssets(projectRoot: string): WebflowAssetRef[] {
@@ -126,23 +189,59 @@ function scanAllFiles(dir: string, prefix: string = ''): string[] {
 }
 
 /**
- * Extract CSS variables from theme and variables config
+ * Build per-theme `--var` maps so the walker can resolve `var(--bg)` against
+ * whatever theme an element actually inherits. Each theme key holds its full
+ * resolved palette (text, bg, border, …); `defaultThemeName` is what we fall
+ * back to when an element has no `theme` ancestor.
  */
-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();
+function buildThemeVarMaps(
+  themeConfig: ThemeConfig
+): { byTheme: Record<string, Record<string, string>>; defaultTheme: string } {
+  const palette = themeConfig.palette;
+  const byTheme: Record<string, Record<string, string>> = {};
+  for (const [themeName, theme] of Object.entries(themeConfig.themes)) {
+    const vars: Record<string, string> = {};
+    for (const [name, value] of Object.entries(theme.colors)) {
+      vars[`--${name}`] = resolvePaletteColor(value, palette);
     }
+    byTheme[themeName] = vars;
   }
+  return { byTheme, defaultTheme: themeConfig.default };
+}
 
-  return vars;
+/**
+ * Build a per-breakpoint `--var → value` map directly from the variables
+ * config. Each breakpoint key (`base`, `tablet`, `mobile`, …) holds the full
+ * resolved variable map at that breakpoint, with per-variable `scales`
+ * overrides and global category scaling already applied
+ * (`resolveVariableValueAtBreakpoint` mirrors `generateVariablesCSS` and the
+ * runtime CSS resolver).
+ *
+ * The walker uses these maps to inline `var(--x)` references in element
+ * styles per-breakpoint, so the Webflow class system receives concrete
+ * scaled values at every tier instead of a single flat base value.
+ */
+function buildProjectVarMaps(
+  variablesConfig: VariablesConfig,
+  breakpoints: BreakpointConfig,
+  responsiveScales: ResponsiveScales | undefined
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { base: {} };
+  for (const bpName of Object.keys(breakpoints)) out[bpName] = {};
+
+  for (const variable of variablesConfig.variables) {
+    if (!variable.cssVar) continue;
+    out.base[variable.cssVar] = variable.value;
+    for (const bpName of Object.keys(breakpoints)) {
+      const resolved = resolveVariableValueAtBreakpoint(
+        { value: variable.value, type: variable.type, scales: variable.scales },
+        bpName,
+        responsiveScales
+      );
+      out[bpName][variable.cssVar] = resolved;
+    }
+  }
+  return out;
 }
 
 // ---------------------------------------------------------------------------
@@ -150,8 +249,12 @@ function extractCSSVariables(
 // ---------------------------------------------------------------------------
 
 export async function buildWebflowPayload(
-  projectRoot?: string
+  options?: { bindCollectionLists?: boolean; promotedComponentNames?: string[]; locale?: string }
 ): Promise<WebflowExportPayload> {
+  const bindCollectionLists = options?.bindCollectionLists === true;
+  const promotedComponentNames = Array.isArray(options?.promotedComponentNames)
+    ? new Set(options!.promotedComponentNames.filter((n): n is string => typeof n === 'string' && n.length > 0))
+    : undefined;
   // 1. Setup: load project configuration
   configService.reset();
 
@@ -159,6 +262,17 @@ export async function buildWebflowPayload(
   const siteUrl = (projectConfig as { siteUrl?: string }).siteUrl?.replace(/\/$/, '') || '';
   const i18nConfig = await loadI18nConfig();
 
+  // Pick which locale to render. Multi-locale projects export one locale at a
+  // time so the Webflow site mirrors a single language; the extension surfaces
+  // a picker that defaults to `i18nConfig.defaultLocale`. An invalid/missing
+  // request falls back to the default locale (silent — the picker is the
+  // source of truth here, not the URL).
+  const requestedLocale = options?.locale;
+  const selectedLocale = (requestedLocale && i18nConfig.locales.some(l => l.code === requestedLocale))
+    ? requestedLocale
+    : i18nConfig.defaultLocale;
+  const localesToBuild = i18nConfig.locales.filter(l => l.code === selectedLocale);
+
   await migrateTemplatesDirectory();
 
   const { components } = await loadComponentDirectory(projectPaths.components());
@@ -172,9 +286,9 @@ export async function buildWebflowPayload(
   const themeConfig = await colorService.loadThemeConfig();
   const variablesConfig = await variableService.loadConfig();
   const breakpoints = await loadBreakpointConfig();
-  const responsiveScales = await loadResponsiveScalesConfig();
 
   await configService.load();
+  const responsiveScales = configService.getResponsiveScales();
 
   // 2. Scan pages
   const pagesDir = projectPaths.pages();
@@ -206,6 +320,24 @@ export async function buildWebflowPayload(
   // 3. Render and convert pages
   const allPages: WebflowPage[] = [];
   const allStyleClasses = new Map<string, WebflowStyleClass>();
+  // elementClass → interactiveStyles, populated during the node walk and
+  // drained at the end into raw CSS (see step 6 below).
+  const allInteractiveStylesMap = new Map<string, InteractiveStyles>();
+  // Combo class name → owning identity, shared across every page emit so
+  // collisions are visible project-wide. Drives `mintInstanceComboName` in
+  // nodeToWebflow.ts.
+  const allComboIdentityByName = new Map<string, string>();
+  // First-encounter snapshot of each promoted component (Navigation, Footer)
+  // shared across every page so the extension registers each definition once.
+  const promotedComponents = new Map<string, WebflowComponentDef>();
+
+  // Theme + project-level CSS variables are resolved during the walk so the
+  // ancestor `theme` attribute can pick the right palette per element. The
+  // project var map is per-breakpoint so `var(--x)` refs in element styles
+  // can be inlined at each tier with the right scaled value.
+  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
+  const projectVars = buildProjectVarMaps(variablesConfig, breakpoints, responsiveScales);
+  const { byTheme: themeVars, defaultTheme } = buildThemeVarMaps(themeConfig);
 
   // Regular pages
   for (const file of pageFiles) {
@@ -220,7 +352,7 @@ export async function buildWebflowPayload(
 
       const slugs = pageData.meta?.slugs;
 
-      for (const localeConfig of i18nConfig.locales) {
+      for (const localeConfig of localesToBuild) {
         const locale = localeConfig.code;
         const isDefault = locale === i18nConfig.defaultLocale;
 
@@ -259,17 +391,33 @@ export async function buildWebflowPayload(
           fileName: pageName,
           breakpoints,
           styleClasses: allStyleClasses,
+          comboIdentityByName: allComboIdentityByName,
+          interactiveStylesMap: allInteractiveStylesMap,
+          cmsService,
+          i18nConfig,
+          locale,
+          slugMappings,
+          pagePath: urlPath,
+          themeVars,
+          projectVars,
+          defaultTheme,
+          responsiveScales,
+          promotedComponents,
+          promotedComponentNames,
+          bindCollectionLists,
         };
 
         const body = pageData.root || (pageData as any).node;
-        const elements = body ? nodeToWebflow(body, ctx) : [];
+        const elements = body ? await nodeToWebflow(body, ctx) : [];
+        normalizeListChildren(elements);
 
+        const pageMeta = extractPageMeta(pageData);
         allPages.push({
           title: result.title,
           slug: slug || 'index',
-          metaDescription: typeof pageData.meta?.description === 'string' ? pageData.meta.description : undefined,
           elements,
           locale,
+          ...buildPageMetaForLocale(pageMeta, locale, i18nConfig),
         });
       }
     } catch (error: any) {
@@ -277,9 +425,11 @@ export async function buildWebflowPayload(
     }
   }
 
-  // CMS template pages
+  // CMS template pages — imported as a single regular Webflow page per locale,
+  // bound to the FIRST CMS item's content. Webflow can't natively bind a page
+  // to a Meno-side collection, and a separate "Sync CMS" flow in the extension
+  // handles collection schema/items, so this code path stays page-only.
   const templatesDir = projectPaths.templates();
-  const cmsCollections: WebflowCMSCollection[] = [];
 
   if (existsSync(templatesDir)) {
     const templateFiles = readdirSync(templatesDir).filter(f => f.endsWith('.json'));
@@ -295,87 +445,95 @@ export async function buildWebflowPayload(
 
         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,
-            });
+        if (items.length === 0) continue;
+
+        const item = items[0];
+        const pageName = file.replace('.json', '');
+
+        for (const localeConfig of localesToBuild) {
+          const locale = localeConfig.code;
+          // Use the first item's resolved URL (from cmsSchema.urlPattern) as
+          // the slug, so a template like `templates/blog.json` lands at
+          // `/blog/<first-slug>` and doesn't collide with a sibling listing
+          // page like `pages/blog.json`.
+          let itemSlug = item[cmsSchema.slugField] ?? item._slug ?? item._id;
+          if (isI18nValue(itemSlug)) {
+            itemSlug = resolveI18nValue(itemSlug, locale, i18nConfig) as string;
           }
+          const resolvedItemPath = cmsSchema.urlPattern.replace('{{slug}}', String(itemSlug));
+          const isDefault = locale === i18nConfig.defaultLocale;
+          const localizedItemPath = isDefault
+            ? resolvedItemPath
+            : `/${locale}${resolvedItemPath.startsWith('/') ? '' : '/'}${resolvedItemPath}`;
+          const slug = localizedItemPath.startsWith('/')
+            ? localizedItemPath.substring(1)
+            : localizedItemPath;
+          const urlPath = localizedItemPath;
+          // SSR (`renderPageSSR`) gets the raw item — its `processCMSTemplate`
+          // resolves i18n + richtext at each interpolation. The Webflow path
+          // re-walks the same `pageData.root` with the simpler `resolveTemplate`
+          // (no i18n / richtext awareness), so we hand it a pre-flattened item.
+          const flatItem = flattenCMSItemForLocale(item, locale, i18nConfig);
+          const itemWithUrl: CMSItem = { ...flatItem, _url: urlPath } as CMSItem;
+          const ssrItem: CMSItem = { ...item, _url: urlPath };
+
+          const result = await renderPageSSR(
+            pageData,
+            globalComponents,
+            urlPath,
+            siteUrl,
+            locale,
+            i18nConfig,
+            slugMappings,
+            { cms: ssrItem },
+            cmsService,
+            true
+          );
+
+          const ctx: WebflowEmitContext = {
+            globalComponents,
+            elementPath: [0],
+            fileType: 'page',
+            fileName: pageName,
+            breakpoints,
+            styleClasses: allStyleClasses,
+            comboIdentityByName: allComboIdentityByName,
+            interactiveStylesMap: allInteractiveStylesMap,
+            cmsService,
+            i18nConfig,
+            locale,
+            slugMappings,
+            pagePath: urlPath,
+            cmsContext: { cms: itemWithUrl },
+            // Seed `templateContext` with the bound item so descendants inside
+            // a component slot still see `cms`. `emitInlineComponentBody`
+            // merges `ctx.templateContext` into the body's `instanceProps`
+            // (nodeToWebflow.ts:1140-1143), and `<slot>` rendering forwards
+            // those merged props to slot children — without this, anything
+            // wrapped in (e.g.) Section loses the page-level CMS scope and
+            // `{{cms.title}}` resolves to empty.
+            templateContext: { cms: itemWithUrl } as Record<string, unknown>,
+            themeVars,
+            projectVars,
+            defaultTheme,
+            responsiveScales,
+            promotedComponents,
+            promotedComponentNames,
+            bindCollectionLists,
+          };
+
+          const body = pageData.root || (pageData as any).node;
+          const elements = body ? await nodeToWebflow(body, ctx, { cms: itemWithUrl }) : [];
+          normalizeListChildren(elements);
+
+          const cmsPageMeta = extractPageMeta(pageData);
+          allPages.push({
+            title: result.title,
+            slug,
+            elements,
+            locale,
+            ...buildPageMetaForLocale(cmsPageMeta, locale, i18nConfig),
+          });
         }
       } catch (error: any) {
         console.error(`Error processing template ${file}:`, error?.message);
@@ -383,22 +541,84 @@ export async function buildWebflowPayload(
     }
   }
 
-  // 4. Collect CSS variables
-  const themeColorCSS = generateThemeColorVariablesCSS(themeConfig);
-  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
-  const cssVariables = extractCSSVariables(themeColorCSS, variablesCSS);
+  // Promoted components (Navigation, Footer) are emitted via the same
+  // `nodeToWebflow` walk as pages, so they share the same `<ul>`-with-
+  // non-`<li>`-children pitfall. Normalize their element trees too before
+  // they leave the build.
+  for (const def of promotedComponents.values()) {
+    normalizeListChildren(def.elements);
+  }
 
-  // 5. Scan assets
+  // 4. Scan assets
+  const styleClasses = Array.from(allStyleClasses.values());
   const assets = scanAssets(projectPaths.project);
 
+  // 5. Collect component scripts and component-scoped CSS sidecars. Both get
+  //    bundled into the manual-paste UI: scripts as a `<script>` at body end,
+  //    CSS as part of the `<style>` block at head. CSS in particular is
+  //    critical for components that drive visibility through hand-written
+  //    rules (e.g. NavDropdown's `[data-nav-dropdown="container"].open ...`)
+  //    — those don't translate to Webflow's class system at all.
+  const scripts: WebflowScript[] = [];
+  const cssBlocks: string[] = [];
+  for (const [name, def] of Object.entries(globalComponents)) {
+    const code = def.component?.javascript;
+    if (typeof code === 'string' && code.trim().length > 0) {
+      scripts.push({
+        componentName: name,
+        code,
+        defineVars: def.component?.defineVars,
+      });
+    }
+    const css = def.component?.css;
+    if (typeof css === 'string' && css.trim().length > 0) {
+      cssBlocks.push(`/* ${name}.css */\n${css.trim()}`);
+    }
+  }
+  const componentCss = cssBlocks.length > 0 ? cssBlocks.join('\n\n') : undefined;
+
+  // 6. Per-element interactiveStyles → raw CSS for rules Webflow's class
+  //    system can't represent (anything with `prefix`, class-style postfix,
+  //    or breakpoint-divided pseudos). Pseudo-only rules with empty prefix
+  //    have already been written into `primaryClass.pseudoStates` upstream
+  //    via `Style.setProperties({ pseudo })`; we filter those out here so
+  //    the bundle doesn't double-emit them.
+  const interactiveCssBlocks: string[] = [];
+  for (const [elementClass, rules] of allInteractiveStylesMap) {
+    const customRules = rules.filter((r) => !isWebflowHandledRule(r));
+    if (customRules.length === 0) continue;
+    const css = generateInteractiveCSS(elementClass, customRules, breakpoints, undefined, responsiveScales);
+    if (css && css.trim().length > 0) {
+      interactiveCssBlocks.push(css);
+    }
+  }
+  const interactiveCss = interactiveCssBlocks.length > 0
+    ? interactiveCssBlocks.join('\n\n')
+    : undefined;
+
   return {
     version: 1,
     exportedAt: new Date().toISOString(),
     pages: allPages,
-    styles: Array.from(allStyleClasses.values()),
-    cms: cmsCollections,
+    styles: styleClasses,
+    cms: [],
     assets,
-    cssVariables: Object.keys(cssVariables).length > 0 ? cssVariables : undefined,
+    slugMappings: slugMappings.length > 0 ? slugMappings : undefined,
+    scripts: scripts.length > 0 ? scripts : undefined,
+    components: promotedComponents.size > 0
+      ? Array.from(promotedComponents.values())
+      : undefined,
+    componentCss,
+    interactiveCss,
+    i18n: {
+      defaultLocale: i18nConfig.defaultLocale,
+      locales: i18nConfig.locales.map(l => ({
+        code: l.code,
+        name: l.name,
+        nativeName: l.nativeName,
+      })),
+      selectedLocale,
+    },
   };
 }
 

package/lib/server/webflow/index.ts

@@ -6,6 +6,7 @@
 export { buildWebflowPayload } from './buildWebflow';
 export { nodeToWebflow } from './nodeToWebflow';
 export { mapStylesToWebflow } from './styleMapper';
+export { wrapInWebflowTemplate } from './templateWrapper';
 export type {
   WebflowExportPayload,
   WebflowPage,