meno-core 1.0.53 → 1.1.0

package/lib/client/core/ComponentBuilder.test.ts

@@ -1,14 +1,15 @@
-import { test, expect, describe, beforeEach, mock } from "bun:test";
-import { ComponentBuilder } from "./ComponentBuilder";
-import { ComponentRegistry } from "../componentRegistry";
-import { ElementRegistry } from "../elementRegistry";
-import type { ComponentNode, ListNode, CMSItem } from "../../shared/types";
-import { NODE_TYPE } from "../../shared/constants";
-import { createMockElementRegistry } from "../../test-utils/mocks";
+import { test, expect, describe, beforeEach, mock } from 'bun:test';
+import { ComponentBuilder } from './ComponentBuilder';
+import { ComponentRegistry } from '../componentRegistry';
+import type { ElementRegistry } from '../elementRegistry';
+import type { ComponentNode, ListNode, CMSItem } from '../../shared/types';
+import { NODE_TYPE } from '../../shared/constants';
+import { createMockElementRegistry } from '../../test-utils/mocks';
+import { UtilityClassCollector } from '../styles/UtilityClassCollector';
 
 // Note: Using typed mocks from test-utils/mocks instead of inline 'as any' casts
 
-describe("ComponentBuilder", () => {
+describe('ComponentBuilder', () => {
   let componentRegistry: ComponentRegistry;
   let elementRegistry: ElementRegistry;
   let builder: ComponentBuilder;
@@ -32,52 +33,52 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("buildComponent - Basic Cases", () => {
-    test("should return null for null node", () => {
+  describe('buildComponent - Basic Cases', () => {
+    test('should return null for null node', () => {
       const result = builder.buildComponent({ node: null });
       expect(result).toBeNull();
     });
 
-    test("should return null for undefined node", () => {
+    test('should return null for undefined node', () => {
       const result = builder.buildComponent({ node: undefined });
       expect(result).toBeNull();
     });
 
-    test("should return string for string node", () => {
-      const result = builder.buildComponent({ node: "Hello" });
-      expect(result).toBe("Hello");
+    test('should return string for string node', () => {
+      const result = builder.buildComponent({ node: 'Hello' });
+      expect(result).toBe('Hello');
     });
 
-    test("should return number for number node", () => {
+    test('should return number for number node', () => {
       const result = builder.buildComponent({ node: 42 });
       expect(result).toBe(42);
     });
 
-    test("should return array for array of nodes", () => {
+    test('should return array for array of nodes', () => {
       const nodes: ComponentNode[] = [
-        { type: "node", tag: "div", children: ["Hello"] },
-        { type: "node", tag: "span", children: ["World"] },
+        { type: 'node', tag: 'div', children: ['Hello'] },
+        { type: 'node', tag: 'span', children: ['World'] },
       ];
       const result = builder.buildComponent({ node: nodes });
       expect(Array.isArray(result)).toBe(true);
       expect((result as any[]).length).toBe(2);
     });
 
-    test("should return ReactElement for HTML node", () => {
+    test('should return ReactElement for HTML node', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
-        children: ["Test"],
+        type: 'node',
+        tag: 'div',
+        children: ['Test'],
       };
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should handle HTML node with empty tag gracefully", () => {
+    test('should handle HTML node with empty tag gracefully', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "",
+        type: 'node',
+        tag: '',
         children: [],
       };
 
@@ -85,124 +86,124 @@ describe("ComponentBuilder", () => {
 
       // Implementation returns a div element for empty tag (graceful fallback)
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("resolves an _i18n value object as the node to the default locale string", () => {
+    test('resolves an _i18n value object as the node to the default locale string', () => {
       // Mirrors the SSR behavior: authors can pass localized strings anywhere
       // `children` is accepted. The client resolves _i18n at the buildComponent
       // entry point so all downstream code sees a plain string.
       const i18nConfig = {
-        defaultLocale: "en",
+        defaultLocale: 'en',
         locales: [
-          { code: "en", name: "EN", nativeName: "English", langTag: "en-US" },
-          { code: "pl", name: "PL", nativeName: "Polski", langTag: "pl-PL" },
+          { code: 'en', name: 'EN', nativeName: 'English', langTag: 'en-US' },
+          { code: 'pl', name: 'PL', nativeName: 'Polski', langTag: 'pl-PL' },
         ],
       };
       const result = builder.buildComponent({
-        node: { _i18n: true, en: "Hello", pl: "Cześć" } as any,
+        node: { _i18n: true, en: 'Hello', pl: 'Cześć' } as any,
         i18nConfig,
       });
-      expect(result).toBe("Hello");
+      expect(result).toBe('Hello');
     });
 
-    test("resolves an _i18n value object to the active locale", () => {
+    test('resolves an _i18n value object to the active locale', () => {
       const i18nConfig = {
-        defaultLocale: "en",
+        defaultLocale: 'en',
         locales: [
-          { code: "en", name: "EN", nativeName: "English", langTag: "en-US" },
-          { code: "pl", name: "PL", nativeName: "Polski", langTag: "pl-PL" },
+          { code: 'en', name: 'EN', nativeName: 'English', langTag: 'en-US' },
+          { code: 'pl', name: 'PL', nativeName: 'Polski', langTag: 'pl-PL' },
         ],
       };
       const result = builder.buildComponent({
-        node: { _i18n: true, en: "Hello", pl: "Cześć" } as any,
+        node: { _i18n: true, en: 'Hello', pl: 'Cześć' } as any,
         i18nConfig,
-        locale: "pl",
+        locale: 'pl',
       });
-      expect(result).toBe("Cześć");
+      expect(result).toBe('Cześć');
     });
   });
 
-  describe("buildComponent - Component Instances", () => {
-    test("should handle non-existent component gracefully", () => {
+  describe('buildComponent - Component Instances', () => {
+    test('should handle non-existent component gracefully', () => {
       const node: ComponentNode = {
-        type: "component",
-        component: "NonExistent",
+        type: 'component',
+        component: 'NonExistent',
       };
       const result = builder.buildComponent({ node });
       // Returns error boundary or placeholder element for missing component
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should build component instance with structure", () => {
+    test('should build component instance with structure', () => {
       const componentDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: ["Component Content"],
+            type: 'node',
+            tag: 'div',
+            children: ['Component Content'],
           },
         },
       };
-      componentRegistry.register("TestComponent", componentDef as any);
+      componentRegistry.register('TestComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "TestComponent",
+        type: 'component',
+        component: 'TestComponent',
       };
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should handle component missing structure gracefully", () => {
+    test('should handle component missing structure gracefully', () => {
       // Test with component that has no component property at all
       const componentDef = {
         // Missing component property entirely
       };
-      componentRegistry.register("BrokenComponent", componentDef as any);
+      componentRegistry.register('BrokenComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "BrokenComponent",
+        type: 'component',
+        component: 'BrokenComponent',
       };
 
       const result = builder.buildComponent({ node });
 
       // When componentDef.component is missing, it should return ErrorBoundary
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should resolve props with defaults from interface", () => {
+    test('should resolve props with defaults from interface', () => {
       const componentDef = {
         component: {
           interface: {
             title: {
-              type: "string",
-              default: "Default Title",
+              type: 'string',
+              default: 'Default Title',
             },
           },
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [],
           },
         },
       };
-      componentRegistry.register("ComponentWithDefaults", componentDef as any);
+      componentRegistry.register('ComponentWithDefaults', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "ComponentWithDefaults",
+        type: 'component',
+        component: 'ComponentWithDefaults',
       };
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
     });
 
-    test("should handle component building errors gracefully", () => {
+    test('should handle component building errors gracefully', () => {
       // This test verifies error handling is in place
       // We can't easily mock processStructure in Bun, so we test with a valid component
       // Error handling is verified by the try-catch in buildComponent
@@ -210,65 +211,65 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [],
           },
         },
       };
-      componentRegistry.register("ValidComponent", componentDef as any);
+      componentRegistry.register('ValidComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "ValidComponent",
+        type: 'component',
+        component: 'ValidComponent',
       };
-      
+
       const result = builder.buildComponent({ node });
-      
+
       // Component should build successfully
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
   });
 
-  describe("buildComponent - Link Component", () => {
-    test("should render Link component as anchor tag", () => {
+  describe('buildComponent - Link Component', () => {
+    test('should render Link component as anchor tag', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "Link",
+        type: 'node',
+        tag: 'Link',
         props: {
-          to: "/about",
+          to: '/about',
         },
-        children: ["Click me"],
+        children: ['Click me'],
       };
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should handle Link navigation when selecting mode is disabled", () => {
+    test('should handle Link navigation when selecting mode is disabled', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "Link",
+        type: 'node',
+        tag: 'Link',
         props: {
-          to: "/test",
+          to: '/test',
         },
         children: [],
       };
-      
+
       // Link component should render regardless of selecting mode
       // The actual behavior is tested through integration tests
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
   });
 
-  describe("buildComponent - HTML Elements", () => {
-    test("should register element via ref callback", () => {
+  describe('buildComponent - HTML Elements', () => {
+    test('should register element via ref callback', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         children: [],
       };
       const result = builder.buildComponent({ node });
@@ -277,14 +278,14 @@ describe("ComponentBuilder", () => {
       // We can't easily test this without rendering, but we verify the ref is set
     });
 
-    test("should extract and merge styles", () => {
+    test('should extract and merge styles', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         style: {
           base: {
-            color: "red",
-            fontSize: "16px",
+            color: 'red',
+            fontSize: '16px',
           },
         },
         children: [],
@@ -293,13 +294,13 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
 
-    test("should extract and merge attributes", () => {
+    test('should extract and merge attributes', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         attributes: {
-          id: "test-id",
-          className: "test-class",
+          id: 'test-id',
+          className: 'test-class',
         },
         children: [],
       };
@@ -307,16 +308,38 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
 
-    test("should filter out internal props", () => {
+    test('class-string styling: utility tokens in attributes.class inject canvas CSS', () => {
+      // The design canvas builds React elements via ComponentBuilder. A node styled via
+      // attributes.class (not node.style) must still get its utility CSS injected into the
+      // live <style id="utility-css">, exactly like the node.style path — else the class
+      // lands on the element but renders unstyled.
+      UtilityClassCollector.destroy();
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'p',
+        attributes: { class: 'p-[24px] swiper' },
+        children: ['styled'],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      const css = document.getElementById('utility-css')?.textContent || '';
+      // Utility token p-[24px] generated a rule...
+      expect(css).toContain('padding: 24px');
+      // ...and the foreign token (swiper) produced none (collect() skips no-rule tokens).
+      expect(css).not.toContain('swiper');
+      UtilityClassCollector.destroy();
+    });
+
+    test('should filter out internal props', () => {
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
         props: {
-          type: "should-be-removed",
-          tag: "should-be-removed",
-          component: "should-be-removed",
-          children: "should-be-removed",
-          validProp: "should-remain",
+          type: 'should-be-removed',
+          tag: 'should-be-removed',
+          component: 'should-be-removed',
+          children: 'should-be-removed',
+          validProp: 'should-remain',
         },
         children: [],
       };
@@ -324,44 +347,44 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
 
-    test("should detect component root via __componentProps", () => {
+    test('should detect component root via __componentProps', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         children: [],
       };
       const result = builder.buildComponent({
         node,
         customProps: {
-          __componentProps: { title: "Test" },
+          __componentProps: { title: 'Test' },
         },
       });
       expect(result).not.toBeNull();
     });
 
-    test("should remap body tag to div to keep SSR and client DOMs identical", () => {
+    test('should remap body tag to div to keep SSR and client DOMs identical', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "body",
-        attributes: { className: "page-root" },
-        children: ["Content"],
+        type: 'node',
+        tag: 'body',
+        attributes: { className: 'page-root' },
+        children: ['Content'],
       };
       const result = builder.buildComponent({ node }) as any;
       expect(result).not.toBeNull();
-      expect(result.type).toBe("div");
-      expect(result.props.className).toBe("page-root");
+      expect(result.type).toBe('div');
+      expect(result.props.className).toBe('page-root');
     });
 
-    test("should remap html and head tags to div", () => {
-      for (const tag of ["html", "head", "BODY"] as const) {
-        const node: ComponentNode = { type: "node", tag, children: [] };
+    test('should remap html and head tags to div', () => {
+      for (const tag of ['html', 'head', 'BODY'] as const) {
+        const node: ComponentNode = { type: 'node', tag, children: [] };
         const result = builder.buildComponent({ node }) as any;
-        expect(result.type).toBe("div");
+        expect(result.type).toBe('div');
       }
     });
   });
 
-  describe("buildChildren", () => {
+  describe('buildChildren', () => {
     const defaultCtx = {
       elementPath: [0] as number[],
       parentComponentName: null,
@@ -369,42 +392,42 @@ describe("ComponentBuilder", () => {
       componentContext: null,
     };
 
-    test("should return array for array of children", () => {
+    test('should return array for array of children', () => {
       const children: ComponentNode[] = [
-        { type: "node", tag: "div", children: ["Child 1"] },
-        { type: "node", tag: "span", children: ["Child 2"] },
+        { type: 'node', tag: 'div', children: ['Child 1'] },
+        { type: 'node', tag: 'span', children: ['Child 2'] },
       ];
       const result = builder.buildChildren(children, defaultCtx);
       expect(Array.isArray(result)).toBe(true);
       expect((result as any[]).length).toBe(2);
     });
 
-    test("should return single element for single child", () => {
+    test('should return single element for single child', () => {
       const child: ComponentNode = {
-        type: "node",
-        tag: "div",
-        children: ["Single child"],
+        type: 'node',
+        tag: 'div',
+        children: ['Single child'],
       };
       const result = builder.buildChildren(child, defaultCtx);
       expect(result).not.toBeNull();
       expect(Array.isArray(result)).toBe(false);
     });
 
-    test("should return null for undefined children", () => {
+    test('should return null for undefined children', () => {
       const result = builder.buildChildren(undefined, defaultCtx);
       expect(result).toBeNull();
     });
 
-    test("should return empty array for empty array", () => {
+    test('should return empty array for empty array', () => {
       const result = builder.buildChildren([], defaultCtx);
       expect(Array.isArray(result)).toBe(true);
       expect((result as any[]).length).toBe(0);
     });
 
-    test("should generate correct paths for children", () => {
+    test('should generate correct paths for children', () => {
       const children: ComponentNode[] = [
-        { type: "node", tag: "div", children: [] },
-        { type: "node", tag: "span", children: [] },
+        { type: 'node', tag: 'div', children: [] },
+        { type: 'node', tag: 'span', children: [] },
       ];
       const result = builder.buildChildren(children, { ...defaultCtx, elementPath: [0, 1] });
       expect(Array.isArray(result)).toBe(true);
@@ -412,51 +435,51 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("Helper Functions", () => {
-    test("getParentComponentNameForNestedComponent should prioritize componentContext", () => {
+  describe('Helper Functions', () => {
+    test('getParentComponentNameForNestedComponent should prioritize componentContext', () => {
       // This is tested indirectly through component building
       // We can't directly test private methods, but we can verify behavior
       const componentDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [],
           },
         },
       };
-      componentRegistry.register("ParentComponent", componentDef as any);
+      componentRegistry.register('ParentComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "ParentComponent",
+        type: 'component',
+        component: 'ParentComponent',
       };
       const result = builder.buildComponent({
         node,
-        componentContext: "ContextComponent",
-        parentComponentName: "ParentName",
+        componentContext: 'ContextComponent',
+        parentComponentName: 'ParentName',
       });
       expect(result).not.toBeNull();
     });
 
-    test("getEffectiveParentComponentName should use componentContext when available", () => {
+    test('getEffectiveParentComponentName should use componentContext when available', () => {
       // Tested indirectly through component building
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         children: [],
       };
       const result = builder.buildComponent({
         node,
-        componentContext: "ContextComponent",
-        parentComponentName: "ParentName",
+        componentContext: 'ContextComponent',
+        parentComponentName: 'ParentName',
       });
       expect(result).not.toBeNull();
     });
   });
 
-  describe("Path Assignment for Slot Markers", () => {
+  describe('Path Assignment for Slot Markers', () => {
     /**
      * KNOWN ISSUE: Slot markers consume path indices incorrectly
      *
@@ -474,21 +497,18 @@ describe("ComponentBuilder", () => {
      * TODO: Fix path assignment to skip slot markers when assigning indices,
      * or adjust indices after slot expansion.
      */
-    test.skip("slot markers should not consume path indices", () => {
+    test.skip('slot markers should not consume path indices', () => {
       const sectionDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [
               {
-                type: "node",
-                tag: "div",
-                children: [
-                  { type: "slot" },
-                  { type: "component", component: "Card" },
-                ],
+                type: 'node',
+                tag: 'div',
+                children: [{ type: 'slot' }, { type: 'component', component: 'Card' }],
               },
             ],
           },
@@ -499,20 +519,20 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: ["Card Content"],
+            type: 'node',
+            tag: 'div',
+            children: ['Card Content'],
           },
         },
       };
 
-      componentRegistry.register("Section", sectionDef as any);
-      componentRegistry.register("Card", cardDef as any);
+      componentRegistry.register('Section', sectionDef as any);
+      componentRegistry.register('Card', cardDef as any);
 
       const pageNode: ComponentNode = {
-        type: "component",
-        component: "Section",
-        children: [{ type: "node", tag: "p", children: ["Instance Child"] }],
+        type: 'component',
+        component: 'Section',
+        children: [{ type: 'node', tag: 'p', children: ['Instance Child'] }],
       };
 
       const result = builder.buildComponent({ node: pageNode });
@@ -524,51 +544,51 @@ describe("ComponentBuilder", () => {
       // OR Card gets a path that properly reflects its position relative to expanded slot content
     });
 
-    test("should build component with slot marker correctly", () => {
+    test('should build component with slot marker correctly', () => {
       // Button.json: button > children
       const buttonDef = {
         component: {
           interface: {
-            children: { type: "string", default: "Click me" },
+            children: { type: 'string', default: 'Click me' },
           },
           structure: {
-            type: "node",
-            tag: "button",
-            children: [{ type: "slot" }],
+            type: 'node',
+            tag: 'button',
+            children: [{ type: 'slot' }],
           },
         },
       };
 
-      componentRegistry.register("Button", buttonDef as any);
+      componentRegistry.register('Button', buttonDef as any);
 
       const pageNode: ComponentNode = {
-        type: "component",
-        component: "Button",
-        children: [{ type: "node", tag: "span", children: ["Submit"] }],
+        type: 'component',
+        component: 'Button',
+        children: [{ type: 'node', tag: 'span', children: ['Submit'] }],
       };
 
       const result = builder.buildComponent({ node: pageNode });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should build nested children with multiple siblings after slot", () => {
+    test('should build nested children with multiple siblings after slot', () => {
       // Structure: div > div > [slot, Card, Button]
 
       const sectionDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [
               {
-                type: "node",
-                tag: "div",
+                type: 'node',
+                tag: 'div',
                 children: [
-                  { type: "slot" },
-                  { type: "component", component: "Card" },
-                  { type: "component", component: "Button" },
+                  { type: 'slot' },
+                  { type: 'component', component: 'Card' },
+                  { type: 'component', component: 'Button' },
                 ],
               },
             ],
@@ -580,9 +600,9 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: ["Card"],
+            type: 'node',
+            tag: 'div',
+            children: ['Card'],
           },
         },
       };
@@ -591,57 +611,54 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "button",
-            children: ["Button"],
+            type: 'node',
+            tag: 'button',
+            children: ['Button'],
           },
         },
       };
 
-      componentRegistry.register("Section", sectionDef as any);
-      componentRegistry.register("Card", cardDef as any);
-      componentRegistry.register("Button", buttonDef as any);
+      componentRegistry.register('Section', sectionDef as any);
+      componentRegistry.register('Card', cardDef as any);
+      componentRegistry.register('Button', buttonDef as any);
 
       const pageNode: ComponentNode = {
-        type: "component",
-        component: "Section",
-        children: [{ type: "node", tag: "p", children: ["Content"] }],
+        type: 'component',
+        component: 'Section',
+        children: [{ type: 'node', tag: 'p', children: ['Content'] }],
       };
 
       const result = builder.buildComponent({ node: pageNode });
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
   });
 
-  describe("Integration Tests", () => {
-    test("should build complex component tree", () => {
+  describe('Integration Tests', () => {
+    test('should build complex component tree', () => {
       const cardDef = {
         component: {
           interface: {
-            title: { type: "string", default: "Card Title" },
+            title: { type: 'string', default: 'Card Title' },
           },
           structure: {
-            type: "node",
-            tag: "div",
-            children: [
-              { type: "node", tag: "h2", children: ["{{title}}"] },
-              { type: "slot" },
-            ],
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'node', tag: 'h2', children: ['{{title}}'] }, { type: 'slot' }],
           },
         },
       };
-      componentRegistry.register("Card", cardDef as any);
+      componentRegistry.register('Card', cardDef as any);
 
       const pageNode: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         children: [
           {
-            type: "component",
-            component: "Card",
-            props: { title: "My Card" },
-            children: [{ type: "node", tag: "p", children: ["Card content"] }],
+            type: 'component',
+            component: 'Card',
+            props: { title: 'My Card' },
+            children: [{ type: 'node', tag: 'p', children: ['Card content'] }],
           },
         ],
       };
@@ -649,90 +666,86 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
 
-    test("should handle nested component instances", () => {
+    test('should handle nested component instances', () => {
       const innerDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "span",
-            children: ["Inner"],
+            type: 'node',
+            tag: 'span',
+            children: ['Inner'],
           },
         },
       };
-      componentRegistry.register("Inner", innerDef as any);
+      componentRegistry.register('Inner', innerDef as any);
 
       const outerDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: [
-              { type: "component", component: "Inner" },
-            ],
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'component', component: 'Inner' }],
           },
         },
       };
-      componentRegistry.register("Outer", outerDef as any);
+      componentRegistry.register('Outer', outerDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "Outer",
+        type: 'component',
+        component: 'Outer',
       };
       const result = builder.buildComponent({ node });
       expect(result).not.toBeNull();
     });
 
-    test("should propagate component context correctly", () => {
+    test('should propagate component context correctly', () => {
       const componentDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: [
-              { type: "node", tag: "span", children: ["Child"] },
-            ],
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'node', tag: 'span', children: ['Child'] }],
           },
         },
       };
-      componentRegistry.register("TestComponent", componentDef as any);
+      componentRegistry.register('TestComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "TestComponent",
+        type: 'component',
+        component: 'TestComponent',
       };
       const result = builder.buildComponent({
         node,
-        componentContext: "TestComponent",
+        componentContext: 'TestComponent',
       });
       expect(result).not.toBeNull();
     });
 
-    test("should respect viewportWidth for responsive styles", () => {
+    test('should respect viewportWidth for responsive styles', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         style: {
-          base: { fontSize: "24px" },
-          tablet: { fontSize: "18px" },
-          mobile: { fontSize: "16px" },
+          base: { fontSize: '24px' },
+          tablet: { fontSize: '18px' },
+          mobile: { fontSize: '16px' },
         },
         children: [],
       };
-      
+
       const resultDesktop = builder.buildComponent({ node, viewportWidth: 1920 });
       const resultTablet = builder.buildComponent({ node, viewportWidth: 768 });
       const resultMobile = builder.buildComponent({ node, viewportWidth: 375 });
-      
+
       expect(resultDesktop).not.toBeNull();
       expect(resultTablet).not.toBeNull();
       expect(resultMobile).not.toBeNull();
     });
   });
 
-  describe("buildComponent - List (Collection Mode)", () => {
+  describe('buildComponent - List (Collection Mode)', () => {
     // Helper to create mock CMS items
     const createMockCMSItems = (count: number): CMSItem[] => {
       return Array.from({ length: count }, (_, i) => ({
@@ -747,7 +760,7 @@ describe("ComponentBuilder", () => {
     const createCollectionListNode = (
       source: string,
       children: ComponentNode[],
-      options: { limit?: number; offset?: number } = {}
+      options: { limit?: number; offset?: number } = {},
     ): ListNode => ({
       type: NODE_TYPE.LIST,
       sourceType: 'collection',
@@ -756,11 +769,9 @@ describe("ComponentBuilder", () => {
       ...options,
     });
 
-    test("should render children for each CMS item", () => {
+    test('should render children for each CMS item', () => {
       const items = createMockCMSItems(3);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item content"] },
-      ]);
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item content'] }]);
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -768,18 +779,16 @@ describe("ComponentBuilder", () => {
       });
 
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
       // Result should have props.children with 3 items
       const element = result as { props?: { children?: unknown[] } };
       expect(Array.isArray(element?.props?.children)).toBe(true);
       expect(element?.props?.children?.length).toBe(3);
     });
 
-    test("should add data-cms-item-index attribute to each item wrapper", () => {
+    test('should add data-cms-item-index attribute to each item wrapper', () => {
       const items = createMockCMSItems(3);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item content"] },
-      ]);
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item content'] }]);
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -801,13 +810,9 @@ describe("ComponentBuilder", () => {
       });
     });
 
-    test("should interpolate {{item.field}} in text", () => {
-      const items: CMSItem[] = [
-        { _id: "1", _slug: "test", title: "Hello World" },
-      ];
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "h1", children: ["{{item.title}}"] },
-      ]);
+    test('should interpolate {{item.field}} in text', () => {
+      const items: CMSItem[] = [{ _id: '1', _slug: 'test', title: 'Hello World' }];
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'h1', children: ['{{item.title}}'] }]);
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -816,13 +821,13 @@ describe("ComponentBuilder", () => {
 
       expect(result).not.toBeNull();
       // The text should be interpolated - we verify by checking result structure
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should interpolate {{itemIndex}}, {{itemFirst}}, {{itemLast}}", () => {
+    test('should interpolate {{itemIndex}}, {{itemFirst}}, {{itemLast}}', () => {
       const items = createMockCMSItems(3);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "span", children: ["Index: {{itemIndex}}, First: {{itemFirst}}, Last: {{itemLast}}"] },
+      const node = createCollectionListNode('posts', [
+        { type: 'node', tag: 'span', children: ['Index: {{itemIndex}}, First: {{itemFirst}}, Last: {{itemLast}}'] },
       ]);
 
       const result = builder.buildComponent({
@@ -831,16 +836,14 @@ describe("ComponentBuilder", () => {
       });
 
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
       // Should have 3 item containers
       const element = result as { props?: { children?: unknown[] } };
       expect(element?.props?.children?.length).toBe(3);
     });
 
-    test("should show empty state when no items", () => {
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item"] },
-      ]);
+    test('should show empty state when no items', () => {
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item'] }]);
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -848,16 +851,14 @@ describe("ComponentBuilder", () => {
       });
 
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
       // Empty state should be a single div with message
       const element = result as { props?: { children?: unknown } };
       expect(element?.props?.children).not.toBeNull();
     });
 
-    test("should show empty state when collection not in map", () => {
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item"] },
-      ]);
+    test('should show empty state when collection not in map', () => {
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item'] }]);
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -865,14 +866,12 @@ describe("ComponentBuilder", () => {
       });
 
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should apply limit to items", () => {
+    test('should apply limit to items', () => {
       const items = createMockCMSItems(5);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item"] },
-      ], { limit: 2 });
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item'] }], { limit: 2 });
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -885,11 +884,9 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should apply offset to items", () => {
+    test('should apply offset to items', () => {
       const items = createMockCMSItems(5);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item"] },
-      ], { offset: 2 });
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item'] }], { offset: 2 });
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -902,11 +899,12 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(3); // 5 - 2 = 3
     });
 
-    test("should apply both limit and offset", () => {
+    test('should apply both limit and offset', () => {
       const items = createMockCMSItems(5);
-      const node = createCollectionListNode("posts", [
-        { type: "node", tag: "div", children: ["Item"] },
-      ], { offset: 1, limit: 2 });
+      const node = createCollectionListNode('posts', [{ type: 'node', tag: 'div', children: ['Item'] }], {
+        offset: 1,
+        limit: 2,
+      });
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
@@ -919,19 +917,19 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should filter items with simple object filter", () => {
+    test('should filter items with simple object filter', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "post1", featured: true, title: "Featured Post" },
-        { _id: "2", _slug: "post2", featured: false, title: "Regular Post 1" },
-        { _id: "3", _slug: "post3", featured: true, title: "Another Featured" },
-        { _id: "4", _slug: "post4", featured: false, title: "Regular Post 2" },
+        { _id: '1', _slug: 'post1', featured: true, title: 'Featured Post' },
+        { _id: '2', _slug: 'post2', featured: false, title: 'Regular Post 1' },
+        { _id: '3', _slug: 'post3', featured: true, title: 'Another Featured' },
+        { _id: '4', _slug: 'post4', featured: false, title: 'Regular Post 2' },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
+        source: 'posts',
         filter: { featured: true },
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -945,19 +943,19 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2); // Only featured items
     });
 
-    test("should filter items with operator condition", () => {
+    test('should filter items with operator condition', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "post1", price: 50, title: "Cheap" },
-        { _id: "2", _slug: "post2", price: 150, title: "Expensive 1" },
-        { _id: "3", _slug: "post3", price: 200, title: "Expensive 2" },
-        { _id: "4", _slug: "post4", price: 75, title: "Mid" },
+        { _id: '1', _slug: 'post1', price: 50, title: 'Cheap' },
+        { _id: '2', _slug: 'post2', price: 150, title: 'Expensive 1' },
+        { _id: '3', _slug: 'post3', price: 200, title: 'Expensive 2' },
+        { _id: '4', _slug: 'post4', price: 75, title: 'Mid' },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        filter: { field: "price", operator: "gt", value: 100 },
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        source: 'posts',
+        filter: { field: 'price', operator: 'gt', value: 100 },
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -971,24 +969,24 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2); // Only items with price > 100
     });
 
-    test("should filter items with template value from cmsContext", () => {
+    test('should filter items with template value from cmsContext', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "post1", category: "tech", title: "Tech Post 1" },
-        { _id: "2", _slug: "post2", category: "news", title: "News Post" },
-        { _id: "3", _slug: "post3", category: "tech", title: "Tech Post 2" },
+        { _id: '1', _slug: 'post1', category: 'tech', title: 'Tech Post 1' },
+        { _id: '2', _slug: 'post2', category: 'news', title: 'News Post' },
+        { _id: '3', _slug: 'post3', category: 'tech', title: 'Tech Post 2' },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        filter: { category: "{{cms.category}}" },
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        source: 'posts',
+        filter: { category: '{{cms.category}}' },
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
         node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
-        cmsContext: { category: "tech" },
+        cmsContext: { category: 'tech' },
       });
 
       expect(result).not.toBeNull();
@@ -997,18 +995,18 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2); // Only tech posts
     });
 
-    test("should sort items ascending", () => {
+    test('should sort items ascending', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "c", title: "C" },
-        { _id: "2", _slug: "a", title: "A" },
-        { _id: "3", _slug: "b", title: "B" },
+        { _id: '1', _slug: 'c', title: 'C' },
+        { _id: '2', _slug: 'a', title: 'A' },
+        { _id: '3', _slug: 'b', title: 'B' },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        sort: { field: "title", order: "asc" },
-        children: [{ type: "node", tag: "div", children: ["{{item.title}}"] }],
+        source: 'posts',
+        sort: { field: 'title', order: 'asc' },
+        children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
       };
 
       const result = builder.buildComponent({
@@ -1023,18 +1021,18 @@ describe("ComponentBuilder", () => {
       // We can't easily check the order of rendered children without more complex inspection
     });
 
-    test("should sort items descending", () => {
+    test('should sort items descending', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "p1", date: 100 },
-        { _id: "2", _slug: "p2", date: 300 },
-        { _id: "3", _slug: "p3", date: 200 },
+        { _id: '1', _slug: 'p1', date: 100 },
+        { _id: '2', _slug: 'p2', date: 300 },
+        { _id: '3', _slug: 'p3', date: 200 },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        sort: { field: "date", order: "desc" },
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        source: 'posts',
+        sort: { field: 'date', order: 'desc' },
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -1048,22 +1046,22 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(3);
     });
 
-    test("should apply filter BEFORE limit", () => {
+    test('should apply filter BEFORE limit', () => {
       // 5 items: 2 featured, 3 not featured
       const items: CMSItem[] = [
-        { _id: "1", _slug: "p1", featured: true, title: "Featured 1" },
-        { _id: "2", _slug: "p2", featured: false, title: "Regular 1" },
-        { _id: "3", _slug: "p3", featured: false, title: "Regular 2" },
-        { _id: "4", _slug: "p4", featured: true, title: "Featured 2" },
-        { _id: "5", _slug: "p5", featured: false, title: "Regular 3" },
+        { _id: '1', _slug: 'p1', featured: true, title: 'Featured 1' },
+        { _id: '2', _slug: 'p2', featured: false, title: 'Regular 1' },
+        { _id: '3', _slug: 'p3', featured: false, title: 'Regular 2' },
+        { _id: '4', _slug: 'p4', featured: true, title: 'Featured 2' },
+        { _id: '5', _slug: 'p5', featured: false, title: 'Regular 3' },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
+        source: 'posts',
         filter: { featured: true },
         limit: 3, // Without proper order, this would limit before filtering
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -1078,21 +1076,21 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should apply sort BEFORE limit", () => {
+    test('should apply sort BEFORE limit', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "p1", date: 100 },
-        { _id: "2", _slug: "p2", date: 300 },
-        { _id: "3", _slug: "p3", date: 200 },
-        { _id: "4", _slug: "p4", date: 400 },
-        { _id: "5", _slug: "p5", date: 50 },
+        { _id: '1', _slug: 'p1', date: 100 },
+        { _id: '2', _slug: 'p2', date: 300 },
+        { _id: '3', _slug: 'p3', date: 200 },
+        { _id: '4', _slug: 'p4', date: 400 },
+        { _id: '5', _slug: 'p5', date: 50 },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        sort: { field: "date", order: "desc" },
+        source: 'posts',
+        sort: { field: 'date', order: 'desc' },
         limit: 2, // Should get 2 most recent (highest date)
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -1106,22 +1104,22 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should apply multiple filter conditions with AND logic", () => {
+    test('should apply multiple filter conditions with AND logic', () => {
       const items: CMSItem[] = [
-        { _id: "1", _slug: "p1", featured: true, price: 150 },
-        { _id: "2", _slug: "p2", featured: false, price: 200 },
-        { _id: "3", _slug: "p3", featured: true, price: 50 },
-        { _id: "4", _slug: "p4", featured: true, price: 200 },
+        { _id: '1', _slug: 'p1', featured: true, price: 150 },
+        { _id: '2', _slug: 'p2', featured: false, price: 200 },
+        { _id: '3', _slug: 'p3', featured: true, price: 50 },
+        { _id: '4', _slug: 'p4', featured: true, price: 200 },
       ];
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
+        source: 'posts',
         filter: [
-          { field: "featured", value: true },
-          { field: "price", operator: "gte", value: 100 }
+          { field: 'featured', value: true },
+          { field: 'price', operator: 'gte', value: 100 },
         ],
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const result = builder.buildComponent({
@@ -1137,7 +1135,69 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("Interactive Styles - Element Class Generation", () => {
+  describe('buildComponent - List (Remote Mode)', () => {
+    // Remote lists (sourceType: 'remote') have no Astro runtime in the editor; the studio
+    // pre-fetches the endpoint and injects items into collectionItemsMap keyed by the URL.
+    const URL = 'https://api.example.com/markets';
+
+    const createRemoteItems = (count: number): CMSItem[] =>
+      Array.from({ length: count }, (_, i) => ({ _id: String(i), name: `Coin ${i}`, rank: i }));
+
+    const createRemoteListNode = (
+      children: ComponentNode[],
+      options: { url?: string; limit?: number; offset?: number; sort?: unknown } = {},
+    ): ListNode =>
+      ({
+        type: NODE_TYPE.LIST,
+        sourceType: 'remote',
+        url: options.url ?? URL,
+        children,
+        ...options,
+      }) as unknown as ListNode;
+
+    test('renders an item for each injected remote item (keyed by URL)', () => {
+      const items = createRemoteItems(3);
+      const node = createRemoteListNode([{ type: 'node', tag: 'div', children: ['{{item.name}}'] }]);
+
+      const result = builder.buildComponent({
+        node: node as unknown as ComponentNode,
+        collectionItemsMap: { [URL]: items },
+      });
+
+      const element = result as { props?: { children?: unknown[] } };
+      expect(Array.isArray(element?.props?.children)).toBe(true);
+      expect(element?.props?.children?.length).toBe(3);
+    });
+
+    test('applies limit to the injected remote items', () => {
+      const items = createRemoteItems(10);
+      const node = createRemoteListNode([{ type: 'node', tag: 'div', children: ['{{item.name}}'] }], { limit: 4 });
+
+      const result = builder.buildComponent({
+        node: node as unknown as ComponentNode,
+        collectionItemsMap: { [URL]: items },
+      });
+
+      const element = result as { props?: { children?: unknown[] } };
+      // The regression: changing Limit must NOT empty the list — it slices the cached items.
+      expect(element?.props?.children?.length).toBe(4);
+    });
+
+    test('shows empty state (not a crash) when the URL has no injected items yet', () => {
+      const node = createRemoteListNode([{ type: 'node', tag: 'div', children: ['{{item.name}}'] }]);
+
+      const result = builder.buildComponent({
+        node: node as unknown as ComponentNode,
+        collectionItemsMap: {}, // not fetched yet
+      });
+
+      expect(result).not.toBeNull();
+      const element = result as { props?: { children?: unknown } };
+      expect(element?.props?.children).not.toBeNull();
+    });
+  });
+
+  describe('Interactive Styles - Element Class Generation', () => {
     /**
      * These tests verify that element classes are generated correctly
      * for interactive styles in both page and component contexts.
@@ -1149,11 +1209,11 @@ describe("ComponentBuilder", () => {
      * 4. The same component element always gets the same class
      */
 
-    test("should not add element class when no interactive styles", () => {
+    test('should not add element class when no interactive styles', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
-        children: ["No interactive styles"],
+        type: 'node',
+        tag: 'div',
+        children: ['No interactive styles'],
       };
 
       const result = builder.buildComponent({ node });
@@ -1161,12 +1221,12 @@ describe("ComponentBuilder", () => {
       // No element class should be added when there are no interactive styles
     });
 
-    test("should add element class when node has generateElementClass flag", () => {
+    test('should add element class when node has generateElementClass flag', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         generateElementClass: true,
-        children: ["Has element class flag"],
+        children: ['Has element class flag'],
       };
 
       const result = builder.buildComponent({ node });
@@ -1174,14 +1234,12 @@ describe("ComponentBuilder", () => {
       // Element class should be generated when flag is set
     });
 
-    test("should add element class when node has interactive styles", () => {
+    test('should add element class when node has interactive styles', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
-        interactiveStyles: [
-          { postfix: ":hover", style: { backgroundColor: "primary" } },
-        ],
-        children: ["Has interactive styles"],
+        type: 'node',
+        tag: 'div',
+        interactiveStyles: [{ postfix: ':hover', style: { backgroundColor: 'primary' } }],
+        children: ['Has interactive styles'],
       };
 
       const result = builder.buildComponent({ node });
@@ -1189,23 +1247,21 @@ describe("ComponentBuilder", () => {
       // Element class should be generated for interactive styles
     });
 
-    test("should use page-based class for page elements", () => {
+    test('should use page-based class for page elements', () => {
       // Create builder with page name getter
       const pageBuilder = new ComponentBuilder({
         componentRegistry,
         elementRegistry,
-        getCurrentPageName: () => "about",
-        getCurrentFileType: () => "page",
+        getCurrentPageName: () => 'about',
+        getCurrentFileType: () => 'page',
       });
 
       const node: ComponentNode = {
-        type: "node",
-        tag: "button",
-        label: "submit-button",
-        interactiveStyles: [
-          { postfix: ":hover", style: { opacity: "0.9" } },
-        ],
-        children: ["Submit"],
+        type: 'node',
+        tag: 'button',
+        label: 'submit-button',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.9' } }],
+        children: ['Submit'],
       };
 
       const result = pageBuilder.buildComponent({ node });
@@ -1213,28 +1269,26 @@ describe("ComponentBuilder", () => {
       // Element class should be p_about_submit-button for page elements
     });
 
-    test("should use component-based class when inside component context", () => {
+    test('should use component-based class when inside component context', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "button",
-        label: "action-button",
-        interactiveStyles: [
-          { postfix: ":hover", style: { backgroundColor: "primary-dark" } },
-        ],
-        children: ["Click"],
+        type: 'node',
+        tag: 'button',
+        label: 'action-button',
+        interactiveStyles: [{ postfix: ':hover', style: { backgroundColor: 'primary-dark' } }],
+        children: ['Click'],
       };
 
       // Build with componentContext set (inside a component)
       const result = builder.buildComponent({
         node,
-        componentContext: "Button",
+        componentContext: 'Button',
       });
 
       expect(result).not.toBeNull();
       // Element class should be c_button_action-button for component elements
     });
 
-    test("should use relative path for component elements", () => {
+    test('should use relative path for component elements', () => {
       // When a component is placed at different positions on a page,
       // its internal elements should always get the same class
       // because they use paths relative to the component root.
@@ -1243,32 +1297,28 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            label: "root",
-            interactiveStyles: [
-              { postfix: ":hover", style: { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" } },
-            ],
+            type: 'node',
+            tag: 'div',
+            label: 'root',
+            interactiveStyles: [{ postfix: ':hover', style: { boxShadow: '0 4px 12px rgba(0,0,0,0.1)' } }],
             children: [
               {
-                type: "node",
-                tag: "span",
-                label: "label",
-                interactiveStyles: [
-                  { postfix: ":hover", style: { color: "primary" } },
-                ],
-                children: ["Label"],
+                type: 'node',
+                tag: 'span',
+                label: 'label',
+                interactiveStyles: [{ postfix: ':hover', style: { color: 'primary' } }],
+                children: ['Label'],
               },
             ],
           },
         },
       };
-      componentRegistry.register("HoverCard", componentDef as any);
+      componentRegistry.register('HoverCard', componentDef as any);
 
       // First instance at page path [0]
       const node1: ComponentNode = {
-        type: "component",
-        component: "HoverCard",
+        type: 'component',
+        component: 'HoverCard',
       };
 
       const result1 = builder.buildComponent({
@@ -1291,7 +1341,7 @@ describe("ComponentBuilder", () => {
       // component-relative paths, not page-absolute paths
     });
 
-    test("should generate different classes for page vs component with same name", () => {
+    test('should generate different classes for page vs component with same name', () => {
       // A page named "button" and a component named "Button" should
       // produce different element classes (p_button_... vs c_button_...)
 
@@ -1299,22 +1349,20 @@ describe("ComponentBuilder", () => {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "button",
-            label: "root",
-            interactiveStyles: [
-              { postfix: ":hover", style: { opacity: "0.9" } },
-            ],
-            children: ["Component Button"],
+            type: 'node',
+            tag: 'button',
+            label: 'root',
+            interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.9' } }],
+            children: ['Component Button'],
           },
         },
       };
-      componentRegistry.register("Button", componentDef as any);
+      componentRegistry.register('Button', componentDef as any);
 
       // Component instance
       const componentNode: ComponentNode = {
-        type: "component",
-        component: "Button",
+        type: 'component',
+        component: 'Button',
       };
 
       const componentResult = builder.buildComponent({ node: componentNode });
@@ -1324,18 +1372,16 @@ describe("ComponentBuilder", () => {
       const pageBuilder = new ComponentBuilder({
         componentRegistry,
         elementRegistry,
-        getCurrentPageName: () => "button",
-        getCurrentFileType: () => "page",
+        getCurrentPageName: () => 'button',
+        getCurrentFileType: () => 'page',
       });
 
       const pageNode: ComponentNode = {
-        type: "node",
-        tag: "button",
-        label: "root",
-        interactiveStyles: [
-          { postfix: ":hover", style: { opacity: "0.9" } },
-        ],
-        children: ["Page Button"],
+        type: 'node',
+        tag: 'button',
+        label: 'root',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.9' } }],
+        children: ['Page Button'],
       };
 
       const pageResult = pageBuilder.buildComponent({ node: pageNode });
@@ -1344,26 +1390,24 @@ describe("ComponentBuilder", () => {
       // Component uses c_button_root, page uses p_button_root
     });
 
-    test("should propagate componentContext through nested children", () => {
+    test('should propagate componentContext through nested children', () => {
       const componentDef = {
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [
               {
-                type: "node",
-                tag: "div",
+                type: 'node',
+                tag: 'div',
                 children: [
                   {
-                    type: "node",
-                    tag: "button",
-                    label: "deeply-nested",
-                    interactiveStyles: [
-                      { postfix: ":hover", style: { color: "primary" } },
-                    ],
-                    children: ["Nested Button"],
+                    type: 'node',
+                    tag: 'button',
+                    label: 'deeply-nested',
+                    interactiveStyles: [{ postfix: ':hover', style: { color: 'primary' } }],
+                    children: ['Nested Button'],
                   },
                 ],
               },
@@ -1371,11 +1415,11 @@ describe("ComponentBuilder", () => {
           },
         },
       };
-      componentRegistry.register("DeepComponent", componentDef as any);
+      componentRegistry.register('DeepComponent', componentDef as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "DeepComponent",
+        type: 'component',
+        component: 'DeepComponent',
       };
 
       const result = builder.buildComponent({ node });
@@ -1385,50 +1429,50 @@ describe("ComponentBuilder", () => {
       // because componentContext is propagated through the tree
     });
 
-    test("should handle multiple interactive states on same element", () => {
+    test('should handle multiple interactive states on same element', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "button",
-        label: "multi-state",
+        type: 'node',
+        tag: 'button',
+        label: 'multi-state',
         interactiveStyles: [
-          { postfix: ":hover", style: { backgroundColor: "primary-light" } },
-          { postfix: ":active", style: { backgroundColor: "primary-dark" } },
-          { postfix: ":focus", style: { outline: "2px solid var(--primary)" } },
-          { postfix: ":disabled", style: { opacity: "0.5", cursor: "not-allowed" } },
+          { postfix: ':hover', style: { backgroundColor: 'primary-light' } },
+          { postfix: ':active', style: { backgroundColor: 'primary-dark' } },
+          { postfix: ':focus', style: { outline: '2px solid var(--primary)' } },
+          { postfix: ':disabled', style: { opacity: '0.5', cursor: 'not-allowed' } },
         ],
-        children: ["Multi-state Button"],
+        children: ['Multi-state Button'],
       };
 
       const result = builder.buildComponent({
         node,
-        componentContext: "MultiButton",
+        componentContext: 'MultiButton',
       });
 
       expect(result).not.toBeNull();
       // All states should use the same element class: c_multibutton_multi-state
     });
 
-    test("should handle responsive interactive styles", () => {
+    test('should handle responsive interactive styles', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
-        label: "responsive-hover",
+        type: 'node',
+        tag: 'div',
+        label: 'responsive-hover',
         interactiveStyles: [
           {
-            postfix: ":hover",
+            postfix: ':hover',
             style: {
-              base: { padding: "20px" },
-              tablet: { padding: "16px" },
-              mobile: { padding: "12px" },
+              base: { padding: '20px' },
+              tablet: { padding: '16px' },
+              mobile: { padding: '12px' },
             },
           },
         ],
-        children: ["Responsive hover"],
+        children: ['Responsive hover'],
       };
 
       const result = builder.buildComponent({
         node,
-        componentContext: "ResponsiveCard",
+        componentContext: 'ResponsiveCard',
       });
 
       expect(result).not.toBeNull();
@@ -1436,27 +1480,27 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("buildComponent - Conditional Rendering (if property)", () => {
-    test("should render node when if is true", () => {
+  describe('buildComponent - Conditional Rendering (if property)', () => {
+    test('should render node when if is true', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         if: true,
-        children: ["Visible content"],
+        children: ['Visible content'],
       } as any;
 
       const result = builder.buildComponent({ node });
 
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should skip node when if is false", () => {
+    test('should skip node when if is false', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         if: false,
-        children: ["Hidden content"],
+        children: ['Hidden content'],
       } as any;
 
       const result = builder.buildComponent({ node });
@@ -1464,11 +1508,11 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should render node when if property is absent", () => {
+    test('should render node when if property is absent', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
-        children: ["Default visible"],
+        type: 'node',
+        tag: 'div',
+        children: ['Default visible'],
       };
 
       const result = builder.buildComponent({ node });
@@ -1476,41 +1520,41 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
 
-    test("should resolve if mapping from component props", () => {
+    test('should resolve if mapping from component props', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         if: {
           _mapping: true,
-          prop: "showBanner",
-          values: { "true": true, "false": false },
+          prop: 'showBanner',
+          values: { true: true, false: false },
         },
-        children: ["Conditional banner"],
+        children: ['Conditional banner'],
       } as any;
 
       // When prop is 'true', should render
       const resultVisible = builder.buildComponent({
         node,
-        componentResolvedProps: { showBanner: "true" },
+        componentResolvedProps: { showBanner: 'true' },
       });
       expect(resultVisible).not.toBeNull();
 
       // When prop is 'false', should skip
       const resultHidden = builder.buildComponent({
         node,
-        componentResolvedProps: { showBanner: "false" },
+        componentResolvedProps: { showBanner: 'false' },
       });
       expect(resultHidden).toBeNull();
     });
 
-    test("should skip children when parent if is false", () => {
+    test('should skip children when parent if is false', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         if: false,
         children: [
-          { type: "node", tag: "span", children: ["Child 1"] },
-          { type: "node", tag: "span", children: ["Child 2"] },
+          { type: 'node', tag: 'span', children: ['Child 1'] },
+          { type: 'node', tag: 'span', children: ['Child 2'] },
         ],
       } as any;
 
@@ -1519,16 +1563,16 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should handle if with component nodes", () => {
-      componentRegistry.register("TestComponent", {
+    test('should handle if with component nodes', () => {
+      componentRegistry.register('TestComponent', {
         component: {
-          structure: { type: "node", tag: "div", children: ["Component content"] },
+          structure: { type: 'node', tag: 'div', children: ['Component content'] },
         },
       } as any);
 
       const node: ComponentNode = {
-        type: "component",
-        component: "TestComponent",
+        type: 'component',
+        component: 'TestComponent',
         if: false,
       } as any;
 
@@ -1537,10 +1581,10 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should handle if with embed nodes", () => {
+    test('should handle if with embed nodes', () => {
       const node: ComponentNode = {
-        type: "embed",
-        html: "<svg></svg>",
+        type: 'embed',
+        html: '<svg></svg>',
         if: false,
       } as any;
 
@@ -1549,12 +1593,12 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should handle if with link nodes", () => {
+    test('should handle if with link nodes', () => {
       const node: ComponentNode = {
-        type: "link",
-        href: "/page",
+        type: 'link',
+        href: '/page',
         if: false,
-        children: ["Hidden link"],
+        children: ['Hidden link'],
       } as any;
 
       const result = builder.buildComponent({ node });
@@ -1562,16 +1606,16 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("treats unresolved string-template if as falsy", () => {
+    test('treats unresolved string-template if as falsy', () => {
       // When `if: "{{buttonText}}"` references an undefined prop,
       // evaluateTemplate preserves the original template string (backward-compat).
       // Without component/CMS/item context to resolve it, treat the node as hidden
       // — matches user expectation when binding visibility to an unset prop.
       const node: ComponentNode = {
-        type: "link",
-        href: "/page",
-        if: "{{buttonText}}",
-        children: ["Hidden link"],
+        type: 'link',
+        href: '/page',
+        if: '{{buttonText}}',
+        children: ['Hidden link'],
       } as any;
 
       const result = builder.buildComponent({ node });
@@ -1579,9 +1623,9 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should handle if with locale-list nodes", () => {
+    test('should handle if with locale-list nodes', () => {
       const node: ComponentNode = {
-        type: "locale-list",
+        type: 'locale-list',
         if: false,
       } as any;
 
@@ -1590,29 +1634,29 @@ describe("ComponentBuilder", () => {
       expect(result).toBeNull();
     });
 
-    test("should render when mapping prop value not found (default true)", () => {
+    test('should render when mapping prop value not found (default true)', () => {
       const node: ComponentNode = {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         if: {
           _mapping: true,
-          prop: "status",
-          values: { "active": true, "inactive": false },
+          prop: 'status',
+          values: { active: true, inactive: false },
         },
-        children: ["Content"],
+        children: ['Content'],
       } as any;
 
       // 'unknown' is not in the values map, should default to true
       const result = builder.buildComponent({
         node,
-        componentResolvedProps: { status: "unknown" },
+        componentResolvedProps: { status: 'unknown' },
       });
 
       expect(result).not.toBeNull();
     });
   });
 
-  describe("Edge Case 7: List Paths Tracking (Collection Mode)", () => {
+  describe('Edge Case 7: List Paths Tracking (Collection Mode)', () => {
     const createMockCMSItems = (count: number): CMSItem[] => {
       return Array.from({ length: count }, (_, i) => ({
         _id: `item-${i}`,
@@ -1621,13 +1665,13 @@ describe("ComponentBuilder", () => {
       }));
     };
 
-    test("should pass listPaths through buildChildren", () => {
+    test('should pass listPaths through buildChildren', () => {
       // Create a simple list with items
       const node: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "posts",
-        children: [{ type: "node", tag: "div", children: ["Item"] }],
+        source: 'posts',
+        children: [{ type: 'node', tag: 'div', children: ['Item'] }],
       };
 
       const items = createMockCMSItems(2);
@@ -1643,18 +1687,18 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should track listPaths in nested lists", () => {
+    test('should track listPaths in nested lists', () => {
       // Outer list with inner list
       const outerNode: ListNode = {
         type: NODE_TYPE.LIST,
         sourceType: 'collection',
-        source: "categories",
+        source: 'categories',
         children: [
           {
             type: NODE_TYPE.LIST,
             sourceType: 'collection',
-            source: "posts",
-            children: [{ type: "node", tag: "span", children: ["Post"] }],
+            source: 'posts',
+            children: [{ type: 'node', tag: 'span', children: ['Post'] }],
           } as any,
         ],
       };
@@ -1673,28 +1717,26 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("Edge Case 5: Slot Content Context Handling", () => {
-    test("should not pass componentContext to slot content elements", () => {
+  describe('Edge Case 5: Slot Content Context Handling', () => {
+    test('should not pass componentContext to slot content elements', () => {
       // Register a component with a slot
-      componentRegistry.register("Container", {
-        type: "Container",
+      componentRegistry.register('Container', {
+        type: 'Container',
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "div",
-            children: [{ type: "slot" }],
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'slot' }],
           },
         },
       });
 
       // Component instance with children (slot content)
       const node: ComponentNode = {
-        type: "component",
-        component: "Container",
-        children: [
-          { type: "node", tag: "span", children: ["Slot content"] },
-        ],
+        type: 'component',
+        component: 'Container',
+        children: [{ type: 'node', tag: 'span', children: ['Slot content'] }],
       };
 
       const result = builder.buildComponent({
@@ -1704,29 +1746,29 @@ describe("ComponentBuilder", () => {
 
       // Should render successfully
       expect(result).not.toBeNull();
-      expect(typeof result).toBe("object");
+      expect(typeof result).toBe('object');
     });
 
-    test("should mark slot content with _isSlotContent flag", () => {
+    test('should mark slot content with _isSlotContent flag', () => {
       // This tests that slot content is marked, which affects context handling
-      componentRegistry.register("Wrapper", {
-        type: "Wrapper",
+      componentRegistry.register('Wrapper', {
+        type: 'Wrapper',
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "section",
-            children: [{ type: "slot" }],
+            type: 'node',
+            tag: 'section',
+            children: [{ type: 'slot' }],
           },
         },
       });
 
       const node: ComponentNode = {
-        type: "component",
-        component: "Wrapper",
+        type: 'component',
+        component: 'Wrapper',
         children: [
-          { type: "node", tag: "div", children: ["Child 1"] },
-          { type: "node", tag: "div", children: ["Child 2"] },
+          { type: 'node', tag: 'div', children: ['Child 1'] },
+          { type: 'node', tag: 'div', children: ['Child 2'] },
         ],
       };
 
@@ -1738,27 +1780,24 @@ describe("ComponentBuilder", () => {
       expect(element?.props?.children).toBeDefined();
     });
 
-    test("should preserve componentContext for component structure elements", () => {
+    test('should preserve componentContext for component structure elements', () => {
       // Register a component
-      componentRegistry.register("Card", {
-        type: "Card",
+      componentRegistry.register('Card', {
+        type: 'Card',
         component: {
           interface: {},
           structure: {
-            type: "node",
-            tag: "article",
-            children: [
-              { type: "node", tag: "h2", children: ["Header"] },
-              { type: "slot" },
-            ],
+            type: 'node',
+            tag: 'article',
+            children: [{ type: 'node', tag: 'h2', children: ['Header'] }, { type: 'slot' }],
           },
         },
       });
 
       const node: ComponentNode = {
-        type: "component",
-        component: "Card",
-        children: [{ type: "node", tag: "p", children: ["Content"] }],
+        type: 'component',
+        component: 'Card',
+        children: [{ type: 'node', tag: 'p', children: ['Content'] }],
       };
 
       const result = builder.buildComponent({ node });
@@ -1767,5 +1806,69 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
     });
   });
-});
 
+  // Islands and Custom nodes are black boxes meno-core can't run — the canvas
+  // shows a placeholder. The wrapper still wires data-element-path via a ref so a
+  // click on the placeholder selects the node like any regular element.
+  describe('buildComponent - Island / Custom node selection', () => {
+    // Drive the ref the same way React would on mount and capture what it stamps.
+    const captureRefAttrs = (ref: unknown): Record<string, string> => {
+      const attrs: Record<string, string> = {};
+      const fakeEl = {
+        setAttribute: (name: string, value: string) => {
+          attrs[name] = value;
+        },
+        style: { setProperty: () => {} },
+      } as unknown as HTMLElement;
+      (ref as (el: HTMLElement | null) => void)(fakeEl);
+      return attrs;
+    };
+
+    test('island wrapper carries data-island, display:contents, and a selection ref', () => {
+      const node: ComponentNode = { type: 'island', src: 'Counter.tsx', client: { directive: 'load' } } as any;
+      const result = builder.buildComponent({ node, elementPath: [0, 2] }) as any;
+
+      expect(result.type).toBe('div');
+      expect(result.props['data-island']).toBe('Counter.tsx');
+      expect(result.props.style.display).toBe('contents');
+      expect(typeof (result.ref ?? result.props.ref)).toBe('function');
+
+      const attrs = captureRefAttrs(result.ref ?? result.props.ref);
+      expect(attrs['data-element-path']).toBe('0,2');
+    });
+
+    test('empty island renders its basename as the placeholder', () => {
+      const node: ComponentNode = { type: 'island', src: 'widgets/Chart.vue' } as any;
+      const result = builder.buildComponent({ node }) as any;
+      // inner is the placeholder span carrying the basename.
+      expect(result.props.children.props.children).toBe('Chart');
+    });
+
+    test('custom wrapper carries data-custom and a selection ref', () => {
+      const node: ComponentNode = { type: 'custom', src: 'Fancy.astro' } as any;
+      const result = builder.buildComponent({ node, elementPath: [0, 1] }) as any;
+
+      expect(result.type).toBe('div');
+      expect(result.props['data-custom']).toBe('Fancy.astro');
+      expect(result.props.style.display).toBe('contents');
+
+      const attrs = captureRefAttrs(result.ref ?? result.props.ref);
+      expect(attrs['data-element-path']).toBe('0,1');
+    });
+
+    test('island ref stamps CMS-list context when present', () => {
+      const node: ComponentNode = { type: 'island', src: 'Counter.tsx' } as any;
+      const result = builder.buildComponent({
+        node,
+        elementPath: [0, 0],
+        cmsItemIndexPath: [1],
+        cmsListPaths: [[0]],
+      }) as any;
+
+      const attrs = captureRefAttrs(result.ref ?? result.props.ref);
+      expect(attrs['data-element-path']).toBe('0,0');
+      expect(attrs['data-cms-item-index']).toBe('1');
+      expect(attrs['data-cms-context']).toContain('"itemIndexPath":[1]');
+    });
+  });
+});