meno-core 1.0.53 → 1.1.0

package/lib/server/astro/nodeToAstro.test.ts

@@ -3,7 +3,7 @@
  * Tests the core ComponentNode -> Astro template markup converter
  */
 
-import { describe, test, expect, beforeEach } from 'bun:test';
+import { describe, test, expect } from 'bun:test';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import type { ComponentNode } from '../../shared/types';
@@ -29,7 +29,7 @@ function createContext(overrides?: Partial<AstroEmitContext>): AstroEmitContext
 }
 
 /** Strip leading/trailing whitespace from each line for easier comparison */
-function trimLines(s: string): string {
+function _trimLines(s: string): string {
   return s
     .split('\n')
     .map((l) => l.trimEnd())
@@ -206,7 +206,7 @@ describe('nodeToAstro', () => {
     test('should handle indentation via context', () => {
       const ctx = createContext({ indent: 2 });
       const result = nodeToAstro('text', ctx);
-      expect(result).toMatch(/^    text/); // 2 * 2 spaces = 4 spaces
+      expect(result).toMatch(/^ {4}text/); // 2 * 2 spaces = 4 spaces
     });
   });
 
@@ -954,12 +954,15 @@ describe('nodeToAstro', () => {
     test('should emit <Picture> for static image type node with metadata', () => {
       const ctx = createContext({
         imageMetadataMap: new Map([
-          ['/images/photo.jpg', {
-            width: 800,
-            height: 600,
-            srcset: '/images/photo-400.webp 400w',
-            avifSrcset: '/images/photo-400.avif 400w',
-          }],
+          [
+            '/images/photo.jpg',
+            {
+              width: 800,
+              height: 600,
+              srcset: '/images/photo-400.webp 400w',
+              avifSrcset: '/images/photo-400.avif 400w',
+            },
+          ],
         ]) as any,
       });
       const node = {
@@ -983,12 +986,15 @@ describe('nodeToAstro', () => {
 
   describe('static image <Picture> emission', () => {
     const staticMetadata = new Map([
-      ['/images/hero.jpg', {
-        width: 1920,
-        height: 1080,
-        srcset: '/images/hero-800.webp 800w',
-        avifSrcset: '/images/hero-800.avif 800w',
-      }],
+      [
+        '/images/hero.jpg',
+        {
+          width: 1920,
+          height: 1080,
+          srcset: '/images/hero-800.webp 800w',
+          avifSrcset: '/images/hero-800.avif 800w',
+        },
+      ],
     ]);
 
     test('static <img> emits <Picture> and records import', () => {
@@ -1090,13 +1096,16 @@ describe('nodeToAstro', () => {
     test('blur hash puts blur on <picture> via pictureAttributes, no wrapper div', () => {
       const ctx = createContext({
         imageMetadataMap: new Map([
-          ['/images/hero.jpg', {
-            width: 1920,
-            height: 1080,
-            srcset: '/images/hero-800.webp 800w',
-            avifSrcset: '/images/hero-800.avif 800w',
-            blurHash: 'data:image/png;base64,blur',
-          }],
+          [
+            '/images/hero.jpg',
+            {
+              width: 1920,
+              height: 1080,
+              srcset: '/images/hero-800.webp 800w',
+              avifSrcset: '/images/hero-800.avif 800w',
+              blurHash: 'data:image/png;base64,blur',
+            },
+          ],
         ]) as any,
       });
       const node: ComponentNode = {
@@ -1140,9 +1149,7 @@ describe('nodeToAstro', () => {
         {
           type: 'node',
           tag: 'div',
-          children: [
-            { type: 'component', component: 'Button', children: [] },
-          ],
+          children: [{ type: 'component', component: 'Button', children: [] }],
         } as any,
       ];
       nodeToAstro(nodes, ctx);
@@ -1164,11 +1171,11 @@ describe('nodeToAstro', () => {
         tag: '{{headingTag}}',
         children: ['Title'],
       } as any;
-      const result = nodeToAstro(node, ctx);
+      const _result = nodeToAstro(node, ctx);
       expect(ctx.dynamicTags).toBeDefined();
       expect(ctx.dynamicTags!.size).toBe(1);
       // Should use Tag_<path> variable
-      const entry = [...ctx.dynamicTags!.entries()][0];
+      const entry = [...ctx.dynamicTags!.entries()][0]!;
       expect(entry[0]).toMatch(/^Tag_/);
     });
   });
@@ -1265,9 +1272,7 @@ describe('nodeToAstro', () => {
         children: [],
       } as any;
       const result = nodeToAstro(node, ctx);
-      expect(result).toContain(
-        'sizes="(max-width: 540px) 340px, (max-width: 1024px) 500px, 700px"'
-      );
+      expect(result).toContain('sizes="(max-width: 540px) 340px, (max-width: 1024px) 500px, 700px"');
     });
 
     test('should fall back to 100vw when width is not a px value', () => {
@@ -1332,9 +1337,9 @@ describe('nodeToAstro', () => {
       expect(result).toContain('</picture>');
       expect(result).toContain('background-image:url(data:image/webp;base64,AAA)');
       // The <picture>'s style must carry the background, and the <img> must not.
-      const pictureLine = result.split('\n').find(l => l.includes('<picture'));
+      const pictureLine = result.split('\n').find((l) => l.includes('<picture'));
       expect(pictureLine).toContain('background-image:url');
-      const imgLine = result.split('\n').find(l => l.includes('<img'));
+      const imgLine = result.split('\n').find((l) => l.includes('<img'));
       expect(imgLine).not.toContain('background-image');
       // The onload handler should clear the placeholder from the parent.
       expect(result).toContain("this.parentElement.style.backgroundImage=''");
@@ -1363,10 +1368,10 @@ describe('nodeToAstro', () => {
       expect(result).toContain('<picture');
       expect(result).toContain('type="image/avif"');
       expect(result).toContain('type="image/webp"');
-      const pictureLine = result.split('\n').find(l => l.includes('<picture'));
+      const pictureLine = result.split('\n').find((l) => l.includes('<picture'));
       expect(pictureLine).toContain('background-image:url(data:image/webp;base64,BBB)');
       // Inner img should not carry an inline background-image anymore.
-      const imgLine = result.split('\n').find(l => l.includes('<img'));
+      const imgLine = result.split('\n').find((l) => l.includes('<img'));
       expect(imgLine).not.toContain('background-image');
       // Fill classes on inner img so it covers the picture's declared size.
       expect(imgLine).toContain('block');
@@ -1490,4 +1495,1719 @@ describe('nodeToAstro', () => {
       expect(result).toContain('id={item.id');
     });
   });
+
+  // =========================================================================
+  // Style mappings -> class:list conditionals
+  // =========================================================================
+
+  describe('style mappings to class:list', () => {
+    const alignMapping = {
+      _mapping: true,
+      prop: 'align',
+      values: { left: 'left', center: 'center' },
+    };
+
+    test('two-value mapping emits ternary in class:list (component def)', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { textAlign: alignMapping },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`class:list={[String(align) === "left" ? 'text-left' : 'text-center']}`);
+    });
+
+    test('multi-value mapping emits one && entry per value', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: {
+          textAlign: {
+            _mapping: true,
+            prop: 'align',
+            values: { left: 'left', center: 'center', right: 'right' },
+          },
+        },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`String(align) === "left" && 'text-left'`);
+      expect(result).toContain(`String(align) === "center" && 'text-center'`);
+      expect(result).toContain(`String(align) === "right" && 'text-right'`);
+    });
+
+    test('boolean mapping keys are coerced then re-stringified', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: {
+          textAlign: { _mapping: true, prop: 'centered', values: { true: 'center', false: 'left' } },
+        },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`String(centered) === "true" ? 'text-center' : 'text-left'`);
+    });
+
+    test('responsive mapping under tablet gets max-[1024px]: prefix', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { tablet: { textAlign: alignMapping } },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`'max-[1024px]:text-left'`);
+      expect(result).toContain(`'max-[1024px]:text-center'`);
+    });
+
+    test('responsive mapping under mobile gets max-[540px]: prefix', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { mobile: { textAlign: alignMapping } },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`'max-[540px]:text-left'`);
+    });
+
+    test('static classes and conditionals combine in class:list', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { display: 'flex', textAlign: alignMapping },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`class:list={['flex', String(align) === "left"`);
+    });
+
+    test('mapping values without a Tailwind class are dropped', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: {
+          // gap '' produces no class; both must resolve or the ternary is skipped
+          gap: { _mapping: true, prop: 'spacing', values: { a: '', b: '' } },
+        },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('class:list');
+      expect(result).not.toContain('class=');
+    });
+
+    // Mappings reference component props by bare identifier; at page scope those
+    // identifiers don't exist (runtime resolveStyleMapping() receives no props
+    // there and drops the property), so the emitter must not reference them —
+    // doing so is an Astro build error, not a graceful degradation.
+    test('page context drops style-mapping conditionals instead of referencing missing props', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { textAlign: alignMapping },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('class:list');
+      expect(result).not.toContain('align');
+      expect(result).toContain('<div>');
+    });
+
+    test('page context keeps static classes while dropping mapping conditionals', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { display: 'flex', textAlign: alignMapping },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="flex"');
+      expect(result).not.toContain('class:list');
+      expect(result).not.toContain('align');
+    });
+  });
+
+  // =========================================================================
+  // Dynamic (template-expression) styles -> inline style attribute
+  // =========================================================================
+
+  describe('dynamic template styles', () => {
+    test('template style value becomes template-literal style attr in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { width: '{{w}}' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('style={`width: ${w}`}');
+    });
+
+    test('multiple dynamic styles join with semicolons', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { width: '{{w}}', minHeight: '{{h}}' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('style={`width: ${w}; min-height: ${h}`}');
+    });
+
+    test('dynamic styles rewrite item vars inside list context', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        listItemBinding: 'card',
+        listIndexVar: 'cardIndex',
+        listSourceVar: 'cards',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { width: '{{item.width}}' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('style={`width: ${card.width}`}');
+    });
+
+    test('dynamic styles are NOT emitted in page context', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { width: '{{w}}' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('style=');
+    });
+  });
+
+  // =========================================================================
+  // Interactive style mappings -> --is-N CSS variables
+  // =========================================================================
+
+  describe('interactive style mappings', () => {
+    test('two-value mapping emits ternary CSS variable', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        label: 'Btn',
+        interactiveStyles: [
+          {
+            postfix: ':hover',
+            style: {
+              backgroundColor: { _mapping: true, prop: 'variant', values: { primary: '#00f', secondary: '#f00' } },
+            },
+          },
+        ],
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`'--is-0': variant === "primary" ? '#00f' : '#f00'`);
+      expect(result).toContain('style={Object.entries({');
+      // Element class is generated for interactive styles and prepended to classes
+      expect(result).toContain('class="p_test-page_btn"');
+    });
+
+    test('multi-value mapping emits inline lookup object, filtering empty values', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        interactiveStyles: [
+          {
+            postfix: ':hover',
+            style: {
+              borderWidth: { _mapping: true, prop: 'size', values: { a: '1px', b: '2px', c: '' } },
+            },
+          },
+        ],
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`'--is-0': ({"a": '1px', "b": '2px'})[size] || ''`);
+    });
+
+    test('interactive mapping merges with existing dynamic style attr', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { width: '{{w}}' },
+        interactiveStyles: [
+          {
+            postfix: ':hover',
+            style: {
+              backgroundColor: { _mapping: true, prop: 'variant', values: { primary: '#00f', secondary: '#f00' } },
+            },
+          },
+        ],
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('style={`width: ${w}; ${ Object.entries({');
+    });
+
+    test('interactive styles register element class in collectedInteractiveStyles', () => {
+      const collected = new Map();
+      const ctx = createContext({
+        collectedInteractiveStyles: collected as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        label: 'Hero',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="p_test-page_hero"');
+      expect(collected.get('p_test-page_hero')).toEqual([{ postfix: ':hover', style: { opacity: '0.5' } }]);
+    });
+
+    test('generateElementClass flag alone produces hashed element class', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        generateElementClass: true,
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toMatch(/class="p_test-page_[a-z0-9]+"/);
+    });
+  });
+
+  // =========================================================================
+  // Attribute template branches (buildAttributesString)
+  // =========================================================================
+
+  describe('attribute template branches', () => {
+    test('link-type prop in full-match attribute uses href coercion expr', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        componentProps: { cta: { type: 'link', label: 'CTA' } as any },
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { 'data-href': '{{cta}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`data-href={(typeof cta === 'string' ? cta : cta?.href) ?? "#"}`);
+    });
+
+    test('mixed-content attribute becomes template literal in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'button',
+        attributes: { 'aria-label': 'Open {{name}} menu' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('aria-label={`Open ${name} menu`}');
+    });
+
+    test('mixed-content attribute with link-type prop coerces href inside literal', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        componentProps: { cta: { type: 'link', label: 'CTA' } as any },
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { 'data-url': 'go-{{cta}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('data-url={`go-${(typeof cta === \'string\' ? cta : cta?.href) ?? "#"}`}');
+    });
+
+    test('list-item full-match attribute outside component def', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        listItemBinding: 'item',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: '{{item.id}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('id={item.id || undefined}');
+    });
+
+    test('list-item meta var in attribute resolves index expression', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        listItemBinding: 'item',
+        listIndexVar: 'i',
+        listSourceVar: 'items',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { 'data-last': '{{itemLast}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('data-last={(i === items.length - 1) || undefined}');
+    });
+
+    test('list-item mixed-content attribute becomes template literal', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        listItemBinding: 'item',
+        listIndexVar: 'i',
+        listSourceVar: 'items',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: 'row-{{item.id}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('id={`row-${item.id}`}');
+    });
+
+    test('CMS mixed-content attribute becomes template literal', () => {
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'entry' });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { alt: 'Photo of {{cms.name}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('alt={`Photo of ${entry.data.name}`}');
+    });
+  });
+
+  // =========================================================================
+  // emitAttrValue via image emitter (CMS / list-item src)
+  // =========================================================================
+
+  describe('image attribute value transformation', () => {
+    test('CMS mixed-content img src becomes template literal', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map() as any,
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: 'x-{{cms.img}}', alt: 'A' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('src={`x-${entry.data.img}`}');
+    });
+
+    test('list-item mixed-content img src becomes template literal', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map() as any,
+        listItemBinding: 'post',
+        listIndexVar: 'postIndex',
+        listSourceVar: 'posts',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/i/{{post.slug}}.jpg', alt: 'A' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('src={`/i/${post.slug}.jpg`}');
+    });
+
+    test('list-item full-match img src with meta var resolves index', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map() as any,
+        listItemBinding: 'item',
+        listIndexVar: 'i',
+        listSourceVar: 'items',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '{{itemIndex}}', alt: 'A' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('src={i}');
+    });
+  });
+
+  // =========================================================================
+  // i18n value emission
+  // =========================================================================
+
+  describe('i18n values', () => {
+    test('component def without locale wraps i18n object with r() resolver', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node = { _i18n: true, en: 'Hello', fr: 'Bonjour' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{r({"_i18n":true,"en":"Hello","fr":"Bonjour"})}');
+      expect(ctx.needsI18nResolver).toBe(true);
+    });
+
+    test('i18n value resolving to a non-string is stringified', () => {
+      const ctx = createContext({ locale: 'en' });
+      const node = { _i18n: true, en: 42 } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result.trim()).toBe('42');
+    });
+
+    // An i18n object on a page emitted without a locale resolves through the
+    // default locale (resolveTranslation falls back exact → default → first
+    // available → empty) instead of stringifying to "[object Object]".
+    test('page context without locale resolves i18n via default locale', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node = { _i18n: true, en: 'Hello' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result.trim()).toBe('Hello');
+    });
+
+    test('page context without locale honors i18nConfig default locale', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        i18nConfig: {
+          defaultLocale: 'fr',
+          locales: [
+            { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' },
+            { code: 'fr', name: 'French', nativeName: 'Français', langTag: 'fr-FR' },
+          ],
+        },
+      });
+      const node = { _i18n: true, en: 'Hello', fr: 'Bonjour' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result.trim()).toBe('Bonjour');
+    });
+  });
+
+  // =========================================================================
+  // Prop value formatting edge cases
+  // =========================================================================
+
+  describe('prop value formatting', () => {
+    test('null and undefined props emit {undefined}', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Widget',
+        props: { a: null, b: undefined },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('a={undefined}');
+      expect(result).toContain('b={undefined}');
+    });
+
+    test('object and array props emit JSON literals', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Widget',
+        props: { cfg: { a: 1 }, list: [1, 2] },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('cfg={{"a":1}}');
+      expect(result).toContain('list={[1,2]}');
+    });
+  });
+
+  // =========================================================================
+  // Slug-mapped link localization
+  // =========================================================================
+
+  describe('slug-mapped link localization', () => {
+    test('translates internal href through slug mappings', () => {
+      const ctx = createContext({
+        locale: 'fr',
+        i18nDefaultLocale: 'en',
+        slugMappings: [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }],
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/about',
+        children: ['About'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href="/fr/a-propos"');
+    });
+  });
+
+  // =========================================================================
+  // Embed node advanced branches
+  // =========================================================================
+
+  describe('embed node advanced', () => {
+    test('HTML mapping emits Fragment set:html with prop ref in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: { _mapping: true, prop: 'content' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="oem"');
+      expect(result).toContain('Fragment set:html={content}');
+    });
+
+    // NOTE: pinned degradation — an HTML mapping on a page (outside component
+    // def) falls through to the literal path with html='' and emits an empty
+    // embed. This matches SSR runtime, where resolveHtmlMapping() receives no
+    // props at page scope and resolves to '' (ssrRenderer embed branch).
+    test('HTML mapping in page context emits empty embed (pinned)', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: { _mapping: true, prop: 'content' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Fragment set:html={``}');
+      expect(result).not.toContain('content');
+    });
+
+    test('template html with static classes prefixes oem to class', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '{{icon}}',
+        style: { display: 'flex' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="oem flex"');
+      expect(result).toContain('Fragment set:html={icon}');
+    });
+
+    test('literal embed with static classes prefixes oem to class', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '<b>x</b>',
+        style: { display: 'flex' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="oem flex"');
+    });
+
+    test('mixed-template embed html falls through to literal emission (pinned)', () => {
+      // Only a full-match {{expr}} is resolved; mixed content keeps the raw
+      // {{...}} inside the emitted template literal.
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '<i>{{icon}}</i>',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Fragment set:html={`<i>{{icon}}</i>`}');
+    });
+
+    test('embed with interactive styles registers element class', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '<b>x</b>',
+        label: 'Embed1',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('p_test-page_embed1');
+      expect(collected.has('p_test-page_embed1')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Link node advanced branches
+  // =========================================================================
+
+  describe('link node advanced', () => {
+    test('link mapping in component def emits href coercion over prop', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'link',
+        href: { _mapping: true, prop: 'link' },
+        children: ['Go'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`href={(typeof link === 'string' ? link : link?.href) ?? "#"}`);
+    });
+
+    // NOTE: pinned known broken-link mode — a link mapping on a page emits a
+    // static href="#" because the prop does not exist at page scope. This
+    // matches SSR runtime (non-string href falls back to '#'); the real fix
+    // is upstream in the link binding, not in this emitter.
+    test('link mapping in page context emits static href="#" (pinned)', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'link',
+        href: { _mapping: true, prop: 'link' },
+        children: ['Go'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href="#"');
+    });
+
+    test('mixed-template href becomes template literal in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/blog/{{slug}}',
+        children: ['Read'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href={`/blog/${slug}`}');
+    });
+
+    test('mixed-template href with link-type prop coerces inside literal', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        componentProps: { cta: { type: 'link', label: 'CTA' } as any },
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '{{cta}}?utm=1',
+        children: ['Go'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href={`${(typeof cta === \'string\' ? cta : cta?.href) ?? "#"}?utm=1`}');
+    });
+
+    test('CMS mixed-template href becomes template literal', () => {
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'entry' });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/posts/{{cms.slug}}',
+        children: ['Read'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href={`/posts/${entry.data.slug}`}');
+    });
+
+    test('static classes get olink prefix', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/x',
+        style: { display: 'flex' },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="olink flex"');
+    });
+
+    test('link with interactive styles registers element class', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/x',
+        label: 'NavLink',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('p_test-page_navlink');
+      expect(collected.has('p_test-page_navlink')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Component instance advanced (props)
+  // =========================================================================
+
+  describe('component instance advanced props', () => {
+    test('mixed-template string prop becomes template literal', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        props: { title: 'Hello {{name}}!' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('title={`Hello ${name}!`}');
+    });
+
+    test('full-match prop rewrites item vars and meta vars in list context', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        listItemBinding: 'card',
+        listIndexVar: 'cardIndex',
+        listSourceVar: 'cards',
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Badge',
+        props: { text: '{{item.label}}', index: '{{itemIndex}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('text={card.label}');
+      expect(result).toContain('index={cardIndex}');
+    });
+
+    test('CMS full-match and mixed props transform to entry data access', () => {
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'entry' });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        props: { title: '{{cms.title}}', sub: 'By {{cms.author}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('title={entry.data.title}');
+      expect(result).toContain('sub={`By ${entry.data.author}`}');
+    });
+
+    test('CMS props honor cmsWrapFn', () => {
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'entry', cmsWrapFn: 'r' });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        props: { title: '{{cms.title}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('title={r(entry.data.title)}');
+    });
+
+    test('rich-text prop is passed as escaped template literal', () => {
+      const ctx = createContext({
+        globalComponents: {
+          Card: {
+            component: {
+              interface: { content: { type: 'rich-text', label: 'Content' } },
+            },
+          },
+        } as any,
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        props: { content: '<p>Hi `tick`</p>' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('content={`<p>Hi \\`tick\\`</p>`}');
+    });
+
+    test('CMS consumer component gets cms entry threaded as prop', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+        cmsConsumers: new Set(['Card']),
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('cms={entry}');
+    });
+
+    test('CMS consumer with explicit cms prop is not overridden', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+        cmsConsumers: new Set(['Card']),
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        props: { cms: 'custom' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('cms="custom"');
+      expect(result).not.toContain('cms={entry}');
+    });
+  });
+
+  // =========================================================================
+  // Component instance style overrides
+  // =========================================================================
+
+  describe('component instance style overrides', () => {
+    test('instance style emits element class and collects unlayered rule', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'MyCard',
+        style: { base: { padding: '10px' } },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="p_test-page_mycard"');
+      const rules = collected.get('p_test-page_mycard');
+      expect(rules).toHaveLength(1);
+      expect(rules[0].style).toEqual({ base: { padding: '10px' } });
+    });
+
+    test('instance style merges under component root style per breakpoint', () => {
+      const collected = new Map();
+      const ctx = createContext({
+        collectedInteractiveStyles: collected as any,
+        globalComponents: {
+          Card: {
+            component: {
+              structure: { type: 'node', tag: 'div', style: { base: { color: 'red', padding: '4px' } } },
+            },
+          },
+        } as any,
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'MyCard',
+        style: { base: { padding: '10px' } },
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      const rules = collected.get('p_test-page_mycard');
+      expect(rules[0].style.base).toEqual({ color: 'red', padding: '10px' });
+    });
+
+    test('component root style is read from props.style for instance roots', () => {
+      const collected = new Map();
+      const ctx = createContext({
+        collectedInteractiveStyles: collected as any,
+        globalComponents: {
+          Card: {
+            component: {
+              structure: {
+                type: 'component',
+                component: 'Inner',
+                props: { style: { base: { color: 'blue' } } },
+              },
+            },
+          },
+        } as any,
+      });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'MyCard',
+        style: { base: { padding: '10px' } },
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      const rules = collected.get('p_test-page_mycard');
+      expect(rules[0].style.base).toEqual({ color: 'blue', padding: '10px' });
+    });
+
+    test('template-expression values are stripped from override CSS', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'MyCard',
+        style: { base: { padding: '{{pad}}', margin: '5px' } },
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      const rules = collected.get('p_test-page_mycard');
+      expect(rules[0].style.base).toEqual({ margin: '5px' });
+    });
+
+    test('all-template override emits no class and no rule', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        style: { base: { padding: '{{pad}}' } },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('class=');
+      expect(collected.size).toBe(0);
+    });
+
+    test('empty responsive override shape is ignored', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        style: { base: {}, tablet: {}, mobile: {} },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('class=');
+      expect(collected.size).toBe(0);
+    });
+
+    test('instance interactive styles fold into the same element class', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'HoverCard',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.7' } }],
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="p_test-page_hovercard"');
+      const rules = collected.get('p_test-page_hovercard');
+      expect(rules).toHaveLength(1);
+      expect(rules[0].postfix).toBe(':hover');
+    });
+
+    test('flat instance style (legacy) is collected as-is', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        label: 'FlatCard',
+        style: { padding: '8px' },
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      const rules = collected.get('p_test-page_flatcard');
+      expect(rules[0].style).toEqual({ padding: '8px' });
+    });
+  });
+
+  // =========================================================================
+  // Image type node with metadata (non-static src)
+  // =========================================================================
+
+  describe('image type node with metadata', () => {
+    test('metadata without avif/blur emits plain img with srcset and dimensions', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/photos/x.jpg', { width: 800, height: 600, srcset: '/photos/x-400.webp 400w' }],
+        ]) as any,
+      });
+      const node = { type: 'image', src: '/photos/x.jpg', alt: 'X' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<img');
+      expect(result).not.toContain('<picture');
+      expect(result).toContain('width="800"');
+      expect(result).toContain('height="600"');
+      expect(result).toContain('srcset="/photos/x-400.webp 400w"');
+      expect(result).toContain('sizes="100vw"');
+    });
+
+    test('metadata with avif emits picture with both sources', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          [
+            '/photos/x.jpg',
+            { width: 800, height: 600, srcset: '/photos/x.webp 400w', avifSrcset: '/photos/x.avif 400w' },
+          ],
+        ]) as any,
+      });
+      const node = { type: 'image', src: '/photos/x.jpg', alt: 'X' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<picture');
+      expect(result).toContain('type="image/avif"');
+      expect(result).toContain('type="image/webp"');
+      expect(result).toContain('class="block w-full h-full"');
+    });
+
+    test('metadata with blur but no avif wraps img in picture with blur background', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          [
+            '/photos/x.jpg',
+            { width: 800, height: 600, srcset: '/photos/x.webp 400w', blurHash: 'data:image/png;base64,Z' },
+          ],
+        ]) as any,
+      });
+      const node = { type: 'image', src: '/photos/x.jpg', alt: 'X' } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<picture');
+      expect(result).toContain('background-image:url(data:image/png;base64,Z)');
+      expect(result).toContain('onload="this.parentElement.style.backgroundImage=\'\'"');
+      const imgLine = result.split('\n').find((l) => l.includes('<img'));
+      expect(imgLine).toContain('srcset=');
+    });
+
+    test('img-specific classes split onto inner img in picture wrapper', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          [
+            '/photos/x.jpg',
+            { width: 800, height: 600, srcset: '/photos/x.webp 400w', avifSrcset: '/photos/x.avif 400w' },
+          ],
+        ]) as any,
+      });
+      const node = {
+        type: 'image',
+        src: '/photos/x.jpg',
+        alt: 'X',
+        style: { display: 'flex', objectFit: 'cover' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      const pictureLine = result.split('\n').find((l) => l.includes('<picture'));
+      expect(pictureLine).toContain('flex');
+      expect(pictureLine).not.toContain('object-cover');
+      const imgLine = result.split('\n').find((l) => l.includes('<img'));
+      expect(imgLine).toContain('object-cover');
+    });
+
+    test('image type node with interactive styles registers element class', () => {
+      const collected = new Map();
+      const ctx = createContext({ collectedInteractiveStyles: collected as any });
+      const node = {
+        type: 'image',
+        src: '/photos/x.jpg',
+        alt: 'X',
+        label: 'Pic',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('p_test-page_pic');
+      expect(collected.has('p_test-page_pic')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Static <Picture> with dynamic class:list fallbacks
+  // =========================================================================
+
+  describe('static Picture with dynamic classes', () => {
+    const alignMapping = {
+      _mapping: true,
+      prop: 'align',
+      values: { left: 'left', center: 'center' },
+    };
+
+    test('dynamic class:list without blur wraps Picture in div', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        imageMetadataMap: new Map([
+          ['/images/hero.jpg', { width: 100, height: 100, srcset: 'a.webp 100w', avifSrcset: 'a.avif 100w' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { textAlign: alignMapping },
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div class:list={[');
+      expect(result).toContain('<Picture src={imgHero}');
+      expect(result).toContain('</div>');
+    });
+
+    test('dynamic class:list with blur wraps Picture in blurred div', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        imageMetadataMap: new Map([
+          [
+            '/images/hero.jpg',
+            {
+              width: 100,
+              height: 100,
+              srcset: 'a.webp 100w',
+              avifSrcset: 'a.avif 100w',
+              blurHash: 'data:image/png;base64,B',
+            },
+          ],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { textAlign: alignMapping },
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div class:list={[');
+      expect(result).toContain('background-image:url(data:image/png;base64,B)');
+      expect(result).toContain("this.parentElement.parentElement.style.backgroundImage=''");
+    });
+
+    test('img-specific classes land on inner Picture class, layout on pictureAttributes', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/images/hero.jpg', { width: 100, height: 100, srcset: 'a.webp 100w', avifSrcset: 'a.avif 100w' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { display: 'flex', objectFit: 'cover' },
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('pictureAttributes={{class: "flex"}}');
+      expect(result).toContain('class="object-cover"');
+    });
+  });
+
+  // =========================================================================
+  // HTML img advanced (element class, dynamic class:list, dynamic styles)
+  // =========================================================================
+
+  describe('HTML img advanced', () => {
+    test('img with interactive styles registers element class on picture', () => {
+      const collected = new Map();
+      const ctx = createContext({
+        collectedInteractiveStyles: collected as any,
+        imageMetadataMap: new Map([
+          ['/test.jpg', { width: 100, height: 100, srcset: 'a.webp 100w', avifSrcset: 'a.avif 100w' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        label: 'HeroImg',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        attributes: { src: '/test.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('p_test-page_heroimg');
+      expect(collected.has('p_test-page_heroimg')).toBe(true);
+    });
+
+    test('dynamic class:list goes on picture wrapper, img gets fill classes', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        imageMetadataMap: new Map([
+          ['/test.jpg', { width: 100, height: 100, srcset: 'a.webp 100w', avifSrcset: 'a.avif 100w' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { textAlign: { _mapping: true, prop: 'align', values: { left: 'left', center: 'center' } } },
+        attributes: { src: '/test.jpg', alt: 'T' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      const pictureLine = result.split('\n').find((l) => l.includes('<picture'));
+      expect(pictureLine).toContain('class:list={[');
+      const imgLine = result.split('\n').find((l) => l.includes('<img'));
+      expect(imgLine).toContain('class="block w-full h-full"');
+    });
+
+    // The blur placeholder CSS must merge into a dynamic (template-literal)
+    // style attr too — previously injectInlineStyle only handled a static
+    // `style="..."` attribute and silently dropped the blur background while
+    // the onload clear handler was still emitted.
+    test('blur background merges into dynamic template-literal style attr', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        imageMetadataMap: new Map([
+          ['/test.jpg', { width: 100, height: 100, srcset: 'a.webp 100w', blurHash: 'data:image/png;base64,B' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { width: '{{w}}' },
+        attributes: { src: '/test.jpg', alt: 'T' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      const pictureLine = result.split('\n').find((l) => l.includes('<picture'));
+      expect(pictureLine).toContain(
+        'style={`width: ${w};background-image:url(data:image/png;base64,B);background-size:cover`}',
+      );
+      expect(result).toContain("this.parentElement.style.backgroundImage=''");
+      // The merged attr stays balanced: one template literal, one JSX expression
+      const styleAttr = pictureLine!.slice(pictureLine!.indexOf('style={'));
+      const count = (s: string, re: RegExp) => (s.match(re) ?? []).length;
+      expect(count(pictureLine!, /`/g)).toBe(2);
+      expect(styleAttr.startsWith('style={`')).toBe(true);
+      expect(styleAttr.trimEnd().endsWith('`}>')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Static image import naming
+  // =========================================================================
+
+  describe('static image import naming', () => {
+    test('nested image path camel-cases into import variable', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/images/sub/hero-photo.jpg', { width: 100, height: 100, srcset: 'a.webp 100w' }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/images/sub/hero-photo.jpg', alt: 'H' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('src={imgSubHeroPhoto}');
+      expect(ctx.imageImports?.get('imgSubHeroPhoto')).toBe('../assets/images/sub/hero-photo.jpg');
+    });
+
+    test('var name collision appends numeric suffix', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/images/hero.jpg', { width: 100, height: 100, srcset: 'a.webp 100w' }],
+          ['/images/hero.png', { width: 100, height: 100, srcset: 'b.webp 100w' }],
+        ]) as any,
+      });
+      const nodes: ComponentNode[] = [
+        { type: 'node', tag: 'img', attributes: { src: '/images/hero.jpg', alt: 'A' } },
+        { type: 'node', tag: 'img', attributes: { src: '/images/hero.png', alt: 'B' } },
+      ] as any;
+      nodeToAstro(nodes, ctx);
+      expect(ctx.imageImports?.get('imgHero')).toBe('../assets/images/hero.jpg');
+      expect(ctx.imageImports?.get('imgHero2')).toBe('../assets/images/hero.png');
+    });
+  });
+
+  // =========================================================================
+  // List node slicing variants
+  // =========================================================================
+
+  describe('list node slicing', () => {
+    test('offset only uses single-arg slice', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: '{{items}}',
+        offset: 2,
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('items.slice(2).map(');
+    });
+
+    test('limit only slices from zero', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: '{{items}}',
+        limit: 5,
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('items.slice(0, 5).map(');
+    });
+
+    test('custom itemAs renames map params and rewrites item vars', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: '{{links}}',
+        itemAs: 'link',
+        children: ['{{item.text}}'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('links.map((link, linkIndex) => (');
+      expect(result).toContain('{link.text}');
+    });
+  });
+
+  // =========================================================================
+  // Collection list query chain
+  // =========================================================================
+
+  describe('collection list query chain', () => {
+    test('filter, sort desc, offset and limit chain in order', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        filter: { field: 'category', operator: 'eq', value: 'news' },
+        sort: { field: 'date', order: 'desc' },
+        offset: 1,
+        limit: 3,
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      const line = ctx.frontmatterLines![0];
+      expect(line).toContain('.filter(e => e.data.category === "news")');
+      expect(line).toContain('.sort((a, b) => a.data.date > b.data.date ? -1 : 1)');
+      expect(line).toContain('.slice(1, 4)');
+    });
+
+    test('array-form sort ascending', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        sort: [{ field: 'title', order: 'asc' }],
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      expect(ctx.frontmatterLines![0]).toContain('.sort((a, b) => a.data.title > b.data.title ? 1 : -1)');
+    });
+
+    test('entries are flattened with default _url expression', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      expect(ctx.frontmatterLines![0]).toContain(
+        '.then(items => items.map((e) => ({ ...e.data, _id: e.id, _url: `/posts/${e.data.slug ?? e.id}` })))',
+      );
+    });
+
+    test('collectionUrlExpr overrides the flattened _url expression', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        collectionUrlExpr: new Map([['posts', '`/blog/${e.data.slug}`']]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      expect(ctx.frontmatterLines![0]).toContain('_url: `/blog/${e.data.slug}`');
+    });
+
+    test('default itemAs is singularized collection name and children bind to it', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        children: ['{{post.title}}'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('postsList.map((post, postIndex) => (');
+      expect(result).toContain('{post.title}');
+    });
+  });
+
+  // =========================================================================
+  // Locale list advanced
+  // =========================================================================
+
+  describe('locale list advanced', () => {
+    const i18nConfig = {
+      defaultLocale: 'en',
+      locales: [
+        { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US', icon: '/flags/en.svg' },
+        { code: 'pl', name: 'Polish', nativeName: 'Polski', langTag: 'pl-PL', icon: '/flags/pl.svg' },
+      ],
+    } as any;
+    const slugMap = { en: '/about', pl: '/pl/o-nas' };
+
+    test('displayType code renders uppercase locale codes', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = { type: 'locale-list', displayType: 'code', showFlag: false, children: [] } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div>EN</div>');
+      expect(result).toContain('<div>PL</div>');
+    });
+
+    test('displayType name renders English names', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = { type: 'locale-list', displayType: 'name', showFlag: false, children: [] } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div>English</div>');
+      expect(result).toContain('<div>Polish</div>');
+    });
+
+    test('flags render with flagStyle classes when icons configured', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = { type: 'locale-list', flagStyle: { display: 'flex' }, children: [] } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<img src="/flags/en.svg" alt="English flag" class="flex">');
+      expect(result).toContain('<img src="/flags/pl.svg" alt="Polski flag" class="flex">');
+    });
+
+    test('separator span with separatorStyle classes between links', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = { type: 'locale-list', separatorStyle: { display: 'flex' }, children: [] } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<span class="flex"></span>');
+    });
+
+    test('showCurrent false hides the active locale link', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = { type: 'locale-list', showCurrent: false, showFlag: false, children: [] } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('data-locale="en"');
+      expect(result).toContain('data-locale="pl"');
+    });
+
+    test('itemStyle and activeItemStyle combine on the current link', () => {
+      const ctx = createContext({ locale: 'en', i18nConfig, currentPageSlugMap: slugMap });
+      const node = {
+        type: 'locale-list',
+        showFlag: false,
+        itemStyle: { display: 'flex' },
+        activeItemStyle: { textAlign: 'center' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      const activeLine = result.split('\n').find((l) => l.includes('data-current="true"'));
+      expect(activeLine).toContain('class="flex text-center"');
+      const inactiveLine = result.split('\n').find((l) => l.includes('data-current="false"'));
+      expect(inactiveLine).toContain('class="flex"');
+      expect(inactiveLine).not.toContain('text-center');
+    });
+
+    test('locale list with interactive styles registers element class', () => {
+      const collected = new Map();
+      const ctx = createContext({
+        locale: 'en',
+        i18nConfig,
+        currentPageSlugMap: slugMap,
+        collectedInteractiveStyles: collected as any,
+      });
+      const node = {
+        type: 'locale-list',
+        label: 'Switcher',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('p_test-page_switcher');
+      expect(collected.has('p_test-page_switcher')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Conditional rendering advanced
+  // =========================================================================
+
+  describe('conditional rendering advanced', () => {
+    test('boolean mapping with single true value emits equality conditional', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: { _mapping: true, prop: 'show', values: { yes: true, no: false } },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`{show === 'yes' && (`);
+      expect(result).toContain(')}');
+    });
+
+    test('boolean mapping with multiple true values emits includes() conditional', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: { _mapping: true, prop: 'show', values: { a: true, b: true, c: false } },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(`{['a', 'b'].includes(show) && (`);
+    });
+
+    // A boolean mapping with no true values is "never shown". emitIfOpen emits
+    // only a `{/* hidden */}` comment (no `{cond && (` opener), so emitIfClose
+    // must emit nothing — a dangling `)}` is unparseable Astro. Matches the
+    // static `if: false` convention (hidden comment, element still emitted).
+    test('boolean mapping with no true values emits balanced hidden comment', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: { _mapping: true, prop: 'show', values: { a: false } },
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{/* hidden */}');
+      expect(result.trimEnd().endsWith(')}')).toBe(false);
+      expect(result).not.toContain(')}');
+      // Braces and parens balance
+      const count = (s: string, re: RegExp) => (s.match(re) ?? []).length;
+      expect(count(result, /\{/g)).toBe(count(result, /\}/g));
+      expect(count(result, /\(/g)).toBe(count(result, /\)/g));
+    });
+
+    test('list-item meta var conditional resolves index expression', () => {
+      const ctx = createContext({
+        listItemBinding: 'item',
+        listIndexVar: 'i',
+        listSourceVar: 'items',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: '{{itemLast}}',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{(i === items.length - 1) && (');
+      expect(result).toContain(')}');
+    });
+
+    test('bare identifier string condition wraps in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: 'showX',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{showX && (');
+      expect(result).toContain(')}');
+    });
+
+    test('non-identifier plain string condition is skipped entirely', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: 'not an identifier!',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('&& (');
+      expect(result).not.toContain(')}');
+      expect(result).toContain('<div>');
+    });
+
+    test('string condition in page context emits no conditional', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: '{{show}}',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('&& (');
+      expect(result).toContain('<div>');
+    });
+
+    test('mixed-content CMS condition emits no conditional (pinned)', () => {
+      // Only a full-match {{cms.field}} condition is supported; mixed strings
+      // fall through and render unconditionally.
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'entry' });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: 'show {{cms.flag}}',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('&& (');
+      expect(result).toContain('<div>');
+    });
+
+    test('CMS conditional honors custom entry binding', () => {
+      const ctx = createContext({ cmsMode: true, cmsEntryBinding: 'post' });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: '{{cms.featured}}',
+        children: ['x'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{post.data.featured && (');
+      expect(result).toContain(')}');
+    });
+  });
+
+  // =========================================================================
+  // Children forms (string / single node)
+  // =========================================================================
+
+  describe('children forms', () => {
+    test('string children value is emitted as text', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: 'plain string child',
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('plain string child');
+      expect(result).toContain('<div>');
+    });
+
+    test('single node object children is emitted', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: { type: 'node', tag: 'span', children: ['inner'] },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<span>');
+      expect(result).toContain('inner');
+    });
+  });
+
+  // =========================================================================
+  // Sizes attribute inheritance
+  // =========================================================================
+
+  describe('sizes attribute inheritance', () => {
+    test('missing mobile width inherits from tablet', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([['/test.jpg', { width: 100, height: 100, srcset: 'a.webp 100w' }]]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'T' },
+        style: { base: { width: '700px' }, tablet: { width: '500px' } },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('sizes="(max-width: 540px) 500px, (max-width: 1024px) 500px, 700px"');
+    });
+
+    test('responsive style with only base width uses base everywhere', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([['/test.jpg', { width: 100, height: 100, srcset: 'a.webp 100w' }]]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'T' },
+        style: { base: { width: '600px' } },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('sizes="(max-width: 540px) 600px, (max-width: 1024px) 600px, 600px"');
+    });
+  });
 });