meno-core 1.0.47 → 1.0.49

package/dist/lib/server/index.js

@@ -3,7 +3,7 @@ import {
 } from "../../chunks/chunk-4OFZP5NQ.js";
 import {
   buildStaticPages
-} from "../../chunks/chunk-LJFB5EBT.js";
+} from "../../chunks/chunk-JER5NQVM.js";
 import {
   ComponentService,
   EnumService,
@@ -32,7 +32,7 @@ import {
   logResponseTime,
   withErrorHandling,
   withLogging
-} from "../../chunks/chunk-47UNLQUU.js";
+} from "../../chunks/chunk-CHD5UCFF.js";
 import {
   CMSService,
   ColorService,
@@ -62,13 +62,13 @@ import {
   generateThemeColorVariablesCSS,
   generateVariablesCSS,
   getJSValidationErrors,
+  getLocaleLinks,
   loadBreakpointConfig,
   loadComponentDirectory,
   loadI18nConfig,
   loadIconsConfig,
   loadJSONFile,
   loadProjectConfig,
-  loadResponsiveScalesConfig,
   mapPageNameToPath,
   menoFilterScript,
   mergeLibraries,
@@ -83,11 +83,11 @@ import {
   styleToString,
   translatePath,
   variableService
-} from "../../chunks/chunk-FGUZOYJX.js";
+} from "../../chunks/chunk-EQYDSPBB.js";
 import {
   ConfigService,
   configService
-} from "../../chunks/chunk-ZTKHJQ2Z.js";
+} from "../../chunks/chunk-KPU2XHOS.js";
 import {
   bundleFile,
   createRuntimeServer,
@@ -116,19 +116,35 @@ import {
   spawnProcess,
   writeFile
 } from "../../chunks/chunk-WQFG7PAH.js";
-import "../../chunks/chunk-IF3RATBY.js";
-import "../../chunks/chunk-KITQJYZV.js";
-import "../../chunks/chunk-BCLGRZ3U.js";
+import "../../chunks/chunk-H4JSCDNW.js";
 import {
+  resolvePaletteColor
+} from "../../chunks/chunk-J23ZX5AP.js";
+import {
+  hasTemplates,
+  isHtmlMapping,
+  processCodeTemplates,
+  resolveHtmlMapping
+} from "../../chunks/chunk-LKAGAQ3M.js";
+import {
+  addItemUrl,
+  buildTemplateContext,
   extractInteractiveStyleMappings,
   generateAllInteractiveCSS,
   generateElementClassName,
+  generateInteractiveCSS,
+  getNestedValue,
   hasIf,
   hasInteractiveStyleMappings,
+  isBooleanMapping,
+  isCssNamedColor,
   isItemDraftForLocale,
   isVoidElement,
+  resolveItemsTemplate,
+  resolvePropsFromDefinition,
+  shortHash,
   singularize
-} from "../../chunks/chunk-FED5MME6.js";
+} from "../../chunks/chunk-S2CX6HFM.js";
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_I18N_CONFIG,
@@ -136,8 +152,9 @@ import {
   getScaleMultiplier,
   isI18nValue,
   resolveI18nValue,
+  resolveVariableValueAtBreakpoint,
   scalePropertyValue
-} from "../../chunks/chunk-XSWR3QLI.js";
+} from "../../chunks/chunk-AZQYF6KE.js";
 import "../../chunks/chunk-UB44F4Z2.js";
 import {
   HMR_ROUTE,
@@ -798,7 +815,7 @@ function emitAttrValue(key, value, ctx) {
   }
   return `${key}="${escapeJSX(value)}"`;
 }
-function isHtmlMapping(value) {
+function isHtmlMapping2(value) {
   return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
 }
 function isResponsiveStyle2(style) {
@@ -968,7 +985,7 @@ function resolveTemplate(text, ctx) {
     return `{${trimmed}}`;
   });
 }
