meno-core 1.0.47 → 1.0.49

package/lib/server/webflow/nodeToWebflow.ts

@@ -13,19 +13,51 @@ import type {
   SlotMarker,
   EmbedNode,
   LinkNode,
+  LocaleListNode,
+  CMSItem,
+  CMSSchema,
+  I18nConfig,
+  CMSFilterCondition,
 } from '../../shared/types';
 import type { ListNode } from '../../shared/registry/nodeTypes/ListNodeType';
 import type {
   StyleObject,
   ResponsiveStyleObject,
   InteractiveStyles,
+  InteractiveStyleRule,
+  StyleValue,
+  StyleMapping,
 } from '../../shared/types/styles';
 import type { BreakpointConfig } from '../../shared/breakpoints';
-import { generateElementClassName } from '../../shared/elementClassName';
-import { isVoidElement } from '../../shared/nodeUtils';
-import { NODE_TYPE } from '../../shared/constants';
-import type { WebflowElement, WebflowStyleClass } from './types';
-import { mapStylesToWebflow } from './styleMapper';
+import type { ResponsiveScales } from '../../shared/responsiveScaling';
+import { generateElementClassName, shortHash } from '../../shared/elementClassName';
+import { isVoidElement, hasIf, isBooleanMapping } from '../../shared/nodeUtils';
+import { NODE_TYPE, RAW_HTML_PREFIX } from '../../shared/constants';
+import { isI18nValue, resolveI18nValue, resolveI18nInProps } from '../../shared/i18n';
+import { isItemDraftForLocale } from '../../shared/types';
+import {
+  buildTemplateContext,
+  resolveItemsTemplate,
+  getNestedValue,
+  addItemUrl,
+  type ValueResolver,
+} from '../../shared/itemTemplateUtils';
+import { buildSlugIndex, getLocaleLinks, translatePath, type SlugMap } from '../../shared/slugTranslator';
+import type { CMSService } from '../services/cmsService';
+import type { WebflowElement, WebflowStyleClass, WebflowComponentDef } from './types';
+import {
+  COLLECTION_LIST_TAG,
+  MENO_BIND_SENTINEL_PREFIX,
+  MENO_BIND_SENTINEL_SUFFIX,
+  MENO_BIND_SENTINEL_RE,
+  MENO_BIND_SENTINEL_EXACT_RE,
+} from './types';
+import { mapStylesToWebflow, buildInstanceStyleCombo } from './styleMapper';
+import { processCodeTemplates, hasTemplates as hasCodeTemplates, resolveHtmlMapping, isHtmlMapping } from '../../client/templateEngine';
+import { resolvePropsFromDefinition } from '../../shared/propResolver';
+import { readFile } from 'fs/promises';
+import { join, basename, extname } from 'path';
+import { getProjectRoot } from '../projectContext';
 
 // ---------------------------------------------------------------------------
 // Context
@@ -44,62 +76,967 @@ export interface WebflowEmitContext {
   breakpoints: BreakpointConfig;
   /** Collected style classes (side output) */
   styleClasses: Map<string, WebflowStyleClass>;
+  /**
+   * Combo class name → identity that owns it. Lets `mintInstanceComboName`
+   * detect when two different element identities hash to the same 5-char
+   * slice and re-hash with a salt until unique. Shared by reference across
+   * every nested context in a single export so collisions are visible
+   * across pages/components, not just within one subtree.
+   */
+  comboIdentityByName: Map<string, string>;
   /** Children passed from a component instance to fill slot markers */
   slotChildren?: (ComponentNode | string)[] | ComponentNode | string;
+  /**
+   * Caller's identity at the moment a component instance was emitted. When the
+   * component body hits a `<slot/>`, slot children are restored to this
+   * context so their generated class names hash against the page (or outer
+   * component) that supplied them — not against the slot host. Without this,
+   * every page routed through the same wrapper component (e.g. Layout) would
+   * collide on identical (fileName, elementPath) pairs in `styleClasses`.
+   */
+  slotEmitContext?: {
+    fileType: 'component' | 'page';
+    fileName: string;
+    elementPath: number[];
+  };
+  /**
+   * Resolved props of the OUTER component instance whose body authored these
+   * slot children. Templates inside slot children (`{{title}}` on a Heading
+   * placed inside a `<Stack>` slot of a Hero section) refer to that outer
+   * component's interface, not the slot host's. Captured in
+   * `emitInlineComponentBody` as `parentProps`, consumed by `emitSlotMarker`
+   * when filling the slot.
+   */
+  slotInstanceProps?: Record<string, unknown>;
+  /** CMS service for resolving collection-sourced lists. */
+  cmsService?: CMSService;
+  /** i18n config so list items / locale-list can resolve translations. */
+  i18nConfig?: I18nConfig;
+  /** Locale this page is being exported under. */
+  locale?: string;
+  /** Slug mappings for cross-locale URL generation in locale-lists. */
+  slugMappings?: SlugMap[];
+  /**
+   * Lazily-built reverse slug index, shared by `emitLinkNode` (rewriting
+   * internal `/path` hrefs to the current locale's Webflow URL) and
+   * `emitLocaleListNode` so we don't rebuild the same Map per link.
+   */
+  slugIndex?: ReturnType<typeof buildSlugIndex>;
+  /** URL path of the page being exported (used by locale-list). */
+  pagePath?: string;
+  /** Currently-rendered CMS item for CMS template pages. */
+  cmsContext?: { cms: CMSItem };
+  /** Cumulative template context for nested lists. */
+  templateContext?: Record<string, unknown>;
+  /** Per-theme map: themeName → { '--bg': '#fff', … } from colors.json. */
+  themeVars?: Record<string, Record<string, string>>;
+  /**
+   * Project-wide vars from variables.json (not theme-dependent), keyed by
+   * Meno breakpoint name (`base`, `tablet`, `mobile`, …). Each map holds the
+   * full `--name → resolved value` set at that breakpoint, with per-variable
+   * `scales` overrides and global category scaling already baked in. The
+   * walker substitutes `var(--x)` per-breakpoint so the Webflow class system
+   * receives concrete scaled values at every tier.
+   */
+  projectVars?: Record<string, Record<string, string>>;
+  /** Default theme name from colors.json (used when no ancestor theme). */
+  defaultTheme?: string;
+  /**
+   * Responsive auto-scaling config. When `enabled`, raw scalable values
+   * (`font-size: 48px`, `padding: 40px`, …) are auto-filled per breakpoint
+   * by `mapStylesToWebflow` even when the author didn't write a per-bp
+   * override.
+   */
+  responsiveScales?: ResponsiveScales;
+  /**
+   * The theme inherited from an ancestor's `theme` attribute. Set by
+   * `emitHtmlNode` when a node carries `theme="…"`, then forwarded to its
+   * descendants so `var(--bg)` resolves to the right palette per element.
+   */
+  currentTheme?: string;
+  /**
+   * elementClass → its `interactiveStyles`, collected during the walk so
+   * `buildWebflowPayload` can render them into raw CSS afterwards via
+   * `generateInteractiveCSS`. Pseudo-only rules with empty prefix and
+   * non-responsive style continue to flow through `primaryClass.pseudoStates`
+   * (Webflow's class-system path); everything else is filtered to the
+   * manual-paste `<style>` block.
+   */
+  interactiveStylesMap?: Map<string, InteractiveStyles>;
+  /**
+   * Meno components promoted to Webflow Components (`Navigation`, `Footer`).
+   * The first encounter of each name registers a definition here; subsequent
+   * encounters emit a `componentRef` element instead of inlining markup.
+   * `undefined` inside a component body disables further promotion (so a
+   * Navigation that nests another promoted name doesn't recurse).
+   */
+  promotedComponents?: Map<string, WebflowComponentDef> | null;
+  /**
+   * Component names eligible for promotion. When omitted, the built-in
+   * `PROMOTED_TO_WEBFLOW_COMPONENT` defaults (`Navigation`, `Footer`) apply.
+   * Configurable from the Webflow extension UI so users can promote their own
+   * shared components (e.g. `Sidebar`) without forking core.
+   */
+  promotedComponentNames?: Set<string>;
+  /**
+   * Opt-in: emit `<list sourceType="collection">` as a single bound
+   * Collection List shell (`tag: COLLECTION_LIST_TAG`) carrying field-binding
+   * markers, instead of the default static N-times expansion. The extension
+   * inserts a Webflow `DynamoWrapper` and tags children with
+   * `data-meno-bind-*` attributes so the user can finish binding in the
+   * Designer UI (no programmatic binding API exists yet — Apr 2026).
+   */
+  bindCollectionLists?: boolean;
+  /**
+   * Default values from the enclosing component's `interface` (`{ size: '1',
+   * variant: 'default', … }`). Used by `mapStylesToWebflow` to bake
+   * default-prop StyleMapping values into the primary class's base, so the
+   * primary represents the default-prop visual and combos carry only the
+   * deltas for non-default values. Set in `emitInlineComponentBody` when
+   * entering a component body; absent for page-level walks.
+   */
+  componentDefaults?: Record<string, unknown>;
+  /**
+   * Most recent ancestor's resolved CSS `color` value, threaded down so that
+   * `<embed>` SVG markup can substitute `currentColor` with a concrete color
+   * before being uploaded as an `image/svg+xml` asset. SVG assets render
+   * standalone in Webflow — `currentColor` no longer inherits from the
+   * surrounding DOM, so it would otherwise paint as black.
+   */
+  inheritedColor?: string;
 }
 
