npm - meno-core - Versions diffs - 1.0.47 → 1.0.49 - Mend

meno-core 1.0.47 → 1.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/build-astro.ts +2 -2
package/dist/build-static.js +7 -7
package/dist/chunks/{chunk-UUA5LEWF.js → chunk-6IVUG7FY.js} +138 -7
package/dist/chunks/chunk-6IVUG7FY.js.map +7 -0
package/dist/chunks/{chunk-XSWR3QLI.js → chunk-AZQYF6KE.js} +261 -130
package/dist/chunks/chunk-AZQYF6KE.js.map +7 -0
package/dist/chunks/{chunk-47UNLQUU.js → chunk-CHD5UCFF.js} +57 -12
package/dist/chunks/chunk-CHD5UCFF.js.map +7 -0
package/dist/chunks/{chunk-FGUZOYJX.js → chunk-EQYDSPBB.js} +435 -131
package/dist/chunks/chunk-EQYDSPBB.js.map +7 -0
package/dist/chunks/{chunk-IF3RATBY.js → chunk-H4JSCDNW.js} +2 -2
package/dist/chunks/{chunk-KITQJYZV.js → chunk-J23ZX5AP.js} +40 -4
package/dist/chunks/chunk-J23ZX5AP.js.map +7 -0
package/dist/chunks/{chunk-LJFB5EBT.js → chunk-JER5NQVM.js} +5 -5
package/dist/chunks/{chunk-ZTKHJQ2Z.js → chunk-KPU2XHOS.js} +5 -2
package/dist/chunks/{chunk-ZTKHJQ2Z.js.map → chunk-KPU2XHOS.js.map} +2 -2
package/dist/chunks/{chunk-BCLGRZ3U.js → chunk-LKAGAQ3M.js} +2 -2
package/dist/chunks/{chunk-FED5MME6.js → chunk-S2CX6HFM.js} +262 -26
package/dist/chunks/chunk-S2CX6HFM.js.map +7 -0
package/dist/chunks/{configService-DYCUEURL.js → configService-CCA6AIDI.js} +3 -3
package/dist/entries/server-router.js +9 -9
package/dist/entries/server-router.js.map +2 -2
package/dist/lib/client/index.js +64 -20
package/dist/lib/client/index.js.map +3 -3
package/dist/lib/server/index.js +1737 -296
package/dist/lib/server/index.js.map +4 -4
package/dist/lib/shared/index.js +50 -10
package/dist/lib/shared/index.js.map +3 -3
package/entries/server-router.tsx +6 -2
package/lib/client/core/ComponentBuilder.test.ts +17 -0
package/lib/client/core/ComponentBuilder.ts +25 -1
package/lib/client/core/builders/embedBuilder.ts +15 -2
package/lib/client/core/builders/linkNodeBuilder.ts +15 -2
package/lib/client/core/builders/localeListBuilder.ts +17 -6
package/lib/client/styles/StyleInjector.ts +3 -2
package/lib/client/theme.ts +4 -4
package/lib/server/cssGenerator.test.ts +64 -1
package/lib/server/cssGenerator.ts +48 -9
package/lib/server/index.ts +1 -1
package/lib/server/jsonLoader.test.ts +0 -17
package/lib/server/jsonLoader.ts +0 -81
package/lib/server/providers/fileSystemCMSProvider.test.ts +163 -0
package/lib/server/providers/fileSystemCMSProvider.ts +200 -11
package/lib/server/routes/api/variables.ts +4 -2
package/lib/server/routes/index.ts +1 -1
package/lib/server/routes/pages.ts +23 -1
package/lib/server/services/cmsService.test.ts +246 -0
package/lib/server/services/cmsService.ts +122 -5
package/lib/server/services/configService.ts +5 -0
package/lib/server/ssr/attributeBuilder.ts +41 -0
package/lib/server/ssr/htmlGenerator.test.ts +114 -2
package/lib/server/ssr/htmlGenerator.ts +53 -6
package/lib/server/ssr/liveReloadIntegration.test.ts +209 -0
package/lib/server/ssr/ssrRenderer.test.ts +362 -1
package/lib/server/ssr/ssrRenderer.ts +216 -72
package/lib/server/utils/jsonLineMapper.test.ts +53 -1
package/lib/server/utils/jsonLineMapper.ts +43 -3
package/lib/server/webflow/buildWebflow.ts +343 -123
package/lib/server/webflow/index.ts +1 -0
package/lib/server/webflow/nodeToWebflow.test.ts +3170 -0
package/lib/server/webflow/nodeToWebflow.ts +2141 -129
package/lib/server/webflow/styleMapper.test.ts +389 -0
package/lib/server/webflow/styleMapper.ts +517 -63
package/lib/server/webflow/templateWrapper.ts +49 -0
package/lib/server/webflow/types.ts +218 -18
package/lib/shared/cssGeneration.test.ts +267 -1
package/lib/shared/cssGeneration.ts +240 -18
package/lib/shared/cssProperties.test.ts +247 -1
package/lib/shared/cssProperties.ts +196 -6
package/lib/shared/elementClassName.test.ts +15 -0
package/lib/shared/elementClassName.ts +7 -3
package/lib/shared/interfaces/contentProvider.ts +39 -6
package/lib/shared/pathSecurity.ts +16 -0
package/lib/shared/registry/nodeTypes/ListNodeType.ts +1 -1
package/lib/shared/responsiveScaling.test.ts +143 -0
package/lib/shared/responsiveScaling.ts +253 -2
package/lib/shared/themeDefaults.test.ts +3 -3
package/lib/shared/themeDefaults.ts +3 -3
package/lib/shared/types/cms.ts +28 -3
package/lib/shared/types/index.ts +2 -0
package/lib/shared/types/variables.ts +37 -0
package/lib/shared/utilityClassConfig.ts +3 -0
package/lib/shared/utilityClassMapper.test.ts +123 -0
package/lib/shared/utilityClassMapper.ts +179 -8
package/lib/shared/validation/schemas.ts +15 -1
package/lib/shared/validation/validators.ts +26 -1
package/package.json +1 -1
package/dist/chunks/chunk-47UNLQUU.js.map +0 -7
package/dist/chunks/chunk-FED5MME6.js.map +0 -7
package/dist/chunks/chunk-FGUZOYJX.js.map +0 -7
package/dist/chunks/chunk-KITQJYZV.js.map +0 -7
package/dist/chunks/chunk-UUA5LEWF.js.map +0 -7
package/dist/chunks/chunk-XSWR3QLI.js.map +0 -7
/package/dist/chunks/{chunk-IF3RATBY.js.map → chunk-H4JSCDNW.js.map} +0 -0
/package/dist/chunks/{chunk-LJFB5EBT.js.map → chunk-JER5NQVM.js.map} +0 -0
/package/dist/chunks/{chunk-BCLGRZ3U.js.map → chunk-LKAGAQ3M.js.map} +0 -0
/package/dist/chunks/{configService-DYCUEURL.js.map → configService-CCA6AIDI.js.map} +0 -0