-function hasTemplates(text) {
+function hasTemplates2(text) {
   return /\{\{.+?\}\}/.test(text);
 }
 function buildElementClass(ctx, label) {
@@ -987,7 +1004,7 @@ function buildAttributesString(attributes, ctx) {
       if (value) parts.push(key);
     } else {
       const strVal = String(value);
-      if (hasTemplates(strVal) && ctx.isComponentDef) {
+      if (hasTemplates2(strVal) && ctx.isComponentDef) {
         const fullMatch = strVal.match(/^\{\{(.+)\}\}$/);
         if (fullMatch) {
           let expr = fullMatch[1].trim();
@@ -1009,7 +1026,7 @@ function buildAttributesString(attributes, ctx) {
           });
           parts.push(`${key}={\`${resolved}\`}`);
         }
-      } else if (ctx.listItemBinding && hasTemplates(strVal)) {
+      } else if (ctx.listItemBinding && hasTemplates2(strVal)) {
         const fullMatch = strVal.match(/^\{\{(.+)\}\}$/);
         if (fullMatch) {
           let expr = fullMatch[1].trim();
@@ -1084,7 +1101,7 @@ function nodeToAstro(node, ctx) {
       return `${ind(ctx)}${transformed}
 `;
     }
-    if (hasTemplates(node) && ctx.isComponentDef) {
+    if (hasTemplates2(node) && ctx.isComponentDef) {
       return `${ind(ctx)}${resolveTemplate(node, ctx)}
 `;
     }
@@ -1225,7 +1242,7 @@ function imageImportPath(srcPath, fileDepth) {
 function isStaticImageSrc(src, ctx) {
   if (!src) return false;
   if (typeof src !== "string") return false;
-  if (hasTemplates(src)) return false;
+  if (hasTemplates2(src)) return false;
   if (!src.startsWith("/images/")) return false;
   if (!ctx.imageMetadataMap?.has(src)) return false;
   return true;
@@ -1420,7 +1437,7 @@ function emitHtmlNode(node, ctx) {
   const style = node.style;
   let isDynamic = false;
   let dynamicTagVar = "";
-  if (hasTemplates(tag) && ctx.isComponentDef) {
+  if (hasTemplates2(tag) && ctx.isComponentDef) {
     isDynamic = true;
     dynamicTagVar = `Tag_${ctx.elementPath.join("_")}`;
     const resolved = tag.replace(/\{\{(.+?)\}\}/g, (_, expr) => `\${${expr.trim()}}`);
@@ -1461,7 +1478,7 @@ function emitComponentInstance(node, ctx) {
     for (const [key, rawValue] of Object.entries(node.props)) {
       if (key === "children") continue;
       const value = resolveI18n(rawValue, ctx);
-      if (typeof value === "string" && hasTemplates(value) && ctx.isComponentDef) {
+      if (typeof value === "string" && hasTemplates2(value) && ctx.isComponentDef) {
         const fullMatch = value.match(/^\{\{(.+)\}\}$/);
         if (fullMatch) {
           let expr = fullMatch[1].trim();
@@ -1544,7 +1561,7 @@ function emitEmbedNode(node, ctx) {
   }
   const { classExpr, styleAttr } = buildClassAndStyleExpression(style, node.interactiveStyles, elementClass, ctx);
   const attrs = buildAttributesString(node.attributes, ctx);
-  if (isHtmlMapping(node.html)) {
+  if (isHtmlMapping2(node.html)) {
     if (ctx.isComponentDef) {
       const propRef = node.html.prop;
       return `${ifExpr}${ind(ctx)}<div${classExpr.replace('"', '"oem ') || ' class="oem"'}${attrs}>
@@ -1553,7 +1570,7 @@ ${ind(ctx)}</div>
 ${emitIfClose(node, ctx)}`;
     }
   }
-  if (typeof node.html === "string" && hasTemplates(node.html) && ctx.isComponentDef) {
+  if (typeof node.html === "string" && hasTemplates2(node.html) && ctx.isComponentDef) {
     const fullMatch = node.html.match(/^\{\{(.+)\}\}$/);
     if (fullMatch) {
       let propRef = fullMatch[1].trim();
@@ -1619,7 +1636,7 @@ function emitLinkNode(node, ctx) {
     }
   } else {
     const href = typeof nodeHref === "string" ? nodeHref : "#";
-    if (hasTemplates(href) && ctx.isComponentDef) {
+    if (hasTemplates2(href) && ctx.isComponentDef) {
       const fullMatch = href.match(/^\{\{(.+)\}\}$/);
       if (fullMatch) {
         let expr = fullMatch[1].trim();
@@ -2935,8 +2952,8 @@ async function buildAstroProject(projectRoot, outputDir) {
   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();
   const globalLibraries = configService.getLibraries();
   const componentLibraries = collectComponentLibraries(globalComponents);
   const imageMetadataMap = await buildImageMetadataMap();
@@ -3498,38 +3515,19 @@ export default defineConfig({${siteUrl ? `
 
 // lib/server/webflow/buildWebflow.ts
 import { existsSync as existsSync2, readdirSync as readdirSync2 } from "fs";
-import { join as join2 } from "path";
-
-// lib/server/webflow/types.ts
-function mapCMSFieldType(menoType) {
-  switch (menoType) {
-    case "string":
-      return "PlainText";
-    case "text":
-    case "rich-text":
-      return "RichText";
-    case "number":
-      return "Number";
-    case "boolean":
-      return "Switch";
-    case "image":
-      return "Image";
-    case "date":
-      return "Date";
-    case "select":
-      return "Option";
-    case "file":
-      return "File";
-    case "reference":
-      return "Reference";
-    default:
-      return "PlainText";
-  }
-}
+import { join as join3 } from "path";
+init_constants();
 
 // lib/server/webflow/nodeToWebflow.ts
 init_constants();
 
+// lib/server/webflow/types.ts
+var MENO_BIND_SENTINEL_PREFIX = "__MENO_BIND__:";
+var MENO_BIND_SENTINEL_SUFFIX = ":__";
+var MENO_BIND_SENTINEL_RE = /__MENO_BIND__:([^:]+):__/g;
+var MENO_BIND_SENTINEL_EXACT_RE = /^__MENO_BIND__:([^:]+):__$/;
+var COLLECTION_LIST_TAG = "__collection_list__";
+
 // lib/server/webflow/styleMapper.ts
 var UNITLESS_PROPERTIES = /* @__PURE__ */ new Set([
   "opacity",
@@ -3544,6 +3542,28 @@ var UNITLESS_PROPERTIES = /* @__PURE__ */ new Set([
   "font-weight",
   "tab-size"
 ]);
+var TIME_PROPERTIES = /* @__PURE__ */ new Set([
+  "transition-duration",
+  "transition-delay",
+  "animation-duration",
+  "animation-delay"
+]);
+function normalizeZero(cssProp, cssValue) {
+  if (cssValue !== "0") return cssValue;
+  if (UNITLESS_PROPERTIES.has(cssProp)) return cssValue;
+  if (TIME_PROPERTIES.has(cssProp)) return cssValue;
+  return "0px";
+}
+var COLOR_PROPS_CAMEL = /* @__PURE__ */ new Set(["color", "backgroundColor", "borderColor"]);
+function maybeWrapColorVar(camelProp, value) {
+  if (!COLOR_PROPS_CAMEL.has(camelProp)) return value;
+  if (!value) return value;
+  if (value.startsWith("#")) return value;
+  if (value.startsWith("var(")) return value;
+  if (value.includes("(")) return value;
+  if (isCssNamedColor(value)) return value;
+  return `var(--${value})`;
+}
 function isStyleMapping4(value) {
   return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
 }
@@ -3553,6 +3573,65 @@ function isResponsiveStyle4(style) {
 function toKebabCase(prop) {
   return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
+function splitTopLevel(value) {
+  const out = [];
+  let depth = 0;
+  let buf = "";
+  for (const ch of value.trim()) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    if (depth === 0 && /\s/.test(ch)) {
+      if (buf) {
+        out.push(buf);
+        buf = "";
+      }
+      continue;
+    }
+    buf += ch;
+  }
+  if (buf) out.push(buf);
+  return out;
+}
+function expandShorthand(cssProp, cssValue) {
+  if (cssProp !== "margin" && cssProp !== "padding" && cssProp !== "gap") {
+    return null;
+  }
+  const parts = splitTopLevel(cssValue);
+  if (cssProp === "gap") {
+    if (parts.length === 1) {
+      const v = normalizeZero("row-gap", parts[0]);
+      return { "row-gap": v, "column-gap": v };
+    }
+    if (parts.length === 2) {
+      return {
+        "row-gap": normalizeZero("row-gap", parts[0]),
+        "column-gap": normalizeZero("column-gap", parts[1])
+      };
+    }
+    return null;
+  }
+  let top, right, bottom, left;
+  if (parts.length === 1) {
+    top = right = bottom = left = parts[0];
+  } else if (parts.length === 2) {
+    top = bottom = parts[0];
+    right = left = parts[1];
+  } else if (parts.length === 3) {
+    top = parts[0];
+    right = left = parts[1];
+    bottom = parts[2];
+  } else if (parts.length === 4) {
+    [top, right, bottom, left] = parts;
+  } else {
+    return null;
+  }
+  return {
+    [`${cssProp}-top`]: normalizeZero(`${cssProp}-top`, top),
+    [`${cssProp}-right`]: normalizeZero(`${cssProp}-right`, right),
+    [`${cssProp}-bottom`]: normalizeZero(`${cssProp}-bottom`, bottom),
+    [`${cssProp}-left`]: normalizeZero(`${cssProp}-left`, left)
+  };
+}
 function styleObjectToCSS(style) {
   const css = {};
   for (const [prop, value] of Object.entries(style)) {
@@ -3560,11 +3639,18 @@ function styleObjectToCSS(style) {
     if (value === "" || value === void 0 || value === null) continue;
     if (typeof value === "boolean" || typeof value === "object") continue;
     const cssProp = toKebabCase(prop);
+    let cssValue;
     if (typeof value === "number") {
       if (isNaN(value)) continue;
-      css[cssProp] = UNITLESS_PROPERTIES.has(cssProp) ? String(value) : `${value}px`;
+      cssValue = UNITLESS_PROPERTIES.has(cssProp) ? String(value) : `${value}px`;
+    } else {
+      cssValue = maybeWrapColorVar(prop, String(value));
+    }
+    const expanded = expandShorthand(cssProp, cssValue);
+    if (expanded) {
+      Object.assign(css, expanded);
     } else {
-      css[cssProp] = String(value);
+      css[cssProp] = normalizeZero(cssProp, cssValue);
     }
   }
   return css;
@@ -3591,14 +3677,85 @@ function collectStyleMappings2(style) {
   return result;
 }
 function postfixToPseudoState(postfix) {
-  if (postfix.includes(":hover")) return "hover";
   if (postfix.includes(":focus-visible")) return "focus-visible";
+  if (postfix.includes(":focus-within")) return "focus-within";
+  if (postfix.includes(":nth-child(odd)")) return "nth-child(odd)";
+  if (postfix.includes(":nth-child(even)")) return "nth-child(even)";
+  if (postfix.includes(":first-child")) return "first-child";
+  if (postfix.includes(":last-child")) return "last-child";
+  if (postfix.includes(":placeholder")) return "placeholder";
+  if (postfix.includes(":empty")) return "empty";
+  if (postfix.includes(":before")) return "before";
+  if (postfix.includes(":after")) return "after";
+  if (postfix.includes(":hover")) return "hover";
   if (postfix.includes(":focus")) return "focus";
   if (postfix.includes(":active")) return "active";
   if (postfix.includes(":visited")) return "visited";
+  if (postfix.includes(":pressed")) return "pressed";
+  if (postfix.includes("::before")) return "before";
+  if (postfix.includes("::after")) return "after";
+  if (postfix.includes("::placeholder")) return "placeholder";
   return null;
 }
-function mapStylesToWebflow(className, style, interactiveStyles, breakpoints) {
+function isWebflowHandledRule(rule) {
+  if (rule.prefix && rule.prefix.trim().length > 0) return false;
+  if (!rule.postfix) return false;
+  if (postfixToPseudoState(rule.postfix) === null) return false;
+  const s = rule.style;
+  if (!s || typeof s !== "object") return false;
+  const responsiveKeys = Object.keys(s).filter((k) => k !== "base");
+  return responsiveKeys.length === 0;
+}
+function widthToWebflowBreakpoint(maxWidthPx) {
+  if (maxWidthPx < 480) return "tiny";
+  if (maxWidthPx < 768) return "small";
+  if (maxWidthPx < 992) return "medium";
+  if (maxWidthPx < 1280) return "main";
+  if (maxWidthPx < 1440) return "large";
+  if (maxWidthPx < 1920) return "xl";
+  return "xxl";
+}
+function menoBreakpointToWebflow(bpName, breakpoints) {
+  if (bpName === "tablet") return "medium";
+  if (bpName === "mobile") return "small";
+  const entry = breakpoints[bpName];
+  if (entry && typeof entry.breakpoint === "number") {
+    return widthToWebflowBreakpoint(entry.breakpoint);
+  }
+  return "main";
+}
+function mergeIntoBreakpoint(cls, tier, css) {
+  if (!cls.breakpoints) cls.breakpoints = {};
+  cls.breakpoints[tier] = { ...cls.breakpoints[tier], ...css };
+}
+function kebabToCamel(s) {
+  return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function applyAutoScaling(cls, breakpoints, responsiveScales) {
+  if (!responsiveScales?.enabled) return;
+  const baseRef = responsiveScales.baseReference || 16;
+  for (const [prop, baseValue] of Object.entries(cls.base)) {
+    if (!baseValue || baseValue.includes("var(--")) continue;
+    const camelProp = kebabToCamel(prop);
+    for (const [bpName, bpEntry] of Object.entries(breakpoints)) {
+      if (!bpEntry) continue;
+      const scale = getScaleMultiplier(responsiveScales, camelProp, bpName);
+      if (scale === null) continue;
+      const scaled = scalePropertyValue(baseValue, baseRef, scale);
+      if (scaled === null || scaled === baseValue) continue;
+      const tier = menoBreakpointToWebflow(bpName, breakpoints);
+      if (!cls.breakpoints) cls.breakpoints = {};
+      const bucket = cls.breakpoints[tier] || {};
+      if (bucket[prop] !== void 0) continue;
+      bucket[prop] = scaled;
+      cls.breakpoints[tier] = bucket;
+    }
+  }
+}
+function mapStylesToWebflow(className, style, interactiveStyles, breakpoints, responsiveScales, options) {
+  const instanceProps = options?.instanceProps;
+  const componentDefaults = options?.componentDefaults;
+  const themeSuffix = options?.themeSuffix ?? "";
   const webflowClassName = className.replace(/_/g, "-");
   const primaryClass = {
     name: webflowClassName,
@@ -3610,21 +3767,12 @@ function mapStylesToWebflow(className, style, interactiveStyles, breakpoints) {
       if (responsive.base) {
         primaryClass.base = styleObjectToCSS(responsive.base);
       }
-      if (responsive.tablet) {
-        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
-        primaryClass.breakpoints.Tablet = styleObjectToCSS(responsive.tablet);
-      }
-      if (responsive.mobile) {
-        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
-        primaryClass.breakpoints.MobilePortrait = styleObjectToCSS(responsive.mobile);
-      }
       for (const [bpName, bpStyle] of Object.entries(responsive)) {
-        if (!bpStyle || bpName === "base" || bpName === "tablet" || bpName === "mobile") continue;
-        if (!primaryClass.breakpoints) primaryClass.breakpoints = {};
-        primaryClass.breakpoints.Tablet = {
-          ...primaryClass.breakpoints.Tablet,
-          ...styleObjectToCSS(bpStyle)
-        };
+        if (!bpStyle || bpName === "base") continue;
+        const css = styleObjectToCSS(bpStyle);
+        if (Object.keys(css).length === 0) continue;
+        const tier = menoBreakpointToWebflow(bpName, breakpoints);
+        mergeIntoBreakpoint(primaryClass, tier, css);
       }
     } else {
       primaryClass.base = styleObjectToCSS(style);
@@ -3632,92 +3780,546 @@ function mapStylesToWebflow(className, style, interactiveStyles, breakpoints) {
   }
   if (interactiveStyles && interactiveStyles.length > 0) {
     for (const rule of interactiveStyles) {
-      if (!rule.postfix) continue;
+      if (!isWebflowHandledRule(rule)) continue;
+      const baseProps = isResponsiveStyle4(rule.style) ? styleObjectToCSS(rule.style.base || {}) : styleObjectToCSS(rule.style);
+      if (Object.keys(baseProps).length === 0) continue;
       const pseudoState = postfixToPseudoState(rule.postfix);
       if (!pseudoState) continue;
-      const ruleStyle = rule.style;
       if (!primaryClass.pseudoStates) primaryClass.pseudoStates = {};
-      if (isResponsiveStyle4(ruleStyle)) {
-        const responsive = ruleStyle;
-        if (responsive.base) {
-          primaryClass.pseudoStates[pseudoState] = {
-            ...primaryClass.pseudoStates[pseudoState],
-            ...styleObjectToCSS(responsive.base)
-          };
-        }
-      } else {
-        primaryClass.pseudoStates[pseudoState] = {
-          ...primaryClass.pseudoStates[pseudoState],
-          ...styleObjectToCSS(ruleStyle)
-        };
-      }
+      primaryClass.pseudoStates[pseudoState] = {
+        ...primaryClass.pseudoStates[pseudoState],
+        ...baseProps
+      };
     }
   }
   const comboClasses = [];
   const mappings = collectStyleMappings2(style);
+  const comboCss = {};
+  const comboNameParts = [];
   for (const { property, mapping } of mappings) {
-    for (const [value, cssValue] of Object.entries(mapping.values)) {
-      if (cssValue === "" || cssValue === void 0) continue;
-      const comboName = `is-${sanitizeClassName(mapping.prop)}-${sanitizeClassName(String(value))}`;
-      const comboClass = {
-        name: comboName,
-        base: {
-          [toKebabCase(property)]: typeof cssValue === "number" ? UNITLESS_PROPERTIES.has(toKebabCase(property)) ? String(cssValue) : `${cssValue}px` : String(cssValue)
-        },
-        comboParent: webflowClassName
-      };
-      comboClasses.push(comboClass);
+    const defaultValue = componentDefaults?.[mapping.prop];
+    const defaultKey = defaultValue != null ? String(defaultValue) : void 0;
+    if (defaultKey !== void 0 && defaultKey in mapping.values) {
+      const defaultCss = mappingValueToCSS(property, mapping.values[defaultKey]);
+      if (defaultCss) {
+        primaryClass.base = { ...primaryClass.base, ...defaultCss };
+      }
     }
+    if (!instanceProps) continue;
+    const instanceValue = instanceProps[mapping.prop];
+    if (instanceValue == null) continue;
+    const instanceKey = String(instanceValue);
+    if (instanceKey === defaultKey) continue;
+    if (!(instanceKey in mapping.values)) continue;
+    const css = mappingValueToCSS(property, mapping.values[instanceKey]);
+    if (!css) continue;
+    Object.assign(comboCss, css);
+    const part = `${sanitizeClassName(mapping.prop)}-${sanitizeClassName(instanceKey)}`;
+    if (!comboNameParts.includes(part)) comboNameParts.push(part);
+  }
+  if (comboNameParts.length > 0 && Object.keys(comboCss).length > 0) {
+    comboNameParts.sort();
+    comboClasses.push({
+      name: `is-${comboNameParts.join("-")}${themeSuffix}`,
+      base: comboCss,
+      comboParent: webflowClassName
+    });
+  }
+  applyAutoScaling(primaryClass, breakpoints, responsiveScales);
+  for (const combo of comboClasses) {
+    applyAutoScaling(combo, breakpoints, responsiveScales);
   }
   return { primaryClass, comboClasses };
 }
+function mappingValueToCSS(property, rawValue) {
+  if (rawValue === "" || rawValue === void 0 || rawValue === null) return null;
+  const cssProp = toKebabCase(property);
+  const cssValueStr = typeof rawValue === "number" ? UNITLESS_PROPERTIES.has(cssProp) ? String(rawValue) : `${rawValue}px` : maybeWrapColorVar(property, String(rawValue));
+  return expandShorthand(cssProp, cssValueStr) ?? { [cssProp]: normalizeZero(cssProp, cssValueStr) };
+}
 function sanitizeClassName(name) {
   return name.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 }
+function buildInstanceStyleCombo(comboName, rootClassName, style, interactiveStyles, breakpoints, responsiveScales) {
+  const base = {};
+  const bps = {};
+  const pseudos = {};
+  if (style) {
+    if (isResponsiveStyle4(style)) {
+      const responsive = style;
+      if (responsive.base) Object.assign(base, styleObjectToCSS(responsive.base));
+      for (const [bpName, bpStyle] of Object.entries(responsive)) {
+        if (!bpStyle || bpName === "base") continue;
+        const css = styleObjectToCSS(bpStyle);
+        if (Object.keys(css).length === 0) continue;
+        const tier = menoBreakpointToWebflow(bpName, breakpoints);
+        bps[tier] = { ...bps[tier], ...css };
+      }
+    } else {
+      Object.assign(base, styleObjectToCSS(style));
+    }
+  }
+  if (interactiveStyles && interactiveStyles.length > 0) {
+    for (const rule of interactiveStyles) {
+      if (!isWebflowHandledRule(rule)) continue;
+      const ruleStyle = rule.style;
+      const flat = isResponsiveStyle4(ruleStyle) ? ruleStyle.base : ruleStyle;
+      if (!flat) continue;
+      const css = styleObjectToCSS(flat);
+      if (Object.keys(css).length === 0) continue;
+      const pseudo = postfixToPseudoState(rule.postfix);
+      if (!pseudo) continue;
+      pseudos[pseudo] = { ...pseudos[pseudo], ...css };
+    }
+  }
+  if (Object.keys(base).length === 0 && Object.keys(bps).length === 0 && Object.keys(pseudos).length === 0) return null;
+  const cls = {
+    name: comboName,
+    base,
+    comboParent: rootClassName
+  };
+  if (Object.keys(bps).length > 0) cls.breakpoints = bps;
+  if (Object.keys(pseudos).length > 0) cls.pseudoStates = pseudos;
+  applyAutoScaling(cls, breakpoints, responsiveScales);
+  return cls;
+}
 
 // lib/server/webflow/nodeToWebflow.ts
+import { readFile as readFile2 } from "fs/promises";
+import { join as join2, basename, extname } from "path";
+var PROMOTED_TO_WEBFLOW_COMPONENT = /* @__PURE__ */ new Set(["Navigation", "Footer"]);
 function buildElementClass2(ctx, label) {
-  return generateElementClassName({
+  const generated = generateElementClassName({
     fileType: ctx.fileType,
     fileName: ctx.fileName,
     label,
     path: ctx.elementPath
   });
+  if (ctx.fileType !== "component") return generated;
+  const stripped = generated.replace(/^c_/, "");
+  return stripped.replace(/^([a-z0-9-]+)_\1$/, "$1");
+}
+function themedClassSuffix(ctx) {
+  const t = ctx.currentTheme;
+  if (!t) return "";
+  if (ctx.defaultTheme && t === ctx.defaultTheme) return "";
+  const safe = t.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  if (!safe) return "";
+  return `-theme-${safe}`;
+}
+function withThemeSuffix(name, ctx) {
+  return name + themedClassSuffix(ctx);
+}
+function mintInstanceComboName(ctx, identity) {
+  let attempt = 0;
+  let name = `is-${shortHash(identity)}`;
+  while (true) {
+    const claimedBy = ctx.comboIdentityByName.get(name);
+    if (!claimedBy || claimedBy === identity) {
+      ctx.comboIdentityByName.set(name, identity);
+      return name;
+    }
+    attempt++;
+    name = `is-${shortHash(`${identity}#${attempt}`)}`;
+  }
+}
+function extractInterfaceDefaults(iface) {
+  if (!iface) return void 0;
+  const out = {};
+  let any = false;
+  for (const [key, def] of Object.entries(iface)) {
+    if (def && "default" in def) {
+      out[key] = def.default;
+      any = true;
+    }
+  }
+  return any ? out : void 0;
+}
+function buildTemplateProps(ctx, instanceProps) {
+  return {
+    ...ctx.templateContext ?? {},
+    ...ctx.cmsContext ?? {},
+    ...ctx.componentDefaults ?? {},
+    ...ctx.slotInstanceProps ?? {},
+    ...instanceProps ?? {}
+  };
 }
-function resolveTemplate2(text, props) {
-  if (!props) return text;
-  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
-    const trimmed = expr.trim();
-    const orMatch = trimmed.match(/^(.+?)\s*\|\|\s*['"](.+?)['"]$/);
-    if (orMatch) {
-      const value2 = resolveNestedProp(props, orMatch[1].trim());
-      return value2 !== void 0 && value2 !== "" && value2 !== null ? String(value2) : orMatch[2];
-    }
-    const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*['"](.+?)['"]\s*:\s*['"](.+?)['"]$/);
-    if (ternaryMatch) {
-      const value2 = resolveNestedProp(props, ternaryMatch[1].trim());
-      return value2 ? ternaryMatch[2] : ternaryMatch[3];
-    }
-    const value = resolveNestedProp(props, trimmed);
-    return value !== void 0 ? String(value) : "";
-  });
+function resolveStringTemplate(text, ctx, instanceProps) {
+  if (!hasTemplates(text)) return text;
+  const out = processCodeTemplates(text, buildTemplateProps(ctx, instanceProps));
+  return out.startsWith(RAW_HTML_PREFIX) ? flattenInlineHtmlToText(out.slice(RAW_HTML_PREFIX.length)) : out;
+}
+var HEADING_TAGS = /* @__PURE__ */ new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+var LINK_LIKE_TAGS = /* @__PURE__ */ new Set(["button"]);
+var LIST_TAGS = /* @__PURE__ */ new Set(["ul", "ol"]);
+function applyHeadingMarginDefaults(cls) {
+  const base = cls.base;
+  if (!("margin-top" in base)) base["margin-top"] = "0px";
+  if (!("margin-bottom" in base)) base["margin-bottom"] = "0px";
+}
+function applyParagraphMarginDefaults(cls) {
+  const base = cls.base;
+  if (!("margin-bottom" in base)) base["margin-bottom"] = "0px";
+}
+function applyListMarginDefaults(cls) {
+  const base = cls.base;
+  if (!("margin-bottom" in base)) base["margin-bottom"] = "0px";
+}
+function applyGridRowsDefault(cls) {
+  const base = cls.base;
+  const display = base["display"];
+  if (display !== "grid" && display !== "inline-grid") return;
+  if ("grid" in base) return;
+  if ("grid-template" in base) return;
+  if ("grid-template-rows" in base) return;
+  base["grid-template-rows"] = "1fr";
+}
+function applyLinkTextDecorationDefault(cls) {
+  const base = cls.base;
+  if ("text-decoration" in base || "text-decoration-line" in base) return;
+  base["text-decoration"] = "none";
+}
+function mergeComboClasses(inner, outer, parentName) {
+  const innerSuffix = inner.name.startsWith("is-") ? inner.name.slice(3) : inner.name;
+  const merged = {
+    name: `${outer.name}_${innerSuffix}`,
+    base: { ...inner.base, ...outer.base },
+    comboParent: parentName
+  };
+  if (inner.breakpoints || outer.breakpoints) {
+    const bps = {};
+    const tiers = /* @__PURE__ */ new Set([
+      ...Object.keys(inner.breakpoints || {}),
+      ...Object.keys(outer.breakpoints || {})
+    ]);
+    for (const tier of tiers) {
+      bps[tier] = { ...inner.breakpoints?.[tier] || {}, ...outer.breakpoints?.[tier] || {} };
+    }
+    merged.breakpoints = bps;
+  }
+  if (inner.pseudoStates || outer.pseudoStates) {
+    const ps = {};
+    const states = /* @__PURE__ */ new Set([
+      ...Object.keys(inner.pseudoStates || {}),
+      ...Object.keys(outer.pseudoStates || {})
+    ]);
+    for (const state of states) {
+      ps[state] = { ...inner.pseudoStates?.[state] || {}, ...outer.pseudoStates?.[state] || {} };
+    }
+    merged.pseudoStates = ps;
+  }
+  return merged;
+}
+var IMAGE_EXT_MIME = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".svg": "image/svg+xml",
+  ".bmp": "image/bmp",
+  ".ico": "image/x-icon"
+};
+function isAbsoluteUrl(s) {
+  return /^[a-z][a-z0-9+.-]*:\/\//i.test(s) || s.startsWith("data:");
+}
+async function maybeInlineLocalImage(element, src) {
+  if (!src || isAbsoluteUrl(src)) return;
+  const projectRoot = getProjectRoot();
+  const rel = src.replace(/^\/+/, "");
+  const abs = join2(projectRoot, rel);
+  if (!abs.startsWith(projectRoot)) return;
+  try {
+    const buf = await readFile2(abs);
+    const ext = extname(abs).toLowerCase();
+    const mime = IMAGE_EXT_MIME[ext] || "application/octet-stream";
+    element.imageDataBase64 = buf.toString("base64");
+    element.imageDataMime = mime;
+    element.imageDataFileName = basename(abs);
+  } catch {
+  }
+}
+function flattenInlineHtmlToText(raw) {
+  const decode = (s) => s.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&nbsp;/g, " ");
+  let out = "";
+  const tagRe = /<!--[\s\S]*?-->|<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = tagRe.exec(raw)) !== null) {
+    if (match.index > lastIndex) {
+      out += decode(raw.slice(lastIndex, match.index));
+    }
+    lastIndex = match.index + match[0].length;
+    if (match[0].startsWith("<!--")) continue;
+    if ((match[1] || "").toLowerCase() === "br") out += "\n";
+  }
+  if (lastIndex < raw.length) out += decode(raw.slice(lastIndex));
+  return out;
 }
-function resolveNestedProp(obj, path) {
-  const parts = path.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (current === null || current === void 0 || typeof current !== "object") return void 0;
-    current = current[part];
+function resolveVarsInValue(value, ctx, breakpoint = "base") {
+  if (!value || !ctx.themeVars && !ctx.projectVars) return value;
+  const themeMap = ctx.themeVars ? (ctx.currentTheme && ctx.themeVars[ctx.currentTheme]) ?? (ctx.defaultTheme ? ctx.themeVars[ctx.defaultTheme] : void 0) : void 0;
+  const projectMap = ctx.projectVars ? ctx.projectVars[breakpoint] || ctx.projectVars.base : void 0;
+  const pattern = /var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)/g;
+  let current = value;
+  for (let pass = 0; pass < 3; pass++) {
+    let changed = false;
+    current = current.replace(pattern, (match, name, fallback) => {
+      const resolved = (themeMap && themeMap[name]) ?? (projectMap && projectMap[name]);
+      if (resolved !== void 0) {
+        changed = true;
+        return resolved;
+      }
+      if (fallback !== void 0) {
+        changed = true;
+        return fallback.trim();
+      }
+      return match;
+    });
+    if (!changed) break;
   }
   return current;
 }
-function hasTemplates2(text) {
-  return /\{\{.+?\}\}/.test(text);
+function substituteVarsInStyleObject(style, ctx, breakpoint = "base") {
+  const out = {};
+  for (const [k, v] of Object.entries(style)) {
+    out[k] = typeof v === "string" ? resolveVarsInValue(v, ctx, breakpoint) : v;
+  }
+  return out;
+}
+function projectBreakpointNames(ctx) {
+  return Object.keys(ctx.breakpoints);
+}
+function expandResponsiveVarsInto(baseStyle, responsive, ctx) {
+  if (!ctx.projectVars) return;
+  const bps = projectBreakpointNames(ctx);
+  if (bps.length === 0) return;
+  for (const [prop, rawVal] of Object.entries(baseStyle)) {
+    if (typeof rawVal !== "string" || !rawVal.includes("var(--")) continue;
+    const baseResolved = resolveVarsInValue(rawVal, ctx, "base");
+    for (const bp of bps) {
+      const bpResolved = resolveVarsInValue(rawVal, ctx, bp);
+      if (bpResolved === baseResolved) continue;
+      const bucket = responsive[bp] || {};
+      if (bucket[prop] !== void 0) continue;
+      bucket[prop] = bpResolved;
+      responsive[bp] = bucket;
+    }
+  }
+}
+function substituteVarsInStyle(style, ctx) {
+  if (!style) return style;
+  if (isResponsiveStyleObject(style)) {
+    const out = {};
+    for (const [bp, obj] of Object.entries(style)) {
+      if (!obj || typeof obj !== "object") continue;
+      out[bp] = substituteVarsInStyleObject(obj, ctx, bp);
+    }
+    const baseObj = style.base;
+    if (baseObj) expandResponsiveVarsInto(baseObj, out, ctx);
+    return out;
+  }
+  const flatStyle = style;
+  const baseSubstituted = substituteVarsInStyleObject(flatStyle, ctx, "base");
+  const responsive = { base: baseSubstituted };
+  expandResponsiveVarsInto(flatStyle, responsive, ctx);
+  if (Object.keys(responsive).length === 1) return baseSubstituted;
+  return responsive;
+}
+function substituteVarsInInteractive(rules, ctx) {
+  if (!rules) return rules;
+  return rules.map((rule) => ({
+    ...rule,
+    style: substituteVarsInStyle(rule.style, ctx) ?? rule.style
+  }));
+}
+function substituteVarsInStyleClass(cls, ctx) {
+  const varBaseProps = [];
+  for (const [k, v] of Object.entries(cls.base)) {
+    if (typeof v === "string" && v.includes("var(--")) {
+      varBaseProps.push({ prop: k, raw: v });
+    }
+  }
+  for (const k of Object.keys(cls.base)) {
+    cls.base[k] = resolveVarsInValue(cls.base[k], ctx, "base");
+  }
+  if (cls.breakpoints) {
+    for (const [tier, bp] of Object.entries(cls.breakpoints)) {
+      if (!bp) continue;
+      for (const k of Object.keys(bp)) {
+        bp[k] = resolveVarsInValue(bp[k], ctx, tier);
+      }
+    }
+  }
+  if (cls.pseudoStates) {
+    for (const ps of Object.values(cls.pseudoStates)) {
+      if (!ps) continue;
+      for (const k of Object.keys(ps)) ps[k] = resolveVarsInValue(ps[k], ctx, "base");
+    }
+  }
+  if (varBaseProps.length === 0 || !ctx.projectVars) return;
+  for (const bpName of Object.keys(ctx.breakpoints)) {
+    const tier = menoBreakpointToWebflowTier(bpName, ctx.breakpoints);
+    for (const { prop, raw } of varBaseProps) {
+      const baseResolved = cls.base[prop];
+      const bpResolved = resolveVarsInValue(raw, ctx, bpName);
+      if (bpResolved === baseResolved) continue;
+      if (!cls.breakpoints) cls.breakpoints = {};
+      const bucket = cls.breakpoints[tier] || {};
+      if (bucket[prop] !== void 0) continue;
+      bucket[prop] = bpResolved;
+      cls.breakpoints[tier] = bucket;
+    }
+  }
+}
+function menoBreakpointToWebflowTier(bpName, breakpoints) {
+  if (bpName === "tablet") return "medium";
+  if (bpName === "mobile") return "small";
+  const entry = breakpoints[bpName];
+  const w = entry && typeof entry.breakpoint === "number" ? entry.breakpoint : 992;
+  if (w < 480) return "tiny";
+  if (w < 768) return "small";
+  if (w < 992) return "medium";
+  if (w < 1280) return "main";
+  if (w < 1440) return "large";
+  if (w < 1920) return "xl";
+  return "xxl";
+}
+function isResponsiveStyleObject(style) {
+  return "base" in style || "tablet" in style || "mobile" in style;
+}
+function extractBaseColor(style, ctx, instanceProps) {
+  if (!style) return void 0;
+  const flat = isResponsiveStyleObject(style) ? style.base : style;
+  const c = flat?.color;
+  if (typeof c === "string") return c;
+  if (c && typeof c === "object" && c._mapping === true) {
+    const mapping = c;
+    const propValue = instanceProps?.[mapping.prop] ?? ctx?.componentDefaults?.[mapping.prop];
+    if (propValue == null) return void 0;
+    const key = String(propValue);
+    const raw = mapping.values[key];
+    if (typeof raw !== "string" || raw === "") return void 0;
+    return ctx ? resolveVarsInValue(raw, ctx) : raw;
+  }
+  return void 0;
+}
+function concreteColor(c) {
+  if (!c) return void 0;
+  const lower = c.trim().toLowerCase();
+  if (lower === "currentcolor" || lower === "inherit" || lower === "unset" || lower === "initial") {
+    return void 0;
+  }
+  return c;
+}
+function inlineCurrentColorInSvg(svg, color) {
+  return svg.replace(/currentColor/gi, color);
+}
+function resolveTemplatesInStyleObject(style, props) {
+  const result = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "string" && hasTemplates(value)) {
+      result[key] = processCodeTemplates(value, props);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function resolveStyleTemplates(style, props) {
+  if (!style || !props) return style;
+  if (isResponsiveStyleObject(style)) {
+    const result = {};
+    for (const [bp, styleObj] of Object.entries(style)) {
+      if (styleObj && typeof styleObj === "object") {
+        result[bp] = resolveTemplatesInStyleObject(styleObj, props);
+      }
+    }
+    return result;
+  }
+  return resolveTemplatesInStyleObject(style, props);
+}
+var SINGLE_TEMPLATE_RE = /^([^{]*)\{\{\s*([A-Za-z_$][\w$]*)\s*\}\}([^{]*)$/;
+function extractSingleTemplateProp(value) {
+  const m = SINGLE_TEMPLATE_RE.exec(value);
+  if (!m) return null;
+  return { prefix: m[1] ?? "", prop: m[2], suffix: m[3] ?? "" };
 }
-function nodeToWebflow(node, ctx, instanceProps) {
+function templatesToSyntheticMappings(style, componentDefaults, instanceProps) {
+  const out = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value !== "string" || !hasTemplates(value)) {
+      out[key] = value;
+      continue;
+    }
+    const parsed = extractSingleTemplateProp(value);
+    if (!parsed) {
+      out[key] = value;
+      continue;
+    }
+    const { prop } = parsed;
+    const defaultPropValue = componentDefaults[prop];
+    if (defaultPropValue == null) {
+      out[key] = value;
+      continue;
+    }
+    const instancePropValue = instanceProps[prop] ?? defaultPropValue;
+    const defaultResolved = processCodeTemplates(value, { ...instanceProps, [prop]: defaultPropValue });
+    const instanceResolved = processCodeTemplates(value, { ...instanceProps, [prop]: instancePropValue });
+    out[key] = {
+      _mapping: true,
+      prop,
+      values: {
+        [String(defaultPropValue)]: defaultResolved,
+        [String(instancePropValue)]: instanceResolved
+      }
+    };
+  }
+  return out;
+}
+function convertStyleTemplatesToMappings(style, componentDefaults, instanceProps) {
+  if (!style || !componentDefaults || !instanceProps) return style;
+  if (isResponsiveStyleObject(style)) {
+    const result = {};
+    for (const [bp, styleObj] of Object.entries(style)) {
+      if (styleObj && typeof styleObj === "object") {
+        result[bp] = templatesToSyntheticMappings(styleObj, componentDefaults, instanceProps);
+      }
+    }
+    return result;
+  }
+  return templatesToSyntheticMappings(style, componentDefaults, instanceProps);
+}
+function shouldRenderNode(node, instanceProps) {
+  if (!hasIf(node)) return true;
+  const ifValue = node.if;
+  if (typeof ifValue === "boolean") return ifValue;
+  if (isBooleanMapping(ifValue)) {
+    if (!instanceProps) return true;
+    const propValue = instanceProps[ifValue.prop];
+    const mapped = ifValue.values[String(propValue)];
+    return mapped !== void 0 ? Boolean(mapped) : true;
+  }
+  if (typeof ifValue === "string") {
+    if (!instanceProps) return true;
+    const resolved = processCodeTemplates(ifValue, instanceProps);
+    return Boolean(resolved) && resolved !== "false" && resolved !== "0" && resolved !== "";
+  }
+  return true;
+}
+function resolveInteractiveStyleTemplates(rules, props) {
+  if (!rules || !props) return rules;
+  return rules.map((rule) => ({
+    ...rule,
+    style: resolveStyleTemplates(rule.style, props) ?? rule.style
+  }));
+}
+async function nodeToWebflow(node, ctx, instanceProps) {
   if (node === null || node === void 0) return [];
   if (typeof node === "string") {
-    const text = instanceProps ? resolveTemplate2(node, instanceProps) : node;
+    const text = resolveStringTemplate(node, ctx, instanceProps);
+    if (text === "" || text.trim() === "") return [];
     return [{ tag: "span", textContent: text }];
   }
   if (typeof node === "number") {
@@ -3729,88 +4331,114 @@ function nodeToWebflow(node, ctx, instanceProps) {
       const child = node[i];
       const savedPath = [...ctx.elementPath];
       ctx.elementPath = [...ctx.elementPath, i];
-      results.push(...nodeToWebflow(child, ctx, instanceProps));
+      results.push(...await nodeToWebflow(child, ctx, instanceProps));
       ctx.elementPath = savedPath;
     }
     return results;
   }
+  if (!shouldRenderNode(node, instanceProps)) return [];
   switch (node.type) {
     case NODE_TYPE.NODE:
-      return [emitHtmlNode2(node, ctx, instanceProps)];
+      return [await emitHtmlNode2(node, ctx, instanceProps)];
     case NODE_TYPE.COMPONENT:
       return emitComponentInstance2(node, ctx, instanceProps);
     case NODE_TYPE.SLOT:
       return emitSlotMarker2(node, ctx, instanceProps);
     case NODE_TYPE.EMBED:
-      return [emitEmbedNode2(node, ctx, instanceProps)];
+      return [await emitEmbedNode2(node, ctx, instanceProps)];
     case NODE_TYPE.LINK:
-      return [emitLinkNode2(node, ctx, instanceProps)];
+      return [await emitLinkNode2(node, ctx, instanceProps)];
     case NODE_TYPE.LIST:
     case "cms-list":
+      return emitListNode2(node, ctx, instanceProps);
     case NODE_TYPE.LOCALE_LIST:
-      return [{ tag: "div", attributes: { "data-meno-type": node.type } }];
+      return emitLocaleListNode2(node, ctx, instanceProps);
     default:
       return [];
   }
 }
-function emitHtmlNode2(node, ctx, instanceProps) {
-  const tag = hasTemplates2(node.tag) && instanceProps ? resolveTemplate2(node.tag, instanceProps) : node.tag;
-  const style = node.style;
-  const interactiveStyles = node.interactiveStyles;
-  const needsClass = style || interactiveStyles && interactiveStyles.length > 0 || node.generateElementClass;
+async function emitHtmlNode2(node, ctx, instanceProps) {
+  const tag = resolveStringTemplate(node.tag, ctx, instanceProps);
+  const attributes = {};
+  if (node.attributes) {
+    for (const [key, value] of Object.entries(node.attributes)) {
+      attributes[key] = typeof value === "string" ? resolveStringTemplate(value, ctx, instanceProps) : value;
+    }
+  }
+  const themedCtx = typeof attributes.theme === "string" && attributes.theme ? { ...ctx, currentTheme: attributes.theme } : ctx;
+  const rawStyle = node.style;
+  const rawInteractiveStyles = node.interactiveStyles;
+  const styleWithMappings = convertStyleTemplatesToMappings(
+    rawStyle,
+    ctx.componentDefaults,
+    instanceProps
+  );
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(styleWithMappings, instanceProps),
+    themedCtx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(rawInteractiveStyles, instanceProps),
+    themedCtx
+  );
+  const tagLower = tag.toLowerCase();
+  const isHeading = HEADING_TAGS.has(tagLower);
+  const isLinkLike = LINK_LIKE_TAGS.has(tagLower);
+  const isParagraph = tagLower === "p";
+  const isList = LIST_TAGS.has(tagLower);
+  const needsClass = style || interactiveStyles && interactiveStyles.length > 0 || node.generateElementClass || isHeading || isLinkLike || isParagraph || isList;
   let className;
   let comboClassNames;
   if (needsClass) {
-    const elementClass = buildElementClass2(ctx, node.label);
+    const elementClass = withThemeSuffix(buildElementClass2(ctx, node.label), themedCtx);
     const { primaryClass, comboClasses } = mapStylesToWebflow(
       elementClass,
       style,
       interactiveStyles,
-      ctx.breakpoints
+      ctx.breakpoints,
+      ctx.responsiveScales,
+      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(themedCtx) }
     );
+    substituteVarsInStyleClass(primaryClass, themedCtx);
+    if (isHeading) applyHeadingMarginDefaults(primaryClass);
+    if (isParagraph) applyParagraphMarginDefaults(primaryClass);
+    if (isList) applyListMarginDefaults(primaryClass);
+    if (isLinkLike) applyLinkTextDecorationDefault(primaryClass);
+    applyGridRowsDefault(primaryClass);
     className = primaryClass.name;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
     if (comboClasses.length > 0) {
       comboClassNames = [];
       for (const combo of comboClasses) {
+        substituteVarsInStyleClass(combo, themedCtx);
         ctx.styleClasses.set(combo.name, combo);
         comboClassNames.push(combo.name);
       }
     }
-  }
-  const attributes = {};
-  if (node.attributes) {
-    for (const [key, value] of Object.entries(node.attributes)) {
-      if (instanceProps && typeof value === "string" && hasTemplates2(value)) {
-        attributes[key] = resolveTemplate2(value, instanceProps);
-      } else {
-        attributes[key] = value;
-      }
+    if (ctx.interactiveStylesMap && Array.isArray(interactiveStyles) && interactiveStyles.length > 0) {
+      ctx.interactiveStylesMap.set(primaryClass.name, interactiveStyles);
     }
   }
   let children;
   let textContent;
   if (!isVoidElement(tag) && node.children) {
     if (typeof node.children === "string") {
-      textContent = instanceProps ? resolveTemplate2(node.children, instanceProps) : node.children;
+      textContent = resolveStringTemplate(node.children, ctx, instanceProps);
     } else if (Array.isArray(node.children) && node.children.length === 1 && typeof node.children[0] === "string") {
       const text = node.children[0];
-      textContent = instanceProps ? resolveTemplate2(text, instanceProps) : text;
+      textContent = resolveStringTemplate(text, ctx, instanceProps);
     } else {
-      const innerCtx = { ...ctx, elementPath: [...ctx.elementPath] };
-      children = convertChildren(node.children, innerCtx, instanceProps);
+      const innerCtx = { ...themedCtx, elementPath: [...themedCtx.elementPath] };
+      const ownColor = concreteColor(extractBaseColor(style, themedCtx, instanceProps));
+      if (ownColor) innerCtx.inheritedColor = ownColor;
+      children = await convertChildren(node.children, innerCtx, instanceProps);
       if (children.length === 0) children = void 0;
     }
   }
-  let conditional;
-  const ifValue = node.if;
-  if (ifValue !== void 0 && ifValue !== true) {
-    if (typeof ifValue === "object" && ifValue._mapping) {
-      conditional = { prop: ifValue.prop, condition: "truthy" };
-    } else if (typeof ifValue === "string") {
-      const match = ifValue.match(/^\{\{(.+)\}\}$/);
-      conditional = { prop: match ? match[1].trim() : ifValue, condition: "truthy" };
-    }
+  if (textContent && textContent.startsWith(RAW_HTML_PREFIX)) {
+    textContent = flattenInlineHtmlToText(textContent.slice(RAW_HTML_PREFIX.length));
+  } else if (textContent && (isHeading || isParagraph) && /<[a-zA-Z!]/.test(textContent)) {
+    textContent = flattenInlineHtmlToText(textContent);
   }
   const element = { tag };
   if (className) element.className = className;
@@ -3818,115 +4446,786 @@ function emitHtmlNode2(node, ctx, instanceProps) {
   if (textContent) element.textContent = textContent;
   if (children) element.children = children;
   if (Object.keys(attributes).length > 0) element.attributes = attributes;
-  if (conditional) element.conditional = conditional;
+  if (tag.toLowerCase() === "img" && typeof attributes.src === "string") {
+    await maybeInlineLocalImage(element, attributes.src);
+  }
   return element;
 }
-function emitComponentInstance2(node, ctx, parentProps) {
+async function emitComponentInstance2(node, ctx, parentProps) {
   const compDef = ctx.globalComponents[node.component];
   if (!compDef) {
     return [{ tag: "div", attributes: { "data-component": node.component } }];
   }
-  const resolvedProps = {};
   const structured = compDef.component;
-  if (structured?.interface) {
-    for (const [key, propDef] of Object.entries(structured.interface)) {
-      resolvedProps[key] = propDef.default;
-    }
-  }
+  const passedProps = {};
   if (node.props) {
+    const parentTemplateProps = parentProps ?? buildTemplateProps(ctx);
     for (const [key, value] of Object.entries(node.props)) {
       if (key === "children") continue;
-      if (typeof value === "string" && hasTemplates2(value) && parentProps) {
-        resolvedProps[key] = resolveTemplate2(value, parentProps);
-      } else {
-        resolvedProps[key] = value;
-      }
+      passedProps[key] = typeof value === "string" && hasTemplates(value) ? processCodeTemplates(value, parentTemplateProps) : value;
     }
   }
+  const resolvedProps = structured ? resolvePropsFromDefinition(
+    structured,
+    passedProps,
+    node.children,
+    ctx.locale,
+    ctx.i18nConfig
+  ) : { ...passedProps };
+  delete resolvedProps.children;
   const body = structured?.structure || compDef.node;
   if (!body) return [];
+  const hasInstanceStyleOverrides = Boolean(structured?.acceptsStyles) && (node.style && Object.keys(node.style).length > 0 || Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0);
+  const promotedNames = ctx.promotedComponentNames || PROMOTED_TO_WEBFLOW_COMPONENT;
+  if (promotedNames.has(node.component) && ctx.promotedComponents && !hasInstanceStyleOverrides) {
+    const promoted = ctx.promotedComponents;
+    if (!promoted.has(node.component)) {
+      const defaultProps = {};
+      if (structured?.interface) {
+        for (const [k, p] of Object.entries(structured.interface)) {
+          defaultProps[k] = p.default;
+        }
+      }
+      const compBodyCtx = {
+        ...ctx,
+        fileType: "component",
+        fileName: node.component,
+        elementPath: [0],
+        slotChildren: void 0,
+        slotEmitContext: void 0,
+        // Disable further promotion inside the component body — a Navigation
+        // that nests Footer (or itself) would loop. Nested promoted names
+        // inline within the registered Component's body.
+        promotedComponents: null,
+        componentDefaults: defaultProps
+      };
+      const elements = await nodeToWebflow(body, compBodyCtx, defaultProps);
+      promoted.set(node.component, { name: node.component, elements });
+    }
+    const fallback = await emitInlineComponentBody(
+      node,
+      compDef,
+      resolvedProps,
+      body,
+      { ...ctx, promotedComponents: null },
+      parentProps
+    );
+    return [{ tag: "div", componentRef: node.component, inlineFallback: fallback }];
+  }
+  return emitInlineComponentBody(node, compDef, resolvedProps, body, ctx, parentProps);
+}
+async function emitInlineComponentBody(node, compDef, resolvedProps, body, ctx, parentProps) {
+  const structured = compDef.component;
+  let effectiveChildren = node.children;
+  let inheritedSlotEmitContext = ctx.slotEmitContext;
+  let inheritedSlotInstanceProps = void 0;
+  let didForwardSlot = false;
+  if (node.children != null && typeof node.children !== "string") {
+    const childArr = Array.isArray(node.children) ? node.children : [node.children];
+    if (childArr.some((c) => c && typeof c === "object" && c.type === NODE_TYPE.SLOT)) {
+      const out = [];
+      for (const c of childArr) {
+        if (c && typeof c === "object" && c.type === NODE_TYPE.SLOT) {
+          didForwardSlot = true;
+          if (ctx.slotChildren !== void 0) {
+            const sc = ctx.slotChildren;
+            const subArr = Array.isArray(sc) ? sc : [sc];
+            out.push(...subArr);
+          } else {
+            const def = c.default;
+            if (def !== void 0) {
+              const defArr = Array.isArray(def) ? def : [def];
+              out.push(...defArr);
+            }
+          }
+        } else {
+          out.push(c);
+        }
+      }
+      if (didForwardSlot) {
+        effectiveChildren = out;
+        inheritedSlotInstanceProps = ctx.slotInstanceProps;
+      }
+    }
+  }
   const compCtx = {
     ...ctx,
     fileType: "component",
     fileName: node.component,
     elementPath: [0],
-    slotChildren: node.children
+    slotChildren: effectiveChildren,
+    slotEmitContext: didForwardSlot && inheritedSlotEmitContext ? inheritedSlotEmitContext : {
+      fileType: ctx.fileType,
+      fileName: ctx.fileName,
+      elementPath: [...ctx.elementPath]
+    },
+    // Slot children authored alongside this instance refer to the OUTER
+    // component's interface (the one whose body contains `<Component …>{slot
+    // children}</Component>`). When the body hits its `<slot/>`, those
+    // children must resolve `{{title}}` etc. against `parentProps` — not
+    // against this component's resolved props. For forwarded slot children,
+    // use the original outer slot's `slotInstanceProps` instead so they keep
+    // their original authoring scope through the wrapper.
+    slotInstanceProps: didForwardSlot ? inheritedSlotInstanceProps : parentProps,
+    componentDefaults: extractInterfaceDefaults(structured?.interface)
   };
-  return nodeToWebflow(body, compCtx, resolvedProps);
+  const ctxTemplate = ctx.templateContext;
+  const bodyProps = ctxTemplate ? { ...ctxTemplate, ...resolvedProps } : resolvedProps;
+  const emitted = await nodeToWebflow(body, compCtx, bodyProps);
+  if (structured?.acceptsStyles && emitted.length > 0 && (node.style && Object.keys(node.style).length > 0 || Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0)) {
+    const root = emitted[0];
+    if (root && typeof root === "object") {
+      if (!root.className) {
+        const minted = withThemeSuffix(buildElementClass2(compCtx, void 0), compCtx);
+        ctx.styleClasses.set(minted, { name: minted, base: {} });
+        root.className = minted;
+      }
+      const rawStyle = node.style;
+      const rawInteractive = node.interactiveStyles;
+      const resolvedStyle = substituteVarsInStyle(
+        resolveStyleTemplates(rawStyle, parentProps),
+        ctx
+      );
+      const resolvedInteractive = substituteVarsInInteractive(
+        resolveInteractiveStyleTemplates(rawInteractive, parentProps),
+        ctx
+      );
+      const instanceLocClass = withThemeSuffix(buildElementClass2(ctx, node.label), ctx);
+      const comboName = mintInstanceComboName(ctx, instanceLocClass);
+      const combo = buildInstanceStyleCombo(
+        comboName,
+        root.className,
+        resolvedStyle,
+        resolvedInteractive,
+        ctx.breakpoints,
+        ctx.responsiveScales
+      );
+      if (combo) {
+        substituteVarsInStyleClass(combo, ctx);
+        const existingComboName = Array.isArray(root.comboClasses) && root.comboClasses.length > 0 ? root.comboClasses[0] : void 0;
+        const inner = existingComboName ? ctx.styleClasses.get(existingComboName) : void 0;
+        if (inner) {
+          const merged = mergeComboClasses(inner, combo, root.className);
+          ctx.styleClasses.set(merged.name, merged);
+          root.comboClasses = [merged.name];
+        } else {
+          ctx.styleClasses.set(combo.name, combo);
+          root.comboClasses = [combo.name];
+        }
+      }
+    }
+  }
+  if (emitted.length > 0 && structured?.javascript) {
+    const root = emitted[0];
+    if (root && typeof root === "object") {
+      root.attributes = root.attributes || {};
+      const existing = root.attributes["data-component"];
+      root.attributes["data-component"] = existing ? `${existing} ${node.component}` : node.component;
+      const defineVars = structured.defineVars;
+      if (defineVars) {
+        const varsToExpose = defineVars === true ? Object.keys(structured.interface || {}) : defineVars;
+        const propsForJS = {};
+        for (const varName of varsToExpose) {
+          if (resolvedProps[varName] !== void 0) {
+            propsForJS[varName] = resolvedProps[varName];
+          }
+        }
+        let existingPropsMap = {};
+        const existingPropsStr = root.attributes["data-props"];
+        if (typeof existingPropsStr === "string" && existingPropsStr) {
+          try {
+            const parsed = JSON.parse(decodeURIComponent(existingPropsStr));
+            if (parsed && typeof parsed === "object") {
+              existingPropsMap = parsed;
+            }
+          } catch {
+          }
+        }
+        existingPropsMap[node.component] = propsForJS;
+        root.attributes["data-props"] = encodeURIComponent(JSON.stringify(existingPropsMap));
+      }
+    }
+  }
+  return emitted;
 }
-function emitSlotMarker2(node, ctx, instanceProps) {
+async function emitSlotMarker2(node, ctx, instanceProps) {
   if (ctx.slotChildren) {
+    const restored = ctx.slotEmitContext;
     const parentCtx = {
       ...ctx,
-      slotChildren: void 0
+      ...restored ? {
+        fileType: restored.fileType,
+        fileName: restored.fileName,
+        elementPath: [...restored.elementPath]
+      } : {},
+      slotChildren: void 0,
       // prevent infinite slot nesting
+      slotEmitContext: void 0,
+      // consumed
+      slotInstanceProps: void 0
+      // consumed
     };
-    return convertChildren(ctx.slotChildren, parentCtx, instanceProps);
+    const slotProps = ctx.slotInstanceProps ?? instanceProps;
+    return convertChildren(ctx.slotChildren, parentCtx, slotProps);
   }
   if (node.default) {
     return convertChildren(node.default, ctx, instanceProps);
   }
   return [];
 }
-function emitEmbedNode2(node, ctx, instanceProps) {
-  const style = node.style;
-  const interactiveStyles = node.interactiveStyles;
+async function emitEmbedNode2(node, ctx, instanceProps) {
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style,
+      instanceProps
+    ),
+    ctx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles,
+      instanceProps
+    ),
+    ctx
+  );
   let className;
   if (style || interactiveStyles && interactiveStyles.length > 0) {
-    const elementClass = buildElementClass2(ctx, node.label);
+    const elementClass = withThemeSuffix(buildElementClass2(ctx, node.label), ctx);
     const { primaryClass } = mapStylesToWebflow(
       elementClass,
       style,
       interactiveStyles,
-      ctx.breakpoints
+      ctx.breakpoints,
+      ctx.responsiveScales
     );
+    substituteVarsInStyleClass(primaryClass, ctx);
     className = primaryClass.name;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
   }
-  const htmlStr = typeof node.html === "string" ? node.html : "";
-  const element = {
-    tag: "div",
-    rawHtml: htmlStr
-  };
+  const props = buildTemplateProps(ctx, instanceProps);
+  let htmlStr;
+  if (isHtmlMapping(node.html)) {
+    htmlStr = resolveHtmlMapping(node.html, props) ?? "";
+  } else if (typeof node.html === "string") {
+    htmlStr = hasTemplates(node.html) ? processCodeTemplates(node.html, props) : node.html;
+  } else {
+    htmlStr = "";
+  }
+  const element = { tag: "div" };
   if (className) element.className = className;
+  const trimmed = htmlStr.trim();
+  if (/^<svg\b/i.test(trimmed) && /<\/svg\s*>\s*$/i.test(trimmed)) {
+    let svg = trimmed;
+    if (/currentColor/i.test(svg)) {
+      const resolved = concreteColor(extractBaseColor(style, ctx, instanceProps)) ?? ctx.inheritedColor;
+      if (resolved) svg = inlineCurrentColorInSvg(svg, resolved);
+    }
+    element.svgSource = svg;
+    if (node.label) element.imageAlt = node.label;
+    return element;
+  }
+  const imgMatch = trimmed.match(/^<img\b([^>]*)\/?>\s*$/i);
+  if (imgMatch) {
+    const attrs = imgMatch[1];
+    const src = /\bsrc\s*=\s*"([^"]*)"|\bsrc\s*=\s*'([^']*)'/i.exec(attrs);
+    const alt = /\balt\s*=\s*"([^"]*)"|\balt\s*=\s*'([^']*)'/i.exec(attrs);
+    if (src) {
+      element.imageSrc = src[1] ?? src[2] ?? "";
+      element.imageAlt = (alt?.[1] ?? alt?.[2] ?? node.label) || "";
+      await maybeInlineLocalImage(element, element.imageSrc);
+      return element;
+    }
+  }
+  if (trimmed.length) {
+    element.unsupportedEmbed = {
+      reason: "embed-not-svg-or-image",
+      preview: trimmed.slice(0, 120),
+      label: node.label
+    };
+  }
   return element;
 }
-function emitLinkNode2(node, ctx, instanceProps) {
-  const style = node.style;
-  const interactiveStyles = node.interactiveStyles;
+function resolveLinkHref(rawHref, ctx) {
+  if (!rawHref) return rawHref;
+  if (!rawHref.startsWith("/") || rawHref.startsWith("//")) return rawHref;
+  if (!ctx.i18nConfig || !ctx.locale || !ctx.slugMappings) return rawHref;
+  const hashIdx = rawHref.indexOf("#");
+  const queryIdx = rawHref.indexOf("?");
+  let cut = -1;
+  if (hashIdx >= 0 && queryIdx >= 0) cut = Math.min(hashIdx, queryIdx);
+  else if (hashIdx >= 0) cut = hashIdx;
+  else if (queryIdx >= 0) cut = queryIdx;
+  const path = cut >= 0 ? rawHref.slice(0, cut) : rawHref;
+  const suffix = cut >= 0 ? rawHref.slice(cut) : "";
+  if (!ctx.slugIndex) {
+    ctx.slugIndex = buildSlugIndex(ctx.slugMappings);
+  }
+  const translated = translatePath(
+    path,
+    ctx.locale,
+    ctx.i18nConfig.defaultLocale,
+    ctx.i18nConfig.defaultLocale,
+    ctx.slugIndex
+  );
+  return translated + suffix;
+}
+async function emitLinkNode2(node, ctx, instanceProps) {
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style,
+      instanceProps
+    ),
+    ctx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles,
+      instanceProps
+    ),
+    ctx
+  );
   let className;
-  if (style || interactiveStyles && interactiveStyles.length > 0) {
-    const elementClass = buildElementClass2(ctx, node.label);
-    const { primaryClass } = mapStylesToWebflow(
+  let comboClassNames;
+  {
+    const elementClass = withThemeSuffix(buildElementClass2(ctx, node.label), ctx);
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
       elementClass,
       style,
       interactiveStyles,
-      ctx.breakpoints
+      ctx.breakpoints,
+      ctx.responsiveScales,
+      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(ctx) }
     );
+    substituteVarsInStyleClass(primaryClass, ctx);
+    applyLinkTextDecorationDefault(primaryClass);
+    applyGridRowsDefault(primaryClass);
     className = primaryClass.name;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
+    if (comboClasses.length > 0) {
+      comboClassNames = [];
+      for (const combo of comboClasses) {
+        substituteVarsInStyleClass(combo, ctx);
+        ctx.styleClasses.set(combo.name, combo);
+        comboClassNames.push(combo.name);
+      }
+    }
+    if (ctx.interactiveStylesMap && Array.isArray(interactiveStyles) && interactiveStyles.length > 0) {
+      ctx.interactiveStylesMap.set(primaryClass.name, interactiveStyles);
+    }
   }
   let href = "#";
   if (typeof node.href === "string") {
-    href = instanceProps && hasTemplates2(node.href) ? resolveTemplate2(node.href, instanceProps) : node.href;
+    href = resolveStringTemplate(node.href, ctx, instanceProps);
   }
+  href = resolveLinkHref(href, ctx);
   const attributes = { href };
   if (node.attributes) {
     for (const [key, value] of Object.entries(node.attributes)) {
-      attributes[key] = value;
+      attributes[key] = typeof value === "string" ? resolveStringTemplate(value, ctx, instanceProps) : value;
     }
   }
   let children;
   if (node.children) {
-    children = convertChildren(node.children, ctx, instanceProps);
+    const ownColor = concreteColor(extractBaseColor(style, ctx, instanceProps));
+    const childCtx = ownColor ? { ...ctx, inheritedColor: ownColor } : ctx;
+    children = await convertChildren(node.children, childCtx, instanceProps);
     if (children.length === 0) children = void 0;
   }
   const element = { tag: "a", attributes };
   if (className) element.className = className;
+  if (comboClassNames) element.comboClasses = comboClassNames;
   if (children) element.children = children;
   return element;
 }
-function convertChildren(children, ctx, instanceProps) {
+function singularize2(name) {
+  if (name.endsWith("ies") && name.length > 3) return name.slice(0, -3) + "y";
+  if (name.endsWith("s") && name.length > 1) return name.slice(0, -1);
+  return name;
+}
+function resolveItemI18n(item, ctx) {
+  if (!ctx.locale || !ctx.i18nConfig) return item;
+  const out = {};
+  for (const [k, v] of Object.entries(item)) {
+    out[k] = isI18nValue(v) ? resolveI18nValue(v, ctx.locale, ctx.i18nConfig) : v;
+  }
+  return out;
+}
+async function getCollectionItemsForExport(node, source, ctx) {
+  if (!ctx.cmsService) return [];
+  let items = [];
+  if (node.items) {
+    const itemsField = node.items;
+    let resolvedIds;
+    if (typeof itemsField === "string" && itemsField.startsWith("{{")) {
+      if (itemsField.startsWith("{{cms.") && ctx.cmsContext?.cms) {
+        const fieldPath = itemsField.slice(6, -2);
+        let value = ctx.cmsContext.cms;
+        for (const part of fieldPath.split(".")) {
+          if (value && typeof value === "object" && part in value) {
+            value = value[part];
+          } else {
+            value = void 0;
+            break;
+          }
+        }
+        if (value !== null && value !== void 0) {
+          resolvedIds = Array.isArray(value) ? value.map((v) => String(v)) : String(value);
+        }
+      } else {
+        resolvedIds = resolveItemsTemplate(
+          itemsField,
+          ctx.templateContext || { _type: "template" }
+        );
+      }
+      if (!resolvedIds) return [];
+      const ids = Array.isArray(resolvedIds) ? resolvedIds : [resolvedIds];
+      items = await ctx.cmsService.getItemsByIds(source, ids);
+    } else {
+      const ids = Array.isArray(itemsField) ? itemsField : [itemsField];
+      items = await ctx.cmsService.getItemsByIds(source, ids);
+    }
+    if (ctx.locale) {
+      items = items.filter((it) => !isItemDraftForLocale(it, ctx.locale));
+    }
+  } else {
+    items = await ctx.cmsService.queryItems({
+      collection: source,
+      filter: node.filter,
+      sort: node.sort,
+      limit: node.limit,
+      offset: node.offset,
+      excludeDraftLocale: ctx.locale
+    });
+  }
+  if (node.excludeCurrentItem && ctx.cmsContext?.cms?._id) {
+    const currentId = ctx.cmsContext.cms._id;
+    items = items.filter((it) => it._id !== currentId);
+  }
+  return items;
+}
+function getPropItemsForExport(source, ctx, instanceProps) {
+  if (source.startsWith("{{") && source.endsWith("}}")) {
+    const path = source.slice(2, -2).trim();
+    const ctxObj = ctx.templateContext;
+    if (ctxObj) {
+      const resolved = getNestedValue(ctxObj, path);
+      if (Array.isArray(resolved)) return resolved;
+    }
+    if (instanceProps) {
+      const resolved = getNestedValue(instanceProps, path);
+      if (Array.isArray(resolved)) return resolved;
+    }
+    return [];
+  }
+  if (instanceProps && Array.isArray(instanceProps[source])) {
+    return instanceProps[source];
+  }
+  if (ctx.cmsContext?.cms) {
+    const cmsValue = ctx.cmsContext.cms[source];
+    if (Array.isArray(cmsValue)) return cmsValue;
+  }
+  return [];
+}
+function buildBindingPlaceholderItem(schema) {
+  const item = {};
+  if (schema?.fields) {
+    for (const fieldSlug of Object.keys(schema.fields)) {
+      item[fieldSlug] = `${MENO_BIND_SENTINEL_PREFIX}${fieldSlug}${MENO_BIND_SENTINEL_SUFFIX}`;
+    }
+  }
+  item._id = `${MENO_BIND_SENTINEL_PREFIX}_id${MENO_BIND_SENTINEL_SUFFIX}`;
+  item._slug = `${MENO_BIND_SENTINEL_PREFIX}_slug${MENO_BIND_SENTINEL_SUFFIX}`;
+  item._url = `${MENO_BIND_SENTINEL_PREFIX}_url${MENO_BIND_SENTINEL_SUFFIX}`;
+  return item;
+}
+function applyBindingMarkers(el) {
+  if (typeof el.textContent === "string") {
+    const exact = el.textContent.match(MENO_BIND_SENTINEL_EXACT_RE);
+    if (exact) {
+      const field = exact[1];
+      el.menoBind = { ...el.menoBind || {}, textField: field };
+      el.textContent = `{${field}}`;
+    } else if (MENO_BIND_SENTINEL_RE.test(el.textContent)) {
+      MENO_BIND_SENTINEL_RE.lastIndex = 0;
+      const fields = [];
+      el.textContent = el.textContent.replace(MENO_BIND_SENTINEL_RE, (_m, f) => {
+        fields.push(f);
+        return `{${f}}`;
+      });
+      if (fields.length) {
+        el.menoBind = { ...el.menoBind || {}, textField: fields[0] };
+      }
+    }
+    MENO_BIND_SENTINEL_RE.lastIndex = 0;
+  }
+  if (el.attributes) {
+    const attrFields = el.menoBind?.attrFields || {};
+    for (const [key, rawValue] of Object.entries(el.attributes)) {
+      if (typeof rawValue !== "string") continue;
+      const exact = rawValue.match(MENO_BIND_SENTINEL_EXACT_RE);
+      if (exact) {
+        attrFields[key] = exact[1];
+        el.attributes[key] = `{${exact[1]}}`;
+        continue;
+      }
+      MENO_BIND_SENTINEL_RE.lastIndex = 0;
+      if (MENO_BIND_SENTINEL_RE.test(rawValue)) {
+        MENO_BIND_SENTINEL_RE.lastIndex = 0;
+        let firstField;
+        const replaced = rawValue.replace(MENO_BIND_SENTINEL_RE, (_m, f) => {
+          if (!firstField) firstField = f;
+          return `{${f}}`;
+        });
+        if (firstField) attrFields[key] = firstField;
+        el.attributes[key] = replaced;
+      }
+      MENO_BIND_SENTINEL_RE.lastIndex = 0;
+    }
+    if (Object.keys(attrFields).length > 0) {
+      el.menoBind = { ...el.menoBind || {}, attrFields };
+    }
+  }
+  if (el.menoBind?.attrFields?.src && (el.imageDataBase64 || el.imageSrc)) {
+    delete el.imageDataBase64;
+    delete el.imageDataMime;
+    delete el.imageDataFileName;
+    delete el.imageSrc;
+  }
+  if (Array.isArray(el.children)) {
+    for (const child of el.children) {
+      if (typeof child !== "string") applyBindingMarkers(child);
+    }
+  }
+  if (Array.isArray(el.inlineFallback)) {
+    for (const child of el.inlineFallback) applyBindingMarkers(child);
+  }
+}
+function normalizeListChildren(elements) {
+  if (!Array.isArray(elements)) return;
+  for (const el of elements) {
+    if (typeof el === "string") continue;
+    const tag = (el.tag || "").toLowerCase();
+    if ((tag === "ul" || tag === "ol") && Array.isArray(el.children)) {
+      el.children = el.children.map((child) => {
+        if (typeof child === "string") return { tag: "li", children: [child] };
+        if ((child.tag || "").toLowerCase() === "li") return child;
+        return { tag: "li", children: [child] };
+      });
+    }
+    if (Array.isArray(el.children)) normalizeListChildren(el.children);
+    if (Array.isArray(el.inlineFallback)) normalizeListChildren(el.inlineFallback);
+  }
+}
+async function emitListNode2(node, ctx, instanceProps) {
+  const nodeType = node.type;
+  const isLegacyCMSList = nodeType === "cms-list";
+  const sourceType = isLegacyCMSList ? "collection" : node.sourceType || "prop";
+  if (sourceType === "collection" && !ctx.cmsService) return [];
+  const rawSource = node.source || node.collection;
+  const source = typeof rawSource === "string" ? rawSource : "";
+  const sourceIsResolved = Array.isArray(rawSource);
+  let variableName;
+  if (node.itemAs) variableName = node.itemAs;
+  else if (sourceType === "collection") variableName = singularize2(source);
+  else variableName = "item";
+  if (sourceType === "collection" && ctx.bindCollectionLists && ctx.cmsService && source) {
+    const schema = ctx.cmsService.getSchema(source) || void 0;
+    const placeholder = buildBindingPlaceholderItem(schema);
+    const templateContext = buildTemplateContext(
+      variableName,
+      placeholder,
+      0,
+      1,
+      ctx.templateContext
+    );
+    const childCtx = {
+      ...ctx,
+      templateContext
+    };
+    const mergedProps = {
+      ...instanceProps || {},
+      ...templateContext
+    };
+    const renderedChildren = node.children ? await convertChildren(node.children, childCtx, mergedProps) : [];
+    for (const child of renderedChildren) {
+      if (typeof child !== "string") applyBindingMarkers(child);
+    }
+    return [{
+      tag: COLLECTION_LIST_TAG,
+      menoCollectionRef: source,
+      children: renderedChildren
+    }];
+  }
+  let items;
+  if (sourceType === "collection") {
+    items = await getCollectionItemsForExport(node, source, ctx);
+  } else if (sourceIsResolved) {
+    items = rawSource;
+  } else if (source) {
+    items = getPropItemsForExport(source, ctx, instanceProps);
+    if (node.offset) items = items.slice(node.offset);
+    if (node.limit) items = items.slice(0, node.limit);
+  } else {
+    items = [];
+  }
+  return expandListItems(node, ctx, instanceProps, items, variableName, source);
+}
+async function expandListItems(node, ctx, instanceProps, items, variableName, source) {
+  if (items.length === 0) return [];
+  const schema = ctx.cmsService ? ctx.cmsService.getSchema(source) || void 0 : void 0;
+  const out = [];
+  for (let i = 0; i < items.length; i++) {
+    const rawItem = items[i];
+    const enriched = schema && ctx.locale && ctx.i18nConfig ? addItemUrl(rawItem, schema, ctx.locale, ctx.i18nConfig) : rawItem;
+    const item = resolveItemI18n(enriched, ctx);
+    const templateContext = buildTemplateContext(
+      variableName,
+      item,
+      i,
+      items.length,
+      ctx.templateContext
+    );
+    const childCtx = {
+      ...ctx,
+      templateContext
+    };
+    const mergedProps = {
+      ...instanceProps || {},
+      ...templateContext
+    };
+    if (node.children) {
+      const savedPath = [...childCtx.elementPath];
+      childCtx.elementPath = [...savedPath, i];
+      out.push(...await convertChildren(node.children, childCtx, mergedProps));
+      childCtx.elementPath = savedPath;
+    }
+  }
+  return out;
+}
+async function emitLocaleListNode2(node, ctx, instanceProps) {
+  if (!ctx.slugMappings || !ctx.pagePath || !ctx.i18nConfig || !ctx.locale) {
+    return [{ tag: "div", attributes: { "data-locale-list": "true" } }];
+  }
+  if (!ctx.slugIndex) {
+    ctx.slugIndex = buildSlugIndex(ctx.slugMappings);
+  }
+  const localeLinks = getLocaleLinks(ctx.pagePath, ctx.locale, ctx.i18nConfig, ctx.slugIndex);
+  const showCurrent = node.showCurrent !== false;
+  const showSeparator = node.showSeparator !== false;
+  const showFlag = node.showFlag !== false;
+  const displayType = node.displayType || "nativeName";
+  const localeIconMap = /* @__PURE__ */ new Map();
+  for (const lc of ctx.i18nConfig.locales) {
+    if (lc.icon) localeIconMap.set(lc.code, lc.icon);
+  }
+  const containerStyle = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style,
+      instanceProps
+    ),
+    ctx
+  );
+  const containerInteractive = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles,
+      instanceProps
+    ),
+    ctx
+  );
+  let containerClass;
+  if (containerStyle || containerInteractive && containerInteractive.length > 0) {
+    const elementClass = withThemeSuffix(buildElementClass2(ctx, node.label), ctx);
+    const { primaryClass } = mapStylesToWebflow(
+      elementClass,
+      containerStyle,
+      containerInteractive,
+      ctx.breakpoints,
+      ctx.responsiveScales
+    );
+    substituteVarsInStyleClass(primaryClass, ctx);
+    containerClass = primaryClass.name;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+  }
+  const buildSubClass = (style, suffix) => {
+    const resolved = substituteVarsInStyle(
+      resolveStyleTemplates(
+        style,
+        instanceProps
+      ),
+      ctx
+    );
+    if (!resolved) return void 0;
+    const className = withThemeSuffix(`${buildElementClass2(ctx, node.label)}-${suffix}`, ctx);
+    const { primaryClass } = mapStylesToWebflow(className, resolved, void 0, ctx.breakpoints, ctx.responsiveScales);
+    substituteVarsInStyleClass(primaryClass, ctx);
+    if (Object.keys(primaryClass.base).length === 0 && !primaryClass.breakpoints && !primaryClass.pseudoStates) return void 0;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+    return primaryClass.name;
+  };
+  const itemClassName = buildSubClass(node.itemStyle, "item");
+  const activeItemClassName = buildSubClass(node.activeItemStyle, "item-active");
+  const separatorClassName = buildSubClass(node.separatorStyle, "separator");
+  const flagClassName = buildSubClass(node.flagStyle, "flag");
+  const linkChildren = [];
+  for (let i = 0; i < localeLinks.length; i++) {
+    const link = localeLinks[i];
+    if (!showCurrent && link.isCurrent) continue;
+    if (i > 0 && showSeparator) {
+      const sep = { tag: "span" };
+      if (separatorClassName) sep.className = separatorClassName;
+      linkChildren.push(sep);
+    }
+    const anchor = {
+      tag: "a",
+      attributes: {
+        href: link.path,
+        hreflang: link.langTag,
+        "data-current": link.isCurrent ? "true" : "false",
+        "data-locale": link.locale
+      }
+    };
+    if (link.isCurrent && (activeItemClassName || itemClassName)) {
+      anchor.className = itemClassName;
+      if (activeItemClassName) anchor.comboClasses = [activeItemClassName];
+    } else if (itemClassName) {
+      anchor.className = itemClassName;
+    }
+    const innerChildren = [];
+    const icon = localeIconMap.get(link.locale);
+    if (showFlag && icon) {
+      const img = {
+        tag: "img",
+        attributes: { src: icon, alt: `${link.nativeName} flag` }
+      };
+      if (flagClassName) img.className = flagClassName;
+      innerChildren.push(img);
+    }
+    let displayText;
+    switch (displayType) {
+      case "code":
+        displayText = link.locale.toUpperCase();
+        break;
+      case "name":
+        displayText = link.name;
+        break;
+      case "nativeName":
+      default:
+        displayText = link.nativeName;
+        break;
+    }
+    innerChildren.push({ tag: "div", textContent: displayText });
+    anchor.children = innerChildren;
+    linkChildren.push(anchor);
+  }
+  const wrapper = {
+    tag: "div",
+    attributes: { "data-locale-list": "true" },
+    children: linkChildren
+  };
+  if (containerClass) wrapper.className = containerClass;
+  return [wrapper];
+}
+async function convertChildren(children, ctx, instanceProps) {
   if (!children) return [];
   if (typeof children === "string") {
     return nodeToWebflow(children, ctx, instanceProps);
@@ -3946,7 +5245,7 @@ function scanJSONFiles2(dir, prefix = "") {
     if (entry.isFile() && entry.name.endsWith(".json")) {
       results.push(prefix ? `${prefix}/${entry.name}` : entry.name);
     } else if (entry.isDirectory()) {
-      results.push(...scanJSONFiles2(join2(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name));
+      results.push(...scanJSONFiles2(join3(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name));
     }
   }
   return results;
@@ -3954,12 +5253,38 @@ function scanJSONFiles2(dir, prefix = "") {
 function isCMSPage2(pageData) {
   return pageData.meta?.source === "cms" && !!pageData.meta?.cms;
 }
-function buildCMSItemPath(urlPattern, item, slugField, locale, i18nConfig) {
-  let slug = item[slugField] ?? item._slug ?? item._id;
-  if (isI18nValue(slug)) {
-    slug = resolveI18nValue(slug, locale, i18nConfig);
+function flattenCMSItemForLocale(item, locale, i18nConfig) {
+  const flatten = (value) => {
+    if (value === null || value === void 0) return value;
+    if (isI18nValue(value)) {
+      return flatten(resolveI18nValue(value, locale, i18nConfig));
+    }
+    if (typeof value === "object" && "__richtext__" in value) {
+      const html = value.html;
+      if (typeof html === "string") return RAW_HTML_PREFIX + html;
+    }
+    return value;
+  };
+  const out = {};
+  for (const [key, value] of Object.entries(item)) {
+    out[key] = flatten(value);
   }
-  return urlPattern.replace("{{slug}}", String(slug));
+  return out;
+}
+function resolveMetaString(value, locale, i18nConfig) {
+  if (value === void 0 || value === null || value === "") return void 0;
+  const resolved = isI18nValue(value) ? resolveI18nValue(value, locale, i18nConfig) : value;
+  if (resolved === void 0 || resolved === null || resolved === "") return void 0;
+  return String(resolved);
+}
+function buildPageMetaForLocale(meta, locale, i18nConfig) {
+  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) {
   const assets = [];
@@ -3970,7 +5295,7 @@ function scanAssets(projectRoot) {
     { dir: "assets", type: "file" }
   ];
   for (const { dir, type } of assetDirs) {
-    const fullDir = join2(projectRoot, dir);
+    const fullDir = join3(projectRoot, dir);
     if (!existsSync2(fullDir)) continue;
     const files = scanJSONFiles2(fullDir).map((f) => f.replace(".json", ""));
     const allFiles = scanAllFiles(fullDir);
@@ -3993,27 +5318,50 @@ function scanAllFiles(dir, prefix = "") {
     if (entry.isFile()) {
       results.push(relativePath);
     } else if (entry.isDirectory()) {
-      results.push(...scanAllFiles(join2(dir, entry.name), relativePath));
+      results.push(...scanAllFiles(join3(dir, entry.name), relativePath));
     }
   }
   return results;
 }
-function extractCSSVariables(themeColorCSS, variablesCSS) {
-  const vars = {};
-  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) {
+  const palette = themeConfig.palette;
+  const byTheme = {};
+  for (const [themeName, theme] of Object.entries(themeConfig.themes)) {
+    const vars = {};
+    for (const [name, value] of Object.entries(theme.colors)) {
+      vars[`--${name}`] = resolvePaletteColor(value, palette);
+    }
+    byTheme[themeName] = vars;
+  }
+  return { byTheme, defaultTheme: themeConfig.default };
+}
+function buildProjectVarMaps(variablesConfig, breakpoints, responsiveScales) {
+  const out = { 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 vars;
+  return out;
 }
-async function buildWebflowPayload(projectRoot) {
+async function buildWebflowPayload(options) {
+  const bindCollectionLists = options?.bindCollectionLists === true;
+  const promotedComponentNames = Array.isArray(options?.promotedComponentNames) ? new Set(options.promotedComponentNames.filter((n) => typeof n === "string" && n.length > 0)) : void 0;
   configService.reset();
   const projectConfig = await loadProjectConfig();
   const siteUrl = projectConfig.siteUrl?.replace(/\/$/, "") || "";
   const i18nConfig = await loadI18nConfig();
+  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());
   const globalComponents = {};
@@ -4026,8 +5374,8 @@ async function buildWebflowPayload(projectRoot) {
   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();
   const pagesDir = projectPaths.pages();
   if (!existsSync2(pagesDir)) {
     return emptyPayload();
@@ -4040,7 +5388,7 @@ async function buildWebflowPayload(projectRoot) {
   for (const file of pageFiles) {
     const pageName = file.replace(".json", "");
     const basePath = mapPageNameToPath(pageName);
-    const pageContent = await loadJSONFile(join2(pagesDir, file));
+    const pageContent = await loadJSONFile(join3(pagesDir, file));
     if (!pageContent) continue;
     try {
       const pageData = parseJSON(pageContent);
@@ -4053,16 +5401,22 @@ async function buildWebflowPayload(projectRoot) {
   }
   const allPages = [];
   const allStyleClasses = /* @__PURE__ */ new Map();
+  const allInteractiveStylesMap = /* @__PURE__ */ new Map();
+  const allComboIdentityByName = /* @__PURE__ */ new Map();
+  const promotedComponents = /* @__PURE__ */ new Map();
+  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
+  const projectVars = buildProjectVarMaps(variablesConfig, breakpoints, responsiveScales);
+  const { byTheme: themeVars, defaultTheme } = buildThemeVarMaps(themeConfig);
   for (const file of pageFiles) {
     const pageName = file.replace(".json", "");
     const basePath = mapPageNameToPath(pageName);
-    const pageContent = await loadJSONFile(join2(pagesDir, file));
+    const pageContent = await loadJSONFile(join3(pagesDir, file));
     if (!pageContent) continue;
     try {
       const pageData = parseJSON(pageContent);
       if (pageData.meta?.draft === true) continue;
       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;
         let slug;
@@ -4092,16 +5446,32 @@ async function buildWebflowPayload(projectRoot) {
           fileType: "page",
           fileName: pageName,
           breakpoints,
-          styleClasses: allStyleClasses
+          styleClasses: allStyleClasses,
+          comboIdentityByName: allComboIdentityByName,
+          interactiveStylesMap: allInteractiveStylesMap,
+          cmsService,
+          i18nConfig,
+          locale,
+          slugMappings,
+          pagePath: urlPath,
+          themeVars,
+          projectVars,
+          defaultTheme,
+          responsiveScales,
+          promotedComponents,
+          promotedComponentNames,
+          bindCollectionLists
         };
         const body = pageData.root || pageData.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 : void 0,
           elements,
-          locale
+          locale,
+          ...buildPageMetaForLocale(pageMeta, locale, i18nConfig)
         });
       }
     } catch (error) {
@@ -4109,11 +5479,10 @@ async function buildWebflowPayload(projectRoot) {
     }
   }
   const templatesDir = projectPaths.templates();
-  const cmsCollections = [];
   if (existsSync2(templatesDir)) {
     const templateFiles = readdirSync2(templatesDir).filter((f) => f.endsWith(".json"));
     for (const file of templateFiles) {
-      const templateContent = await loadJSONFile(join2(templatesDir, file));
+      const templateContent = await loadJSONFile(join3(templatesDir, file));
       if (!templateContent) continue;
       try {
         const pageData = parseJSON(templateContent);
@@ -4121,92 +5490,137 @@ async function buildWebflowPayload(projectRoot) {
         if (!isCMSPage2(pageData)) continue;
         const cmsSchema = pageData.meta.cms;
         const items = await cmsService.queryItems({ collection: cmsSchema.id });
-        const fields = [];
-        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
-            });
-          }
-        }
-        const resolvedItems = [];
-        for (const item of items) {
-          const resolved = {};
-          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
-        });
-        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 = { ...item, _url: itemPath };
-            const result = await renderPageSSR(
-              pageData,
-              globalComponents,
-              itemPath,
-              siteUrl,
-              locale,
-              i18nConfig,
-              slugMappings,
-              { cms: itemWithUrl },
-              cmsService,
-              true
-            );
-            const ctx = {
-              globalComponents,
-              elementPath: [0],
-              fileType: "page",
-              fileName: file.replace(".json", ""),
-              breakpoints,
-              styleClasses: allStyleClasses
-            };
-            const body = pageData.root || pageData.node;
-            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;
+          let itemSlug = item[cmsSchema.slugField] ?? item._slug ?? item._id;
+          if (isI18nValue(itemSlug)) {
+            itemSlug = resolveI18nValue(itemSlug, locale, i18nConfig);
           }
+          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;
+          const flatItem = flattenCMSItemForLocale(item, locale, i18nConfig);
+          const itemWithUrl = { ...flatItem, _url: urlPath };
+          const ssrItem = { ...item, _url: urlPath };
+          const result = await renderPageSSR(
+            pageData,
+            globalComponents,
+            urlPath,
+            siteUrl,
+            locale,
+            i18nConfig,
+            slugMappings,
+            { cms: ssrItem },
+            cmsService,
+            true
+          );
+          const ctx = {
+            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 },
+            themeVars,
+            projectVars,
+            defaultTheme,
+            responsiveScales,
+            promotedComponents,
+            promotedComponentNames,
+            bindCollectionLists
+          };
+          const body = pageData.root || pageData.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) {
         console.error(`Error processing template ${file}:`, error?.message);
       }
     }
   }
-  const themeColorCSS = generateThemeColorVariablesCSS(themeConfig);
-  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
-  const cssVariables = extractCSSVariables(themeColorCSS, variablesCSS);
+  for (const def of promotedComponents.values()) {
+    normalizeListChildren(def.elements);
+  }
+  const styleClasses = Array.from(allStyleClasses.values());
   const assets = scanAssets(projectPaths.project);
+  const scripts = [];
+  const cssBlocks = [];
+  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 */
+${css.trim()}`);
+    }
+  }
+  const componentCss = cssBlocks.length > 0 ? cssBlocks.join("\n\n") : void 0;
+  const interactiveCssBlocks = [];
+  for (const [elementClass, rules] of allInteractiveStylesMap) {
+    const customRules = rules.filter((r) => !isWebflowHandledRule(r));
+    if (customRules.length === 0) continue;
+    const css = generateInteractiveCSS(elementClass, customRules, breakpoints, void 0, responsiveScales);
+    if (css && css.trim().length > 0) {
+      interactiveCssBlocks.push(css);
+    }
+  }
+  const interactiveCss = interactiveCssBlocks.length > 0 ? interactiveCssBlocks.join("\n\n") : void 0;
   return {
     version: 1,
     exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
     pages: allPages,
-    styles: Array.from(allStyleClasses.values()),
-    cms: cmsCollections,
+    styles: styleClasses,
+    cms: [],
     assets,
-    cssVariables: Object.keys(cssVariables).length > 0 ? cssVariables : void 0
+    slugMappings: slugMappings.length > 0 ? slugMappings : void 0,
+    scripts: scripts.length > 0 ? scripts : void 0,
+    components: promotedComponents.size > 0 ? Array.from(promotedComponents.values()) : void 0,
+    componentCss,
+    interactiveCss,
+    i18n: {
+      defaultLocale: i18nConfig.defaultLocale,
+      locales: i18nConfig.locales.map((l) => ({
+        code: l.code,
+        name: l.name,
+        nativeName: l.nativeName
+      })),
+      selectedLocale
+    }
   };
 }
 function emptyPayload() {
@@ -4220,6 +5634,32 @@ function emptyPayload() {
   };
 }
 
+// lib/server/webflow/templateWrapper.ts
+import { readFile as readFile3 } from "fs/promises";
+var cachedTemplate = null;
+async function getWebflowTemplate(appName) {
+  if (cachedTemplate) return cachedTemplate;
+  const url = `https://webflow-ext.com/template/v2?name=${encodeURIComponent(appName)}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch Webflow template: ${res.status}`);
+  cachedTemplate = await res.text();
+  return cachedTemplate;
+}
+async function wrapInWebflowTemplate(html, manifestPath) {
+  try {
+    const manifest = JSON.parse(await readFile3(manifestPath, "utf-8"));
+    const template = await getWebflowTemplate(manifest.name || "Meno Import");
+    const headMatch = html.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const headContent = headMatch ? headMatch[1] : "";
+    const bodyContent = bodyMatch ? bodyMatch[1] : "";
+    return template.replace("{{ui}}", headContent + bodyContent);
+  } catch (err) {
+    console.warn("Could not fetch Webflow wrapper template:", err.message);
+    return html;
+  }
+}
+
 // lib/server/index.ts
 init_constants();
 export {
@@ -4315,6 +5755,7 @@ export {
   variableService,
   withErrorHandling,
   withLogging,
+  wrapInWebflowTemplate,
   writeFile
 };
 //# sourceMappingURL=index.js.map