+/**
+ * Meno component names that should become Webflow Components instead of
+ * inline markup. Exact, case-sensitive match — e.g. `NavLink` and
+ * `NavDropdown` continue to inline today.
+ */
+export const PROMOTED_TO_WEBFLOW_COMPONENT = new Set(['Navigation', 'Footer']);
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
 function buildElementClass(ctx: WebflowEmitContext, label: string | undefined): string {
-  return generateElementClassName({
+  const generated = generateElementClassName({
     fileType: ctx.fileType,
     fileName: ctx.fileName,
     label,
     path: ctx.elementPath,
   });
+  // Drop the `c_` component prefix for the Webflow output — the file name is
+  // already in the class. Pages keep `p_` so page-scoped classes can't collide
+  // with component class names that happen to share the same file name.
+  if (ctx.fileType !== 'component') return generated;
+  const stripped = generated.replace(/^c_/, '');
+  // Collapse `heading_heading` → `heading` when component and element names
+  // match — the duplication carries no extra info.
+  return stripped.replace(/^([a-z0-9-]+)_\1$/, '$1');
+}
+
+/**
+ * Suffix used to keep two placements of the same element under different
+ * ancestor `theme="…"` values from collapsing onto one entry in
+ * `ctx.styleClasses`. Theme `var(--…)` refs are baked to concrete colors at
+ * export time, so a `button` rendered under `theme="light"` and one under
+ * `theme="dark"` produce different resolved CSS — but absent this suffix they
+ * share the class name `button`, and the last write wins (silently
+ * mis-rendering the earlier instance). Returns `''` for the project's default
+ * theme (or no theme), so default-theme exports stay byte-identical.
+ *
+ * Callers append this AFTER any other suffixes they compose (sub-classes like
+ * `…-item`, identity hashes, etc.) so the theme suffix consistently lives at
+ * the tail of the name. Sanitization mirrors `sanitizeClassName` in styleMapper
+ * so unusual theme names from `colors.json` produce valid CSS segments.
+ */
+function themedClassSuffix(ctx: WebflowEmitContext): string {
+  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 resolveTemplate(text: string, props?: Record<string, unknown>): string {
-  if (!props) return text;
-  return text.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
-    const trimmed = expr.trim();
+/** Append `themedClassSuffix(ctx)` to a class name, or return it unchanged. */
+function withThemeSuffix(name: string, ctx: WebflowEmitContext): string {
+  return name + themedClassSuffix(ctx);
+}
 
-    // Support "expr || 'fallback'" pattern
-    const orMatch = trimmed.match(/^(.+?)\s*\|\|\s*['"](.+?)['"]$/);
-    if (orMatch) {
-      const value = resolveNestedProp(props, orMatch[1].trim());
-      return (value !== undefined && value !== '' && value !== null)
-        ? String(value)
-        : orMatch[2];
+/**
+ * Mint a per-instance combo class name of the form `is-<5char>`. The hash is
+ * derived from the placement's full element identity (page + path or label),
+ * so two placements at different positions get different combos and the same
+ * placement re-derives the same combo across re-imports.
+ *
+ * Webflow stores classes in a single project-wide stylesheet, so the 5-char
+ * base36 space (~60M) is birthday-vulnerable across large exports. When the
+ * computed name is already claimed by a *different* identity, we re-hash with
+ * an attempt suffix until the slot is free or matches our identity.
+ */
+function mintInstanceComboName(ctx: WebflowEmitContext, identity: string): string {
+  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}`)}`;
+  }
+}
 
-    // Support "expr ? 'a' : 'b'" ternary pattern
-    const ternaryMatch = trimmed.match(/^(.+?)\s*\?\s*['"](.+?)['"]\s*:\s*['"](.+?)['"]$/);
-    if (ternaryMatch) {
-      const value = resolveNestedProp(props, ternaryMatch[1].trim());
-      return value ? ternaryMatch[2] : ternaryMatch[3];
+/**
+ * Pull `{ propName: defaultValue }` from a component's `interface` definition.
+ * Returns undefined when the interface is absent or contributes no defaults,
+ * so callers can leave `componentDefaults` off the context (page-level walks
+ * skip default-baking entirely).
+ */
+function extractInterfaceDefaults(
+  iface: Record<string, { default?: unknown }> | undefined
+): Record<string, unknown> | undefined {
+  if (!iface) return undefined;
+  const out: Record<string, unknown> = {};
+  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 : undefined;
+}
 
-    // Simple prop lookup with dot-notation
-    const value = resolveNestedProp(props, trimmed);
-    return value !== undefined ? String(value) : '';
-  });
+/**
+ * Layered template-resolution context. Mirrors the namespaces meno-core's
+ * `templateEngine.buildEvalContext` walks: instance props win over slot props,
+ * which win over component defaults, with CMS / list iteration data underneath.
+ * Page-level walks (no enclosing component) still get a usable context — we
+ * just won't have `instanceProps` to layer on top.
+ */
+function buildTemplateProps(
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): Record<string, unknown> {
+  return {
+    ...(ctx.templateContext ?? {}),
+    ...(ctx.cmsContext ?? {}),
+    ...(ctx.componentDefaults ?? {}),
+    ...(ctx.slotInstanceProps ?? {}),
+    ...(instanceProps ?? {}),
+  };
+}
+
+/**
+ * Resolve `{{...}}` templates in a string using the same engine as meno-core's
+ * runtime. Returns `text` unchanged when it carries no templates so we don't
+ * thrash `flattenInlineHtmlToText` over rich-text strings without placeholders.
+ * `RAW_HTML_PREFIX`-marked rich-text values get flattened to visible text after
+ * substitution so the sentinel + inline HTML can't leak into a tag/attribute.
+ */
+function resolveStringTemplate(
+  text: string,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): string {
+  if (!hasCodeTemplates(text)) return text;
+  const out = processCodeTemplates(text, buildTemplateProps(ctx, instanceProps));
+  return out.startsWith(RAW_HTML_PREFIX)
+    ? flattenInlineHtmlToText(out.slice(RAW_HTML_PREFIX.length))
+    : out;
+}
+
+const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+// Tags whose Webflow preset is a clickable wrapper (`LinkBlock`) — they
+// inherit the browser-default `<a>` underline unless we override it.
+const LINK_LIKE_TAGS = new Set(['button']);
+// Tags whose Webflow preset ships with a default `margin-bottom: 10px`.
+const LIST_TAGS = new Set(['ul', 'ol']);
+
+/**
+ * Zero out a heading's vertical margins when the source styles don't set them.
+ * Webflow (and browser UA stylesheets) ship h1–h6 with non-trivial
+ * margin-top/bottom; designs in Meno almost never account for that. Shorthand
+ * `margin` is expanded into the four sides upstream (see `styleMapper.ts`),
+ * so by the time we get here every author-set margin is already a longhand.
+ */
+function applyHeadingMarginDefaults(cls: WebflowStyleClass): void {
+  const base = cls.base;
+  if (!('margin-top' in base)) base['margin-top'] = '0px';
+  if (!('margin-bottom' in base)) base['margin-bottom'] = '0px';
 }
 
-function resolveNestedProp(obj: Record<string, unknown>, path: string): unknown {
-  const parts = path.split('.');
-  let current: unknown = obj;
-  for (const part of parts) {
-    if (current === null || current === undefined || typeof current !== 'object') return undefined;
-    current = (current as Record<string, unknown>)[part];
+/**
+ * Zero out a paragraph's bottom margin when the source styles don't set it.
+ * Webflow's `<p>` preset ships with a default `margin-bottom`; designs in Meno
+ * almost never account for that. Only `margin-bottom` is touched — paragraphs
+ * commonly want their natural top spacing.
+ */
+function applyParagraphMarginDefaults(cls: WebflowStyleClass): void {
+  const base = cls.base;
+  if (!('margin-bottom' in base)) base['margin-bottom'] = '0px';
+}
+
+/**
+ * Zero out a list's bottom margin when the source styles don't set it.
+ * Webflow's `<ul>`/`<ol>` preset ships with `margin-bottom: 10px`; designs in
+ * Meno almost never account for that.
+ */
+function applyListMarginDefaults(cls: WebflowStyleClass): void {
+  const base = cls.base;
+  if (!('margin-bottom' in base)) base['margin-bottom'] = '0px';
+}
+
+/**
+ * For `display: grid` (or `inline-grid`) elements, default
+ * `grid-template-rows` to `1fr` (a single row) when the source styles don't
+ * specify rows. Webflow's grid preset ships with two rows; designs in Meno
+ * almost never want that. The `grid` / `grid-template` shorthands opt out.
+ */
+function applyGridRowsDefault(cls: WebflowStyleClass): void {
+  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';
+}
+
+/**
+ * Default `<a>` to `text-decoration: none`. Browser UA stylesheets underline
+ * links; source designs almost never opt out explicitly. If the author set
+ * `text-decoration` (or `text-decoration-line`) themselves, leave it.
+ */
+function applyLinkTextDecorationDefault(cls: WebflowStyleClass): void {
+  const base = cls.base;
+  if ('text-decoration' in base || 'text-decoration-line' in base) return;
+  base['text-decoration'] = 'none';
+}
+
+/**
+ * Fold two combo classes into one. Webflow's class system permits at most a
+ * single combo on top of the primary, so when an `acceptsStyles` instance
+ * override would stack a second combo on a body root that already carries a
+ * StyleMapping-driven combo, we merge into a fresh class instead. `outer`'s
+ * properties win on key conflicts at every scope (base, breakpoints,
+ * pseudo-states), mirroring runtime SSR's outer-overrides-inner order.
+ *
+ * The merged name concatenates both combo names so it stays deterministic
+ * across re-imports and is unique to this exact body root (the outer combo
+ * name is keyed by the instance's outer location).
+ */
+function mergeComboClasses(
+  inner: WebflowStyleClass,
+  outer: WebflowStyleClass,
+  parentName: string,
+): WebflowStyleClass {
+  const innerSuffix = inner.name.startsWith('is-') ? inner.name.slice(3) : inner.name;
+  const merged: WebflowStyleClass = {
+    name: `${outer.name}_${innerSuffix}`,
+    base: { ...inner.base, ...outer.base },
+    comboParent: parentName,
+  };
+
+  if (inner.breakpoints || outer.breakpoints) {
+    const bps: NonNullable<WebflowStyleClass['breakpoints']> = {};
+    const tiers = new Set<keyof typeof bps>([
+      ...(Object.keys(inner.breakpoints || {}) as Array<keyof typeof bps>),
+      ...(Object.keys(outer.breakpoints || {}) as Array<keyof typeof bps>),
+    ]);
+    for (const tier of tiers) {
+      bps[tier] = { ...(inner.breakpoints?.[tier] || {}), ...(outer.breakpoints?.[tier] || {}) };
+    }
+    merged.breakpoints = bps;
+  }
+
+  if (inner.pseudoStates || outer.pseudoStates) {
+    const ps: NonNullable<WebflowStyleClass['pseudoStates']> = {};
+    const states = new Set<keyof typeof ps>([
+      ...(Object.keys(inner.pseudoStates || {}) as Array<keyof typeof ps>),
+      ...(Object.keys(outer.pseudoStates || {}) as Array<keyof typeof ps>),
+    ]);
+    for (const state of states) {
+      ps[state] = { ...(inner.pseudoStates?.[state] || {}), ...(outer.pseudoStates?.[state] || {}) };
+    }
+    merged.pseudoStates = ps;
+  }
+
+  return merged;
+}
+
+const IMAGE_EXT_MIME: Record<string, string> = {
+  '.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: string): boolean {
+  return /^[a-z][a-z0-9+.-]*:\/\//i.test(s) || s.startsWith('data:');
+}
+
+/**
+ * If `src` points at a file inside the project (project-relative path like
+ * `/images/foo.webp`), read it from disk and stash the bytes onto `element`
+ * for the Webflow extension to upload. Absolute http(s)/data URLs are left
+ * alone — the extension fetches those itself.
+ */
+async function maybeInlineLocalImage(element: WebflowElement, src: string): Promise<void> {
+  if (!src || isAbsoluteUrl(src)) return;
+  const projectRoot = getProjectRoot();
+  // Strip leading slash so `join` doesn't escape the project root, and
+  // verify the resolved path stays inside it (path-traversal guard).
+  const rel = src.replace(/^\/+/, '');
+  const abs = join(projectRoot, rel);
+  if (!abs.startsWith(projectRoot)) return;
+  try {
+    const buf = await readFile(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 {
+    // File missing / unreadable — leave `attributes.src` alone. The extension
+    // will then drop the image with a warning, same observable behavior as
+    // before this change.
+  }
+}
+
+/**
+ * Strip a small subset of inline HTML — `<span>`, `<em>`, `<strong>`, `<br>`,
+ * etc. — and return the concatenated visible text. Used for heading /
+ * paragraph content that ships with the `<!--MENO_RAW_HTML-->` sentinel.
+ *
+ * We previously emitted structured children to preserve inline emphasis
+ * (`<span class="custom-span">need</span>`), but Webflow's Designer API for
+ * Heading / Paragraph elements does not reliably accept mixed string +
+ * element children, and `parent.append(string)` interprets the string as a
+ * tag name (so "need" became `<need></need>`). For now we drop inline
+ * styling and keep visible text — the user explicitly accepts this
+ * trade-off and we'll revisit once we have a working inline-rich-text path.
+ *
+ * `<br>` collapses to `\n`; HTML entities (`&amp;`/`&lt;`/`&gt;`/`&quot;`)
+ * are decoded; comments are stripped.
+ */
+function flattenInlineHtmlToText(raw: string): string {
+  const decode = (s: string) => 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: RegExpExecArray | null;
+  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;
+}
+
+/**
+ * Substitute `var(--name[, fallback])` in a CSS value with literals from the
+ * walker context, resolving project vars at the requested breakpoint. Theme
+ * vars are resolved per the active theme (the nearest ancestor's `theme`
+ * attribute, or the project default) and don't vary by breakpoint. Anything
+ * we can't resolve is left intact.
+ *
+ * Webflow style classes don't share Meno's `:root` declarations and we don't
+ * inject a `<style>` block, so each element has to receive concrete values
+ * in its style class — and with theme awareness, identical `var(--bg)`
+ * references in different theme contexts produce different colours. The
+ * breakpoint parameter lets us materialize the same `var(--h1-fs)` reference
+ * to its scaled value at every Meno breakpoint.
+ */
+function resolveVarsInValue(
+  value: string,
+  ctx: WebflowEmitContext,
+  breakpoint: string = 'base'
+): string {
+  if (!value || (!ctx.themeVars && !ctx.projectVars)) return value;
+  // If `currentTheme` names a theme that doesn't exist in this project's
+  // colors.json, fall back to the project default — that mirrors runtime
+  // behaviour, where `[theme="primary"]` without a matching selector inherits
+  // `:root`'s default-theme vars. Without the fallback, `var(--text)` etc.
+  // would survive the substitution pass and ship as literal `var(--…)` to
+  // Webflow.
+  const themeMap = ctx.themeVars
+    ? (
+        (ctx.currentTheme && ctx.themeVars[ctx.currentTheme])
+        ?? (ctx.defaultTheme ? ctx.themeVars[ctx.defaultTheme] : undefined)
+      )
+    : undefined;
+  const projectMap = ctx.projectVars
+    ? (ctx.projectVars[breakpoint] || ctx.projectVars.base)
+    : undefined;
+  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: string, fallback: string | undefined) => {
+      const resolved = (themeMap && themeMap[name]) ?? (projectMap && projectMap[name]);
+      if (resolved !== undefined) {
+        changed = true;
+        return resolved;
+      }
+      if (fallback !== undefined) {
+        changed = true;
+        return fallback.trim();
+      }
+      return match;
+    });
+    if (!changed) break;
   }
   return current;
 }
 
-function hasTemplates(text: string): boolean {
-  return /\{\{.+?\}\}/.test(text);
+function substituteVarsInStyleObject(
+  style: StyleObject,
+  ctx: WebflowEmitContext,
+  breakpoint: string = 'base'
+): StyleObject {
+  const out: StyleObject = {};
+  for (const [k, v] of Object.entries(style)) {
+    out[k] = typeof v === 'string' ? resolveVarsInValue(v, ctx, breakpoint) : v;
+  }
+  return out;
+}
+
+/**
+ * Names of project breakpoints whose `var(--x)` resolutions might differ
+ * from base — i.e., every breakpoint in the project config. Returns an empty
+ * list when no projectVars map is present (e.g., test contexts).
+ */
+function projectBreakpointNames(ctx: WebflowEmitContext): string[] {
+  return Object.keys(ctx.breakpoints);
+}
+
+/**
+ * For each base property containing a `var(--x)` reference, expand to a
+ * per-breakpoint entry on the responsive style if its resolved value differs
+ * from base. Author-provided per-breakpoint overrides win. Mirrors what
+ * Meno's runtime does via `:root { --x }` + `@media { :root { --x } }`,
+ * except materialized into class-level breakpoint entries since Webflow's
+ * class system reads concrete values per tier.
+ */
+function expandResponsiveVarsInto(
+  baseStyle: StyleObject,
+  responsive: ResponsiveStyleObject,
+  ctx: WebflowEmitContext
+): void {
+  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] as StyleObject | undefined) || {};
+      // Author override wins.
+      if (bucket[prop] !== undefined) continue;
+      bucket[prop] = bpResolved;
+      responsive[bp] = bucket;
+    }
+  }
+}
+
+/**
+ * Apply theme/project `var(--x)` substitution across a flat or responsive
+ * style object. Skipped for StyleMappings — those are passed through and
+ * resolved later when the styleMapper turns them into combo classes (each
+ * combo's value gets its own substitution then).
+ *
+ * For each authored breakpoint, vars are resolved using that breakpoint's
+ * project var map. Then the base properties are scanned for `var(--x)` refs
+ * whose resolved value differs at any project breakpoint — those get
+ * synthesized into the responsive style so `mapStylesToWebflow` can route
+ * them into Webflow's per-breakpoint buckets.
+ */
+function substituteVarsInStyle(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  ctx: WebflowEmitContext
+): StyleObject | ResponsiveStyleObject | undefined {
+  if (!style) return style;
+  if (isResponsiveStyleObject(style)) {
+    const out: ResponsiveStyleObject = {};
+    for (const [bp, obj] of Object.entries(style)) {
+      if (!obj || typeof obj !== 'object') continue;
+      out[bp] = substituteVarsInStyleObject(obj as StyleObject, ctx, bp);
+    }
+    const baseObj = (style as ResponsiveStyleObject).base;
+    if (baseObj) expandResponsiveVarsInto(baseObj as StyleObject, out, ctx);
+    return out;
+  }
+  // Flat style: substitute base, then expand per-breakpoint values into a
+  // responsive wrapper so var-driven scaling reaches the breakpoint buckets.
+  const flatStyle = style as StyleObject;
+  const baseSubstituted = substituteVarsInStyleObject(flatStyle, ctx, 'base');
+  const responsive: ResponsiveStyleObject = { base: baseSubstituted };
+  expandResponsiveVarsInto(flatStyle, responsive, ctx);
+  // If no per-breakpoint expansion happened, return the flat shape to keep
+  // downstream behavior identical for projects without project vars.
+  if (Object.keys(responsive).length === 1) return baseSubstituted;
+  return responsive;
+}
+
+function substituteVarsInInteractive(
+  rules: InteractiveStyles | undefined,
+  ctx: WebflowEmitContext
+): InteractiveStyles | undefined {
+  if (!rules) return rules;
+  return rules.map((rule): InteractiveStyleRule => ({
+    ...rule,
+    style: (substituteVarsInStyle(rule.style as StyleObject | ResponsiveStyleObject, ctx) ?? rule.style) as StyleValue,
+  }));
+}
+
+/**
+ * In-place pass over a finished WebflowStyleClass to inline `var(--x)` refs
+ * that survived an upstream substitution. Combo classes built from
+ * StyleMappings carry their values as plain strings — we couldn't substitute
+ * before `mapStylesToWebflow` ran (the mapping shape is opaque to our
+ * resolver), so we sweep them here. Also expands any base property that
+ * still contains a `var(--x)` ref into per-breakpoint entries so combo
+ * classes inherit the same variable-driven responsive scaling as the
+ * primary class.
+ */
+function substituteVarsInStyleClass(cls: WebflowStyleClass, ctx: WebflowEmitContext): void {
+  // Capture which base props still hold a var() ref BEFORE substitution so
+  // we can expand them per-breakpoint after.
+  const varBaseProps: Array<{ prop: string; raw: string }> = [];
+  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');
+    }
+  }
+
+  // Per-breakpoint expansion for combo classes whose base values were vars.
+  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 as keyof typeof cls.breakpoints] || {};
+      if (bucket[prop] !== undefined) continue;
+      bucket[prop] = bpResolved;
+      (cls.breakpoints as Record<string, Record<string, string>>)[tier] = bucket;
+    }
+  }
+}
+
+/**
+ * Local copy of the Meno→Webflow breakpoint mapping used by styleMapper.
+ * Kept private so we don't widen styleMapper's public surface just for the
+ * combo-class expansion above.
+ */
+function menoBreakpointToWebflowTier(
+  bpName: string,
+  breakpoints: BreakpointConfig
+): string {
+  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';
+}
+
+/**
+ * A responsive style object nests StyleObjects under breakpoint keys (base/tablet/mobile/...).
+ * A flat style object has CSS property values directly (strings, numbers, or StyleMappings).
+ */
+function isResponsiveStyleObject(style: StyleObject | ResponsiveStyleObject): style is ResponsiveStyleObject {
+  return 'base' in style || 'tablet' in style || 'mobile' in style;
+}
+
+/**
+ * Pull the base-breakpoint `color` value from a flat or responsive style.
+ * Returns undefined if absent. Values like `currentColor` / `inherit` are
+ * returned as-is so callers can decide to skip them.
+ *
+ * StyleMapping colors (e.g. `Button.variant → primary|secondary`) are
+ * resolved using the active instance prop, falling back to the enclosing
+ * component's default. Without this, variant-mapped buttons fail to thread
+ * a color into nested SVG `<embed>` children — those ship with
+ * `currentColor` intact and Webflow paints the standalone SVG asset black.
+ * Resolved mapping values may still hold `var(--…)`; we run them through
+ * `resolveVarsInValue` so the SVG asset bakes a concrete color.
+ */
+function extractBaseColor(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  ctx?: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): string | undefined {
+  if (!style) return undefined;
+  const flat: StyleObject | undefined = isResponsiveStyleObject(style)
+    ? ((style as ResponsiveStyleObject).base as StyleObject | undefined)
+    : (style as StyleObject);
+  const c = flat?.color;
+  if (typeof c === 'string') return c;
+  if (c && typeof c === 'object' && (c as StyleMapping)._mapping === true) {
+    const mapping = c as StyleMapping;
+    const propValue = instanceProps?.[mapping.prop] ?? ctx?.componentDefaults?.[mapping.prop];
+    if (propValue == null) return undefined;
+    const key = String(propValue);
+    const raw = mapping.values[key];
+    if (typeof raw !== 'string' || raw === '') return undefined;
+    return ctx ? resolveVarsInValue(raw, ctx) : raw;
+  }
+  return undefined;
+}
+
+/**
+ * Returns a concrete color (something we can substitute into SVG markup) or
+ * undefined for keywords that don't carry one (`currentColor`, `inherit`,
+ * unset). Caller should fall back to ancestor color when undefined.
+ */
+function concreteColor(c: string | undefined): string | undefined {
+  if (!c) return undefined;
+  const lower = c.trim().toLowerCase();
+  if (lower === 'currentcolor' || lower === 'inherit' || lower === 'unset' || lower === 'initial') {
+    return undefined;
+  }
+  return c;
+}
+
+/**
+ * Replace `currentColor` references in inline SVG markup with the given color.
+ * Webflow uploads `<embed>` SVGs as standalone `image/svg+xml` assets, so the
+ * normal `currentColor` → ancestor `color` inheritance is broken — we resolve
+ * it here at export time. Match is case-insensitive.
+ */
+function inlineCurrentColorInSvg(svg: string, color: string): string {
+  return svg.replace(/currentColor/gi, color);
+}
+
+/**
+ * Resolve `{{prop}}` templates in a flat style object's values using component instance
+ * props. StyleMapping objects (`{_mapping: true, ...}`) are preserved so that
+ * styleMapper can still emit them as Webflow combo classes. Values without
+ * templates pass through unchanged.
+ */
+function resolveTemplatesInStyleObject(
+  style: StyleObject,
+  props: Record<string, unknown>
+): StyleObject {
+  const result: StyleObject = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === 'string' && hasCodeTemplates(value)) {
+      result[key] = processCodeTemplates(value, props);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * Resolve templates inside a flat or responsive style object. Uses meno-core's
+ * template engine so Webflow receives concrete values (e.g. `1280px`) instead of
+ * `{{maxWidth}}` placeholders.
+ */
+function resolveStyleTemplates(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  props: Record<string, unknown> | undefined
+): StyleObject | ResponsiveStyleObject | undefined {
+  if (!style || !props) return style;
+  if (isResponsiveStyleObject(style)) {
+    const result: ResponsiveStyleObject = {};
+    for (const [bp, styleObj] of Object.entries(style)) {
+      if (styleObj && typeof styleObj === 'object') {
+        result[bp] = resolveTemplatesInStyleObject(styleObj as StyleObject, props);
+      }
+    }
+    return result;
+  }
+  return resolveTemplatesInStyleObject(style as StyleObject, props);
+}
+
+/**
+ * Match a style value that is a single bare `{{prop}}` template — optionally
+ * wrapped by literal text (`"calc({{maxWidth}} + 1rem)"`). The captured prop
+ * name must be a plain identifier (no dotted paths like `{{user.name}}`, no
+ * expressions). Returns the prop name, or null when the value isn't a
+ * single-prop template we can convert.
+ */
+const SINGLE_TEMPLATE_RE = /^([^{]*)\{\{\s*([A-Za-z_$][\w$]*)\s*\}\}([^{]*)$/;
+function extractSingleTemplateProp(value: string): { prop: string; prefix: string; suffix: string } | null {
+  const m = SINGLE_TEMPLATE_RE.exec(value);
+  if (!m) return null;
+  return { prefix: m[1] ?? '', prop: m[2]!, suffix: m[3] ?? '' };
+}
+
+/**
+ * Convert single-prop string templates (`"{{maxWidth}}"`,
+ * `"calc({{maxWidth}} + 1rem)"`) inside a style object into synthetic
+ * `StyleMapping` entries so the downstream Webflow combo emitter treats them
+ * the same as authored mappings: bake the default-prop resolution into the
+ * primary class and emit a combo for non-default instance values.
+ *
+ * The synthetic mapping carries the values for *both* the component default
+ * and the current instance — `mapStylesToWebflow` looks the right one up via
+ * `componentDefaults` / `instanceProps`. Multi-template strings, dotted paths,
+ * and props without an interface default fall through unchanged so today's
+ * resolve-and-bake behavior still applies.
+ */
+function templatesToSyntheticMappings(
+  style: StyleObject,
+  componentDefaults: Record<string, unknown>,
+  instanceProps: Record<string, unknown>
+): StyleObject {
+  const out: StyleObject = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value !== 'string' || !hasCodeTemplates(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;
+    // Resolve the full template string (literals + placeholder) once with the
+    // default prop value substituted and once with the instance value. The
+    // resulting strings are full CSS values — `mappingValueToCSS` downstream
+    // consumes them verbatim.
+    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,
+      },
+    } as StyleMapping;
+  }
+  return out;
+}
+
+/**
+ * Apply `templatesToSyntheticMappings` across a flat or responsive style.
+ * Returns a new style object; original is left untouched. Skipped entirely
+ * when no `componentDefaults` / `instanceProps` are available.
+ */
+function convertStyleTemplatesToMappings(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  componentDefaults: Record<string, unknown> | undefined,
+  instanceProps: Record<string, unknown> | undefined
+): StyleObject | ResponsiveStyleObject | undefined {
+  if (!style || !componentDefaults || !instanceProps) return style;
+  if (isResponsiveStyleObject(style)) {
+    const result: ResponsiveStyleObject = {};
+    for (const [bp, styleObj] of Object.entries(style)) {
+      if (styleObj && typeof styleObj === 'object') {
+        result[bp] = templatesToSyntheticMappings(styleObj as StyleObject, componentDefaults, instanceProps);
+      }
+    }
+    return result;
+  }
+  return templatesToSyntheticMappings(style as StyleObject, componentDefaults, instanceProps);
+}
+
+/**
+ * Evaluate a node's `if` condition at export time. Mirrors meno-core's SSR semantics:
+ * boolean passes through, BooleanMapping is resolved against instance props,
+ * and string templates are evaluated with meno-core's template engine. When no
+ * context is available to decide, default to rendering (true) so we don't drop
+ * nodes that would otherwise be shown.
+ */
+function shouldRenderNode(
+  node: ComponentNode,
+  instanceProps?: Record<string, unknown>
+): boolean {
+  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 !== undefined ? 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;
+}
+
+/**
+ * Resolve templates in the inner `style` of each interactive-style rule.
+ */
+function resolveInteractiveStyleTemplates(
+  rules: InteractiveStyles | undefined,
+  props: Record<string, unknown> | undefined
+): InteractiveStyles | undefined {
+  if (!rules || !props) return rules;
+  return rules.map((rule): InteractiveStyleRule => ({
+    ...rule,
+    style: (resolveStyleTemplates(rule.style as StyleObject | ResponsiveStyleObject, props) ?? rule.style) as StyleValue,
+  }));
 }
 
 // ---------------------------------------------------------------------------
@@ -109,17 +1046,23 @@ function hasTemplates(text: string): boolean {
 /**
  * Convert a ComponentNode tree to Webflow element tree.
  * Also collects WebflowStyleClass definitions as a side effect in ctx.styleClasses.
+ *
+ * Async because list expansion may query the CMS service. Sync paths still
+ * resolve in a single tick — only collection-sourced lists actually `await`.
  */
-export function nodeToWebflow(
+export async function nodeToWebflow(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement[] {
+): Promise<WebflowElement[]> {
   if (node === null || node === undefined) return [];
 
   // Text/number
   if (typeof node === 'string') {
-    const text = instanceProps ? resolveTemplate(node, instanceProps) : node;
+    const text = resolveStringTemplate(node, ctx, instanceProps);
+    // Empty/whitespace-only strings render as nothing in Meno's SSR, but a
+    // bare `<span>` becomes a selectable Text Block in Webflow — skip them.
+    if (text === '' || text.trim() === '') return [];
     return [{ tag: 'span', textContent: text }];
   }
   if (typeof node === 'number') {
@@ -133,29 +1076,33 @@ export function nodeToWebflow(
       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;
   }
 
+  // Skip nodes whose `if` evaluates to false — meno-core's rendering treats
+  // `if: false` (or a falsy mapping/template) as "don't render".
+  if (!shouldRenderNode(node, instanceProps)) return [];
+
   // Dispatch by node type
   switch (node.type) {
     case NODE_TYPE.NODE:
-      return [emitHtmlNode(node as HtmlNode, ctx, instanceProps)];
+      return [await emitHtmlNode(node as HtmlNode, ctx, instanceProps)];
     case NODE_TYPE.COMPONENT:
       return emitComponentInstance(node as ComponentInstanceNode, ctx, instanceProps);
     case NODE_TYPE.SLOT:
       return emitSlotMarker(node as SlotMarker, ctx, instanceProps);
     case NODE_TYPE.EMBED:
-      return [emitEmbedNode(node as EmbedNode, ctx, instanceProps)];
+      return [await emitEmbedNode(node as EmbedNode, ctx, instanceProps)];
     case NODE_TYPE.LINK:
-      return [emitLinkNode(node as LinkNode, ctx, instanceProps)];
+      return [await emitLinkNode(node as LinkNode, ctx, instanceProps)];
     case NODE_TYPE.LIST:
     case 'cms-list' as any:
+      return emitListNode(node as ListNode, ctx, instanceProps);
     case NODE_TYPE.LOCALE_LIST:
-      // Complex nodes — emit a placeholder div
-      return [{ tag: 'div', attributes: { 'data-meno-type': node.type } }];
+      return emitLocaleListNode(node as LocaleListNode, ctx, instanceProps);
     default:
       return [];
   }
@@ -165,84 +1112,142 @@ export function nodeToWebflow(
 // Node type emitters
 // ---------------------------------------------------------------------------
 
-function emitHtmlNode(
+async function emitHtmlNode(
   node: HtmlNode,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement {
-  const tag = hasTemplates(node.tag) && instanceProps
-    ? resolveTemplate(node.tag, instanceProps)
-    : node.tag;
+): Promise<WebflowElement> {
+  // Resolve `{{...}}` in the tag against the same layered context meno-core
+  // walks at runtime — page-level / slot-injected nodes don't have
+  // `instanceProps`, so the helper falls back to slot props, component
+  // defaults, and the active CMS / list iteration context.
+  const tag = resolveStringTemplate(node.tag, ctx, instanceProps);
+
+  // Build attributes early so we can check for a `theme="…"` override and
+  // propagate it to the descendant context BEFORE resolving CSS variables.
+  const attributes: Record<string, string | number | boolean> = {};
+  if (node.attributes) {
+    for (const [key, value] of Object.entries(node.attributes)) {
+      attributes[key] = (typeof value === 'string')
+        ? resolveStringTemplate(value, ctx, instanceProps)
+        : value;
+    }
+  }
+
+  const themedCtx: WebflowEmitContext = typeof attributes.theme === 'string' && attributes.theme
+    ? { ...ctx, currentTheme: attributes.theme as string }
+    : ctx;
 
-  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
-  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+  const rawStyle = node.style as StyleObject | ResponsiveStyleObject | undefined;
+  const rawInteractiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+  // Convert single-prop string templates (`"{{maxWidth}}"`) into synthetic
+  // StyleMappings before resolution, so values driven by an interface prop
+  // emit per-instance combo classes (`is-maxwidth-640px`) instead of
+  // collapsing into a single primary class shared by every instance.
+  const styleWithMappings = convertStyleTemplatesToMappings(
+    rawStyle,
+    ctx.componentDefaults,
+    instanceProps,
+  );
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(styleWithMappings, instanceProps),
+    themedCtx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(rawInteractiveStyles, instanceProps),
+    themedCtx
+  );
 
-  // Generate element class and map styles
-  const needsClass = style || (interactiveStyles && interactiveStyles.length > 0) || node.generateElementClass;
+  // Generate element class and map styles.
+  // - Headings always get a class so we can zero out the default heading
+  //   margins Webflow ships with h1–h6.
+  // - `<button>` always gets a class so we can default `text-decoration: none`:
+  //   we route `<button>` through the `LinkBlock` preset (Webflow's
+  //   `FormButton` preset is form-only and gets rejected outside `<form>`),
+  //   which ships with the browser-default `<a>` underline carrier.
+  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: string | undefined;
   let comboClassNames: string[] | undefined;
 
   if (needsClass) {
-    const elementClass = buildElementClass(ctx, node.label);
+    const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), themedCtx);
     const { primaryClass, comboClasses } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints
+      elementClass, style, interactiveStyles, 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);
       }
     }
-  }
 
-  // Build attributes
-  const attributes: Record<string, string | number | boolean> = {};
-  if (node.attributes) {
-    for (const [key, value] of Object.entries(node.attributes)) {
-      if (instanceProps && typeof value === 'string' && hasTemplates(value)) {
-        attributes[key] = resolveTemplate(value, instanceProps);
-      } else {
-        attributes[key] = value;
-      }
+    // Capture the raw interactiveStyles per element so `buildWebflowPayload`
+    // can later run them through `generateInteractiveCSS` for any rules
+    // Webflow's class system can't represent (descendant selectors via
+    // `prefix`, class-style postfixes, breakpoint-divided pseudos).
+    if (
+      ctx.interactiveStylesMap
+      && Array.isArray(interactiveStyles)
+      && interactiveStyles.length > 0
+    ) {
+      ctx.interactiveStylesMap.set(primaryClass.name, interactiveStyles);
     }
   }
 
-  // Build children
-  let children: WebflowElement[] | undefined;
+  // Build children — use the themed context so descendants resolve `var()`
+  // against the theme this element introduces.
+  let children: Array<WebflowElement | string> | undefined;
   let textContent: string | undefined;
   if (!isVoidElement(tag) && node.children) {
     // Optimize: single string child becomes textContent instead of child element
     if (typeof node.children === 'string') {
-      textContent = instanceProps ? resolveTemplate(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] as string;
-      textContent = instanceProps ? resolveTemplate(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 = undefined;
     }
   }
 
-  // Handle conditional rendering
-  let conditional: WebflowElement['conditional'];
-  const ifValue = (node as any).if;
-  if (ifValue !== undefined && 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' };
-    }
+  // Rich-text headings/paragraphs ship with the RAW_HTML_PREFIX sentinel.
+  // Strip inline HTML and keep the concatenated visible text — Webflow's
+  // Heading/Paragraph elements don't accept inline span children reliably
+  // and `parent.append(string)` produces custom-tag elements, not text.
+  // Inline emphasis styling is dropped for now (deliberate trade-off).
+  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)) {
+    // Rich-text props on static pages don't carry the sentinel — they're stored
+    // as plain HTML by the editor. Headings/paragraphs still can't host inline
+    // markup in Webflow, so flatten any tags we find to visible text.
+    textContent = flattenInlineHtmlToText(textContent);
   }
 
   const element: WebflowElement = { tag };
@@ -251,71 +1256,394 @@ function emitHtmlNode(
   if (textContent) element.textContent = textContent;
   if (children) element.children = children;
   if (Object.keys(attributes).length > 0) element.attributes = attributes;
-  if (conditional) element.conditional = conditional;
+
+  // For project-relative `<img>` srcs the Webflow extension can't `fetch`
+  // them (its iframe runs on `designer.webflow.com`). Inline the file bytes
+  // here so the extension uploads via `createAsset` instead.
+  if (tag.toLowerCase() === 'img' && typeof attributes.src === 'string') {
+    await maybeInlineLocalImage(element, attributes.src);
+  }
 
   return element;
 }
 
-function emitComponentInstance(
+async function emitComponentInstance(
   node: ComponentInstanceNode,
   ctx: WebflowEmitContext,
   parentProps?: Record<string, unknown>
-): WebflowElement[] {
+): Promise<WebflowElement[]> {
   const compDef = ctx.globalComponents[node.component];
   if (!compDef) {
     // Unknown component — emit placeholder
     return [{ tag: 'div', attributes: { 'data-component': node.component } }];
   }
 
-  // Resolve props: merge defaults with instance props
-  const resolvedProps: Record<string, unknown> = {};
   const structured = compDef.component;
 
-  if (structured?.interface) {
-    for (const [key, propDef] of Object.entries(structured.interface)) {
-      resolvedProps[key] = propDef.default;
-    }
-  }
-
+  // Resolve template placeholders in incoming instance props against the
+  // PARENT scope first (e.g. `<Heading size="{{level}}"/>` placed in a Hero
+  // body — `level` belongs to Hero's interface, not Heading's). Then hand off
+  // to meno-core's `resolvePropsFromDefinition` so defaults / validation /
+  // rich-text wrapping / i18n match what SSR does. Without this parity, a
+  // template like `tag: 'h{{size}}'` can read different values here than at
+  // runtime — exactly the bug that produced literal `<h>` for `h{{size}}`
+  // when SSR was happily rendering `<h2>`.
+  const passedProps: Record<string, unknown> = {};
   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' && hasTemplates(value) && parentProps) {
-        resolvedProps[key] = resolveTemplate(value, parentProps);
-      } else {
-        resolvedProps[key] = value;
-      }
+      passedProps[key] = (typeof value === 'string' && hasCodeTemplates(value))
+        ? processCodeTemplates(value, parentTemplateProps)
+        : value;
     }
   }
 
+  const resolvedProps: Record<string, unknown> = structured
+    ? resolvePropsFromDefinition(
+        structured,
+        passedProps,
+        node.children as Array<ComponentNode | string> | string | ComponentNode | null | undefined,
+        ctx.locale,
+        ctx.i18nConfig,
+      )
+    : { ...passedProps };
+  // `resolvePropsFromDefinition` doesn't carry the children prop into its
+  // output unless the interface declares it. The Webflow body walk reads
+  // children via `slotChildren`, not props, so dropping it here is safe and
+  // matches SSR (`ssrRenderer.ts:1217-1220` passes children separately too).
+  delete resolvedProps.children;
+
   // Inline-expand the component's node tree
   const body = structured?.structure || (compDef as any).node;
   if (!body) return [];
 
+  // Promote `Navigation` / `Footer` to Webflow Components. Render the body
+  // ONCE with default props only — no slot children, no instance prop
+  // overrides — so every page references the same registered Component. The
+  // inline expansion is still emitted as `inlineFallback` so the extension
+  // can render today's markup when the Designer API can't register
+  // Components (older runtime, missing `canCreateComponents` permission).
+  //
+  // `acceptsStyles` opt-out: when the instance carries its own style /
+  // interactiveStyles overrides, a single shared registered Component can't
+  // represent them (combos would need a per-instance parent). Skip
+  // promotion for that instance and fall through to inline expansion so
+  // `emitInlineComponentBody` attaches the per-property combos directly.
+  const hasInstanceStyleOverrides =
+    Boolean(structured?.acceptsStyles)
+    && (
+      (node.style && Object.keys(node.style as object).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: Record<string, unknown> = {};
+      if (structured?.interface) {
+        for (const [k, p] of Object.entries(structured.interface)) {
+          defaultProps[k] = p.default;
+        }
+      }
+      const compBodyCtx: WebflowEmitContext = {
+        ...ctx,
+        fileType: 'component',
+        fileName: node.component,
+        elementPath: [0],
+        slotChildren: undefined,
+        slotEmitContext: undefined,
+        // 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 });
+    }
+    // The fallback represents an all-inline world; disable promotion inside
+    // it so a self-nested promoted component doesn't recurse forever (each
+    // call would emit yet another fallback under the same promoted name).
+    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);
+}
+
+/**
+ * Inline-expand a component instance into Webflow elements. Used for both
+ * the regular (non-promoted) path and the `inlineFallback` carried alongside
+ * a `componentRef` element so older extensions can render today's markup.
+ */
+async function emitInlineComponentBody(
+  node: ComponentInstanceNode,
+  compDef: ComponentDefinition,
+  resolvedProps: Record<string, unknown>,
+  body: ComponentNode,
+  ctx: WebflowEmitContext,
+  parentProps?: Record<string, unknown>,
+): Promise<WebflowElement[]> {
+  const structured = compDef.component;
+
+  // Slot forwarding: when `node.children` contains `<slot/>` markers, those
+  // markers reference the OUTER (current) component's slot — substitute them
+  // with `ctx.slotChildren` now so this nested component receives the actual
+  // slot content. Mirrors SSR's `processStructure`, which substitutes slot
+  // markers throughout the parent's structure tree before walking. Without
+  // this, a wrapper like `<Section>` whose body places `<Container>{slot}</Container>`
+  // forwards the bare `{slot}` marker to Container as its slotChildren — when
+  // Container's body fires its own slot, the marker is the only thing
+  // available, has no slot context left, and renders nothing.
+  let effectiveChildren = node.children;
+  let inheritedSlotEmitContext = ctx.slotEmitContext;
+  let inheritedSlotInstanceProps: Record<string, unknown> | undefined = undefined;
+  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 as { type?: string }).type === NODE_TYPE.SLOT)) {
+      const out: typeof childArr = [];
+      for (const c of childArr) {
+        if (c && typeof c === 'object' && (c as { type?: string }).type === NODE_TYPE.SLOT) {
+          didForwardSlot = true;
+          if (ctx.slotChildren !== undefined) {
+            const sc = ctx.slotChildren;
+            const subArr = Array.isArray(sc) ? sc : [sc];
+            out.push(...subArr);
+          } else {
+            const def = (c as SlotMarker).default;
+            if (def !== undefined) {
+              const defArr = Array.isArray(def) ? def : [def];
+              out.push(...defArr);
+            }
+          }
+        } else {
+          out.push(c);
+        }
+      }
+      if (didForwardSlot) {
+        effectiveChildren = out;
+        // Forwarded slot children were authored in the OUTER scope — preserve
+        // their original `slotInstanceProps` (so templates resolve against the
+        // outer component's props) and `slotEmitContext` (so generated class
+        // names hash against the outer authoring identity).
+        inheritedSlotInstanceProps = ctx.slotInstanceProps;
+      }
+    }
+  }
+
   const compCtx: WebflowEmitContext = {
     ...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);
