meno-core 1.0.53 → 1.1.0

package/lib/server/ssr/ssrRenderer.test.ts

@@ -5,11 +5,33 @@
  *   - renderPageSSR
  */
 
-import { describe, test, expect, mock, beforeEach } from 'bun:test';
+import { describe, test, expect, mock, beforeEach, afterAll } from 'bun:test';
 
 // Mock modules that have side effects or need specific behavior
 // These MUST be called before importing the module under test
 
+// bun's mock.module() patches are PROCESS-GLOBAL and persist across test
+// files in the same run. Snapshot the real module exports here (imports are
+// evaluated before this module body runs, so these capture the originals)
+// and restore them in afterAll so later test files (e.g.
+// services/configService.test.ts) see the real implementations.
+import * as realJsonLoader from '../jsonLoader';
+import * as realImageMetadata from './imageMetadata';
+import * as realConfigServiceModule from '../services/configService';
+import * as realValidateStyleCoverage from '../validateStyleCoverage';
+
+const REAL_JSON_LOADER = { ...realJsonLoader };
+const REAL_IMAGE_METADATA = { ...realImageMetadata };
+const REAL_CONFIG_SERVICE_MODULE = { ...realConfigServiceModule };
+const REAL_VALIDATE_STYLE_COVERAGE = { ...realValidateStyleCoverage };
+
+afterAll(() => {
+  mock.module('../jsonLoader', () => REAL_JSON_LOADER);
+  mock.module('./imageMetadata', () => REAL_IMAGE_METADATA);
+  mock.module('../services/configService', () => REAL_CONFIG_SERVICE_MODULE);
+  mock.module('../validateStyleCoverage', () => REAL_VALIDATE_STYLE_COVERAGE);
+});
+
 // We'll store reference to mocks so tests can change behavior
 let mockImageMetadataMap = new Map();
 let mockImageFormat: 'webp' | 'avif' = 'webp';