package/lib/server/ssr/liveReloadIntegration.test.ts ADDED Viewed

@@ -0,0 +1,209 @@
+/**
+ * Behavioural tests for the inlined live-reload IIFE in htmlGenerator.ts.
+ *
+ * These tests load the script source out of the file, undo the TS template
+ * literal escaping (so `\\s+` reads back as `\s+`), and execute the IIFE inside
+ * a happy-dom window with stubbed WebSocket / fetch / location. They verify the
+ * end-to-end hotReload() behaviour rather than just asserting on substrings of
+ * the generated HTML.
+ */
+import { test, expect, describe } from 'bun:test';
+import { Window } from 'happy-dom';
+import * as fs from 'fs';
+import * as path from 'path';
+function loadLiveReloadScript(): string {
+  const src = fs.readFileSync(path.join(import.meta.dir, 'htmlGenerator.ts'), 'utf8');
+  const idx = src.indexOf('const liveReloadScript');
+  if (idx === -1) throw new Error('liveReloadScript not found');
+  const match = src.slice(idx).match(/<script>([\s\S]*?)<\/script>/);
+  if (!match) throw new Error('liveReloadScript script tag not found');
+  // The script lives inside a TS template literal; reverse the template's
+  // runtime transformations so the executable form matches what a browser sees.
+  return match[1]
+    .split('\\\\').join('\\')
+    .replace(/\$\{wsUrl\}/g, "'ws://localhost:3000/hmr'");
+}
+interface Harness {
+  window: Window;
+  document: Document;
+  capturedHandler: ((e: { data: string }) => void) | null;
+  setFetch(fn: () => Promise<{ text: () => Promise<string> }>): void;
+  triggerHmr(): void;
+  flush(): Promise<void>;
+  reloadCalls: number;
+  dispatchedDOMContentLoaded: number;
+}
+function setupHarness(initialBodyHtml: string): Harness {
+  const script = loadLiveReloadScript();
+  const window = new Window({ url: 'http://localhost/' });
+  const document = window.document as unknown as Document;
+  document.documentElement.setAttribute('lang', 'en');
+  document.documentElement.setAttribute('theme', 'light');
+  (document.body as unknown as HTMLElement).innerHTML = initialBodyHtml;
+  const harness: Harness = {
+    window,
+    document,
+    capturedHandler: null,
+    setFetch: (fn) => { (window as any).fetch = fn; },
+    triggerHmr: () => {
+      if (!harness.capturedHandler) throw new Error('WebSocket handler not captured');
+      harness.capturedHandler({ data: JSON.stringify({ type: 'hmr:update' }) });
+    },
+    flush: () => new Promise(r => setTimeout(r, 100)),
+    reloadCalls: 0,
+    dispatchedDOMContentLoaded: 0,
+  };
+  (window as any).WebSocket = class {
+    constructor() {}
+    set onmessage(fn: any) { harness.capturedHandler = fn; }
+    get onmessage() { return harness.capturedHandler; }
+    onclose: any = null;
+  };
+  // Track dispatched DOMContentLoaded (the IIFE fires this on document)
+  document.addEventListener('DOMContentLoaded', () => { harness.dispatchedDOMContentLoaded += 1; });
+  const dynamicFetch = (...args: any[]) => (window as any).fetch(...args);
+  const fn = new Function(
+    'document', 'WebSocket', 'fetch', 'setTimeout', 'clearTimeout',
+    'DOMParser', 'Event', 'window', 'location',
+    script
+  );
+  fn(
+    document, (window as any).WebSocket, dynamicFetch,
+    setTimeout, clearTimeout,
+    (window as any).DOMParser, (window as any).Event, window,
+    {
+      href: 'http://localhost/',
+      reload: () => { harness.reloadCalls += 1; },
+    }
+  );
+  return harness;
+}
+function makeServerHtml(rootInner: string, scriptHash = 'abc'): string {
+  return [
+    '<!DOCTYPE html><html lang="en" theme="light"><head></head><body>',
+    '<div id="root">', rootInner, '</div>',
+    '<style id="meno-styles">.dummy{color:red}</style>',
+    `<script src="/_scripts/${scriptHash}.js" defer></script>`,
+    '</body></html>',
+  ].join('');
+}
+describe('live reload IIFE', () => {
+  test('preserves dropdown DOM identity, runtime classes, and runtime attrs across a style edit', async () => {
+    const initialRootInner = `
+      <header data-element-path="0">
+        <div data-element-path="0,0" class="nav-dropdown t-bg-red" data-nav-dropdown="container">
+          <span data-element-path="0,0,0">Menu</span>
+          <ul data-element-path="0,0,1" data-nav-dropdown="menu" class="nav-dropdown-menu">
+            <li data-element-path="0,0,1,0">Item 1</li>
+          </ul>
+        </div>
+      </header>
+    `;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.t-bg-red{background:red}</style><script src="/_scripts/v1.js" defer></script>`);
+    // User opens dropdown via JS — adds runtime class + initialization marker.
+    const container = harness.document.querySelector('[data-element-path="0,0"]')!;
+    container.classList.add('nav-dropdown-open');
+    container.setAttribute('data-nav-dropdown-initialized', 'true');
+    const menu = harness.document.querySelector('[data-element-path="0,0,1"]')!;
+    menu.classList.add('nav-dropdown-menu-visible');
+    const beforeContainerRef = container;
+    const beforeMenuRef = menu;
+    // Editor edit: t-bg-red -> t-bg-blue. Same /_scripts/ hash (user JS unchanged).
+    const newRootInner = `<header data-element-path="0"><div data-element-path="0,0" class="nav-dropdown t-bg-blue" data-nav-dropdown="container"><span data-element-path="0,0,0">Menu</span><ul data-element-path="0,0,1" data-nav-dropdown="menu" class="nav-dropdown-menu"><li data-element-path="0,0,1,0">Item 1</li></ul></div></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v1')) }));
+    harness.triggerHmr();
+    await harness.flush();
+    const containerAfter = harness.document.querySelector('[data-element-path="0,0"]')!;
+    const menuAfter = harness.document.querySelector('[data-element-path="0,0,1"]')!;
+    expect(containerAfter).toBe(beforeContainerRef);
+    expect(containerAfter.classList.contains('nav-dropdown-open')).toBe(true);
+    expect(containerAfter.getAttribute('data-nav-dropdown-initialized')).toBe('true');
+    expect(containerAfter.classList.contains('t-bg-blue')).toBe(true);
+    expect(containerAfter.classList.contains('t-bg-red')).toBe(false);
+    expect(menuAfter).toBe(beforeMenuRef);
+    expect(menuAfter.classList.contains('nav-dropdown-menu-visible')).toBe(true);
+    // /_scripts/ hash unchanged → no DOMContentLoaded re-dispatch
+    expect(harness.dispatchedDOMContentLoaded).toBe(0);
+    expect(harness.reloadCalls).toBe(0);
+  });
+  test('re-dispatches DOMContentLoaded only when /_scripts/ hash changes', async () => {
+    const initialRootInner = `<header data-element-path="0"><span data-element-path="0,0">hi</span></header>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+    // Edit that changes user JS → new content-hash on /_scripts/
+    const newRootInner = `<header data-element-path="0"><span data-element-path="0,0">hi</span></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v2')) }));
+    harness.triggerHmr();
+    await harness.flush();
+    // Wait a beat for the dynamically-appended script's onload to (try to) fire.
+    await new Promise(r => setTimeout(r, 50));
+    // The hash changed, so the IIFE removed the old /_scripts/ tag and appended
+    // a new one. happy-dom's appended <script src> won't actually load over the
+    // network in a unit test, so onload doesn't fire and DOMContentLoaded isn't
+    // dispatched here. The behavioural guarantee we care about — that the IIFE
+    // *would* dispatch on load — is covered by the structural test in
+    // htmlGenerator.test.ts ("compares /_scripts/ src ... before reloading").
+    // This test asserts the negative side: the old script tag is gone and a
+    // new one was appended.
+    const scripts = Array.from(harness.document.querySelectorAll('script[src^="/_scripts/"]'));
+    expect(scripts.length).toBe(1);
+    expect(scripts[0].getAttribute('src') || '').toContain('/_scripts/v2.js');
+    expect(harness.reloadCalls).toBe(0);
+  });
+  test('falls back to innerHTML replace on structural changes (different element count)', async () => {
+    const initialRootInner = `<header data-element-path="0"><span data-element-path="0,0">a</span></header>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+    // New HTML has an additional element (different count of [data-element-path])
+    const newRootInner = `<header data-element-path="0"><span data-element-path="0,0">a</span><span data-element-path="0,1">b</span></header>`;
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(newRootInner, 'v1')) }));
+    harness.triggerHmr();
+    await harness.flush();
+    const root = harness.document.getElementById('root')!;
+    expect(root.querySelectorAll('[data-element-path]').length).toBe(3);
+    expect(root.querySelector('[data-element-path="0,1"]')?.textContent).toBe('b');
+    expect(harness.reloadCalls).toBe(0);
+  });
+  test('updates lang/theme only when they actually differ', async () => {
+    const initialRootInner = `<span data-element-path="0">hi</span>`;
+    const harness = setupHarness(`<div id="root">${initialRootInner}</div><style id="meno-styles">.x{}</style><script src="/_scripts/v1.js" defer></script>`);
+    const beforeLang = harness.document.documentElement.getAttribute('lang');
+    // Same lang/theme as initial document
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(makeServerHtml(initialRootInner, 'v1')) }));
+    harness.triggerHmr();
+    await harness.flush();
+    expect(harness.document.documentElement.getAttribute('lang')).toBe(beforeLang);
+    // Now change theme → should update
+    const themeChangedHtml = makeServerHtml(initialRootInner, 'v1').replace('theme="light"', 'theme="dark"');
+    harness.setFetch(() => Promise.resolve({ text: () => Promise.resolve(themeChangedHtml) }));
+    harness.triggerHmr();
+    await harness.flush();
+    expect(harness.document.documentElement.getAttribute('theme')).toBe('dark');
+  });
+});

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

@@ -31,7 +31,6 @@ mock.module('../jsonLoader', () => ({
     ],
   }),
   loadIconsConfig: async () => ({ favicon: '', appleTouchIcon: '' }),
-  loadResponsiveScalesConfig: async () => ({}),
   loadPrefetchConfig: async () => ({ enabled: false }),
 }));
@@ -44,6 +43,7 @@ mock.module('./imageMetadata', () => ({
 mock.module('../services/configService', () => ({
   configService: {
     getImageFormat: () => mockImageFormat,
+    getResponsiveScales: () => ({ enabled: false, baseReference: 16 }),
     load: async () => {},
     isLoaded: () => true,
     reset: () => {},
@@ -717,6 +717,20 @@ describe('ssrRenderer', () => {
       expect(html).toBe('');
     });
+    test('skips node with unresolved string-template if', async () => {
+      // {{buttonText}} stays unresolved when the referenced prop is undefined
+      // (evaluateTemplate's backward-compat fallback returns the original template).
+      // Treat unresolved templates as falsy so the node is hidden.
+      const node = {
+        type: 'link',
+        href: '/page',
+        children: 'link',
+        if: '{{buttonText}}',
+      };
+      const html = await render(node);
+      expect(html).toBe('');
+    });
     test('evaluates boolean mapping if condition - renders when mapped to true', async () => {
       // Component renders within buildComponentHTML with componentResolvedProps
       // We need to use a component that sets up the mapping context
@@ -1525,6 +1539,48 @@ describe('ssrRenderer', () => {
       expect(result.html).toContain('c-#ffffff');
     });
+    test('instance style overrides structure style on the same property', async () => {
+      // Regression: previously the structure's mb-0 and the instance's mb-32px both
+      // ended up as same-specificity utility classes on the rendered element, and
+      // the structure's class won by source order — opposite of client behavior.
+      // Instance styles must replace structure styles per-property at merge time.
+      const buttonDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'node',
+            tag: 'button',
+            style: { base: { marginBottom: 0, padding: '8px' } },
+            children: ['{{text}}'],
+          },
+          interface: {
+            text: { type: 'string', default: 'Click' },
+          },
+          acceptsStyles: true,
+        } as any,
+      };
+      const pageData: JSONPage = {
+        root: {
+          type: 'node',
+          tag: 'div',
+          children: [
+            {
+              type: 'component',
+              component: 'Button',
+              props: { text: 'Hi' },
+              style: { base: { marginBottom: '32px' } },
+            },
+          ],
+        } as any,
+      };
+      const result = await renderPageSSR(pageData, { Button: buttonDef });
+      expect(result.html).toContain('mb-32px');
+      expect(result.html).not.toContain('mb-0');
+      // Untouched structure properties remain.
+      expect(result.html).toContain('p-8px');
+    });
     test('extracts locale from path when not explicitly provided', async () => {
       const i18nConfig = {
         defaultLocale: 'en',
@@ -3054,6 +3110,203 @@ describe('ssrRenderer', () => {
       expect(html).toContain('Author a1');
       expect(html).toContain('Author a2');
     });
+    test('inner list items dotted-ref resolves against host component prop', async () => {
+      // {{config.0.tagIds}} is a dotted template — processStructure leaves it literal
+      // (hasItemTemplates returns true for `\w+\.\w+`). The SSR items resolver must
+      // see the host component's `config` prop in its scope.
+      const calledWith: string[][] = [];
+      const mockCmsService = {
+        getItemsByIds: async (_collection: string, ids: string[]) => {
+          calledWith.push(ids);
+          return ids.map(id => ({ _id: id, name: `Tag ${id}` }));
+        },
+        getSchema: () => undefined,
+      };
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            config: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'tags',
+            itemAs: 'tag',
+            items: '{{config.0.tagIds}}',
+            children: [
+              { type: 'node', tag: 'span', children: '{{tag.name}}' },
+            ],
+          },
+        },
+      };
+      const node = {
+        type: 'component',
+        component: 'Card',
+        props: {
+          config: [{ tagIds: ['t1', 't2'] }],
+        },
+      };
+      const html = await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+      expect(calledWith).toEqual([['t1', 't2']]);
+      expect(html).toContain('Tag t1');
+      expect(html).toContain('Tag t2');
+    });
+    test('inner list filter dotted-ref resolves against host component prop', async () => {
+      // {{config.0.collection}} is a dotted template — processStructure leaves it literal.
+      // SSR's resolveFilterTemplates must see the host component's `config` prop.
+      const queries: any[] = [];
+      const mockCmsService = {
+        queryItems: async (q: any) => {
+          queries.push(q);
+          return [{ _id: 'p1', title: 'Hello' }];
+        },
+        getSchema: () => undefined,
+      };
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            config: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'posts',
+            itemAs: 'post',
+            filter: { category: '{{config.0.collection}}' },
+            children: [
+              { type: 'node', tag: 'div', children: '{{post.title}}' },
+            ],
+          },
+        },
+      };
+      const node = {
+        type: 'component',
+        component: 'Card',
+        props: {
+          config: [{ collection: 'news' }],
+        },
+      };
+      const html = await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+      expect(queries.length).toBe(1);
+      expect(queries[0].filter).toEqual({ category: 'news' });
+      expect(html).toContain('Hello');
+    });
+    test('parent list loop variable wins over a colliding host component prop', async () => {
+      // Outer CMS list iterates with itemAs: 'tag', producing a templateContext entry
+      // named `tag` set to the current item. The host Card also receives a prop named
+      // `tag` set to a fake value. The inner list's items: {{tag.id}} must resolve to
+      // the parent loop variable's id (precedence: parent loop variable > component props).
+      const calledWith: string[][] = [];
+      const mockCmsService = {
+        // Outer iteration: itemAs: 'tag' makes templateContext.tag = item, so the
+        // inner template `{{tag.id}}` looks up item.id directly.
+        queryItems: async () => [
+          { _id: 'p1', id: 'real-1' },
+          { _id: 'p2', id: 'real-2' },
+        ],
+        getItemsByIds: async (_collection: string, ids: string[]) => {
+          calledWith.push(ids);
+          return ids.map(id => ({ _id: id, name: `Item ${id}` }));
+        },
+        getSchema: () => undefined,
+      };
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            // 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: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'tags',
+            itemAs: 'inner',
+            items: '{{tag.id}}',
+            children: [
+              { type: 'node', tag: 'span', children: '{{inner.name}}' },
+            ],
+          },
+        },
+      };
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        itemAs: 'tag',
+        children: [
+          {
+            type: 'component',
+            component: 'Card',
+            props: {
+              // Static fake value for the colliding prop; the inner template
+              // must resolve to the parent loop var, not this.
+              tag: [{ id: 'fake-prop-id' }],
+            },
+          },
+        ],
+      };
+      await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+      expect(calledWith).toEqual([['real-1'], ['real-2']]);
+    });
+    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.
+      const queries: any[] = [];
+      const mockCmsService = {
+        queryItems: async (q: any) => {
+          queries.push(q);
+          return [];
+        },
+        getSchema: () => undefined,
+      };
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        filter: { category: '{{cms.something}}' },
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
+      };
+      // cmsContext is provided, but page-root filter must not pull from it.
+      await render(node, {
+        cmsService: mockCmsService,
+        cmsContext: { cms: { something: 'shouldNotBeUsed' } },
+      });
+      expect(queries.length).toBe(1);
+      expect(queries[0].filter).toEqual({ category: '{{cms.something}}' });
+    });
   });
   // -----------------------------------------------------------------------
@@ -3964,4 +4217,112 @@ describe('ssrRenderer', () => {
       expect(html).toContain('href="/fr/a-propos"');
     });
   });
+  // Editor attrs are emitted only when buildComponentHTML's injectEditorAttrs flag is on.
+  // These attributes (data-element-path, data-cms-item-index, data-cms-context,
+  // data-component-root, data-parent-component, data-component-context) drive
+  // XRayOverlay and the click-to-select handler in static (SSR) preview mode.
+  describe('buildComponentHTML - editor attrs (preview-only)', () => {
+    test('omits data-element-path by default', async () => {
+      const node = { type: 'node', tag: 'div', children: ['hello'] };
+      const result = await buildComponentHTML(node as any);
+      expect(result.html).not.toContain('data-element-path');
+    });
+    test('emits data-element-path on every element when injectEditorAttrs is true', async () => {
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          { type: 'node', tag: 'span', children: ['hi'] },
+          { type: 'node', tag: 'a', attributes: { href: '/x' }, children: ['link'] },
+        ],
+      };
+      const result = await buildComponentHTML(
+        node as any,
+        {}, {}, 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,1"');
+    });
+    test('emits data-cms-item-index and data-cms-context for elements inside a list', async () => {
+      // List in prop mode under a component resolves items from componentResolvedProps.
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            items: { type: 'list', default: [{ label: 'A' }, { label: 'B' }] } as any,
+          },
+          structure: {
+            type: 'node',
+            tag: 'div',
+            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,
+      );
+      expect(result.html).toContain('data-cms-item-index="0"');
+      expect(result.html).toContain('data-cms-item-index="1"');
+      expect(result.html).toContain('data-cms-context=');
+    });
+    test('marks the component instance root with data-component-root', async () => {
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', children: ['inner'] },
+        },
+      };
+      const result = await buildComponentHTML(
+        { type: 'component', component: 'Card' } as any,
+        { Card },
+        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+      );
+      expect(result.html).toContain('data-component-root="true"');
+      expect(result.html).toContain('data-component-context="Card"');
+    });
+    test('emits page-absolute data-element-path for elements inside a component', async () => {
+      // Component has a single wrapper <div> with a <span> child. The page hosts
+      // the component as the only child of its root <div>, so:
+      //   page root <div>     → [0]
+      //   Card root <div>     → [0,0]
+      //   inner <span>        → [0,0,0]
+      // Before the fix SSR reset elementPath inside components, so the inner
+      // span landed at [0] (component-relative) and XRay couldn't find it.
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'node', tag: 'span', children: 'inner' }],
+          },
+        },
+      };
+      const page = {
+        type: 'node',
+        tag: 'div',
+        children: [{ type: 'component', component: 'Card' }],
+      };
+      const result = await buildComponentHTML(
+        page as any,
+        { Card },
+        {}, 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"');
+    });
+  });
 });