+  // Layer the active CMS template context (e.g. `post` from a `<list>`
+  // iteration) underneath the component's resolved props so descendants
+  // inside the body can resolve `{{post.title}}` etc. Mirrors SSR's
+  // ssrRenderer.ts:1231 which passes `itemContext: ctx.templateContext`
+  // alongside resolved props. resolvedProps wins on key conflicts so
+  // explicit instance props still override.
+  const ctxTemplate = ctx.templateContext as Record<string, unknown> | undefined;
+  const bodyProps = ctxTemplate
+    ? { ...ctxTemplate, ...resolvedProps }
+    : resolvedProps;
+  const emitted = await nodeToWebflow(body, compCtx, bodyProps);
+
+  // `acceptsStyles`: forward instance-level style / interactiveStyles
+  // overrides as ONE combo class on the body's emitted root, mirroring how
+  // SSR merges them onto the root node (ssrRenderer.ts:1244). All authored
+  // overrides — base, breakpoint, pseudo-state — fold into a single combo
+  // named after the instance's outer location so two instances of the same
+  // component on the same page don't share a single class.
+  if (
+    structured?.acceptsStyles
+    && emitted.length > 0
+    && (
+      (node.style && Object.keys(node.style as object).length > 0)
+      || (Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0)
+    )
+  ) {
+    const root = emitted[0];
+    if (root && typeof root === 'object') {
+      // The body root may not have needed a class on its own (e.g. a plain
+      // <section> without authored styles). Mint one so the combo has a
+      // primary class to attach to — uses the same `buildElementClass`
+      // identity emitHtmlNode would have produced for this root.
+      if (!root.className) {
+        const minted = withThemeSuffix(buildElementClass(compCtx, undefined), compCtx);
+        ctx.styleClasses.set(minted, { name: minted, base: {} });
+        root.className = minted;
+      }
+
+      const rawStyle = node.style as StyleObject | ResponsiveStyleObject | undefined;
+      const rawInteractive = node.interactiveStyles as InteractiveStyles | undefined;
+      const resolvedStyle = substituteVarsInStyle(
+        resolveStyleTemplates(rawStyle, parentProps),
+        ctx,
+      );
+      const resolvedInteractive = substituteVarsInInteractive(
+        resolveInteractiveStyleTemplates(rawInteractive, parentProps),
+        ctx,
+      );
+
+      // Stable per-instance combo name: `is-<5char hash>` where the hash is
+      // derived from the placement's full element-class identity in the OUTER
+      // tree. Two instances of the same component at different positions get
+      // distinct combos; the same instance produces the same name across
+      // re-imports. `mintInstanceComboName` resolves the rare case where two
+      // identities collapse to the same hash slice within one export.
+      const instanceLocClass = withThemeSuffix(buildElementClass(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);
+        // Webflow only honors a single combo class on top of the primary. If
+        // the body root already wears a StyleMapping-driven combo from
+        // `mapStylesToWebflow` (e.g. `is-size-small`), fold this instance
+        // override into a fresh merged class instead of stacking. Outer
+        // instance overrides land last so they win on key conflicts,
+        // mirroring SSR's merge order in `ssrRenderer.ts:1244`.
+        const existingComboName = Array.isArray(root.comboClasses) && root.comboClasses.length > 0
+          ? root.comboClasses[0]
+          : undefined;
+        const inner = existingComboName ? ctx.styleClasses.get(existingComboName) : undefined;
+        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];
+        }
+      }
+    }
+  }
+
+  // Mark the first emitted element as the component root so bundled scripts
+  // can find their instances at runtime via [data-component~="…"] and read
+  // their props via data-props. Mirrors ssrRenderer.ts:1311-1345 — same shape
+  // (`data-component` space-separated, `data-props` JSON keyed by component
+  // name) so component code runs unmodified in the published Webflow page.
+  // Only tag if the component actually ships JavaScript; otherwise the marker
+  // is dead weight.
+  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;
+
+      // Serialize defineVars-exposed props into data-props, keyed by component
+      // name so nested components don't clobber each other on a shared root.
+      const defineVars = structured.defineVars;
+      if (defineVars) {
+        const varsToExpose = defineVars === true
+          ? Object.keys(structured.interface || {})
+          : defineVars;
+        const propsForJS: Record<string, unknown> = {};
+        for (const varName of varsToExpose) {
+          if (resolvedProps[varName] !== undefined) {
+            propsForJS[varName] = resolvedProps[varName];
+          }
+        }
+
+        let existingPropsMap: Record<string, unknown> = {};
+        const existingPropsStr = root.attributes['data-props'];
+        if (typeof existingPropsStr === 'string' && existingPropsStr) {
+          try {
+            // Stored URL-encoded (see comment below) — decode before parsing.
+            const parsed = JSON.parse(decodeURIComponent(existingPropsStr));
+            if (parsed && typeof parsed === 'object') {
+              existingPropsMap = parsed as Record<string, unknown>;
+            }
+          } catch { /* ignore malformed */ }
+        }
+        existingPropsMap[node.component] = propsForJS;
+        // URL-encode the serialized JSON. Webflow's `<DOM>`-type element
+        // (used for `<input>`, `<label>` etc.) rejects attribute values
+        // containing double quotes via setAttribute. Encoding sidesteps that
+        // by removing literal `"` characters — the runtime IIFE in the JS
+        // bundle decodes via decodeURIComponent before JSON.parse.
+        root.attributes['data-props'] = encodeURIComponent(JSON.stringify(existingPropsMap));
+      }
+    }
+  }
+
+  return emitted;
 }
 