@@ -44,6 +66,7 @@ mock.module('../services/configService', () => ({
   configService: {
     getImageFormat: () => mockImageFormat,
     getResponsiveScales: () => ({ enabled: false, baseReference: 16 }),
+    getSocial: () => ({}),
     load: async () => {},
     isLoaded: () => true,
     reset: () => {},
@@ -57,6 +80,7 @@ mock.module('../validateStyleCoverage', () => ({
 }));
 
 import { buildComponentHTML, renderPageSSR } from './ssrRenderer';
+import { generateRuleForClass } from '../../shared/cssGeneration';
 import type { ComponentDefinition, JSONPage } from '../../shared/types';
 
 // ---------------------------------------------------------------------------
@@ -394,11 +418,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'node',
         tag: 'p',
-        children: [
-          'Hello ',
-          { type: 'node', tag: 'strong', children: 'World' },
-          '!',
-        ],
+        children: ['Hello ', { type: 'node', tag: 'strong', children: 'World' }, '!'],
       };
       const html = await render(node);
       expect(html).toContain('Hello ');
@@ -472,11 +492,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'node',
         tag: 'p',
-        children: [
-          en,
-          ' literal ',
-          { type: 'node', tag: 'span', children: 'static' },
-        ],
+        children: [en, ' literal ', { type: 'node', tag: 'span', children: 'static' }],
       };
       const html = await render(node, { i18nConfig });
       expect(html).toContain('Hello');
@@ -819,7 +835,7 @@ describe('ssrRenderer', () => {
               {
                 type: 'node',
                 tag: 'span',
-                if: { _mapping: true, prop: 'showBadge', values: { 'true': true, 'false': false } },
+                if: { _mapping: true, prop: 'showBadge', values: { true: true, false: false } },
                 children: 'Badge',
               },
             ],
@@ -849,7 +865,7 @@ describe('ssrRenderer', () => {
               {
                 type: 'node',
                 tag: 'span',
-                if: { _mapping: true, prop: 'showBadge', values: { 'true': true, 'false': false } },
+                if: { _mapping: true, prop: 'showBadge', values: { true: true, false: false } },
                 children: 'Badge',
               },
             ],
@@ -879,7 +895,7 @@ describe('ssrRenderer', () => {
               {
                 type: 'node',
                 tag: 'span',
-                if: { _mapping: true, prop: 'variant', values: { 'hidden': false } },
+                if: { _mapping: true, prop: 'variant', values: { hidden: false } },
                 children: 'Visible',
               },
             ],
@@ -976,9 +992,7 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'div',
-            children: [
-              { type: 'node', tag: 'span', children: '{{title}}' },
-            ],
+            children: [{ type: 'node', tag: 'span', children: '{{title}}' }],
           },
           interface: {
             title: { type: 'string', default: 'Default Title' },
@@ -1156,7 +1170,7 @@ describe('ssrRenderer', () => {
       // The data-props should be keyed by component name, with label but not count
       const propsMatch = html.match(/data-props="([^"]*)"/);
       if (propsMatch) {
-        const propsJson = propsMatch[1].replace(/"/g, '"');
+        const propsJson = propsMatch[1]!.replace(/"/g, '"');
         const allProps = JSON.parse(propsJson);
         expect(allProps.VarsComp2).toBeDefined();
         expect(allProps.VarsComp2.label).toBe('Hello');
@@ -1251,27 +1265,34 @@ describe('ssrRenderer', () => {
       // data-component should contain both names (space-separated)
       const dcMatch = html.match(/data-component="([^"]*)"/);
       expect(dcMatch).toBeTruthy();
-      const names = dcMatch![1].split(' ');
+      const names = dcMatch![1]!.split(' ');
       expect(names).toContain('OuterComp');
       expect(names).toContain('InnerComp');
 
       // data-props should be keyed by component name
       const dpMatch = html.match(/data-props="([^"]*)"/);
       expect(dpMatch).toBeTruthy();
-      const allProps = JSON.parse(dpMatch![1].replace(/"/g, '"'));
+      const allProps = JSON.parse(dpMatch![1]!.replace(/"/g, '"'));
       expect(allProps.OuterComp).toEqual({ title: 'Hello' });
       expect(allProps.InnerComp).toEqual({ value: 'Hello' });
     });
 
     test('component where processStructure returns a string renders it', async () => {
-      const componentDef: ComponentDefinition = {
-        component: {
-          structure: '{{text}}',
-          interface: {
-            text: { type: 'string', default: 'Just text' },
+      // Legacy data shape: old projects may store a bare template string as the
+      // component structure. The current ComponentDefinition type only allows a
+      // ComponentNode, but the renderer still supports the string fallback
+      // (renderComponent's `typeof processedStructure === 'string'` branch), so
+      // model the legacy value the way it actually arrives — parsed from JSON.
+      const componentDef: ComponentDefinition = JSON.parse(
+        JSON.stringify({
+          component: {
+            structure: '{{text}}',
+            interface: {
+              text: { type: 'string', default: 'Just text' },
+            },
           },
-        },
-      };
+        }),
+      );
 
       const node = {
         type: 'component',
@@ -1380,10 +1401,7 @@ describe('ssrRenderer', () => {
         type: 'node',
         tag: 'Link',
         attributes: { to: '/multi' },
-        children: [
-          { type: 'node', tag: 'span', children: 'Icon' },
-          'Text',
-        ],
+        children: [{ type: 'node', tag: 'span', children: 'Icon' }, 'Text'],
       };
       const html = await render(node);
       expect(html).toContain('<a');
@@ -1609,10 +1627,14 @@ describe('ssrRenderer', () => {
       const result = await renderPageSSR(pageData, { Button: buttonDef });
       // The <a> should exist with the component's default class plus the instance override classes.
       expect(result.html).toMatch(/<a\s+href="\/partner"[^>]*class="[^"]*olink[^"]*"/);
-      // Instance style for backgroundColor "#252525" produces the bgc-#252525 utility class.
-      expect(result.html).toContain('bgc-#252525');
-      // Instance style for color "#ffffff" (the override) produces c-#ffffff.
-      expect(result.html).toContain('c-#ffffff');
+      // Hex color values become Tailwind arbitrary-value classes. Verify the
+      // INSTANCE overrides (#252525 / #ffffff), not the structure defaults, won.
+      expect(result.html).toContain('bg-[#252525]');
+      expect(result.html).not.toContain('bg-[#ffffff]');
+      expect(generateRuleForClass('bg-[#252525]')).toBe('background-color: #252525;');
+      expect(result.html).toContain('text-[#ffffff]');
+      expect(result.html).not.toContain('text-[#000000]');
+      expect(generateRuleForClass('text-[#ffffff]')).toBe('color: #ffffff;');
     });
 
     test('instance style overrides structure style on the same property', async () => {
@@ -1651,10 +1673,10 @@ describe('ssrRenderer', () => {
       };
 
       const result = await renderPageSSR(pageData, { Button: buttonDef });
-      expect(result.html).toContain('mb-32px');
-      expect(result.html).not.toContain('mb-0');
+      expect(result.html).toContain('mb-8');
+      expect(result.html).not.toContain('mb-[0]');
       // Untouched structure properties remain.
-      expect(result.html).toContain('p-8px');
+      expect(result.html).toContain('p-2');
     });
 
     test('extracts locale from path when not explicitly provided', async () => {
@@ -1684,9 +1706,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: ['Apple', 'Banana', 'Cherry'],
-        children: [
-          { type: 'node', tag: 'li', children: '{{item}}' },
-        ],
+        children: [{ type: 'node', tag: 'li', children: '{{item}}' }],
       };
       const html = await render(node);
       expect(html).toContain('<li');
@@ -1699,9 +1719,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: [],
-        children: [
-          { type: 'node', tag: 'li', children: '{{item}}' },
-        ],
+        children: [{ type: 'node', tag: 'li', children: '{{item}}' }],
       };
       const html = await render(node);
       expect(html).toBe('');
@@ -1712,9 +1730,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'collection',
         source: 'posts',
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
       // Without cmsService, returns empty string
       const html = await render(node);
@@ -1801,9 +1817,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'collection',
         source: 'posts',
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1828,9 +1842,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'authors',
         itemAs: 'author',
-        children: [
-          { type: 'node', tag: 'span', children: '{{author.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{author.name}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1840,9 +1852,7 @@ describe('ssrRenderer', () => {
 
     test('list node with collection source and direct item IDs', async () => {
       const mockCmsService = {
-        getItemsByIds: async (collection: string, ids: string[]) => [
-          { _id: 'a1', title: 'Featured Post' },
-        ],
+        getItemsByIds: async (_collection: string, _ids: string[]) => [{ _id: 'a1', title: 'Featured Post' }],
         getSchema: () => undefined,
       };
 
@@ -1851,9 +1861,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'posts',
         items: ['a1'],
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1862,7 +1870,7 @@ describe('ssrRenderer', () => {
 
     test('list node with collection source and items as single string ID', async () => {
       const mockCmsService = {
-        getItemsByIds: async (collection: string, ids: string[]) => {
+        getItemsByIds: async (_collection: string, ids: string[]) => {
           expect(ids).toEqual(['single-id']);
           return [{ _id: 'single-id', title: 'Single Post' }];
         },
@@ -1874,9 +1882,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'posts',
         items: 'single-id',
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1897,9 +1903,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'posts',
         excludeCurrentItem: true,
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const cmsContext = { cms: { _id: 'current-id', title: 'Current' } };
@@ -1912,14 +1916,10 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'list',
         sourceType: 'prop',
-        source: [
-          { name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'E' },
-        ],
+        source: [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'E' }],
         offset: 1,
         limit: 2,
-        children: [
-          { type: 'node', tag: 'span', children: '{{item.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{item.name}}' }],
       };
       const html = await render(node);
       // After offset 1, items are [B, C, D, E]; after limit 2, items are [B, C]
@@ -1931,9 +1931,7 @@ describe('ssrRenderer', () => {
 
     test('list node with emitTemplate emits a template element', async () => {
       const mockCmsService = {
-        queryItems: async () => [
-          { _id: '1', title: 'Post 1' },
-        ],
+        queryItems: async () => [{ _id: '1', title: 'Post 1' }],
         getSchema: () => undefined,
       };
 
@@ -1942,9 +1940,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'posts',
         emitTemplate: true,
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1955,9 +1951,7 @@ describe('ssrRenderer', () => {
 
     test('list node with collection source and schema adds _url to items', async () => {
       const mockCmsService = {
-        queryItems: async () => [
-          { _id: '1', title: 'Post 1', _slug: 'post-1' },
-        ],
+        queryItems: async () => [{ _id: '1', title: 'Post 1', _slug: 'post-1' }],
         getSchema: () => ({
           id: 'posts',
           name: 'Posts',
@@ -1971,9 +1965,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'collection',
         source: 'posts',
-        children: [
-          { type: 'node', tag: 'a', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'a', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -1985,9 +1977,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: ['a', 'b'],
-        children: [
-          { type: 'node', tag: 'span', children: '{{item}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{item}}' }],
       };
       const html = await render(node);
       // Should just be the repeated children, no wrapper
@@ -1998,18 +1988,14 @@ describe('ssrRenderer', () => {
 
     test('legacy cms-list type is treated as collection sourceType', async () => {
       const mockCmsService = {
-        queryItems: async () => [
-          { _id: '1', title: 'Legacy Post' },
-        ],
+        queryItems: async () => [{ _id: '1', title: 'Legacy Post' }],
         getSchema: () => undefined,
       };
 
       const node = {
         type: 'cms-list',
         collection: 'posts',
-        children: [
-          { type: 'node', tag: 'div', children: '{{post.title}}' },
-        ],
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
       };
 
       const html = await render(node, { cmsService: mockCmsService });
@@ -2020,7 +2006,7 @@ describe('ssrRenderer', () => {
 
     test('list node with items as CMS template resolves from cmsContext', async () => {
       const mockCmsService = {
-        getItemsByIds: async (collection: string, ids: string[]) => {
+        getItemsByIds: async (_collection: string, ids: string[]) => {
           expect(ids).toEqual(['ref-1', 'ref-2']);
           return [
             { _id: 'ref-1', name: 'Referenced 1' },
@@ -2035,9 +2021,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'authors',
         items: '{{cms.authorIds}}',
-        children: [
-          { type: 'node', tag: 'span', children: '{{author.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{author.name}}' }],
       };
 
       const cmsContext = { cms: { authorIds: ['ref-1', 'ref-2'] } };
@@ -2057,9 +2041,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'authors',
         items: '{{cms.nonexistent}}',
-        children: [
-          { type: 'node', tag: 'span', children: '{{author.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{author.name}}' }],
       };
 
       const cmsContext = { cms: { title: 'exists' } };
@@ -2069,7 +2051,7 @@ describe('ssrRenderer', () => {
 
     test('list node with items as CMS template resolves single value', async () => {
       const mockCmsService = {
-        getItemsByIds: async (collection: string, ids: string[]) => {
+        getItemsByIds: async (_collection: string, ids: string[]) => {
           expect(ids).toEqual(['single-ref']);
           return [{ _id: 'single-ref', name: 'Single' }];
         },
@@ -2081,9 +2063,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'authors',
         items: '{{cms.authorId}}',
-        children: [
-          { type: 'node', tag: 'span', children: '{{author.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{author.name}}' }],
       };
 
       const cmsContext = { cms: { authorId: 'single-ref' } };
@@ -2098,9 +2078,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: 'tags',
-        children: [
-          { type: 'node', tag: 'span', children: '{{item.label}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{item.label}}' }],
       };
 
       const cmsContext = { cms: { tags: [{ label: 'tag1' }, { label: 'tag2' }] } };
@@ -2114,9 +2092,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: '',
-        children: [
-          { type: 'node', tag: 'span', children: '{{item}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{item}}' }],
       };
       const html = await render(node);
       expect(html).toBe('');
@@ -2159,13 +2135,10 @@ describe('ssrRenderer', () => {
         tag: 'div',
         children: `${RAW_HTML_PREFIX}${rawSlice}`,
       };
-      const result = await buildComponentHTML(
-        node as any,
-        {},
-        {},
-        'fr',
-        { defaultLocale: 'en', locales: [{ code: 'en' }, { code: 'fr' }] } as any,
-      );
+      const result = await buildComponentHTML(node as any, {}, {}, 'fr', {
+        defaultLocale: 'en',
+        locales: [{ code: 'en' }, { code: 'fr' }],
+      } as any);
       const processed = result.processedRawHtmlCollector.get(rawSlice);
       expect(processed).toContain('href="/fr/about"');
     });
@@ -2188,10 +2161,7 @@ describe('ssrRenderer', () => {
     });
 
     test('renders mixed array of strings and nodes', async () => {
-      const nodes = [
-        'Plain text ',
-        { type: 'node', tag: 'b', children: 'bold' },
-      ];
+      const nodes = ['Plain text ', { type: 'node', tag: 'b', children: 'bold' }];
       const result = await buildComponentHTML(nodes as any);
       expect(result.html).toContain('Plain text');
       expect(result.html).toContain('<b');
@@ -2248,11 +2218,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'node',
         tag: 'div',
-        children: [
-          null,
-          { type: 'node', tag: 'span', children: 'valid' },
-          undefined,
-        ],
+        children: [null, { type: 'node', tag: 'span', children: 'valid' }, undefined],
       };
       const html = await render(node);
       expect(html).toContain('valid');
@@ -2551,8 +2517,8 @@ describe('ssrRenderer', () => {
       };
       const result = await renderFull(node);
       expect(result.preloadImages.length).toBe(1);
-      expect(result.preloadImages[0].type).toBe('image/avif');
-      expect(result.preloadImages[0].srcset).toBe('/hero.avif 800w');
+      expect(result.preloadImages[0]!.type).toBe('image/avif');
+      expect(result.preloadImages[0]!.srcset).toBe('/hero.avif 800w');
     });
 
     test('collects high-priority images with WebP when no AVIF available', async () => {
@@ -2569,7 +2535,7 @@ describe('ssrRenderer', () => {
       };
       const result = await renderFull(node);
       expect(result.preloadImages.length).toBe(1);
-      expect(result.preloadImages[0].type).toBe('image/webp');
+      expect(result.preloadImages[0]!.type).toBe('image/webp');
     });
 
     test('does not collect preload images when fetchpriority is not high', async () => {
@@ -2662,9 +2628,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr', icon: '/flags/fr.svg' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2690,9 +2654,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2717,9 +2679,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2744,9 +2704,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2770,9 +2728,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2798,9 +2754,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr', icon: '/flags/fr.svg' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2824,9 +2778,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr', icon: '/flags/fr.svg' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'locale-list',
@@ -2851,9 +2803,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'index', slugs: { en: '', fr: '' } },
-      ];
+      const slugMappings = [{ pageId: 'index', slugs: { en: '', fr: '' } }];
 
       const node = {
         type: 'locale-list',
@@ -2882,9 +2832,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'index', slugs: { en: '', fr: '' } },
-      ];
+      const slugMappings = [{ pageId: 'index', slugs: { en: '', fr: '' } }];
 
       const node = {
         type: 'locale-list',
@@ -2999,9 +2947,7 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'div',
-            children: [
-              { type: 'slot' },
-            ],
+            children: [{ type: 'slot' }],
           },
           interface: {},
         },
@@ -3010,9 +2956,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'component',
         component: 'Wrapper',
-        children: [
-          { type: 'node', tag: 'p', children: 'Slotted Content' },
-        ],
+        children: [{ type: 'node', tag: 'p', children: 'Slotted Content' }],
       };
 
       const html = await render(node, { globalComponents: { Wrapper: wrapperDef } });
@@ -3085,7 +3029,16 @@ describe('ssrRenderer', () => {
       };
 
       const cmsContext = { cms: { title: 'My Article', body: 'Article body content' } };
-      const result = await renderPageSSR(pageData, { Article: articleDef }, '/', '', undefined, undefined, undefined, cmsContext);
+      const result = await renderPageSSR(
+        pageData,
+        { Article: articleDef },
+        '/',
+        '',
+        undefined,
+        undefined,
+        undefined,
+        cmsContext,
+      );
 
       expect(result.html).toContain('<article');
       expect(result.html).toContain('My Article');
@@ -3102,9 +3055,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'node',
         tag: 'div',
-        interactiveStyles: [
-          { trigger: 'hover', style: { opacity: '0.8' } },
-        ],
+        interactiveStyles: [{ trigger: 'hover', style: { opacity: '0.8' } }],
         children: 'Interactive',
       };
       const result = await renderFull(node, { pagePath: '/test-page' });
@@ -3129,9 +3080,7 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'div',
-            interactiveStyles: [
-              { trigger: 'hover', style: { opacity: '0.5' } },
-            ],
+            interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
             children: 'hover me',
           },
           interface: {},
@@ -3166,9 +3115,9 @@ describe('ssrRenderer', () => {
             tag: 'div',
             interactiveStyles: [
               {
-                trigger: 'hover',
+                postfix: ':hover',
                 style: {
-                  backgroundColor: { _mapping: true, prop: 'hoverColor', values: { 'red': 'red', 'blue': 'blue' } },
+                  backgroundColor: { _mapping: true, prop: 'hoverColor', values: { red: 'red', blue: 'blue' } },
                 },
               },
             ],
@@ -3232,8 +3181,8 @@ describe('ssrRenderer', () => {
       // Since we can't directly set templateContext through buildComponentHTML,
       // we use a CMS context + items with {{cms.field}} template
       const mockCmsService = {
-        getItemsByIds: async (collection: string, ids: string[]) => {
-          return ids.map(id => ({ _id: id, name: `Author ${id}` }));
+        getItemsByIds: async (_collection: string, ids: string[]) => {
+          return ids.map((id) => ({ _id: id, name: `Author ${id}` }));
         },
         getSchema: () => undefined,
       };
@@ -3243,9 +3192,7 @@ describe('ssrRenderer', () => {
         sourceType: 'collection',
         source: 'authors',
         items: '{{cms.relatedAuthors}}',
-        children: [
-          { type: 'node', tag: 'span', children: '{{author.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{author.name}}' }],
       };
 
       const cmsContext = { cms: { relatedAuthors: ['a1', 'a2'] } };
@@ -3262,7 +3209,7 @@ describe('ssrRenderer', () => {
       const mockCmsService = {
         getItemsByIds: async (_collection: string, ids: string[]) => {
           calledWith.push(ids);
-          return ids.map(id => ({ _id: id, name: `Tag ${id}` }));
+          return ids.map((id) => ({ _id: id, name: `Tag ${id}` }));
         },
         getSchema: () => undefined,
       };
@@ -3270,7 +3217,7 @@ describe('ssrRenderer', () => {
       const Card: ComponentDefinition = {
         component: {
           interface: {
-            config: { type: 'list' as any, default: [] },
+            config: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -3278,9 +3225,7 @@ describe('ssrRenderer', () => {
             source: 'tags',
             itemAs: 'tag',
             items: '{{config.0.tagIds}}',
-            children: [
-              { type: 'node', tag: 'span', children: '{{tag.name}}' },
-            ],
+            children: [{ type: 'node', tag: 'span', children: '{{tag.name}}' }],
           },
         },
       };
@@ -3318,7 +3263,7 @@ describe('ssrRenderer', () => {
       const Card: ComponentDefinition = {
         component: {
           interface: {
-            config: { type: 'list' as any, default: [] },
+            config: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -3326,9 +3271,7 @@ describe('ssrRenderer', () => {
             source: 'posts',
             itemAs: 'post',
             filter: { category: '{{config.0.collection}}' },
-            children: [
-              { type: 'node', tag: 'div', children: '{{post.title}}' },
-            ],
+            children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
           },
         },
       };
@@ -3366,7 +3309,7 @@ describe('ssrRenderer', () => {
         ],
         getItemsByIds: async (_collection: string, ids: string[]) => {
           calledWith.push(ids);
-          return ids.map(id => ({ _id: id, name: `Item ${id}` }));
+          return ids.map((id) => ({ _id: id, name: `Item ${id}` }));
         },
         getSchema: () => undefined,
       };
@@ -3377,7 +3320,7 @@ describe('ssrRenderer', () => {
             // type: 'list' so the array prop value passes validation. The prop
             // `tag` will land in componentResolvedProps; the parent loop var
             // `tag` (set to the current outer item) will land in templateContext.
-            tag: { type: 'list' as any, default: [] },
+            tag: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -3385,9 +3328,7 @@ describe('ssrRenderer', () => {
             source: 'tags',
             itemAs: 'inner',
             items: '{{tag.id}}',
-            children: [
-              { type: 'node', tag: 'span', children: '{{inner.name}}' },
-            ],
+            children: [{ type: 'node', tag: 'span', children: '{{inner.name}}' }],
           },
         },
       };
@@ -3421,9 +3362,10 @@ describe('ssrRenderer', () => {
     test('page-root filter does not silently resolve {{cms.X}} (regression)', async () => {
       // Without a host component, ctx.componentResolvedProps is undefined and
       // ctx.templateContext is undefined → buildListResolutionScope returns
-      // undefined → resolveFilterTemplates leaves filter values literal.
-      // This pins down the documented behavior: the cmsContext namespace does
-      // NOT silently merge into filter scope.
+      // undefined → the template cannot resolve. This pins down the documented
+      // behavior: the cmsContext namespace does NOT silently merge into filter
+      // scope — the unresolvable condition is dropped from the query (and
+      // surfaced via logRuntimeError) instead of resolving against cmsContext.
       const queries: any[] = [];
       const mockCmsService = {
         queryItems: async (q: any) => {
@@ -3448,7 +3390,8 @@ describe('ssrRenderer', () => {
       });
 
       expect(queries.length).toBe(1);
-      expect(queries[0].filter).toEqual({ category: '{{cms.something}}' });
+      // The condition is dropped, NOT resolved to { category: 'shouldNotBeUsed' }.
+      expect(queries[0].filter).toEqual({});
     });
   });
 
@@ -3495,9 +3438,7 @@ describe('ssrRenderer', () => {
           { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
         ],
       };
-      const slugMappings = [
-        { pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } },
-      ];
+      const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
 
       const node = {
         type: 'link',
@@ -3524,9 +3465,7 @@ describe('ssrRenderer', () => {
         type: 'list',
         sourceType: 'prop',
         source: [{ name: 'a' }, { name: 'b' }],
-        children: [
-          { type: 'node', tag: 'span', children: '{{item.name}}' },
-        ],
+        children: [{ type: 'node', tag: 'span', children: '{{item.name}}' }],
       };
 
       const result = await renderFull(node, { pagePath: '/test' });
@@ -3546,9 +3485,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'embed',
         html: '<b>test</b>',
-        interactiveStyles: [
-          { trigger: 'hover', style: { opacity: '0.5' } },
-        ],
+        interactiveStyles: [{ trigger: 'hover', style: { opacity: '0.5' } }],
       };
 
       const result = await renderFull(node, { pagePath: '/test' });
@@ -3576,9 +3513,7 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'link',
         href: '/test',
-        interactiveStyles: [
-          { trigger: 'hover', style: { color: 'blue' } },
-        ],
+        interactiveStyles: [{ trigger: 'hover', style: { color: 'blue' } }],
         children: 'Hover Link',
       };
 
@@ -3657,9 +3592,7 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'div',
-            children: [
-              { type: 'slot' },
-            ],
+            children: [{ type: 'slot' }],
           },
           interface: {},
         },
@@ -3672,9 +3605,7 @@ describe('ssrRenderer', () => {
           {
             type: 'node',
             tag: 'span',
-            interactiveStyles: [
-              { trigger: 'hover', style: { opacity: '0.5' } },
-            ],
+            interactiveStyles: [{ trigger: 'hover', style: { opacity: '0.5' } }],
             children: 'Slotted',
           },
         ],
@@ -3688,8 +3619,8 @@ describe('ssrRenderer', () => {
       expect(result.interactiveStylesMap.size).toBeGreaterThan(0);
       // The class should use page context (p_ prefix) not component context (c_ prefix)
       const classNames = Array.from(result.interactiveStylesMap.keys());
-      const hasPageContext = classNames.some(cls => cls.startsWith('p_'));
-      const hasComponentContext = classNames.some(cls => cls.startsWith('c_'));
+      const _hasPageContext = classNames.some((cls) => cls.startsWith('p_'));
+      const _hasComponentContext = classNames.some((cls) => cls.startsWith('c_'));
       // At least check that the styles were registered
       expect(classNames.length).toBeGreaterThan(0);
     });
@@ -3789,7 +3720,7 @@ describe('ssrRenderer', () => {
       const FeatureGrid: ComponentDefinition = {
         component: {
           interface: {
-            features: { type: 'list' as any, default: [] },
+            features: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'node',
@@ -3871,7 +3802,7 @@ describe('ssrRenderer', () => {
       const CardGrid: ComponentDefinition = {
         component: {
           interface: {
-            cards: { type: 'list' as any, default: [] },
+            cards: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -3947,7 +3878,7 @@ describe('ssrRenderer', () => {
       const FeatureGrid: ComponentDefinition = {
         component: {
           interface: {
-            features: { type: 'list' as any, default: [] },
+            features: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'node',
@@ -4026,7 +3957,7 @@ describe('ssrRenderer', () => {
       const SectionComp: ComponentDefinition = {
         component: {
           interface: {
-            features: { type: 'list' as any, default: [] },
+            features: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -4109,15 +4040,13 @@ describe('ssrRenderer', () => {
       const ListGrid: ComponentDefinition = {
         component: {
           interface: {
-            items: { type: 'list' as any, default: [] },
+            items: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
             sourceType: 'prop',
             source: 'items',
-            children: [
-              { type: 'slot' },
-            ],
+            children: [{ type: 'slot' }],
           },
         },
       };
@@ -4159,7 +4088,7 @@ describe('ssrRenderer', () => {
       const Gallery: ComponentDefinition = {
         component: {
           interface: {
-            items: { type: 'list' as any, default: [] },
+            items: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
@@ -4217,9 +4146,7 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'section',
-            children: [
-              { type: 'slot' },
-            ],
+            children: [{ type: 'slot' }],
           },
         },
       };
@@ -4229,7 +4156,7 @@ describe('ssrRenderer', () => {
       const Host: ComponentDefinition = {
         component: {
           interface: {
-            testimonials: { type: 'list' as any, default: [] },
+            testimonials: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'node',
@@ -4244,9 +4171,7 @@ describe('ssrRenderer', () => {
                     type: 'list',
                     sourceType: 'prop',
                     source: 'testimonials',
-                    children: [
-                      { type: 'node', tag: 'p', children: '{{item.name}}' },
-                    ],
+                    children: [{ type: 'node', tag: 'p', children: '{{item.name}}' }],
                   },
                 ],
               },
@@ -4259,11 +4184,7 @@ describe('ssrRenderer', () => {
         type: 'component',
         component: 'Host',
         props: {
-          testimonials: [
-            { name: 'Alice' },
-            { name: 'Bob' },
-            { name: 'Carol' },
-          ],
+          testimonials: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }],
         },
       };
 
@@ -4289,7 +4210,7 @@ describe('ssrRenderer', () => {
       const Host: ComponentDefinition = {
         component: {
           interface: {
-            testimonials: { type: 'list' as any, default: [] },
+            testimonials: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'component',
@@ -4299,9 +4220,7 @@ describe('ssrRenderer', () => {
                 type: 'list',
                 sourceType: 'prop',
                 source: '{{testimonials}}',
-                children: [
-                  { type: 'node', tag: 'p', children: '{{item.name}}' },
-                ],
+                children: [{ type: 'node', tag: 'p', children: '{{item.name}}' }],
               },
             ],
           },
@@ -4322,15 +4241,13 @@ describe('ssrRenderer', () => {
       const Direct: ComponentDefinition = {
         component: {
           interface: {
-            items: { type: 'list' as any, default: [] },
+            items: { type: 'list' as const, itemSchema: {}, default: [] },
           },
           structure: {
             type: 'list',
             sourceType: 'prop',
             source: 'items',
-            children: [
-              { type: 'node', tag: 'li', children: '{{item.label}}' },
-            ],
+            children: [{ type: 'node', tag: 'li', children: '{{item.label}}' }],
           },
         },
       };
@@ -4369,9 +4286,7 @@ describe('ssrRenderer', () => {
                 type: 'list',
                 sourceType: 'prop',
                 source: 'missing',
-                children: [
-                  { type: 'node', tag: 'p', children: '{{item}}' },
-                ],
+                children: [{ type: 'node', tag: 'p', children: '{{item}}' }],
               },
             ],
           },
@@ -4565,7 +4480,16 @@ describe('ssrRenderer', () => {
       };
       const result = await buildComponentHTML(
         node as any,
-        {}, {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+        {},
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
       );
       expect(result.html).toContain('data-element-path="0"');
       expect(result.html).toContain('data-element-path="0,0"');
@@ -4582,19 +4506,29 @@ describe('ssrRenderer', () => {
           structure: {
             type: 'node',
             tag: 'div',
-            children: [{
-              type: 'list',
-              sourceType: 'prop',
-              source: 'items',
-              children: [{ type: 'node', tag: 'p', children: '{{item.label}}' }],
-            }],
+            children: [
+              {
+                type: 'list',
+                sourceType: 'prop',
+                source: 'items',
+                children: [{ type: 'node', tag: 'p', children: '{{item.label}}' }],
+              },
+            ],
           },
         },
       };
       const result = await buildComponentHTML(
         { type: 'component', component: 'Card' } as any,
         { Card },
-        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
       );
       expect(result.html).toContain('data-cms-item-index="0"');
       expect(result.html).toContain('data-cms-item-index="1"');
@@ -4611,7 +4545,15 @@ describe('ssrRenderer', () => {
       const result = await buildComponentHTML(
         { type: 'component', component: 'Card' } as any,
         { Card },
-        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
       );
       expect(result.html).toContain('data-component-root="true"');
       expect(result.html).toContain('data-component-context="Card"');
@@ -4643,11 +4585,129 @@ describe('ssrRenderer', () => {
       const result = await buildComponentHTML(
         page as any,
         { Card },
-        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
       );
       expect(result.html).toContain('data-element-path="0"');
       expect(result.html).toContain('data-element-path="0,0"');
       expect(result.html).toContain('data-element-path="0,0,0"');
     });
+
+    // Island / Custom nodes are black boxes meno-core can't render — they show a
+    // placeholder on the canvas. The wrapper must still carry data-element-path so
+    // a click selects the node like any regular element (it didn't, before).
+    test('emits data-element-path on an empty island placeholder wrapper', async () => {
+      const page = {
+        type: 'node',
+        tag: 'div',
+        children: [{ type: 'island', src: 'Counter.tsx', client: { directive: 'load' } }],
+      };
+      const result = await buildComponentHTML(
+        page as any,
+        {},
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
+      );
+      expect(result.html).toContain('data-island="Counter.tsx"');
+      expect(result.html).toContain('data-element-path="0,0"');
+      // Placeholder shows the island's basename when it has no slotted children.
+      expect(result.html).toContain('Counter');
+    });
+
+    test('emits data-element-path on a custom node wrapper and stamps its slotted children', async () => {
+      const page = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          {
+            type: 'custom',
+            src: 'Fancy.astro',
+            children: [{ type: 'node', tag: 'span', children: ['slotted'] }],
+          },
+        ],
+      };
+      const result = await buildComponentHTML(
+        page as any,
+        {},
+        {},
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true,
+      );
+      expect(result.html).toContain('data-custom="Fancy.astro"');
+      // Wrapper is page-absolute [0,0]; the slotted child appends its index → [0,0,0].
+      expect(result.html).toContain('data-element-path="0,0"');
+      expect(result.html).toContain('data-element-path="0,0,0"');
+      expect(result.html).toContain('slotted');
+    });
+  });
+
+  // Remote-data lists (sourceType: 'remote'): the SSR fetches the endpoint at render time and
+  // applies the query, mirroring the meno-astro runtime's getRemoteData so the editor SSR matches
+  // the real Astro build (previously processList had no 'remote' branch → always rendered empty).
+  describe('processList — remote source', () => {
+    const realFetch = globalThis.fetch;
+    const mockFetch = (payload: unknown, ok = true) => {
+      globalThis.fetch = mock(
+        async () => ({ ok, json: async () => payload }) as unknown as Response,
+      ) as unknown as typeof fetch;
+    };
+    afterAll(() => {
+      globalThis.fetch = realFetch;
+    });
+
+    const remoteList = (extra: Record<string, unknown> = {}) => ({
+      type: 'node',
+      tag: 'div',
+      children: [
+        {
+          type: 'list',
+          sourceType: 'remote',
+          url: 'https://api.example.com/coins',
+          children: [{ type: 'node', tag: 'span', children: ['{{item.name}}'] }],
+          ...extra,
+        },
+      ],
+    });
+
+    test('fetches the endpoint and renders an element per item', async () => {
+      mockFetch([{ name: 'Bitcoin' }, { name: 'Ethereum' }]);
+      const html = await render(remoteList());
+      expect(html).toContain('Bitcoin');
+      expect(html).toContain('Ethereum');
+    });
+
+    test('navigates the dot-path and applies limit', async () => {
+      mockFetch({ data: { items: [{ name: 'A' }, { name: 'B' }, { name: 'C' }] } });
+      const html = await render(remoteList({ path: 'data.items', limit: 2 }));
+      expect(html).toContain('A');
+      expect(html).toContain('B');
+      expect(html).not.toContain('C');
+    });
+
+    test('renders empty (no crash) when the endpoint fails', async () => {
+      mockFetch(null, false);
+      const html = await render(remoteList());
+      expect(html).not.toContain('span');
+    });
   });
 });