meno-core 1.0.47 → 1.0.49

package/lib/server/webflow/nodeToWebflow.test.ts

@@ -0,0 +1,3170 @@
+import { describe, expect, test } from 'bun:test';
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { nodeToWebflow, normalizeListChildren, type WebflowEmitContext } from './nodeToWebflow';
+import type { WebflowStyleClass, WebflowComponentDef, WebflowElement } from './types';
+import type { ComponentDefinition } from '../../shared/types/components';
+import type { ComponentNode } from '../../shared/types';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { DEFAULT_RESPONSIVE_SCALES, type ResponsiveScales } from '../../shared/responsiveScaling';
+import { setProjectRoot, getProjectRoot } from '../projectContext';
+
+const layoutDef: ComponentDefinition = {
+  component: {
+    structure: {
+      type: 'node',
+      tag: 'div',
+      children: [{ type: 'slot' }],
+    } as ComponentNode,
+  },
+};
+
+function makeCtx(
+  fileName: string,
+  styleClasses: Map<string, WebflowStyleClass>,
+  overrides?: Partial<WebflowEmitContext>
+): WebflowEmitContext {
+  return {
+    globalComponents: { Layout: layoutDef },
+    elementPath: [0],
+    fileType: 'page',
+    fileName,
+    breakpoints: DEFAULT_BREAKPOINTS,
+    styleClasses,
+    comboIdentityByName: new Map(),
+    ...overrides,
+  };
+}
+
+const SCALES_ON: ResponsiveScales = { ...DEFAULT_RESPONSIVE_SCALES, enabled: true };
+
+function pageRoot(firstChild: ComponentNode): ComponentNode {
+  return {
+    type: 'component',
+    component: 'Layout',
+    children: [firstChild],
+  } as ComponentNode;
+}
+
+describe('nodeToWebflow — heading margin defaults', () => {
+  test('h1 with no margin gets margin-top: 0 and margin-bottom: 0', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'h1', children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const h1 = els[0]! as { className?: string };
+    expect(h1.className).toBeTruthy();
+    const cls = styleClasses.get(h1.className!);
+    expect(cls?.base['margin-top']).toBe('0px');
+    expect(cls?.base['margin-bottom']).toBe('0px');
+  });
+
+  test('preserves explicit margin-bottom and only fills missing margin-top', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'h2',
+        style: { base: { marginBottom: '12px' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['margin-bottom']).toBe('12px');
+    expect(cls?.base['margin-top']).toBe('0px');
+  });
+
+  test('expands margin shorthand into per-side longhands', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'h3',
+        style: { base: { margin: '24px auto' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base.margin).toBeUndefined();
+    expect(cls?.base['margin-top']).toBe('24px');
+    expect(cls?.base['margin-right']).toBe('auto');
+    expect(cls?.base['margin-bottom']).toBe('24px');
+    expect(cls?.base['margin-left']).toBe('auto');
+  });
+
+  test('other tags (e.g. <div>) are not modified', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { color: 'red' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['margin-top']).toBeUndefined();
+    expect(cls?.base['margin-bottom']).toBeUndefined();
+  });
+});
+
+describe('nodeToWebflow — paragraph margin defaults', () => {
+  test('<p> with no margin gets margin-bottom: 0 and leaves margin-top alone', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'p', children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const p = els[0]! as { className?: string };
+    expect(p.className).toBeTruthy();
+    const cls = styleClasses.get(p.className!);
+    expect(cls?.base['margin-bottom']).toBe('0px');
+    expect(cls?.base['margin-top']).toBeUndefined();
+  });
+
+  test('<p> preserves explicit margin-bottom', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'p',
+        style: { base: { marginBottom: '12px' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['margin-bottom']).toBe('12px');
+  });
+
+  test('<p> margin shorthand expands into per-side longhands', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'p',
+        style: { base: { margin: '24px auto' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base.margin).toBeUndefined();
+    expect(cls?.base['margin-top']).toBe('24px');
+    expect(cls?.base['margin-right']).toBe('auto');
+    expect(cls?.base['margin-bottom']).toBe('24px');
+    expect(cls?.base['margin-left']).toBe('auto');
+  });
+});
+
+describe('nodeToWebflow — list margin defaults', () => {
+  test('<ul> with no margin gets margin-bottom: 0', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'ul', children: [{ type: 'node', tag: 'li', children: 'x' }] } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const ul = els[0]! as { className?: string };
+    expect(ul.className).toBeTruthy();
+    const cls = styleClasses.get(ul.className!);
+    expect(cls?.base['margin-bottom']).toBe('0px');
+  });
+
+  test('<ol> with no margin gets margin-bottom: 0', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'ol', children: [{ type: 'node', tag: 'li', children: 'x' }] } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['margin-bottom']).toBe('0px');
+  });
+
+  test('<ul> preserves explicit margin-bottom', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'ul',
+        style: { base: { marginBottom: '20px' } },
+        children: [{ type: 'node', tag: 'li', children: 'x' }],
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['margin-bottom']).toBe('20px');
+  });
+});
+
+describe('nodeToWebflow — grid rows default', () => {
+  test('display: grid with no grid-template-rows gets 1fr', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { display: 'grid', gridTemplateColumns: '1fr 1fr' } },
+        children: 'x',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['grid-template-rows']).toBe('1fr');
+  });
+
+  test('display: inline-grid is also defaulted', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { display: 'inline-grid' } },
+        children: 'x',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['grid-template-rows']).toBe('1fr');
+  });
+
+  test('explicit grid-template-rows is preserved', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { display: 'grid', gridTemplateRows: 'auto auto' } },
+        children: 'x',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['grid-template-rows']).toBe('auto auto');
+  });
+
+  test('grid shorthand opts out of default', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { display: 'grid', grid: 'auto-flow / 1fr 1fr' } },
+        children: 'x',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['grid-template-rows']).toBeUndefined();
+  });
+
+  test('non-grid display does not get grid-template-rows', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { display: 'flex' } },
+        children: 'x',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['grid-template-rows']).toBeUndefined();
+  });
+});
+
+describe('nodeToWebflow — link defaults', () => {
+  test('unstyled <a> still gets a class with text-decoration: none', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'link', href: '/about', children: 'About' } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const link = els[0] as any;
+    expect(link.tag).toBe('a');
+    expect(link.className).toBeTruthy();
+    const cls = styleClasses.get(link.className!);
+    expect(cls?.base['text-decoration']).toBe('none');
+  });
+
+  test('unstyled <button> gets text-decoration: none (it is rendered via LinkBlock)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'button', children: 'Toggle' } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const btn = els[0] as any;
+    expect(btn.tag).toBe('button');
+    expect(btn.className).toBeTruthy();
+    const cls = styleClasses.get(btn.className!);
+    expect(cls?.base['text-decoration']).toBe('none');
+  });
+
+  test('explicit text-decoration on <a> is preserved', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'link',
+        href: '#',
+        style: { base: { textDecoration: 'underline' } },
+        children: 'Click',
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['text-decoration']).toBe('underline');
+  });
+});
+
+describe('nodeToWebflow — link href rewriting', () => {
+  const i18nConfig = {
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' },
+      { code: 'fr', name: 'French', nativeName: 'Français', langTag: 'fr-FR' },
+    ],
+  };
+
+  const slugMappings = [
+    { pageId: 'about', slugs: { en: 'about', fr: 'à-propos' } },
+    { pageId: 'index', slugs: { en: '', fr: '' } },
+  ];
+
+  function linkCtx(locale: string) {
+    return makeCtx('about', new Map<string, WebflowStyleClass>(), {
+      i18nConfig,
+      locale,
+      slugMappings,
+      pagePath: locale === 'en' ? '/about' : `/${locale}/à-propos`,
+    });
+  }
+
+  async function emitHref(node: ComponentNode, locale: string): Promise<string> {
+    const els = await nodeToWebflow(node, linkCtx(locale));
+    return (els[0] as any).attributes.href as string;
+  }
+
+  test('external https URL passes through unchanged', async () => {
+    const href = await emitHref(
+      { type: 'link', href: 'https://example.com/x', children: 'x' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('https://example.com/x');
+  });
+
+  test('protocol-relative URL passes through unchanged', async () => {
+    const href = await emitHref(
+      { type: 'link', href: '//cdn.example.com/a.js', children: 'x' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('//cdn.example.com/a.js');
+  });
+
+  test('mailto/tel/anchor pass through unchanged', async () => {
+    expect(await emitHref(
+      { type: 'link', href: 'mailto:hi@example.com', children: 'x' } as ComponentNode, 'fr'
+    )).toBe('mailto:hi@example.com');
+    expect(await emitHref(
+      { type: 'link', href: 'tel:+15551234', children: 'x' } as ComponentNode, 'fr'
+    )).toBe('tel:+15551234');
+    expect(await emitHref(
+      { type: 'link', href: '#section', children: 'x' } as ComponentNode, 'fr'
+    )).toBe('#section');
+  });
+
+  test('internal /about translates to localized slug for non-default locale', async () => {
+    const href = await emitHref(
+      { type: 'link', href: '/about', children: 'About' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('/fr/à-propos');
+  });
+
+  test('internal /about stays canonical on default-locale page', async () => {
+    const href = await emitHref(
+      { type: 'link', href: '/about', children: 'About' } as ComponentNode,
+      'en'
+    );
+    expect(href).toBe('/about');
+  });
+
+  test('internal href with #fragment preserves fragment after rewrite', async () => {
+    const href = await emitHref(
+      { type: 'link', href: '/about#team', children: 'Team' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('/fr/à-propos#team');
+  });
+
+  test('internal href with ?query preserves query after rewrite', async () => {
+    const href = await emitHref(
+      { type: 'link', href: '/about?ref=hero', children: 'About' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('/fr/à-propos?ref=hero');
+  });
+
+  test('unknown internal path passes through silently with locale prefix', async () => {
+    // /missing has no slugMapping entry — translatePath falls back to
+    // applying the locale prefix to the same slug. No warnings emitted.
+    const href = await emitHref(
+      { type: 'link', href: '/missing', children: 'x' } as ComponentNode,
+      'fr'
+    );
+    expect(href).toBe('/fr/missing');
+  });
+
+  test('without i18n context, internal hrefs pass through unchanged', async () => {
+    const els = await nodeToWebflow(
+      { type: 'link', href: '/about', children: 'About' } as ComponentNode,
+      makeCtx('index', new Map<string, WebflowStyleClass>())
+    );
+    expect((els[0] as any).attributes.href).toBe('/about');
+  });
+});
+
+describe('nodeToWebflow — bare color tokens resolve to theme hex', () => {
+  test('button with bare color token gets wrapped and resolved against themeVars', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'button',
+        style: { base: { backgroundColor: 'text', color: 'background' } },
+        children: 'Submit',
+      } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        themeVars: { light: { '--text': '#050505', '--background': '#ffffff' } },
+        defaultTheme: 'light',
+      })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['background-color']).toBe('#050505');
+    expect(cls?.base.color).toBe('#ffffff');
+  });
+
+  test('link with var(--token) resolves to theme hex', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'link',
+        href: '/about',
+        style: { base: { color: 'var(--text)' } },
+        children: 'About',
+      } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        themeVars: { light: { '--text': '#050505' } },
+        defaultTheme: 'light',
+      })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base.color).toBe('#050505');
+  });
+
+  test('unknown currentTheme falls back to defaultTheme so var(--text) still resolves', async () => {
+    // Mirrors a project whose colors.json defines `light/muted/dark` but a
+    // component's interface defaults `theme: "primary"`. At runtime
+    // `[theme="primary"]` has no rule, so the browser inherits `:root`'s
+    // default-theme vars; the exporter must do the same instead of leaving
+    // `var(--text)` literal.
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        attributes: { theme: 'primary' },
+        style: { base: { backgroundColor: 'var(--text)' } },
+      } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        themeVars: { light: { '--text': '#050505' } },
+        defaultTheme: 'light',
+      })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['background-color']).toBe('#050505');
+  });
+
+  test('CSS-named colors are not wrapped (transparent stays transparent)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { backgroundColor: 'transparent' } },
+      } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        themeVars: { light: { '--transparent': '#ff0000' } },
+        defaultTheme: 'light',
+      })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['background-color']).toBe('transparent');
+  });
+});
+
+describe('nodeToWebflow — image inlining for relative srcs', () => {
+  const PNG_1X1 = Buffer.from(
+    '89504e470d0a1a0a0000000d49484452000000010000000108020000009077' +
+      '53de0000000c4944415478da6364f8ffff3f0005fe02fea636e1a30000000049454e44ae426082',
+    'hex'
+  );
+
+  let prevRoot: string;
+  let tmpDir: string;
+
+  function setupProject(): void {
+    prevRoot = getProjectRoot();
+    tmpDir = mkdtempSync(join(tmpdir(), 'meno-webflow-test-'));
+    mkdirSync(join(tmpDir, 'images'), { recursive: true });
+    writeFileSync(join(tmpDir, 'images', 'foo.png'), PNG_1X1);
+    setProjectRoot(tmpDir);
+  }
+
+  function teardownProject(): void {
+    setProjectRoot(prevRoot);
+    rmSync(tmpDir, { recursive: true, force: true });
+  }
+
+  test('relative <img> src reads file and stashes base64 bytes', async () => {
+    setupProject();
+    try {
+      const styleClasses = new Map<string, WebflowStyleClass>();
+      const els = await nodeToWebflow(
+        {
+          type: 'node',
+          tag: 'img',
+          attributes: { src: '/images/foo.png', alt: 'Foo' },
+        } as ComponentNode,
+        makeCtx('index', styleClasses)
+      );
+      const img = els[0] as any;
+      expect(img.tag).toBe('img');
+      expect(img.attributes?.src).toBe('/images/foo.png');
+      expect(img.imageDataMime).toBe('image/png');
+      expect(img.imageDataFileName).toBe('foo.png');
+      const decoded = Buffer.from(img.imageDataBase64!, 'base64');
+      expect(decoded.equals(PNG_1X1)).toBe(true);
+    } finally {
+      teardownProject();
+    }
+  });
+
+  test('absolute https <img> src is left alone (no inlining)', async () => {
+    setupProject();
+    try {
+      const styleClasses = new Map<string, WebflowStyleClass>();
+      const els = await nodeToWebflow(
+        {
+          type: 'node',
+          tag: 'img',
+          attributes: { src: 'https://example.com/x.png' },
+        } as ComponentNode,
+        makeCtx('index', styleClasses)
+      );
+      const img = els[0] as any;
+      expect(img.attributes?.src).toBe('https://example.com/x.png');
+      expect(img.imageDataBase64).toBeUndefined();
+      expect(img.imageDataMime).toBeUndefined();
+    } finally {
+      teardownProject();
+    }
+  });
+
+  test('missing local file leaves attributes.src alone', async () => {
+    setupProject();
+    try {
+      const styleClasses = new Map<string, WebflowStyleClass>();
+      const els = await nodeToWebflow(
+        {
+          type: 'node',
+          tag: 'img',
+          attributes: { src: '/images/missing.webp' },
+        } as ComponentNode,
+        makeCtx('index', styleClasses)
+      );
+      const img = els[0] as any;
+      expect(img.attributes?.src).toBe('/images/missing.webp');
+      expect(img.imageDataBase64).toBeUndefined();
+    } finally {
+      teardownProject();
+    }
+  });
+});
+
+describe('nodeToWebflow — i18n rich-text props through nested {{template}}', () => {
+  // Reproduces the Activy hero bug: a section component receives an i18n
+  // rich-text prop, then forwards it via `{{title}}` into a nested Heading
+  // (which renders as `<h{{size}}>{{text}}</h{{size}}>`). The nested
+  // Heading must end up with the flattened locale string as `textContent`,
+  // not an empty element.
+  const i18nConfig = {
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' },
+      { code: 'pl', name: 'Polish', nativeName: 'Polski', langTag: 'pl-PL' },
+    ],
+  };
+
+  const heading: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'h{{size}}',
+        children: ['{{text}}'],
+      } as ComponentNode,
+      interface: {
+        text: { type: 'rich-text', default: 'Heading' },
+        size: { type: 'string', default: '1' },
+      },
+    },
+  };
+
+  const paragraph: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'p',
+        children: ['{{text}}'],
+      } as ComponentNode,
+      interface: {
+        text: { type: 'rich-text', default: 'Text' },
+      },
+    },
+  };
+
+  const hero: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [
+          {
+            type: 'component',
+            component: 'Heading',
+            props: { text: '{{title}}', size: '1' },
+          },
+          {
+            type: 'component',
+            component: 'Paragraph',
+            props: { text: '{{text}}' },
+          },
+        ],
+      } as ComponentNode,
+      interface: {
+        title: { type: 'rich-text', default: 'Title' },
+        text: { type: 'rich-text', default: 'Body' },
+      },
+    },
+  };
+
+  // Slot host: a `<Stack>` whose body contains a single `<slot/>`. Mirrors
+  // the activy `Stack` / `Section` / `SplitContent` components — none of them
+  // declare a `title` or `text` prop. Without slotInstanceProps, a Heading
+  // placed inside Stack would look up `{{title}}` on Stack's resolved props
+  // and emit an empty element.
+  const stack: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'div',
+        children: [{ type: 'slot' }],
+      } as ComponentNode,
+      interface: {},
+    },
+  };
+
+  // Hero variant: nests its slotted children INSIDE a Stack instance to
+  // reproduce the real Activy structure (`Section > SplitContent > Stack >
+  // Heading`). Templates inside Heading must still resolve against Hero's
+  // props, not Stack's.
+  const heroWithSlotHost: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [
+          {
+            type: 'component',
+            component: 'Stack',
+            children: [
+              {
+                type: 'component',
+                component: 'Heading',
+                props: { text: '{{title}}', size: '1' },
+              },
+              {
+                type: 'component',
+                component: 'Paragraph',
+                props: { text: '{{text}}' },
+              },
+            ],
+          },
+        ],
+      } as ComponentNode,
+      interface: {
+        title: { type: 'rich-text', default: 'Title' },
+        text: { type: 'rich-text', default: 'Body' },
+      },
+    },
+  };
+
+  test('i18n rich-text title piped through {{title}} survives as flattened textContent', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heroInstance: ComponentNode = {
+      type: 'component',
+      component: 'Hero',
+      props: {
+        title: {
+          _i18n: true,
+          en: 'Boost your team\'s <span class="span">health</span> and <span class="span is-orange">culture</span>',
+          pl: 'Wzmocnij <span class="span">zdrowie</span> i <span class="span is-orange">kulturę</span> twojego zespołu',
+        },
+        text: {
+          _i18n: true,
+          en: 'Increase employee engagement and productivity through personalized sports challenges.',
+          pl: 'Zwiększ zaangażowanie i wydajność pracowników dzięki spersonalizowanym wyzwaniom sportowym.',
+        },
+      },
+    } as ComponentNode;
+
+    const els = await nodeToWebflow(
+      pageRoot(heroInstance),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Hero: hero, Heading: heading, Paragraph: paragraph },
+        i18nConfig,
+        locale: 'en',
+      })
+    );
+
+    // Layout wraps Hero (section) which wraps Heading (h1) and Paragraph (p).
+    const layoutEl = els[0]! as WebflowElement;
+    const sectionEl = layoutEl.children![0] as WebflowElement;
+    const h1 = sectionEl.children![0] as WebflowElement;
+    const p = sectionEl.children![1] as WebflowElement;
+
+    expect(h1.tag).toBe('h1');
+    expect(h1.textContent).toBe("Boost your team's health and culture");
+    expect(p.tag).toBe('p');
+    expect(p.textContent).toBe('Increase employee engagement and productivity through personalized sports challenges.');
+  });
+
+  test('i18n plain string title piped through {{title}} survives as textContent', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heroInstance: ComponentNode = {
+      type: 'component',
+      component: 'Hero',
+      props: {
+        title: { _i18n: true, en: 'Plain English title', pl: 'Polski tytuł' },
+        text: { _i18n: true, en: 'Plain English body', pl: 'Polski tekst' },
+      },
+    } as ComponentNode;
+
+    const els = await nodeToWebflow(
+      pageRoot(heroInstance),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Hero: hero, Heading: heading, Paragraph: paragraph },
+        i18nConfig,
+        locale: 'pl',
+      })
+    );
+
+    const layoutEl = els[0]! as WebflowElement;
+    const sectionEl = layoutEl.children![0] as WebflowElement;
+    const h1 = sectionEl.children![0] as WebflowElement;
+    const p = sectionEl.children![1] as WebflowElement;
+
+    expect(h1.textContent).toBe('Polski tytuł');
+    expect(p.textContent).toBe('Polski tekst');
+  });
+
+  test('Heading nested inside a Stack <slot/> still resolves {{title}} from Hero', async () => {
+    // Reproduces the real Activy bug: `Hero > Section > SplitContent > Stack
+    // > Heading`. Without `slotInstanceProps` on the emit context, the
+    // Heading's `{{title}}` template would resolve against Stack's resolved
+    // props (which has no `title`) and emit an empty <h1>.
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heroInstance: ComponentNode = {
+      type: 'component',
+      component: 'Hero',
+      props: {
+        title: {
+          _i18n: true,
+          en: 'Boost your team\'s <span class="span">health</span> and <span class="span is-orange">culture</span>',
+          pl: 'Wzmocnij zdrowie i kulturę',
+        },
+        text: { _i18n: true, en: 'Long English body.', pl: 'Polskie ciało.' },
+      },
+    } as ComponentNode;
+
+    const els = await nodeToWebflow(
+      pageRoot(heroInstance),
+      makeCtx('index', styleClasses, {
+        globalComponents: {
+          Layout: layoutDef,
+          Hero: heroWithSlotHost,
+          Stack: stack,
+          Heading: heading,
+          Paragraph: paragraph,
+        },
+        i18nConfig,
+        locale: 'en',
+      })
+    );
+
+    // Layout > section > stack-div > [h1, p]
+    const layoutEl = els[0]! as WebflowElement;
+    const sectionEl = layoutEl.children![0] as WebflowElement;
+    const stackDiv = sectionEl.children![0] as WebflowElement;
+    const h1 = stackDiv.children![0] as WebflowElement;
+    const p = stackDiv.children![1] as WebflowElement;
+
+    expect(h1.tag).toBe('h1');
+    expect(h1.textContent).toBe("Boost your team's health and culture");
+    expect(p.tag).toBe('p');
+    expect(p.textContent).toBe('Long English body.');
+  });
+
+  test('img src="{{image}}" inside a Stack <slot/> resolves Hero.image and inlines bytes', async () => {
+    // Companion to the heading test: the SplitContent right-column `<Image>`
+    // (with `attributes.src = "{{image}}"`) is also nested inside a slot
+    // host. Without the fix, src resolves to "" and the Webflow extension
+    // emits an empty Image preset (the dashed-corner placeholder users see).
+    const styleClasses = new Map<string, WebflowStyleClass>();
+
+    // Set up a project root with a fixture image so maybeInlineLocalImage
+    // can read it from disk.
+    const PNG_1X1 = Buffer.from(
+      '89504e470d0a1a0a0000000d49484452000000010000000108020000009077' +
+        '53de0000000c4944415478da6364f8ffff3f0005fe02fea636e1a30000000049454e44ae426082',
+      'hex'
+    );
+    const prevRoot = getProjectRoot();
+    const tmpDir = mkdtempSync(join(tmpdir(), 'meno-webflow-slot-test-'));
+    mkdirSync(join(tmpDir, 'images'), { recursive: true });
+    writeFileSync(join(tmpDir, 'images', 'hero.png'), PNG_1X1);
+    setProjectRoot(tmpDir);
+
+    try {
+      const heroWithImage: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [
+              {
+                type: 'component',
+                component: 'Stack',
+                children: [
+                  {
+                    type: 'node',
+                    tag: 'img',
+                    attributes: { src: '{{image}}', alt: 'Hero' },
+                  },
+                ],
+              },
+            ],
+          } as ComponentNode,
+          interface: {
+            image: { type: 'file', default: '/images/placeholder.png' },
+          },
+        },
+      };
+
+      const heroInstance: ComponentNode = {
+        type: 'component',
+        component: 'Hero',
+        props: { image: '/images/hero.png' },
+      } as ComponentNode;
+
+      const els = await nodeToWebflow(
+        pageRoot(heroInstance),
+        makeCtx('index', styleClasses, {
+          globalComponents: {
+            Layout: layoutDef,
+            Hero: heroWithImage,
+            Stack: stack,
+          },
+          i18nConfig,
+          locale: 'en',
+        })
+      );
+
+      const layoutEl = els[0]! as WebflowElement;
+      const sectionEl = layoutEl.children![0] as WebflowElement;
+      const stackDiv = sectionEl.children![0] as WebflowElement;
+      const img = stackDiv.children![0] as any;
+
+      expect(img.tag).toBe('img');
+      expect(img.attributes?.src).toBe('/images/hero.png');
+      expect(img.imageDataMime).toBe('image/png');
+      expect(img.imageDataFileName).toBe('hero.png');
+      const decoded = Buffer.from(img.imageDataBase64!, 'base64');
+      expect(decoded.equals(PNG_1X1)).toBe(true);
+    } finally {
+      setProjectRoot(prevRoot);
+      rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+});
+
+describe('nodeToWebflow — slot context restoration', () => {
+  test('slot children from different pages do not collide on class names', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+
+    const heroH1: ComponentNode = {
+      type: 'node',
+      tag: 'h1',
+      style: { base: { fontSize: '60px', fontWeight: '600' } },
+      children: 'Hero',
+    } as ComponentNode;
+
+    const subtitleSpan: ComponentNode = {
+      type: 'node',
+      tag: 'span',
+      style: { base: { fontSize: '14px', fontWeight: '700', textTransform: 'uppercase' } },
+      children: 'Subtitle',
+    } as ComponentNode;
+
+    const indexEls = await nodeToWebflow(pageRoot(heroH1), makeCtx('index', styleClasses));
+    const blogEls = await nodeToWebflow(pageRoot(subtitleSpan), makeCtx('blog', styleClasses));
+
+    const indexH1 = (indexEls[0]!.children![0] as any) as { tag: string; className?: string };
+    const blogSpan = (blogEls[0]!.children![0] as any) as { tag: string; className?: string };
+
+    expect(indexH1.tag).toBe('h1');
+    expect(blogSpan.tag).toBe('span');
+    expect(indexH1.className).toBeTruthy();
+    expect(blogSpan.className).toBeTruthy();
+    // Distinct keys → both styles survive in the shared Map.
+    expect(indexH1.className).not.toBe(blogSpan.className);
+
+    const h1Class = styleClasses.get(indexH1.className!);
+    const spanClass = styleClasses.get(blogSpan.className!);
+    expect(h1Class?.base['font-size']).toBe('60px');
+    expect(h1Class?.base['font-weight']).toBe('600');
+    expect(spanClass?.base['font-size']).toBe('14px');
+    expect(spanClass?.base['text-transform']).toBe('uppercase');
+  });
+
+  test('slot child class name is derived from the page that supplied it', async () => {
+    const indexClasses = new Map<string, WebflowStyleClass>();
+    const blogClasses = new Map<string, WebflowStyleClass>();
+
+    const sameShape: ComponentNode = {
+      type: 'node',
+      tag: 'h1',
+      style: { base: { fontSize: '60px' } },
+      children: 'Hero',
+    } as ComponentNode;
+
+    const indexEls = await nodeToWebflow(pageRoot(sameShape), makeCtx('index', indexClasses));
+    const blogEls = await nodeToWebflow(pageRoot(sameShape), makeCtx('blog', blogClasses));
+
+    const indexH1 = (indexEls[0]!.children![0] as any) as { className?: string };
+    const blogH1 = (blogEls[0]!.children![0] as any) as { className?: string };
+
+    // Same shape under different pages → page name flows into the class name.
+    expect(indexH1.className).toContain('index');
+    expect(blogH1.className).toContain('blog');
+    expect(indexH1.className).not.toBe(blogH1.className);
+  });
+});
+
+describe('nodeToWebflow — slot forwarding through wrapper components', () => {
+  // Mirrors the real Asseco bug: HeaderSimpleCentered's body places `<Section>`
+  // (a wrapper component) whose own structure delegates to a `<Container>` with
+  // `children: [{type:'slot'}]`. The inner slot marker references Section's
+  // outer slot, NOT Container's — so it must be substituted with Section's
+  // instance children before Container is expanded. Without forwarding, the
+  // `[Stack]` slot content gets lost when it crosses the Container wrapper.
+  const containerForwarder: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'div',
+        label: 'Container',
+        children: [{ type: 'slot' }],
+      } as ComponentNode,
+      interface: {},
+    },
+  };
+
+  const sectionWithContainerSlot: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'div',
+        label: 'Section',
+        children: [
+          {
+            type: 'component',
+            component: 'Container',
+            children: [{ type: 'slot' }],
+          },
+        ],
+      } as ComponentNode,
+      interface: {},
+    },
+  };
+
+  const headerSimple: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'component',
+        component: 'Section',
+        children: [
+          {
+            type: 'component',
+            component: 'Stack',
+            children: [
+              { type: 'node', tag: 'h1', children: '{{title}}' },
+              { type: 'node', tag: 'p', children: '{{text}}' },
+            ],
+          },
+        ],
+      } as ComponentNode,
+      interface: {
+        title: { type: 'string', default: 'Default Title' },
+        text: { type: 'string', default: 'Default Body' },
+      },
+    },
+  };
+
+  const stack: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'div',
+        label: 'Stack',
+        children: [{ type: 'slot' }],
+      } as ComponentNode,
+      interface: {},
+    },
+  };
+
+  test('slot inside a wrapper component\'s children is forwarded through', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const headerInstance: ComponentNode = {
+      type: 'component',
+      component: 'HeaderSimpleCentered',
+      props: {
+        title: 'Real Title',
+        text: 'Real Body',
+      },
+    } as ComponentNode;
+
+    const els = await nodeToWebflow(
+      headerInstance,
+      makeCtx('index', styleClasses, {
+        globalComponents: {
+          HeaderSimpleCentered: headerSimple,
+          Section: sectionWithContainerSlot,
+          Container: containerForwarder,
+          Stack: stack,
+        },
+      })
+    );
+
+    // section > container > stack > [h1, p]
+    const sectionEl = els[0]! as WebflowElement;
+    expect(sectionEl.tag).toBe('div');
+    const containerEl = sectionEl.children![0] as WebflowElement;
+    expect(containerEl.tag).toBe('div');
+    expect(containerEl.children?.length).toBeGreaterThan(0);
+    const stackEl = containerEl.children![0] as WebflowElement;
+    expect(stackEl.tag).toBe('div');
+    const h1 = stackEl.children![0] as WebflowElement;
+    const p = stackEl.children![1] as WebflowElement;
+    expect(h1.tag).toBe('h1');
+    expect(h1.textContent).toBe('Real Title');
+    expect(p.tag).toBe('p');
+    expect(p.textContent).toBe('Real Body');
+  });
+
+  test('forwarded slot children resolve templates against the OUTER component\'s props', async () => {
+    // The Stack inside HeaderSimpleCentered is forwarded through Section >
+    // Container, but its h1's `{{title}}` template must still resolve against
+    // HeaderSimpleCentered's props — not Container's (which is empty).
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const headerInstance: ComponentNode = {
+      type: 'component',
+      component: 'HeaderSimpleCentered',
+      // Use defaults — if the template resolves against the wrong scope, we'd
+      // get an empty string instead of the default value.
+    } as ComponentNode;
+
+    const els = await nodeToWebflow(
+      headerInstance,
+      makeCtx('index', styleClasses, {
+        globalComponents: {
+          HeaderSimpleCentered: headerSimple,
+          Section: sectionWithContainerSlot,
+          Container: containerForwarder,
+          Stack: stack,
+        },
+      })
+    );
+
+    const sectionEl = els[0]! as WebflowElement;
+    const containerEl = sectionEl.children![0] as WebflowElement;
+    const stackEl = containerEl.children![0] as WebflowElement;
+    const h1 = stackEl.children![0] as WebflowElement;
+    expect(h1.textContent).toBe('Default Title');
+  });
+
+  test('slot forwarding falls back to slot default when no outer slot children exist', async () => {
+    // A wrapper with `{type:'slot', default: [...]}` and no outer slot children
+    // should fall back to the default content when forwarded.
+    const containerWithDefault: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'div',
+          label: 'Container',
+          children: [
+            {
+              type: 'slot',
+              default: [{ type: 'node', tag: 'p', children: 'Empty container' }],
+            } as unknown as ComponentNode,
+          ],
+        } as ComponentNode,
+        interface: {},
+      },
+    };
+
+    const sectionWrapper: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'div',
+          children: [
+            {
+              type: 'component',
+              component: 'Container',
+              children: [
+                {
+                  type: 'slot',
+                  default: [{ type: 'node', tag: 'span', children: 'fallback' }],
+                } as unknown as ComponentNode,
+              ],
+            },
+          ],
+        } as ComponentNode,
+        interface: {},
+      },
+    };
+
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'component', component: 'Section' } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        globalComponents: { Section: sectionWrapper, Container: containerWithDefault },
+      })
+    );
+
+    const sectionEl = els[0]! as WebflowElement;
+    const containerEl = sectionEl.children![0] as WebflowElement;
+    // Section's slot marker (with default 'fallback') is forwarded to Container's
+    // children. Container's outer-slot has no actual children at the page level,
+    // so the forwarder falls back to Section's slot default ('fallback').
+    const fallback = containerEl.children![0] as WebflowElement;
+    expect(fallback.tag).toBe('span');
+    expect(fallback.textContent).toBe('fallback');
+  });
+});
+
+describe('nodeToWebflow — responsive auto-scaling', () => {
+  test('raw font-size scales into per-breakpoint entries when scales are enabled', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { fontSize: '48px' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses, { responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['font-size']).toBe('48px');
+    // 48 + (48 - 16) * (0.88 - 1) = 44.16 → 44
+    expect(cls?.breakpoints?.medium?.['font-size']).toBe('44px');
+    // 48 + (48 - 16) * (0.75 - 1) = 40
+    expect(cls?.breakpoints?.small?.['font-size']).toBe('40px');
+  });
+
+  test('raw multi-value padding shorthand expands and scales each side', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { padding: '40px 80px' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses, { responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['padding']).toBeUndefined();
+    expect(cls?.base['padding-top']).toBe('40px');
+    expect(cls?.base['padding-right']).toBe('80px');
+    expect(cls?.base['padding-bottom']).toBe('40px');
+    expect(cls?.base['padding-left']).toBe('80px');
+    // padding tablet scale 0.75: 40+(40-16)*(0.75-1)=34, 80+(80-16)*(0.75-1)=64
+    expect(cls?.breakpoints?.medium?.['padding-top']).toBe('34px');
+    expect(cls?.breakpoints?.medium?.['padding-right']).toBe('64px');
+    expect(cls?.breakpoints?.medium?.['padding-bottom']).toBe('34px');
+    expect(cls?.breakpoints?.medium?.['padding-left']).toBe('64px');
+    // padding mobile scale 0.5: 40+(40-16)*(0.5-1)=28, 80+(80-16)*(0.5-1)=48
+    expect(cls?.breakpoints?.small?.['padding-top']).toBe('28px');
+    expect(cls?.breakpoints?.small?.['padding-right']).toBe('48px');
+    expect(cls?.breakpoints?.small?.['padding-bottom']).toBe('28px');
+    expect(cls?.breakpoints?.small?.['padding-left']).toBe('48px');
+  });
+
+  test('explicit per-breakpoint override beats auto-scaling at that tier only', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: {
+          base: { fontSize: '48px' },
+          tablet: { fontSize: '32px' },
+        },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses, { responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    // Author override wins at medium.
+    expect(cls?.breakpoints?.medium?.['font-size']).toBe('32px');
+    // Mobile still gets auto-scaled from base (48 → 40).
+    expect(cls?.breakpoints?.small?.['font-size']).toBe('40px');
+  });
+
+  test('non-scalable properties are not auto-scaled', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { color: 'red', display: 'flex', opacity: '0.5' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses, { responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['color']).toBe('red');
+    expect(cls?.breakpoints?.medium?.['color']).toBeUndefined();
+    expect(cls?.breakpoints?.medium?.['display']).toBeUndefined();
+    expect(cls?.breakpoints?.medium?.['opacity']).toBeUndefined();
+  });
+
+  test('disabled responsiveScales preserves existing single-value behavior', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { fontSize: '48px' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses, { responsiveScales: { ...SCALES_ON, enabled: false } })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['font-size']).toBe('48px');
+    expect(cls?.breakpoints).toBeUndefined();
+  });
+
+  test('var(--h1-fs) is inlined per-breakpoint via projectVars map', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const projectVars = {
+      base: { '--h1-fs': '48px' },
+      tablet: { '--h1-fs': '44px' },
+      mobile: { '--h1-fs': '40px' },
+    };
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { fontSize: 'var(--h1-fs)' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses, { projectVars, responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.base['font-size']).toBe('48px');
+    expect(cls?.breakpoints?.medium?.['font-size']).toBe('44px');
+    expect(cls?.breakpoints?.small?.['font-size']).toBe('40px');
+  });
+
+  test('variable explicit per-breakpoint override wins over global category scaling', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    // Simulates buildProjectVarMaps output for a variable with scales: { tablet: '42px' }.
+    const projectVars = {
+      base: { '--h1-fs': '48px' },
+      tablet: { '--h1-fs': '42px' },                  // explicit override
+      mobile: { '--h1-fs': '40px' },                  // global scale (0.75)
+    };
+    const els = await nodeToWebflow(
+      { type: 'node', tag: 'div', style: { base: { fontSize: 'var(--h1-fs)' } }, children: 'Hi' } as ComponentNode,
+      makeCtx('index', styleClasses, { projectVars, responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    expect(cls?.breakpoints?.medium?.['font-size']).toBe('42px');
+    expect(cls?.breakpoints?.small?.['font-size']).toBe('40px');
+  });
+
+  test('var-driven per-bp value coexists with raw-value auto-scaling on the same class', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const projectVars = {
+      base: { '--h1-fs': '48px' },
+      tablet: { '--h1-fs': '44px' },
+      mobile: { '--h1-fs': '40px' },
+    };
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        // fontSize comes from a var; padding is a raw value.
+        style: { base: { fontSize: 'var(--h1-fs)', padding: '40px' } },
+        children: 'Hi',
+      } as ComponentNode,
+      makeCtx('index', styleClasses, { projectVars, responsiveScales: SCALES_ON })
+    );
+    const cls = styleClasses.get((els[0] as any).className!);
+    // var route
+    expect(cls?.breakpoints?.medium?.['font-size']).toBe('44px');
+    expect(cls?.breakpoints?.small?.['font-size']).toBe('40px');
+    // raw scaling route (padding 0.75/0.5) — shorthand expanded to longhands
+    expect(cls?.breakpoints?.medium?.['padding-top']).toBe('34px');
+    expect(cls?.breakpoints?.medium?.['padding-right']).toBe('34px');
+    expect(cls?.breakpoints?.medium?.['padding-bottom']).toBe('34px');
+    expect(cls?.breakpoints?.medium?.['padding-left']).toBe('34px');
+    expect(cls?.breakpoints?.small?.['padding-top']).toBe('28px');
+    expect(cls?.breakpoints?.small?.['padding-right']).toBe('28px');
+    expect(cls?.breakpoints?.small?.['padding-bottom']).toBe('28px');
+    expect(cls?.breakpoints?.small?.['padding-left']).toBe('28px');
+  });
+});
+
+describe('nodeToWebflow — promoted components (Navigation / Footer)', () => {
+  // A bare Navigation component: a <nav> with one <a> child. Default props
+  // are exercised by referencing {{title}} so we can assert the registered
+  // body uses defaults rather than per-instance overrides.
+  const navigationDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'nav',
+        children: [
+          { type: 'node', tag: 'a', children: '{{title}}' } as ComponentNode,
+        ],
+      } as ComponentNode,
+      interface: {
+        title: { type: 'string' as any, default: 'Home' },
+      },
+    },
+  };
+
+  const footerDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'footer',
+        children: [{ type: 'node', tag: 'span', children: 'fine print' } as ComponentNode],
+      } as ComponentNode,
+    },
+  };
+
+  // A non-promoted component (BasicCard) that should still inline.
+  const basicCardDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'article',
+        children: [{ type: 'node', tag: 'h3', children: 'card' } as ComponentNode],
+      } as ComponentNode,
+    },
+  };
+
+  function makePromotedCtx(
+    fileName: string,
+    styleClasses: Map<string, WebflowStyleClass>,
+    promotedComponents: Map<string, WebflowComponentDef>,
+    overrides?: Partial<WebflowEmitContext>
+  ): WebflowEmitContext {
+    return {
+      globalComponents: {
+        Layout: layoutDef,
+        Navigation: navigationDef,
+        Footer: footerDef,
+        BasicCard: basicCardDef,
+      },
+      elementPath: [0],
+      fileType: 'page',
+      fileName,
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      promotedComponents,
+      ...overrides,
+    };
+  }
+
+  test('two Navigation instances register one definition and emit componentRef each', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const promoted = new Map<string, WebflowComponentDef>();
+    const ctx = makePromotedCtx('home', styleClasses, promoted);
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'node',
+        tag: 'main',
+        children: [
+          { type: 'component', component: 'Navigation' } as ComponentNode,
+          { type: 'component', component: 'Navigation', props: { title: 'Override' } } as ComponentNode,
+        ],
+      } as ComponentNode),
+      ctx
+    );
+
+    // Walk to the <main> children that hold the two refs.
+    const layout = els[0] as WebflowElement;
+    const main = layout.children![0] as WebflowElement;
+    const refs = (main.children || []) as WebflowElement[];
+    expect(refs).toHaveLength(2);
+    expect(refs[0]!.componentRef).toBe('Navigation');
+    expect(refs[1]!.componentRef).toBe('Navigation');
+    expect(Array.isArray(refs[0]!.inlineFallback)).toBe(true);
+
+    expect(promoted.size).toBe(1);
+    expect(promoted.has('Navigation')).toBe(true);
+
+    // Body uses default props ('Home'), not the per-instance override.
+    const navBody = promoted.get('Navigation')!.elements[0] as WebflowElement;
+    const link = navBody.children![0] as WebflowElement;
+    expect(link.textContent).toBe('Home');
+  });
+
+  test('Footer is also promoted and registers separately', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const promoted = new Map<string, WebflowComponentDef>();
+    const ctx = makePromotedCtx('home', styleClasses, promoted);
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'node',
+        tag: 'div',
+        children: [
+          { type: 'component', component: 'Navigation' } as ComponentNode,
+          { type: 'component', component: 'Footer' } as ComponentNode,
+        ],
+      } as ComponentNode),
+      ctx
+    );
+
+    const wrapper = ((els[0] as WebflowElement).children![0] as WebflowElement);
+    const refs = (wrapper.children || []) as WebflowElement[];
+    expect(refs[0]!.componentRef).toBe('Navigation');
+    expect(refs[1]!.componentRef).toBe('Footer');
+    expect(promoted.size).toBe(2);
+  });
+
+  test('non-promoted component (BasicCard) still inlines', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const promoted = new Map<string, WebflowComponentDef>();
+    const ctx = makePromotedCtx('home', styleClasses, promoted);
+
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'BasicCard' } as ComponentNode),
+      ctx
+    );
+
+    // BasicCard should expand into <article>, not a componentRef.
+    const layout = els[0] as WebflowElement;
+    const card = layout.children![0] as WebflowElement;
+    expect(card.componentRef).toBeUndefined();
+    expect(card.tag).toBe('article');
+    expect(promoted.size).toBe(0);
+  });
+
+  test('without promotedComponents in context, Navigation still inlines (back-compat)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: {
+        Layout: layoutDef,
+        Navigation: navigationDef,
+      },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      // No promotedComponents — undefined disables the feature entirely.
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'Navigation' } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const navOrRef = layout.children![0] as WebflowElement;
+    expect(navOrRef.componentRef).toBeUndefined();
+    expect(navOrRef.tag).toBe('nav');
+  });
+
+  test('Footer nested inside Navigation inlines (no second registration)', async () => {
+    // A Navigation whose body contains a Footer. Both names are promoted on
+    // the page level, but inside the registered Navigation body the nested
+    // Footer must inline — registering it would cause an authored "Footer"
+    // Component to live two places at once in Webflow.
+    const navWithFooterDef: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'nav',
+          children: [
+            { type: 'component', component: 'Footer' } as ComponentNode,
+          ],
+        } as ComponentNode,
+      },
+    };
+
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const promoted = new Map<string, WebflowComponentDef>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: {
+        Layout: layoutDef,
+        Navigation: navWithFooterDef,
+        Footer: footerDef,
+      },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      promotedComponents: promoted,
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'Navigation' } as ComponentNode),
+      ctx
+    );
+
+    // Only Navigation registered — the nested Footer inlines inside its body.
+    expect(promoted.size).toBe(1);
+    expect(promoted.has('Navigation')).toBe(true);
+    expect(promoted.has('Footer')).toBe(false);
+
+    const layout = els[0] as WebflowElement;
+    const ref = layout.children![0] as WebflowElement;
+    expect(ref.componentRef).toBe('Navigation');
+
+    // The registered body's nested <Footer> inlines as a <footer> element.
+    const body = promoted.get('Navigation')!.elements[0] as WebflowElement;
+    const innerFooter = body.children![0] as WebflowElement;
+    expect(innerFooter.tag).toBe('footer');
+    expect(innerFooter.componentRef).toBeUndefined();
+  });
+});
+
+describe('nodeToWebflow — rich-text prop substitution', () => {
+  const RAW_HTML_PREFIX = '<!--MENO_RAW_HTML-->';
+
+  // A component whose body uses a prop both standalone and embedded in
+  // surrounding literal text — the latter is the case the `startsWith` check
+  // at the text-content site can't catch on its own.
+  const heroDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [
+          { type: 'node', tag: 'h1', children: 'Hello {{title}}!' } as ComponentNode,
+          { type: 'node', tag: 'p', children: '{{title}}' } as ComponentNode,
+        ],
+      } as ComponentNode,
+      interface: {
+        title: { type: 'string' as any, default: 'world' },
+      },
+    },
+  };
+
+  test('flattens spans from prop value when interpolated mid-string', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Hero: heroDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Hero',
+        props: { title: `${RAW_HTML_PREFIX}<span class="x">foo</span>` },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const h1 = section.children![0] as WebflowElement;
+    const p = section.children![1] as WebflowElement;
+
+    expect(h1.textContent).toBe('Hello foo!');
+    expect(h1.textContent).not.toContain('<span');
+    expect(h1.textContent).not.toContain('MENO_RAW_HTML');
+
+    // Standalone {{title}} body: existing startsWith path still strips, so
+    // this stays plain text too.
+    expect(p.textContent).toBe('foo');
+  });
+
+  test('flattens spans from un-prefixed HTML in heading/paragraph textContent', async () => {
+    // Rich-text props on static pages aren't sentinel-prefixed — they're
+    // stored as plain HTML by the editor. Heading/Paragraph elements still
+    // can't host inline markup in Webflow, so we flatten any tags we find.
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Hero: heroDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Hero',
+        props: { title: 'Everything you <span class="x">need</span> to build' },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const h1 = section.children![0] as WebflowElement;
+    const p = section.children![1] as WebflowElement;
+
+    expect(h1.textContent).toBe('Hello Everything you need to build!');
+    expect(h1.textContent).not.toContain('<span');
+    expect(p.textContent).toBe('Everything you need to build');
+    expect(p.textContent).not.toContain('<span');
+  });
+
+  test('preserves plain prop values without the sentinel', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Hero: heroDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Hero',
+        props: { title: 'plain' },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const h1 = section.children![0] as WebflowElement;
+    expect(h1.textContent).toBe('Hello plain!');
+  });
+
+  test('keeps raw rich-text in data-props for runtime JS', async () => {
+    const heroWithJsDef: ComponentDefinition = {
+      component: {
+        structure: heroDef.component!.structure,
+        interface: heroDef.component!.interface,
+        defineVars: true,
+        javascript: '/* placeholder so data-props is emitted */',
+      },
+    };
+
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Hero: heroWithJsDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const richTitle = `${RAW_HTML_PREFIX}<span class="x">foo</span>`;
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Hero',
+        props: { title: richTitle },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const dataProps = section.attributes!['data-props'] as string;
+    const parsed = JSON.parse(decodeURIComponent(dataProps));
+    expect(parsed.Hero.title).toBe(richTitle);
+  });
+});
+
+describe('nodeToWebflow — acceptsStyles instance overrides', () => {
+  // Component that opts in to instance-level style overrides. Body root is
+  // an HTML <section> so the inline-expanded root has its own primary class
+  // for combos to attach to.
+  const cardWithAcceptsStyles: ComponentDefinition = {
+    component: {
+      acceptsStyles: true,
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [{ type: 'node', tag: 'p', children: 'body' } as ComponentNode],
+      } as ComponentNode,
+    },
+  };
+
+  const cardWithoutAcceptsStyles: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [{ type: 'node', tag: 'p', children: 'body' } as ComponentNode],
+      } as ComponentNode,
+    },
+  };
+
+  function makeAcceptsCtx(
+    fileName: string,
+    styleClasses: Map<string, WebflowStyleClass>,
+    overrides?: Partial<WebflowEmitContext>
+  ): WebflowEmitContext {
+    return {
+      globalComponents: {
+        Layout: layoutDef,
+        Card: cardWithAcceptsStyles,
+        PlainCard: cardWithoutAcceptsStyles,
+      },
+      elementPath: [0],
+      fileType: 'page',
+      fileName,
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      ...overrides,
+    };
+  }
+
+  test('instance with multiple style overrides produces ONE combo holding all CSS', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Card',
+        style: { fontSize: '40px', color: 'red' },
+      } as ComponentNode),
+      makeAcceptsCtx('index', styleClasses)
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    expect(section.tag).toBe('section');
+    expect(section.className).toBeTruthy();
+    expect(section.comboClasses).toBeDefined();
+    expect(section.comboClasses!).toHaveLength(1);
+
+    const comboName = section.comboClasses![0]!;
+    // New format: `is-<5char base36 hash>`. No page/component name segment —
+    // the hash already encodes identity, and dropping the prefix keeps the
+    // class short in Webflow's panel.
+    expect(comboName).toMatch(/^is-[a-z0-9]{5}$/);
+
+    const combo = styleClasses.get(comboName);
+    expect(combo).toBeDefined();
+    expect(combo!.comboParent).toBe(section.className);
+    expect(combo!.base['font-size']).toBe('40px');
+    expect(combo!.base.color).toBe('red');
+  });
+
+  test('instance with breakpoint and pseudo-state overrides folds them into the same combo', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Card',
+        style: { base: { color: 'red' }, mobile: { color: 'blue' } },
+        interactiveStyles: [
+          { postfix: ':hover', style: { base: { color: 'green' } } },
+        ],
+      } as ComponentNode),
+      makeAcceptsCtx('index', styleClasses)
+    );
+
+    const section = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(section.comboClasses!).toHaveLength(1);
+
+    const combo = styleClasses.get(section.comboClasses![0]!);
+    expect(combo).toBeDefined();
+    expect(combo!.base.color).toBe('red');
+    expect(combo!.breakpoints?.small?.color).toBe('blue');
+    expect(combo!.pseudoStates?.hover?.color).toBe('green');
+  });
+
+  test('two instances of the same component on the same page get distinct combo names', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'node',
+        tag: 'main',
+        children: [
+          { type: 'component', component: 'Card', style: { fontSize: '40px' } } as ComponentNode,
+          { type: 'component', component: 'Card', style: { fontSize: '60px' } } as ComponentNode,
+        ],
+      } as ComponentNode),
+      makeAcceptsCtx('index', styleClasses)
+    );
+
+    const main = (els[0] as WebflowElement).children![0] as WebflowElement;
+    const cards = main.children as WebflowElement[];
+    const a = cards[0]!.comboClasses![0]!;
+    const b = cards[1]!.comboClasses![0]!;
+    expect(a).not.toBe(b);
+    expect(styleClasses.get(a)!.base['font-size']).toBe('40px');
+    expect(styleClasses.get(b)!.base['font-size']).toBe('60px');
+  });
+
+  test('component without acceptsStyles ignores instance style overrides (regression guard)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'PlainCard',
+        style: { fontSize: '40px' },
+      } as ComponentNode),
+      makeAcceptsCtx('index', styleClasses)
+    );
+
+    const section = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(section.comboClasses ?? []).toHaveLength(0);
+  });
+
+  test('body root with StyleMapping combo + acceptsStyles instance overrides merge into ONE combo', async () => {
+    // Component opts in to acceptsStyles AND its body root uses a StyleMapping
+    // bound to the `version` prop. Without merging, the body root would carry
+    // two combos: the StyleMapping delta (`is-version-secondary`) and the
+    // instance-override combo (`is-…`). Webflow's class system only honors
+    // a single combo, so the two must collapse.
+    const buttonWithBoth: ComponentDefinition = {
+      component: {
+        acceptsStyles: true,
+        interface: {
+          version: { type: 'string' as any, default: 'default' },
+        },
+        structure: {
+          type: 'node',
+          tag: 'section',
+          style: {
+            backgroundColor: {
+              _mapping: true,
+              prop: 'version',
+              values: { default: '#000', secondary: '#eee' },
+            },
+            color: {
+              _mapping: true,
+              prop: 'version',
+              values: { default: '#fff', secondary: '#222' },
+            },
+          },
+          children: [{ type: 'node', tag: 'p', children: 'body' } as ComponentNode],
+        } as ComponentNode,
+      },
+    };
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Button',
+        props: { version: 'secondary' },
+        // Instance override: padding (new key) + color (collides with mapping
+        // delta — outer override must win on conflicts).
+        style: { padding: '20px', color: 'red' },
+        interactiveStyles: [
+          { postfix: ':hover', style: { base: { backgroundColor: 'green' } } },
+        ],
+      } as ComponentNode),
+      {
+        globalComponents: { Layout: layoutDef, Button: buttonWithBoth },
+        elementPath: [0],
+        fileType: 'page',
+        fileName: 'index',
+        breakpoints: DEFAULT_BREAKPOINTS,
+        styleClasses,
+        comboIdentityByName: new Map(),
+      }
+    );
+
+    const section = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(section.tag).toBe('section');
+    expect(section.comboClasses!).toHaveLength(1);
+
+    const merged = styleClasses.get(section.comboClasses![0]!)!;
+    expect(merged).toBeDefined();
+    expect(merged.comboParent).toBe(section.className);
+    // Inner StyleMapping delta survives.
+    expect(merged.base['background-color']).toBe('#eee');
+    // Instance override wins on conflicts.
+    expect(merged.base.color).toBe('red');
+    // Instance-only key passes through (shorthand expanded by styleMapper).
+    expect(merged.base['padding-top']).toBe('20px');
+    expect(merged.base['padding-right']).toBe('20px');
+    // Pseudo-state from the instance override comes along.
+    expect(merged.pseudoStates?.hover?.['background-color']).toBe('green');
+  });
+
+  test('promoted component (Navigation) with acceptsStyles + instance style skips promotion and emits a combo', async () => {
+    const navWithAccepts: ComponentDefinition = {
+      component: {
+        acceptsStyles: true,
+        structure: {
+          type: 'node',
+          tag: 'nav',
+          children: [{ type: 'node', tag: 'a', children: 'Home' } as ComponentNode],
+        } as ComponentNode,
+      },
+    };
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const promoted = new Map<string, WebflowComponentDef>();
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Navigation',
+        style: { fontSize: '40px' },
+      } as ComponentNode),
+      {
+        globalComponents: { Layout: layoutDef, Navigation: navWithAccepts },
+        elementPath: [0],
+        fileType: 'page',
+        fileName: 'home',
+        breakpoints: DEFAULT_BREAKPOINTS,
+        styleClasses,
+        comboIdentityByName: new Map(),
+        promotedComponents: promoted,
+      }
+    );
+
+    // Promotion was skipped → no entry in `promoted`, no componentRef wrapper.
+    expect(promoted.has('Navigation')).toBe(false);
+    const nav = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(nav.componentRef).toBeUndefined();
+    expect(nav.tag).toBe('nav');
+    expect(nav.comboClasses!).toHaveLength(1);
+    const combo = styleClasses.get(nav.comboClasses![0]!)!;
+    expect(combo.base['font-size']).toBe('40px');
+  });
+
+  test('combo name collision triggers re-hash when two identities collapse to the same 5-char slice', async () => {
+    // First emit: discover the combo name this Card placement naturally gets.
+    const baselineStyles = new Map<string, WebflowStyleClass>();
+    const baselineEls = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Card',
+        style: { fontSize: '40px' },
+      } as ComponentNode),
+      makeAcceptsCtx('index', baselineStyles)
+    );
+    const baselineSection = (baselineEls[0] as WebflowElement).children![0] as WebflowElement;
+    const baselineCombo = baselineSection.comboClasses![0]!;
+
+    // Re-emit with the combo slot pre-claimed by a different identity.
+    // mintInstanceComboName must detect the collision and bump to a fresh hash.
+    const styles = new Map<string, WebflowStyleClass>();
+    const comboIdentityByName = new Map<string, string>([[baselineCombo, 'stranger:identity']]);
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Card',
+        style: { fontSize: '40px' },
+      } as ComponentNode),
+      makeAcceptsCtx('index', styles, { comboIdentityByName })
+    );
+    const section = (els[0] as WebflowElement).children![0] as WebflowElement;
+    const combo = section.comboClasses![0]!;
+    expect(combo).not.toBe(baselineCombo);
+    expect(combo).toMatch(/^is-[a-z0-9]{5}$/);
+    // The pre-existing claim survives — the regenerator picked a fresh slot.
+    expect(comboIdentityByName.get(baselineCombo)).toBe('stranger:identity');
+    // Our placement registered under the new name.
+    expect(comboIdentityByName.has(combo)).toBe(true);
+    expect(styles.get(combo)!.base['font-size']).toBe('40px');
+  });
+});
+
+describe('nodeToWebflow — CMS template context inside component body', () => {
+  // Mirrors the pro-1 BlogListCard pattern: a component declares an empty
+  // interface and references a CMS iteration variable (`{{post.title}}`) from
+  // its body. SSR leaks `ctx.templateContext` into the body so this resolves;
+  // the Webflow exporter must do the same or the cards render empty.
+  const cardDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'link',
+        href: '{{post._url}}',
+        children: [
+          { type: 'node', tag: 'h2', children: '{{post.title}}' } as ComponentNode,
+        ],
+      } as ComponentNode,
+      interface: {},
+    },
+  };
+
+  test('component with empty interface still resolves {{post.*}} templates from list iteration context', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, BlogListCard: cardDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      // Simulates the templateContext expandListItems sets per item.
+      templateContext: { post: { _url: '/blog/hello', title: 'Hello, world' } },
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'BlogListCard' } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const link = layout.children![0] as WebflowElement;
+    const h2 = link.children![0] as WebflowElement;
+
+    expect(link.tag).toBe('a');
+    expect(link.attributes?.href).toBe('/blog/hello');
+    expect(h2.textContent).toBe('Hello, world');
+  });
+});
+
+describe('nodeToWebflow — embed SVG currentColor resolution', () => {
+  const SVG = '<svg viewBox="0 0 10 10"><path fill="currentColor" stroke="currentColor" d="M0 0h10v10H0z"/></svg>';
+
+  test('SVG currentColor inlines the embed node\'s own color', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'embed',
+        html: SVG,
+        style: { base: { color: '#ff0000' } },
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const embed = els[0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="#ff0000"');
+    expect(embed.svgSource).toContain('stroke="#ff0000"');
+    expect(embed.svgSource).not.toContain('currentColor');
+  });
+
+  test('SVG currentColor inherits ancestor color when embed has none', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { color: 'rgb(0, 128, 255)' } },
+        children: [
+          { type: 'embed', html: SVG } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const wrapper = els[0] as WebflowElement;
+    const embed = wrapper.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="rgb(0, 128, 255)"');
+    expect(embed.svgSource).not.toContain('currentColor');
+  });
+
+  test('embed color overrides ancestor color', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { color: 'red' } },
+        children: [
+          {
+            type: 'embed',
+            html: SVG,
+            style: { base: { color: 'blue' } },
+          } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const wrapper = els[0] as WebflowElement;
+    const embed = wrapper.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="blue"');
+    expect(embed.svgSource).not.toContain('red');
+  });
+
+  test('SVG without currentColor is left untouched', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const original = '<svg viewBox="0 0 10 10"><path fill="#abcdef" d="M0 0h10v10H0z"/></svg>';
+    const els = await nodeToWebflow(
+      {
+        type: 'embed',
+        html: original,
+        style: { base: { color: 'red' } },
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const embed = els[0] as WebflowElement;
+    expect(embed.svgSource).toBe(original);
+  });
+
+  test('with no resolvable color, currentColor is left as-is', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      { type: 'embed', html: SVG } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const embed = els[0] as WebflowElement;
+    expect(embed.svgSource).toBe(SVG);
+  });
+
+  test('color: inherit on embed falls through to ancestor color', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'div',
+        style: { base: { color: '#123456' } },
+        children: [
+          {
+            type: 'embed',
+            html: SVG,
+            style: { base: { color: 'inherit' } },
+          } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const wrapper = els[0] as WebflowElement;
+    const embed = wrapper.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="#123456"');
+  });
+
+  test('link ancestor color flows to nested embed', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'link',
+        href: '/x',
+        style: { base: { color: 'orange' } },
+        children: [
+          { type: 'embed', html: SVG } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses)
+    );
+    const link = els[0] as WebflowElement;
+    const embed = link.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="orange"');
+  });
+
+  test('variant-mapped link color resolves through componentDefaults for nested embed', async () => {
+    // Mirrors Button.json: link.color is a StyleMapping keyed on `variant`,
+    // and a child embed's SVG uses `currentColor`. Without StyleMapping
+    // resolution the arrow ships with `currentColor` intact and Webflow
+    // paints the standalone SVG asset black.
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'link',
+        href: '/x',
+        style: {
+          base: {
+            color: {
+              _mapping: true,
+              prop: 'variant',
+              values: { primary: '#ffffff', secondary: '#000000' },
+            },
+          },
+        },
+        children: [
+          { type: 'embed', html: SVG } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses, { componentDefaults: { variant: 'primary' } })
+    );
+    const link = els[0] as WebflowElement;
+    const embed = link.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="#ffffff"');
+    expect(embed.svgSource).not.toContain('currentColor');
+  });
+
+  test('variant-mapped link color: instance prop wins over componentDefaults', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    // A wrapper component instantiates a Button-like link with variant=secondary
+    const innerComponentDef: ComponentDefinition = {
+      component: {
+        interface: {
+          variant: { type: 'string' as any, default: 'primary' },
+        },
+        structure: {
+          type: 'link',
+          href: '#',
+          style: {
+            base: {
+              color: {
+                _mapping: true,
+                prop: 'variant',
+                values: { primary: '#ffffff', secondary: '#000000' },
+              },
+            },
+          },
+          children: [
+            { type: 'embed', html: SVG } as ComponentNode,
+          ],
+        },
+      },
+    };
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'BtnLike',
+        props: { variant: 'secondary' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, BtnLike: innerComponentDef },
+      })
+    );
+    // Walk down to the embed
+    const layout = els[0] as WebflowElement;
+    const link = layout.children![0] as WebflowElement;
+    const embed = link.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="#000000"');
+    expect(embed.svgSource).not.toContain('currentColor');
+  });
+
+  test('mapped color carrying var(--…) is resolved against project vars', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      {
+        type: 'link',
+        href: '/x',
+        style: {
+          base: {
+            color: {
+              _mapping: true,
+              prop: 'variant',
+              values: { primary: 'var(--bg)' },
+            },
+          },
+        },
+        children: [
+          { type: 'embed', html: SVG } as ComponentNode,
+        ],
+      } as ComponentNode,
+      makeCtx('index', styleClasses, {
+        componentDefaults: { variant: 'primary' },
+        projectVars: { base: { '--bg': '#fefefe' } },
+      })
+    );
+    const link = els[0] as WebflowElement;
+    const embed = link.children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('fill="#fefefe"');
+    expect(embed.svgSource).not.toContain('var(--bg)');
+  });
+});
+
+describe('nodeToWebflow — embed html mapping resolution', () => {
+  // Mirrors `Icon.json`: an embed whose `html` is an HtmlMapping bound to the
+  // `icon` enum prop. The exporter must resolve the mapping against the
+  // component instance props, otherwise the SVG silently exports as empty.
+  const STAR_SVG = '<svg viewBox="0 0 10 10"><path d="M5 0l1 4h4l-3 3 1 4-3-2-3 2 1-4-3-3h4z"/></svg>';
+  const X_SVG = '<svg viewBox="0 0 10 10"><path d="M0 0L10 10M10 0L0 10"/></svg>';
+
+  const iconDef: ComponentDefinition = {
+    component: {
+      interface: {
+        icon: { type: 'string' as any, default: 'star' },
+      },
+      structure: {
+        type: 'embed',
+        html: {
+          _mapping: true,
+          prop: 'icon',
+          values: { star: STAR_SVG, x: X_SVG },
+        },
+      } as unknown as ComponentNode,
+    },
+  };
+
+  test('resolves HtmlMapping against instance props', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Icon',
+        props: { icon: 'x' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Icon: iconDef },
+      })
+    );
+    const embed = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('M0 0L10 10');
+  });
+
+  test('falls back to interface default when prop is omitted', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Icon',
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Icon: iconDef },
+      })
+    );
+    const embed = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(embed.svgSource).toContain('M5 0l1 4h4');
+  });
+
+  test('unknown enum value yields empty embed (matches SSR semantics)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Icon',
+        props: { icon: 'does-not-exist' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Icon: iconDef },
+      })
+    );
+    const embed = (els[0] as WebflowElement).children![0] as WebflowElement;
+    expect(embed.svgSource).toBeUndefined();
+  });
+
+  // Mirrors `FaqAccordion → list iteration → FaqItem → Icon`: the icon prop
+  // is a literal but Icon's body lives two component-inlining layers below a
+  // list expansion. Each step has to forward the resolved instance props down
+  // to the embed so the mapping can resolve. A regression here returns an
+  // empty embed for every chevron, which is what the user reported.
+  test('icon mapping resolves through nested components inside a list iteration', async () => {
+    const faqItemDef: ComponentDefinition = {
+      component: {
+        interface: {
+          question: { type: 'string' as any, default: '' },
+        },
+        structure: {
+          type: 'node',
+          tag: 'div',
+          children: [
+            {
+              type: 'component',
+              component: 'Icon',
+              props: { icon: 'x', size: 20 },
+            } as ComponentNode,
+          ],
+        } as ComponentNode,
+      },
+    };
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'list',
+        sourceType: 'prop',
+        source: [{ q: 'a' }, { q: 'b' }],
+        itemAs: 'item',
+        children: [
+          {
+            type: 'component',
+            component: 'FaqItem',
+            props: { question: '{{item.q}}' },
+          } as ComponentNode,
+        ],
+      } as unknown as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Icon: iconDef, FaqItem: faqItemDef },
+      })
+    );
+    // Layout > [FaqItem(div) x 2] — each FaqItem holds an Icon which inlines
+    // to a single embed child.
+    const layoutChildren = (els[0] as WebflowElement).children!;
+    expect(layoutChildren).toHaveLength(2);
+    for (const item of layoutChildren) {
+      const itemEl = item as WebflowElement;
+      const iconWrapper = itemEl.children![0] as WebflowElement;
+      expect(iconWrapper.svgSource).toContain('M0 0L10 10');
+    }
+  });
+});
+
+describe('normalizeListChildren', () => {
+  test('wraps anchor child of <ul> in synthetic <li>', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'ul',
+        children: [
+          { tag: 'a', attributes: { href: '/about' }, textContent: 'About' },
+          { tag: 'a', attributes: { href: '/blog' }, textContent: 'Blog' },
+        ],
+      },
+    ];
+    normalizeListChildren(tree);
+    const ul = tree[0]!;
+    expect(ul.children).toHaveLength(2);
+    for (const child of ul.children!) {
+      expect((child as WebflowElement).tag).toBe('li');
+      const inner = (child as WebflowElement).children![0] as WebflowElement;
+      expect(inner.tag).toBe('a');
+    }
+  });
+
+  test('wraps text-string child of <ul> in synthetic <li>', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'ol',
+        children: ['stray text', { tag: 'li', textContent: 'real item' }],
+      },
+    ];
+    normalizeListChildren(tree);
+    const ol = tree[0]!;
+    expect(ol.children).toHaveLength(2);
+    expect((ol.children![0] as WebflowElement).tag).toBe('li');
+    expect((ol.children![0] as WebflowElement).children![0]).toBe('stray text');
+    expect((ol.children![1] as WebflowElement).tag).toBe('li');
+    expect((ol.children![1] as WebflowElement).textContent).toBe('real item');
+  });
+
+  test('mixed children — passes <li> through, wraps non-<li>', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'ul',
+        children: [
+          { tag: 'li', children: [{ tag: 'a', textContent: 'Real' }] },
+          { tag: 'a', textContent: 'Stray' },
+          { tag: 'div', textContent: 'Also stray' },
+        ],
+      },
+    ];
+    normalizeListChildren(tree);
+    const ul = tree[0]!;
+    expect(ul.children).toHaveLength(3);
+    expect((ul.children![0] as WebflowElement).tag).toBe('li');
+    // First was already an <li> with anchor inside — passes through.
+    expect(((ul.children![0] as WebflowElement).children![0] as WebflowElement).tag).toBe('a');
+    // Second got wrapped.
+    expect((ul.children![1] as WebflowElement).tag).toBe('li');
+    expect(((ul.children![1] as WebflowElement).children![0] as WebflowElement).tag).toBe('a');
+    // Third got wrapped.
+    expect((ul.children![2] as WebflowElement).tag).toBe('li');
+    expect(((ul.children![2] as WebflowElement).children![0] as WebflowElement).tag).toBe('div');
+  });
+
+  test('already-correct <ul><li> tree is left unchanged', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'ul',
+        children: [
+          { tag: 'li', children: [{ tag: 'a', textContent: 'A' }] },
+          { tag: 'li', children: [{ tag: 'a', textContent: 'B' }] },
+        ],
+      },
+    ];
+    const before = JSON.stringify(tree);
+    normalizeListChildren(tree);
+    expect(JSON.stringify(tree)).toBe(before);
+  });
+
+  test('recurses into nested <ul> inside an <li>', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'ul',
+        children: [
+          {
+            tag: 'li',
+            children: [
+              {
+                tag: 'ul',
+                children: [{ tag: 'a', textContent: 'Nested' }],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    normalizeListChildren(tree);
+    const innerUl = ((tree[0]!.children![0] as WebflowElement).children![0]) as WebflowElement;
+    expect(innerUl.tag).toBe('ul');
+    expect((innerUl.children![0] as WebflowElement).tag).toBe('li');
+    expect(((innerUl.children![0] as WebflowElement).children![0] as WebflowElement).tag).toBe('a');
+  });
+
+  test('recurses into inlineFallback', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'div',
+        componentRef: 'Navigation',
+        inlineFallback: [
+          {
+            tag: 'ul',
+            children: [{ tag: 'a', textContent: 'Home' }],
+          },
+        ],
+      },
+    ];
+    normalizeListChildren(tree);
+    const fallbackUl = tree[0]!.inlineFallback![0]!;
+    expect((fallbackUl.children![0] as WebflowElement).tag).toBe('li');
+    expect(((fallbackUl.children![0] as WebflowElement).children![0] as WebflowElement).tag).toBe('a');
+  });
+
+  test('non-list parents are unaffected', () => {
+    const tree: WebflowElement[] = [
+      {
+        tag: 'div',
+        children: [
+          { tag: 'a', textContent: 'Link' },
+          { tag: 'span', textContent: 'Text' },
+        ],
+      },
+    ];
+    const before = JSON.stringify(tree);
+    normalizeListChildren(tree);
+    expect(JSON.stringify(tree)).toBe(before);
+  });
+});
+
+describe('nodeToWebflow — prop-bound list inside component body', () => {
+  // Mirrors example/components/ListSection.json: a component whose body iterates
+  // an array prop (`items`) and renders one card per element with `{{item.x}}`
+  // templates. The page (example/pages/list-demo.json) passes the array as an
+  // instance prop. The Webflow exporter must statically expand the list into
+  // one rendered child per item, with templates resolved against the per-item
+  // context — otherwise the Webflow Designer receives an empty wrapper.
+  const listSectionDef: ComponentDefinition = {
+    component: {
+      structure: {
+        type: 'node',
+        tag: 'section',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'prop',
+            source: 'items',
+            itemAs: 'item',
+            children: [
+              {
+                type: 'node',
+                tag: 'div',
+                children: [
+                  { type: 'node', tag: 'h3', children: '{{item.title}}' } as ComponentNode,
+                  { type: 'node', tag: 'p', children: '{{item.description}}' } as ComponentNode,
+                ],
+              } as ComponentNode,
+            ],
+          } as unknown as ComponentNode,
+        ],
+      } as ComponentNode,
+      interface: {
+        items: { type: 'list' as any, default: [] },
+      },
+    },
+  };
+
+  test('expands children once per array item with templates resolved', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, ListSection: listSectionDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'list-demo',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'ListSection',
+        props: {
+          items: [
+            { title: 'Fast', description: 'Built for speed' },
+            { title: 'Simple', description: 'Easy to use' },
+          ],
+        },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+
+    // The list renders one wrapper div per item — no synthetic list wrapper.
+    expect(section.children).toBeDefined();
+    expect(section.children!.length).toBe(2);
+
+    const card1 = section.children![0] as WebflowElement;
+    const card2 = section.children![1] as WebflowElement;
+
+    expect(card1.tag).toBe('div');
+    expect(card2.tag).toBe('div');
+
+    const h3a = card1.children![0] as WebflowElement;
+    const pa = card1.children![1] as WebflowElement;
+    const h3b = card2.children![0] as WebflowElement;
+    const pb = card2.children![1] as WebflowElement;
+
+    expect(h3a.textContent).toBe('Fast');
+    expect(pa.textContent).toBe('Built for speed');
+    expect(h3b.textContent).toBe('Simple');
+    expect(pb.textContent).toBe('Easy to use');
+  });
+
+  test('emits zero children when prop is missing and interface default is []', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, ListSection: listSectionDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'list-demo',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'ListSection' } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    expect(section.children === undefined || section.children.length === 0).toBe(true);
+  });
+
+  test('expands children when locale + i18nConfig are set (mirrors buildWebflowPayload ctx)', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, ListSection: listSectionDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'list-demo',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+      locale: 'en',
+      i18nConfig: {
+        defaultLocale: 'en',
+        locales: [
+          { code: 'en', name: 'EN', nativeName: 'EN', langTag: 'en-US' } as any,
+          { code: 'pl', name: 'PL', nativeName: 'PL', langTag: 'pl-PL' } as any,
+        ],
+      } as any,
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'ListSection',
+        props: {
+          items: [
+            { title: 'Fast', description: 'Built for speed' },
+            { title: 'Simple', description: 'Easy to use' },
+          ],
+        },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    expect(section.children!.length).toBe(2);
+    const card1 = section.children![0] as WebflowElement;
+    const h3a = card1.children![0] as WebflowElement;
+    expect(h3a.textContent).toBe('Fast');
+  });
+
+  test('templated source `{{items}}` referring to the component\'s own prop', async () => {
+    // Real user pattern from adv-1's StatsSimpleGrid / TeamGrid / etc: the list
+    // source is the templated form `{{items}}` (matching the editor's emitted
+    // shape) rather than the bare prop name `items`. SSR side-steps this via
+    // `processStructure` pre-substituting `{{items}}` to the array before the
+    // list node is reached; the Webflow exporter walks the raw JSON and must
+    // resolve the template against `instanceProps` itself.
+    const def: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'list',
+          sourceType: 'prop',
+          source: '{{items}}',
+          itemAs: 'item',
+          children: [
+            { type: 'node', tag: 'div', children: '{{item.label}}' } as ComponentNode,
+          ],
+        } as unknown as ComponentNode,
+        interface: {
+          items: { type: 'list' as any, default: [] },
+        },
+      },
+    };
+
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Stats: def },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Stats',
+        props: { items: [{ label: 'A' }, { label: 'B' }, { label: 'C' }] },
+      } as ComponentNode),
+      ctx
+    );
+
+    const layout = els[0] as WebflowElement;
+    expect(layout.children!.length).toBe(3);
+    const card1 = layout.children![0] as WebflowElement;
+    const card2 = layout.children![1] as WebflowElement;
+    const card3 = layout.children![2] as WebflowElement;
+    expect(card1.textContent).toBe('A');
+    expect(card2.textContent).toBe('B');
+    expect(card3.textContent).toBe('C');
+  });
+
+  test('templated source `{{outer.items}}` resolves through outer list iteration', async () => {
+    // Inner component reads its own list from a template expression that points
+    // into the outer list's iteration variable — exercises the `{{...}}` branch
+    // of getPropItemsForExport (nodeToWebflow.ts:1734-1741).
+    const innerDef: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'list',
+          sourceType: 'prop',
+          source: '{{category.items}}',
+          itemAs: 'item',
+          children: [
+            { type: 'node', tag: 'span', children: '{{item.title}}' } as ComponentNode,
+          ],
+        } as unknown as ComponentNode,
+        interface: {},
+      },
+    };
+
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const ctx: WebflowEmitContext = {
+      globalComponents: { Layout: layoutDef, Inner: innerDef },
+      elementPath: [0],
+      fileType: 'page',
+      fileName: 'home',
+      breakpoints: DEFAULT_BREAKPOINTS,
+      styleClasses,
+      comboIdentityByName: new Map(),
+    };
+
+    const outer: ComponentNode = {
+      type: 'list',
+      sourceType: 'prop',
+      source: 'categories',
+      itemAs: 'category',
+      children: [
+        { type: 'component', component: 'Inner' } as ComponentNode,
+      ],
+    } as unknown as ComponentNode;
+
+    const els = await nodeToWebflow(
+      {
+        type: 'node',
+        tag: 'main',
+        children: [outer],
+      } as ComponentNode,
+      ctx,
+      {
+        categories: [
+          { items: [{ title: 'A1' }, { title: 'A2' }] },
+          { items: [{ title: 'B1' }] },
+        ],
+      }
+    );
+
+    const main = els[0] as WebflowElement;
+    const flat = (main.children || []) as WebflowElement[];
+    const texts = flat.map(c => c.textContent);
+    expect(texts).toEqual(['A1', 'A2', 'B1']);
+  });
+});
+
+describe('nodeToWebflow — tag template resolution (parity with SSR)', () => {
+  // Regression for the `h{{size}}` -> `<h>` bug: template tags must resolve
+  // through the same context layers meno-core's runtime walks, not just the
+  // current instance's props.
+
+  test('component with default size renders h2 from h{{size}}', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heading: ComponentDefinition = {
+      component: {
+        structure: { type: 'node', tag: 'h{{size}}', children: ['{{text}}'] } as ComponentNode,
+        interface: {
+          text: { type: 'string', default: 'Heading' },
+          size: { type: 'string', default: '2' },
+        },
+      },
+    };
+    const instance: ComponentNode = {
+      type: 'component',
+      component: 'Heading',
+      props: { text: 'Hi' },
+    } as ComponentNode;
+    const els = await nodeToWebflow(
+      pageRoot(instance),
+      makeCtx('index', styleClasses, { globalComponents: { Layout: layoutDef, Heading: heading } })
+    );
+    const layout = els[0] as WebflowElement;
+    const h = layout.children![0] as WebflowElement;
+    expect(h.tag).toBe('h2');
+    expect(h.textContent).toBe('Hi');
+  });
+
+  test('instance prop overrides interface default in tag template', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heading: ComponentDefinition = {
+      component: {
+        structure: { type: 'node', tag: 'h{{size}}', children: ['{{text}}'] } as ComponentNode,
+        interface: {
+          text: { type: 'string', default: 'Heading' },
+          size: { type: 'string', default: '2' },
+        },
+      },
+    };
+    const instance: ComponentNode = {
+      type: 'component',
+      component: 'Heading',
+      props: { text: 'Hi', size: '4' },
+    } as ComponentNode;
+    const els = await nodeToWebflow(
+      pageRoot(instance),
+      makeCtx('index', styleClasses, { globalComponents: { Layout: layoutDef, Heading: heading } })
+    );
+    const layout = els[0] as WebflowElement;
+    const h = layout.children![0] as WebflowElement;
+    expect(h.tag).toBe('h4');
+  });
+
+  test('tag template resolves through slotInstanceProps when heading is slotted', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const heading: ComponentDefinition = {
+      component: {
+        structure: { type: 'node', tag: 'h{{size}}', children: ['{{text}}'] } as ComponentNode,
+        interface: {
+          text: { type: 'string', default: 'Heading' },
+          size: { type: 'string', default: '1' },
+        },
+      },
+    };
+    // Slot host with no interface props of its own — the slotted Heading
+    // gets its `text` from the OUTER hero's props via `slotInstanceProps`.
+    const stack: ComponentDefinition = {
+      component: {
+        structure: { type: 'node', tag: 'div', children: [{ type: 'slot' }] } as ComponentNode,
+        interface: {},
+      },
+    };
+    const hero: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'section',
+          children: [{
+            type: 'component',
+            component: 'Stack',
+            children: [{
+              type: 'component',
+              component: 'Heading',
+              props: { text: '{{title}}', size: '3' },
+            }],
+          }],
+        } as ComponentNode,
+        interface: {
+          title: { type: 'string', default: 'Hero title' },
+        },
+      },
+    };
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'Hero', props: { title: 'Hello' } } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Hero: hero, Stack: stack, Heading: heading },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const stackEl = section.children![0] as WebflowElement;
+    const h = stackEl.children![0] as WebflowElement;
+    expect(h.tag).toBe('h3');
+    expect(h.textContent).toBe('Hello');
+  });
+
+  test('tag template references {{item.size}} via list iteration context', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const list: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'section',
+          children: [
+            {
+              type: 'list',
+              sourceType: 'prop',
+              source: 'posts',
+              itemAs: 'item',
+              children: [
+                { type: 'node', tag: 'h{{item.size}}', children: '{{item.title}}' } as ComponentNode,
+              ],
+            } as unknown as ComponentNode,
+          ],
+        } as ComponentNode,
+        interface: {
+          posts: { type: 'list' as any, default: [] },
+        },
+      },
+    };
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'List',
+        props: {
+          posts: [
+            { title: 'A', size: '2' },
+            { title: 'B', size: '4' },
+          ],
+        },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, List: list },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const section = layout.children![0] as WebflowElement;
+    const items = (section.children || []) as WebflowElement[];
+    expect(items.length).toBe(2);
+    expect(items[0].tag).toBe('h2');
+    expect(items[0].textContent).toBe('A');
+    expect(items[1].tag).toBe('h4');
+    expect(items[1].textContent).toBe('B');
+  });
+
+  test('attribute templates resolve from instance props', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const card: ComponentDefinition = {
+      component: {
+        structure: {
+          type: 'node',
+          tag: 'div',
+          attributes: { 'data-variant': '{{variant}}' },
+          children: ['hi'],
+        } as ComponentNode,
+        interface: {
+          variant: { type: 'string', default: 'primary' },
+        },
+      },
+    };
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'Card', props: { variant: 'ghost' } } as ComponentNode),
+      makeCtx('index', styleClasses, { globalComponents: { Layout: layoutDef, Card: card } })
+    );
+    const layout = els[0] as WebflowElement;
+    const div = layout.children![0] as WebflowElement;
+    expect(div.attributes?.['data-variant']).toBe('ghost');
+  });
+});
+
+// Mirrors `Text.json` / `Heading.json`: a free-form string prop drives a CSS
+// value via `"{{maxWidth}}"`. Each instance must get a distinct combo so two
+// instances on the same page render at different widths — without this they
+// collapse onto the same primary class and the last write wins.
+describe('nodeToWebflow — single-prop style template combos', () => {
+  const textDef: ComponentDefinition = {
+    component: {
+      interface: {
+        maxWidth: { type: 'string' as any, default: '100%' },
+      },
+      structure: {
+        type: 'node',
+        tag: 'p',
+        style: {
+          base: {
+            color: '#000',
+            maxWidth: '{{maxWidth}}',
+          },
+        },
+        children: 'Text',
+      } as ComponentNode,
+    },
+  };
+
+  test('default-prop instance bakes the default into the primary class with no combo', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({ type: 'component', component: 'Text' } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Text: textDef },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const p = layout.children![0] as WebflowElement;
+    expect(p.tag).toBe('p');
+    expect(p.comboClasses ?? []).toHaveLength(0);
+    const primary = styleClasses.get(p.className!)!;
+    expect(primary.base['max-width']).toBe('100%');
+  });
+
+  test('non-default instance value emits a combo holding the resolved CSS', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Text',
+        props: { maxWidth: '640px' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Text: textDef },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const p = layout.children![0] as WebflowElement;
+    expect(p.comboClasses).toHaveLength(1);
+    const comboName = p.comboClasses![0]!;
+    expect(comboName).toBe('is-maxwidth-640px');
+    const combo = styleClasses.get(comboName)!;
+    expect(combo.comboParent).toBe(p.className);
+    expect(combo.base['max-width']).toBe('640px');
+    // Primary still carries the default (`100%`) so a sibling default-prop
+    // instance keeps rendering correctly.
+    const primary = styleClasses.get(p.className!)!;
+    expect(primary.base['max-width']).toBe('100%');
+  });
+
+  test('two instances with different prop values share one primary, get distinct combos', async () => {
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'node',
+        tag: 'div',
+        children: [
+          {
+            type: 'component',
+            component: 'Text',
+            props: { maxWidth: '640px' },
+          } as ComponentNode,
+          {
+            type: 'component',
+            component: 'Text',
+            props: { maxWidth: '320px' },
+          } as ComponentNode,
+        ],
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Text: textDef },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const wrapper = layout.children![0] as WebflowElement;
+    const p1 = wrapper.children![0] as WebflowElement;
+    const p2 = wrapper.children![1] as WebflowElement;
+    // Same primary class — the StyleMapping pipeline keeps the element class
+    // location-stable; the variants live on combos.
+    expect(p1.className).toBe(p2.className);
+    expect(p1.comboClasses![0]).toBe('is-maxwidth-640px');
+    expect(p2.comboClasses![0]).toBe('is-maxwidth-320px');
+    expect(styleClasses.get('is-maxwidth-640px')!.base['max-width']).toBe('640px');
+    expect(styleClasses.get('is-maxwidth-320px')!.base['max-width']).toBe('320px');
+  });
+
+  test('template wrapped in literal CSS (`calc({{maxWidth}} + 1rem)`) emits a combo with the full resolved expression', async () => {
+    const wrappedDef: ComponentDefinition = {
+      component: {
+        interface: {
+          maxWidth: { type: 'string' as any, default: '640px' },
+        },
+        structure: {
+          type: 'node',
+          tag: 'p',
+          style: { base: { width: 'calc({{maxWidth}} + 1rem)' } },
+          children: 'x',
+        } as ComponentNode,
+      },
+    };
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Wrapped',
+        props: { maxWidth: '900px' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Wrapped: wrappedDef },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const p = layout.children![0] as WebflowElement;
+    expect(p.comboClasses).toHaveLength(1);
+    expect(p.comboClasses![0]).toBe('is-maxwidth-900px');
+    const combo = styleClasses.get(p.comboClasses![0]!)!;
+    expect(combo.base.width).toBe('calc(900px + 1rem)');
+    const primary = styleClasses.get(p.className!)!;
+    expect(primary.base.width).toBe('calc(640px + 1rem)');
+  });
+
+  test('multi-template fallback bakes resolved value into primary, no combo', async () => {
+    // Two distinct props in one value can't be reduced to a single mapping
+    // without combinatorial fan-out, so we deliberately fall back to the
+    // pre-existing resolve-and-bake behavior.
+    const multiDef: ComponentDefinition = {
+      component: {
+        interface: {
+          a: { type: 'string' as any, default: '10px' },
+          b: { type: 'string' as any, default: '5px' },
+        },
+        structure: {
+          type: 'node',
+          tag: 'p',
+          style: { base: { padding: '{{a}} {{b}}' } },
+          children: 'x',
+        } as ComponentNode,
+      },
+    };
+    const styleClasses = new Map<string, WebflowStyleClass>();
+    const els = await nodeToWebflow(
+      pageRoot({
+        type: 'component',
+        component: 'Multi',
+        props: { a: '20px', b: '15px' },
+      } as ComponentNode),
+      makeCtx('index', styleClasses, {
+        globalComponents: { Layout: layoutDef, Multi: multiDef },
+      })
+    );
+    const layout = els[0] as WebflowElement;
+    const p = layout.children![0] as WebflowElement;
+    expect(p.comboClasses ?? []).toHaveLength(0);
+    const primary = styleClasses.get(p.className!)!;
+    // shorthand expanded by styleMapper
+    expect(primary.base['padding-top']).toBe('20px');
+    expect(primary.base['padding-right']).toBe('15px');
+  });
+});