-function emitSlotMarker(
+async function emitSlotMarker(
   node: SlotMarker,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement[] {
+): Promise<WebflowElement[]> {
   // Use instance children passed via context to fill the slot
   if (ctx.slotChildren) {
-    // Switch back to parent context (page-level) for slot children
+    // Switch back to caller context so slot children's generated class names
+    // hash against the page that supplied them, not the slot-host component.
+    const restored = ctx.slotEmitContext;
     const parentCtx: WebflowEmitContext = {
       ...ctx,
+      ...(restored
+        ? {
+            fileType: restored.fileType,
+            fileName: restored.fileName,
+            elementPath: [...restored.elementPath],
+          }
+        : {}),
       slotChildren: undefined, // prevent infinite slot nesting
+      slotEmitContext: undefined, // consumed
+      slotInstanceProps: undefined, // consumed
     };
-    return convertChildren(ctx.slotChildren as any, parentCtx, instanceProps);
+    // Slot children's `{{prop}}` templates reference the OUTER component's
+    // interface (the component whose body authored these children), not the
+    // slot host's. `slotInstanceProps` captures that outer prop set in
+    // `emitInlineComponentBody`. Without this, a Heading with `text="{{title}}"`
+    // placed inside a `<Stack>` slot would look up `title` on Stack's props
+    // (where it doesn't exist) and emit an empty heading.
+    const slotProps = ctx.slotInstanceProps ?? instanceProps;
+    return convertChildren(ctx.slotChildren as any, parentCtx, slotProps);
   }
   // Fall back to slot defaults
   if (node.default) {
@@ -324,90 +1652,774 @@ function emitSlotMarker(
   return [];
 }
 
-function emitEmbedNode(
+async function emitEmbedNode(
   node: EmbedNode,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement {
-  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
-  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+): Promise<WebflowElement> {
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style as StyleObject | ResponsiveStyleObject | undefined,
+      instanceProps
+    ),
+    ctx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles as InteractiveStyles | undefined,
+      instanceProps
+    ),
+    ctx
+  );
 
   let className: string | undefined;
   if (style || (interactiveStyles && interactiveStyles.length > 0)) {
-    const elementClass = buildElementClass(ctx, node.label);
+    const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), ctx);
     const { primaryClass } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints
+      elementClass, style, interactiveStyles, ctx.breakpoints, ctx.responsiveScales
     );
+    substituteVarsInStyleClass(primaryClass, ctx);
     className = primaryClass.name;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
   }
 
-  const htmlStr = typeof node.html === 'string' ? node.html : '';
+  // `node.html` may be an HtmlMapping (`{_mapping: true, prop, values}`) bound
+  // to a component prop — e.g. an `Icon` component switches its inline SVG by
+  // the `icon` enum. Resolve it against the same layered prop context the
+  // runtime SSR uses, otherwise the embed silently exports as empty.
+  const props = buildTemplateProps(ctx, instanceProps);
+  let htmlStr: string;
+  if (isHtmlMapping(node.html)) {
+    htmlStr = resolveHtmlMapping(node.html, props) ?? '';
+  } else if (typeof node.html === 'string') {
+    htmlStr = hasCodeTemplates(node.html) ? processCodeTemplates(node.html, props) : node.html;
+  } else {
+    htmlStr = '';
+  }
 
-  const element: WebflowElement = {
-    tag: 'div',
-    rawHtml: htmlStr,
-  };
+  const element: WebflowElement = { 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 emitLinkNode(
+/**
+ * Rewrite an internal `/path` href to the current-locale Webflow URL. Other
+ * link forms (external, protocol-relative, anchor, mailto, tel, javascript,
+ * data, relative, empty) pass through unchanged.
+ *
+ * Webflow has no Designer API for binding `<a>` to a Page entity (Apr 2026),
+ * so this is a pure string rewrite that mirrors the URL structure
+ * `buildWebflow.ts` already produces for imported pages
+ * (`/`, `/${slug}`, `/${locale}`, `/${locale}/${slug}`).
+ */
+function resolveLinkHref(rawHref: string, ctx: WebflowEmitContext): string {
+  if (!rawHref) return rawHref;
+  // Only `^/` paths are candidates. `//` is protocol-relative — leave alone.
+  if (!rawHref.startsWith('/') || rawHref.startsWith('//')) return rawHref;
+  // No locale machinery wired in this context — nothing to translate against.
+  if (!ctx.i18nConfig || !ctx.locale || !ctx.slugMappings) return rawHref;
+
+  // Split off `?query` and `#fragment` so they survive translation, then
+  // reattach. Whichever comes first marks the boundary of the path.
+  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);
+  }
+
+  // Meno hrefs are authored in canonical (default-locale) form. Translate
+  // from default-locale → ctx.locale; `translatePath` falls back to the same
+  // slug + locale prefix for paths without an explicit slugMapping entry,
+  // which is the correct behavior for unlocalized pages.
+  const translated = translatePath(
+    path,
+    ctx.locale,
+    ctx.i18nConfig.defaultLocale,
+    ctx.i18nConfig.defaultLocale,
+    ctx.slugIndex
+  );
+
+  return translated + suffix;
+}
+
+async function emitLinkNode(
   node: LinkNode,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement {
-  const style = node.style as StyleObject | ResponsiveStyleObject | undefined;
-  const interactiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
+): Promise<WebflowElement> {
+  const style = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style as StyleObject | ResponsiveStyleObject | undefined,
+      instanceProps
+    ),
+    ctx
+  );
+  const interactiveStyles = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles as InteractiveStyles | undefined,
+      instanceProps
+    ),
+    ctx
+  );
 
+  // Always assign a class so we can default `text-decoration: none` —
+  // browsers underline `<a>` by default and source designs almost never
+  // override it. Mirrors the heading-margin default for `h1`–`h6`.
   let className: string | undefined;
-  if (style || (interactiveStyles && interactiveStyles.length > 0)) {
-    const elementClass = buildElementClass(ctx, node.label);
-    const { primaryClass } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints
+  let comboClassNames: string[] | undefined;
+  {
+    const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), ctx);
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
+      elementClass, style, interactiveStyles, 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);
+    }
   }
 
-  // Resolve href
+  // Resolve href, then rewrite internal page paths to the current-locale
+  // Webflow URL so links survive localized slugs and non-default-locale
+  // prefixes (`/about` → `/fr/à-propos`). External / anchor / mailto / tel
+  // / protocol-relative hrefs pass through unchanged.
   let href = '#';
   if (typeof node.href === 'string') {
-    href = instanceProps && hasTemplates(node.href)
-      ? resolveTemplate(node.href, instanceProps)
-      : node.href;
+    href = resolveStringTemplate(node.href, ctx, instanceProps);
   }
+  href = resolveLinkHref(href, ctx);
 
   const attributes: Record<string, string | number | boolean> = { 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: WebflowElement[] | undefined;
   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 = undefined;
   }
 
   const element: WebflowElement = { tag: 'a', attributes };
   if (className) element.className = className;
+  if (comboClassNames) element.comboClasses = comboClassNames;
   if (children) element.children = children;
 
   return element;
 }
 
+// ---------------------------------------------------------------------------
+// List nodes (prop + collection) — static expansion
+// ---------------------------------------------------------------------------
+
+function singularize(name: string): string {
+  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 makeI18nResolver(ctx: WebflowEmitContext): ValueResolver | undefined {
+  if (!ctx.locale || !ctx.i18nConfig) return undefined;
+  const { locale, i18nConfig } = ctx;
+  return (value: unknown) => resolveI18nValue(value, locale, i18nConfig);
+}
+
+/**
+ * Resolve i18n values inside a CMS item so list children see the right locale.
+ * Mirrors the pre-render shaping the SSR list does via templateContext.
+ */
+function resolveItemI18n(item: CMSItem, ctx: WebflowEmitContext): CMSItem {
+  if (!ctx.locale || !ctx.i18nConfig) return item;
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(item)) {
+    out[k] = isI18nValue(v) ? resolveI18nValue(v, ctx.locale, ctx.i18nConfig) : v;
+  }
+  return out as CMSItem;
+}
+
+async function getCollectionItemsForExport(
+  node: ListNode,
+  source: string,
+  ctx: WebflowEmitContext
+): Promise<CMSItem[]> {
+  if (!ctx.cmsService) return [];
+
+  let items: CMSItem[] = [];
+
+  // Reference list (`items: "{{cms.tagIds}}"` or `items: ["id1", "id2"]`)
+  if ((node as any).items) {
+    const itemsField = (node as any).items;
+    let resolvedIds: string | string[] | undefined;
+
+    if (typeof itemsField === 'string' && itemsField.startsWith('{{')) {
+      if (itemsField.startsWith('{{cms.') && ctx.cmsContext?.cms) {
+        const fieldPath = itemsField.slice(6, -2);
+        let value: unknown = ctx.cmsContext.cms;
+        for (const part of fieldPath.split('.')) {
+          if (value && typeof value === 'object' && part in (value as object)) {
+            value = (value as Record<string, unknown>)[part];
+          } else { value = undefined; break; }
+        }
+        if (value !== null && value !== undefined) {
+          resolvedIds = Array.isArray(value) ? value.map(v => String(v)) : String(value);
+        }
+      } else {
+        resolvedIds = resolveItemsTemplate(
+          itemsField,
+          (ctx.templateContext || { _type: 'template' }) as any
+        );
+      }
+      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 as CMSFilterCondition | CMSFilterCondition[] | Record<string, unknown> | undefined,
+      sort: node.sort,
+      limit: node.limit,
+      offset: node.offset,
+      excludeDraftLocale: ctx.locale,
+    });
+  }
+
+  if ((node as any).excludeCurrentItem && ctx.cmsContext?.cms?._id) {
+    const currentId = ctx.cmsContext.cms._id as string;
+    items = items.filter(it => it._id !== currentId);
+  }
+
+  return items;
+}
+
+function getPropItemsForExport(source: string, ctx: WebflowEmitContext, instanceProps?: Record<string, unknown>): unknown[] {
+  // Template expression like "{{items}}" or "{{category.items}}". SSR pre-
+  // substitutes these against the merged prop scope via `processStructure`
+  // before the list node is reached, so its `getPropItems` only needs to look
+  // at templateContext. The Webflow exporter walks the raw JSON, so we
+  // resolve here against both scopes: `templateContext` carries outer-list
+  // iteration variables (`{{category.items}}`); `instanceProps` carries the
+  // enclosing component's resolved props (`{{items}}` referring to the
+  // component's own `items` prop, the form generated by the editor).
+  if (source.startsWith('{{') && source.endsWith('}}')) {
+    const path = source.slice(2, -2).trim();
+    const ctxObj = ctx.templateContext as Record<string, unknown> | undefined;
+    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 [];
+  }
+  // Direct prop name — resolve from current component scope, then CMS context.
+  if (instanceProps && Array.isArray(instanceProps[source])) {
+    return instanceProps[source] as unknown[];
+  }
+  if (ctx.cmsContext?.cms) {
+    const cmsValue = (ctx.cmsContext.cms as Record<string, unknown>)[source];
+    if (Array.isArray(cmsValue)) return cmsValue;
+  }
+  return [];
+}
+
+/**
+ * Build a synthetic CMSItem whose every field is the binding sentinel string
+ * for that field slug. Used in bound mode so the existing template engine
+ * resolves `{{post.title}}` to a sentinel that the post-walk can rewrite into
+ * a `menoBind.textField` marker.
+ */
+function buildBindingPlaceholderItem(schema: CMSSchema | undefined): CMSItem {
+  const item: Record<string, unknown> = {};
+  if (schema?.fields) {
+    for (const fieldSlug of Object.keys(schema.fields)) {
+      item[fieldSlug] = `${MENO_BIND_SENTINEL_PREFIX}${fieldSlug}${MENO_BIND_SENTINEL_SUFFIX}`;
+    }
+  }
+  // System fields commonly referenced in templates (`{{post._url}}` for links,
+  // `{{post._slug}}` for hrefs). Webflow's binding panel exposes these as
+  // "Current item URL" / "Slug" — map back to the same names so the manual
+  // binding step is unambiguous.
+  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 as CMSItem;
+}
+
+/**
+ * Walk a rendered element subtree and convert binding sentinels into
+ * `menoBind` markers so the extension can surface them to the user. Sentinels
+ * appear in `textContent` (from `<h2>{{post.title}}</h2>`) or in attribute
+ * values (from `<a href="{{post._url}}">` / `<img src="{{post.cover}}">`).
+ *
+ * Exact-match sentinels become a clean `{textField}` / `{attrFields}` entry;
+ * partial matches (`/blog/__MENO_BIND__:_url:__`) record the binding hint but
+ * keep the literal text so the user can see the URL pattern context.
+ *
+ * Side effect: image inlining done by `maybeInlineLocalImage` for sentinel
+ * srcs leaks file bytes that point at no real asset. Strip them so the
+ * extension doesn't try to upload garbage.
+ */
+function applyBindingMarkers(el: WebflowElement): void {
+  // Text content
+  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: string[] = [];
+      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;
+  }
+
+  // Attributes
+  if (el.attributes) {
+    const attrFields: Record<string, string> = 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: string | undefined;
+        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 };
+    }
+  }
+
+  // Image inlining produced bytes for a sentinel src — drop them; user will
+  // re-bind the image to a real CMS field after insertion.
+  if (
+    el.menoBind?.attrFields?.src
+    && (el.imageDataBase64 || el.imageSrc)
+  ) {
+    delete el.imageDataBase64;
+    delete el.imageDataMime;
+    delete el.imageDataFileName;
+    delete el.imageSrc;
+  }
+
+  // Recurse
+  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);
+  }
+}
+
+/**
+ * Wrap any non-`<li>` child of a `<ul>`/`<ol>` element in a synthetic `<li>`.
+ * Webflow's Designer API enforces that the `List` preset only accepts
+ * `ListItem` children — so an `<a>` or `<div>` directly under `<ul>` (a common
+ * Meno pattern when a `list` node iterates a link-style item template inside
+ * a `<ul>` wrapper) is rejected at insert time with
+ * "Non-List Item can not be placed in a List." This pass corrects the structure
+ * at the source so the exported tree is structurally valid Webflow markup.
+ *
+ * Walks recursively, in-place. Idempotent: existing `<li>` children pass
+ * through untouched.
+ */
+export function normalizeListChildren(
+  elements: Array<WebflowElement | string> | undefined
+): void {
+  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): WebflowElement | string => {
+        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);
+  }
+}
+
+/**
+ * Static expansion of a List/CMS-list node. Mirrors SSR's `processList`:
+ * resolves the source (CMS query, prop array, or template expression),
+ * applies filter/sort/limit/offset, and emits children once per item with
+ * the per-item template context layered onto `instanceProps`.
+ */
+async function emitListNode(
+  node: ListNode,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): Promise<WebflowElement[]> {
+  const nodeType = node.type as string;
+  const isLegacyCMSList = nodeType === 'cms-list';
+  const sourceType = isLegacyCMSList ? 'collection' : (node.sourceType || 'prop');
+
+  if (sourceType === 'collection' && !ctx.cmsService) return [];
+
+  const rawSource = (node as any).source || (node as any).collection;
+  const source = typeof rawSource === 'string' ? rawSource : '';
+  const sourceIsResolved = Array.isArray(rawSource);
+
+  let variableName: string;
+  if (node.itemAs) variableName = node.itemAs;
+  else if (sourceType === 'collection') variableName = singularize(source);
+  else variableName = 'item';
+
+  // Bound mode: emit a single-item synthetic Collection List wrapper instead
+  // of expanding statically. Children are rendered ONCE against a sentinel
+  // placeholder item; sentinels are then converted to `menoBind` markers the
+  // extension picks up. Only reached for `sourceType === 'collection'`.
+  if (sourceType === 'collection' && ctx.bindCollectionLists && ctx.cmsService && source) {
+    const schema = ctx.cmsService.getSchema(source) || undefined;
+    const placeholder = buildBindingPlaceholderItem(schema);
+    const templateContext = buildTemplateContext(
+      variableName,
+      placeholder,
+      0,
+      1,
+      ctx.templateContext as any
+    );
+    const childCtx: WebflowEmitContext = {
+      ...ctx,
+      templateContext: templateContext as Record<string, unknown>,
+    };
+    const mergedProps: Record<string, unknown> = {
+      ...(instanceProps || {}),
+      ...templateContext,
+    };
+    const renderedChildren = node.children
+      ? await convertChildren(node.children as any, childCtx, mergedProps)
+      : [];
+    for (const child of renderedChildren) {
+      if (typeof child !== 'string') applyBindingMarkers(child);
+    }
+    return [{
+      tag: COLLECTION_LIST_TAG,
+      menoCollectionRef: source,
+      children: renderedChildren,
+    }];
+  }
+
+  let items: unknown[];
+  if (sourceType === 'collection') {
+    items = await getCollectionItemsForExport(node, source, ctx);
+  } else if (sourceIsResolved) {
+    items = rawSource as unknown[];
+  } 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: ListNode,
+  ctx: WebflowEmitContext,
+  instanceProps: Record<string, unknown> | undefined,
+  items: unknown[],
+  variableName: string,
+  source: string
+): Promise<WebflowElement[]> {
+  if (items.length === 0) return [];
+
+  const schema: CMSSchema | undefined = ctx.cmsService
+    ? (ctx.cmsService.getSchema(source) || undefined)
+    : undefined;
+
+  const out: WebflowElement[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const rawItem = items[i] as Record<string, unknown>;
+    const enriched = schema && ctx.locale && ctx.i18nConfig
+      ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig)
+      : (rawItem as CMSItem);
+    const item = resolveItemI18n(enriched, ctx);
+
+    const templateContext = buildTemplateContext(
+      variableName,
+      item,
+      i,
+      items.length,
+      (ctx.templateContext as any)
+    );
+
+    const childCtx: WebflowEmitContext = {
+      ...ctx,
+      templateContext: templateContext as Record<string, unknown>,
+    };
+
+    // Merge per-item context onto the instance prop scope so templates
+    // ({{item.title}}, {{post.field}}, {{itemIndex}}) resolve via the
+    // existing template helpers in this file.
+    const mergedProps: Record<string, unknown> = {
+      ...(instanceProps || {}),
+      ...templateContext,
+    };
+
+    if (node.children) {
+      const savedPath = [...childCtx.elementPath];
+      childCtx.elementPath = [...savedPath, i];
+      out.push(...(await convertChildren(node.children as any, childCtx, mergedProps)));
+      childCtx.elementPath = savedPath;
+    }
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// LocaleList — static link list per configured locale
+// ---------------------------------------------------------------------------
+
+async function emitLocaleListNode(
+  node: LocaleListNode,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>
+): Promise<WebflowElement[]> {
+  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 = new Map<string, string>();
+  for (const lc of ctx.i18nConfig.locales) {
+    if (lc.icon) localeIconMap.set(lc.code, lc.icon);
+  }
+
+  // Build container style class
+  const containerStyle = substituteVarsInStyle(
+    resolveStyleTemplates(
+      node.style as StyleObject | ResponsiveStyleObject | undefined,
+      instanceProps
+    ),
+    ctx
+  );
+  const containerInteractive = substituteVarsInInteractive(
+    resolveInteractiveStyleTemplates(
+      node.interactiveStyles as InteractiveStyles | undefined,
+      instanceProps
+    ),
+    ctx
+  );
+
+  let containerClass: string | undefined;
+  if (containerStyle || (containerInteractive && containerInteractive.length > 0)) {
+    const elementClass = withThemeSuffix(buildElementClass(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: unknown,
+    suffix: string
+  ): string | undefined => {
+    const resolved = substituteVarsInStyle(
+      resolveStyleTemplates(
+        style as StyleObject | ResponsiveStyleObject | undefined,
+        instanceProps
+      ),
+      ctx
+    );
+    if (!resolved) return undefined;
+    const className = withThemeSuffix(`${buildElementClass(ctx, node.label)}-${suffix}`, ctx);
+    const { primaryClass } = mapStylesToWebflow(className, resolved, undefined, ctx.breakpoints, ctx.responsiveScales);
+    substituteVarsInStyleClass(primaryClass, ctx);
+    if (Object.keys(primaryClass.base).length === 0
+      && !primaryClass.breakpoints
+      && !primaryClass.pseudoStates) return undefined;
+    ctx.styleClasses.set(primaryClass.name, primaryClass);
+    return primaryClass.name;
+  };
+
+  const itemClassName = buildSubClass((node as any).itemStyle, 'item');
+  const activeItemClassName = buildSubClass((node as any).activeItemStyle, 'item-active');
+  const separatorClassName = buildSubClass((node as any).separatorStyle, 'separator');
+  const flagClassName = buildSubClass((node as any).flagStyle, 'flag');
+
+  const linkChildren: WebflowElement[] = [];
+  for (let i = 0; i < localeLinks.length; i++) {
+    const link = localeLinks[i];
+    if (!showCurrent && link.isCurrent) continue;
+
+    if (i > 0 && showSeparator) {
+      const sep: WebflowElement = { tag: 'span' };
+      if (separatorClassName) sep.className = separatorClassName;
+      linkChildren.push(sep);
+    }
+
+    const anchor: WebflowElement = {
+      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: WebflowElement[] = [];
+    const icon = localeIconMap.get(link.locale);
+    if (showFlag && icon) {
+      const img: WebflowElement = {
+        tag: 'img',
+        attributes: { src: icon, alt: `${link.nativeName} flag` },
+      };
+      if (flagClassName) img.className = flagClassName;
+      innerChildren.push(img);
+    }
+
+    let displayText: string;
+    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: WebflowElement = {
+    tag: 'div',
+    attributes: { 'data-locale-list': 'true' },
+    children: linkChildren,
+  };
+  if (containerClass) wrapper.className = containerClass;
+
+  return [wrapper];
+}
+
 // ---------------------------------------------------------------------------
 // Children helper
 // ---------------------------------------------------------------------------
 
-function convertChildren(
+async function convertChildren(
   children: (ComponentNode | string)[] | string | ComponentNode | null | undefined,
   ctx: WebflowEmitContext,
   instanceProps?: Record<string, unknown>
-): WebflowElement[] {
+): Promise<WebflowElement[]> {
   if (!children) return [];
 
   if (typeof children === 'string') {