meno-core 1.0.53 → 1.1.0

package/lib/server/ssrRenderer.test.ts

@@ -1,141 +1,136 @@
-import { test, expect, describe, beforeEach, afterEach, mock, spyOn } from "bun:test";
-import {
-  generateSSRHTML,
-  renderPageSSR,
-  extractPageMeta,
-  generateMetaTags
-} from "./ssrRenderer";
-import type { ComponentNode, ComponentDefinition, JSONPage, CMSListNode, CMSItem } from "../shared/types";
-import { CMSService } from "./services/cmsService";
+import { test, expect, describe, spyOn } from 'bun:test';
+import { generateSSRHTML, renderPageSSR, extractPageMeta, generateMetaTags } from './ssrRenderer';
+import type { ComponentNode, ComponentDefinition, JSONPage, CMSItem } from '../shared/types';
+import { CMSService } from './services/cmsService';
 
 // Mock jsonLoader
-const mockLoadBreakpointConfig = async () => ({
+const _mockLoadBreakpointConfig = async () => ({
   tablet: 1024,
-  mobile: 540
+  mobile: 540,
 });
 
 // Mock the jsonLoader module
-const originalJsonLoader = await import("./jsonLoader");
+const originalJsonLoader = await import('./jsonLoader');
 if (originalJsonLoader) {
   // We'll need to test with actual imports, but can provide mocks where needed
 }
 
-describe("SSR Renderer - extractPageMeta", () => {
-  test("should extract basic meta information", () => {
+describe('SSR Renderer - extractPageMeta', () => {
+  test('should extract basic meta information', () => {
     const pageData: JSONPage = {
       meta: {
-        title: "Test Page",
-        description: "Test description",
-        keywords: "test, page"
-      }
+        title: 'Test Page',
+        description: 'Test description',
+        keywords: 'test, page',
+      },
     };
-    
+
     const meta = extractPageMeta(pageData);
-    
-    expect(meta.title).toBe("Test Page");
-    expect(meta.description).toBe("Test description");
-    expect(meta.keywords).toBe("test, page");
+
+    expect(meta.title).toBe('Test Page');
+    expect(meta.description).toBe('Test description');
+    expect(meta.keywords).toBe('test, page');
   });
 
-  test("should extract Open Graph meta", () => {
+  test('should extract Open Graph meta', () => {
     const pageData: JSONPage = {
       meta: {
-        title: "Test Page",
-        ogTitle: "OG Title",
-        ogDescription: "OG Description",
-        ogImage: "https://example.com/image.jpg",
-        ogType: "article"
-      }
+        title: 'Test Page',
+        ogTitle: 'OG Title',
+        ogDescription: 'OG Description',
+        ogImage: 'https://example.com/image.jpg',
+        ogType: 'article',
+      },
     };
-    
+
     const meta = extractPageMeta(pageData);
-    
-    expect(meta.ogTitle).toBe("OG Title");
-    expect(meta.ogDescription).toBe("OG Description");
-    expect(meta.ogImage).toBe("https://example.com/image.jpg");
-    expect(meta.ogType).toBe("article");
+
+    expect(meta.ogTitle).toBe('OG Title');
+    expect(meta.ogDescription).toBe('OG Description');
+    expect(meta.ogImage).toBe('https://example.com/image.jpg');
+    expect(meta.ogType).toBe('article');
   });
 
-  test("should use title as fallback for ogTitle", () => {
+  test('should use title as fallback for ogTitle', () => {
     const pageData: JSONPage = {
       meta: {
-        title: "Test Page"
-      }
+        title: 'Test Page',
+      },
     };
-    
+
     const meta = extractPageMeta(pageData);
-    
-    expect(meta.ogTitle).toBe("Test Page");
+
+    expect(meta.ogTitle).toBe('Test Page');
   });
 
-  test("should use description as fallback for ogDescription", () => {
+  test('should use description as fallback for ogDescription', () => {
     const pageData: JSONPage = {
       meta: {
-        description: "Test description"
-      }
+        description: 'Test description',
+      },
     };
-    
+
     const meta = extractPageMeta(pageData);
-    
-    expect(meta.ogDescription).toBe("Test description");
+
+    expect(meta.ogDescription).toBe('Test description');
   });
 
   test("should default ogType to 'website'", () => {
     const pageData: JSONPage = {
-      meta: {}
+      meta: {},
     };
-    
+
     const meta = extractPageMeta(pageData);
-    
-    expect(meta.ogType).toBe("website");
+
+    expect(meta.ogType).toBe('website');
   });
 
-  test("should handle missing meta object", () => {
+  test('should handle missing meta object', () => {
     const pageData: JSONPage = {};
-    
+
     const meta = extractPageMeta(pageData);
-    
+
     expect(Object.keys(meta).length).toBe(0);
   });
 });
 
-describe("SSR Renderer - generateMetaTags", () => {
-  test("should generate title tag", () => {
+describe('SSR Renderer - generateMetaTags', () => {
+  test('should generate title tag', () => {
     const meta = {
-      title: "Test Page"
+      title: 'Test Page',
     };
-    
+
     const tags = generateMetaTags(meta);
-    
-    expect(tags).toContain("<title>Test Page</title>");
+
+    expect(tags).toContain('<title>Test Page</title>');
   });
 
-  test("should generate description meta tag", () => {
+  test('should generate description meta tag', () => {
     const meta = {
-      description: "Test description"
+      description: 'Test description',
     };
-    
+
     const tags = generateMetaTags(meta);
-    
+
     expect(tags).toContain(`<meta name="description" content="Test description" />`);
   });
 
-  test("should generate keywords meta tag", () => {
+  test('should generate keywords meta tag', () => {
     const meta = {
-      keywords: "test, keywords"
+      keywords: 'test, keywords',
     };
-    
+
     const tags = generateMetaTags(meta);
-    
+
     expect(tags).toContain(`<meta name="keywords" content="test, keywords" />`);
   });
 
-  test("should generate Open Graph tags", () => {
+  test('should generate Open Graph tags', () => {
     const meta = {
-      ogTitle: "OG Title",
-      ogDescription: "OG Description",
-      ogImage: "https://example.com/image.jpg",
-      ogType: "article"
+      ogTitle: 'OG Title',
+      ogDescription: 'OG Description',
+      ogImage: 'https://example.com/image.jpg',
+      ogType: 'article',
     };
 
     const tags = generateMetaTags(meta);
@@ -146,11 +141,11 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta property="og:type" content="article" />`);
   });
 
-  test("should emit twitter:card=summary_large_image when ogImage present", () => {
+  test('should emit twitter:card=summary_large_image when ogImage present', () => {
     const meta = {
-      ogTitle: "OG Title",
-      ogDescription: "OG Description",
-      ogImage: "https://example.com/image.jpg",
+      ogTitle: 'OG Title',
+      ogDescription: 'OG Description',
+      ogImage: 'https://example.com/image.jpg',
     };
 
     const tags = generateMetaTags(meta);
@@ -160,10 +155,10 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:description" content="OG Description" />`);
   });
 
-  test("should emit twitter:card=summary when no ogImage", () => {
+  test('should emit twitter:card=summary when no ogImage', () => {
     const meta = {
-      title: "Plain Title",
-      description: "Plain Description",
+      title: 'Plain Title',
+      description: 'Plain Description',
     };
 
     const tags = generateMetaTags(meta);
@@ -171,10 +166,10 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:card" content="summary" />`);
   });
 
-  test("twitter:title falls back to title when ogTitle is absent", () => {
+  test('twitter:title falls back to title when ogTitle is absent', () => {
     const meta = {
-      title: "Plain Title",
-      ogImage: "https://example.com/image.jpg",
+      title: 'Plain Title',
+      ogImage: 'https://example.com/image.jpg',
     };
 
     const tags = generateMetaTags(meta);
@@ -182,10 +177,10 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:title" content="Plain Title" />`);
   });
 
-  test("twitter:description falls back to description when ogDescription is absent", () => {
+  test('twitter:description falls back to description when ogDescription is absent', () => {
     const meta = {
-      description: "Plain Description",
-      ogImage: "https://example.com/image.jpg",
+      description: 'Plain Description',
+      ogImage: 'https://example.com/image.jpg',
     };
 
     const tags = generateMetaTags(meta);
@@ -193,8 +188,8 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:description" content="Plain Description" />`);
   });
 
-  test("should emit twitter:site and twitter:creator with @-normalized handle", () => {
-    const meta = { title: "Page" };
+  test('should emit twitter:site and twitter:creator with @-normalized handle', () => {
+    const meta = { title: 'Page' };
 
     const tags = generateMetaTags(meta, '', 'en', undefined, {
       social: { twitterHandle: 'meno' },
@@ -204,8 +199,8 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:creator" content="@meno" />`);
   });
 
-  test("should not double-prefix handle that already starts with @", () => {
-    const meta = { title: "Page" };
+  test('should not double-prefix handle that already starts with @', () => {
+    const meta = { title: 'Page' };
 
     const tags = generateMetaTags(meta, '', 'en', undefined, {
       social: { twitterHandle: '@meno' },
@@ -215,15 +210,15 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).not.toContain(`@@meno`);
   });
 
-  test("should emit no twitter tags when meta is empty", () => {
+  test('should emit no twitter tags when meta is empty', () => {
     const tags = generateMetaTags({});
 
     expect(tags).not.toContain('twitter:');
   });
 
-  test("should escape HTML in twitter content", () => {
+  test('should escape HTML in twitter content', () => {
     const meta = {
-      ogTitle: "Title & <stuff>",
+      ogTitle: 'Title & <stuff>',
     };
 
     const tags = generateMetaTags(meta);
@@ -231,24 +226,24 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta name="twitter:title" content="Title &amp; &lt;stuff&gt;" />`);
   });
 
-  test("og:image swaps /images/*.webp → .jpg", () => {
-    const meta = { ogImage: "/images/photo.webp" };
+  test('og:image swaps /images/*.webp → .jpg', () => {
+    const meta = { ogImage: '/images/photo.webp' };
 
     const tags = generateMetaTags(meta);
 
     expect(tags).toContain(`<meta property="og:image" content="/images/photo.jpg" />`);
   });
 
-  test("og:image swaps /images/*.avif → .jpg", () => {
-    const meta = { ogImage: "/images/photo.avif" };
+  test('og:image swaps /images/*.avif → .jpg', () => {
+    const meta = { ogImage: '/images/photo.avif' };
 
     const tags = generateMetaTags(meta);
 
     expect(tags).toContain(`<meta property="og:image" content="/images/photo.jpg" />`);
   });
 
-  test("og:image is made absolute when options.baseUrl is provided", () => {
-    const meta = { ogImage: "/images/photo.webp" };
+  test('og:image is made absolute when options.baseUrl is provided', () => {
+    const meta = { ogImage: '/images/photo.webp' };
 
     const tags = generateMetaTags(meta, '', 'en', undefined, {
       baseUrl: 'https://example.com',
@@ -257,8 +252,8 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta property="og:image" content="https://example.com/images/photo.jpg" />`);
   });
 
-  test("og:image strips trailing slash from baseUrl", () => {
-    const meta = { ogImage: "/images/photo.webp" };
+  test('og:image strips trailing slash from baseUrl', () => {
+    const meta = { ogImage: '/images/photo.webp' };
 
     const tags = generateMetaTags(meta, '', 'en', undefined, {
       baseUrl: 'https://example.com/',
@@ -267,32 +262,32 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta property="og:image" content="https://example.com/images/photo.jpg" />`);
   });
 
-  test("og:image preserves .png unchanged (other than baseUrl absolutization)", () => {
-    const meta = { ogImage: "/images/photo.png" };
+  test('og:image preserves .png unchanged (other than baseUrl absolutization)', () => {
+    const meta = { ogImage: '/images/photo.png' };
 
     const tags = generateMetaTags(meta);
 
     expect(tags).toContain(`<meta property="og:image" content="/images/photo.png" />`);
   });
 
-  test("og:image preserves .jpg unchanged", () => {
-    const meta = { ogImage: "/images/photo.jpg" };
+  test('og:image preserves .jpg unchanged', () => {
+    const meta = { ogImage: '/images/photo.jpg' };
 
     const tags = generateMetaTags(meta);
 
     expect(tags).toContain(`<meta property="og:image" content="/images/photo.jpg" />`);
   });
 
-  test("og:image preserves external absolute URL unchanged", () => {
-    const meta = { ogImage: "https://cdn.example.com/photo.webp" };
+  test('og:image preserves external absolute URL unchanged', () => {
+    const meta = { ogImage: 'https://cdn.example.com/photo.webp' };
 
     const tags = generateMetaTags(meta);
 
     expect(tags).toContain(`<meta property="og:image" content="https://cdn.example.com/photo.webp" />`);
   });
 
-  test("og:image does not rewrite non-/images/ local paths but still absolutizes them", () => {
-    const meta = { ogImage: "/cdn-cgi/photo.webp" };
+  test('og:image does not rewrite non-/images/ local paths but still absolutizes them', () => {
+    const meta = { ogImage: '/cdn-cgi/photo.webp' };
 
     const tags = generateMetaTags(meta, '', 'en', undefined, {
       baseUrl: 'https://example.com',
@@ -301,38 +296,38 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain(`<meta property="og:image" content="https://example.com/cdn-cgi/photo.webp" />`);
   });
 
-  test("should generate canonical URL", () => {
+  test('should generate canonical URL', () => {
     const meta = {};
-    const url = "https://example.com/page";
-    
+    const url = 'https://example.com/page';
+
     const tags = generateMetaTags(meta, url);
-    
+
     expect(tags).toContain(`<link rel="canonical" href="https://example.com/page" />`);
     expect(tags).toContain(`<meta property="og:url" content="https://example.com/page" />`);
   });
 
-  test("should escape HTML in meta content", () => {
+  test('should escape HTML in meta content', () => {
     const meta = {
-      title: "Test & Page",
-      description: "Test <description>"
+      title: 'Test & Page',
+      description: 'Test <description>',
     };
-    
+
     const tags = generateMetaTags(meta);
-    
-    expect(tags).toContain("<title>Test &amp; Page</title>");
+
+    expect(tags).toContain('<title>Test &amp; Page</title>');
     expect(tags).toContain(`content="Test &lt;description&gt;"`);
   });
 
-  test("should handle empty meta", () => {
+  test('should handle empty meta', () => {
     const meta = {};
 
     const tags = generateMetaTags(meta);
 
-    expect(tags).toBe("");
+    expect(tags).toBe('');
   });
 
-  test("should generate hreflang tags when slugMappings provided", () => {
-    const meta = { title: "About Us" };
+  test('should generate hreflang tags when slugMappings provided', () => {
+    const meta = { title: 'About Us' };
     const i18nConfig = {
       defaultLocale: 'en',
       locales: [
@@ -341,9 +336,7 @@ describe("SSR Renderer - generateMetaTags", () => {
         { code: 'de', name: 'German', nativeName: 'Deutsch', langTag: 'de-DE' },
       ],
     };
-    const slugMappings = [
-      { pageId: 'about', slugs: { en: 'about', pl: 'o-nas', de: 'uber-uns' } },
-    ];
+    const slugMappings = [{ pageId: 'about', slugs: { en: 'about', pl: 'o-nas', de: 'uber-uns' } }];
 
     const tags = generateMetaTags(meta, 'https://example.com/about', 'en', i18nConfig, {
       slugMappings,
@@ -357,17 +350,13 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).toContain('<link rel="alternate" hreflang="x-default" href="https://example.com/about" />');
   });
 
-  test("should not generate hreflang tags for single locale", () => {
-    const meta = { title: "About Us" };
+  test('should not generate hreflang tags for single locale', () => {
+    const meta = { title: 'About Us' };
     const i18nConfig = {
       defaultLocale: 'en',
-      locales: [
-        { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' },
-      ],
+      locales: [{ code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' }],
     };
-    const slugMappings = [
-      { pageId: 'about', slugs: { en: 'about' } },
-    ];
+    const slugMappings = [{ pageId: 'about', slugs: { en: 'about' } }];
 
     const tags = generateMetaTags(meta, 'https://example.com/about', 'en', i18nConfig, {
       slugMappings,
@@ -378,8 +367,8 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).not.toContain('hreflang');
   });
 
-  test("should not generate hreflang tags without slugMappings", () => {
-    const meta = { title: "About Us" };
+  test('should not generate hreflang tags without slugMappings', () => {
+    const meta = { title: 'About Us' };
     const i18nConfig = {
       defaultLocale: 'en',
       locales: [
@@ -393,8 +382,8 @@ describe("SSR Renderer - generateMetaTags", () => {
     expect(tags).not.toContain('hreflang');
   });
 
-  test("should escape special characters in hreflang URLs", () => {
-    const meta = { title: "Test" };
+  test('should escape special characters in hreflang URLs', () => {
+    const meta = { title: 'Test' };
     const i18nConfig = {
       defaultLocale: 'en',
       locales: [
@@ -402,9 +391,7 @@ describe("SSR Renderer - generateMetaTags", () => {
         { code: 'pl', name: 'Polish', nativeName: 'Polski', langTag: 'pl-PL' },
       ],
     };
-    const slugMappings = [
-      { pageId: 'test', slugs: { en: 'test&page', pl: 'test-strona' } },
-    ];
+    const slugMappings = [{ pageId: 'test', slugs: { en: 'test&page', pl: 'test-strona' } }];
 
     const tags = generateMetaTags(meta, 'https://example.com/test&page', 'en', i18nConfig, {
       slugMappings,
@@ -416,363 +403,363 @@ describe("SSR Renderer - generateMetaTags", () => {
   });
 });
 
-describe("SSR Renderer - renderPageSSR", () => {
-  describe("HTML generation", () => {
-    test("should render simple div element", async () => {
+describe('SSR Renderer - renderPageSSR', () => {
+  describe('HTML generation', () => {
+    test('should render simple div element', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["Hello World"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ['Hello World'],
+        },
       };
-      
+
       const result = await renderPageSSR(pageData);
-      
-      expect(result.html).toContain("<div");
-      expect(result.html).toContain("Hello World");
-      expect(result.html).toContain("</div>");
+
+      expect(result.html).toContain('<div');
+      expect(result.html).toContain('Hello World');
+      expect(result.html).toContain('</div>');
     });
 
-    test("should render nested component structures", async () => {
+    test('should render nested component structures', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           children: [
             {
-              type: "node",
-          tag: "div",
+              type: 'node',
+              tag: 'div',
               children: [
                 {
-                  type: "node",
-              tag: "span",
-                  children: ["Nested"]
-                }
-              ]
-            }
-          ]
-        }
-      };
-      
+                  type: 'node',
+                  tag: 'span',
+                  children: ['Nested'],
+                },
+              ],
+            },
+          ],
+        },
+      };
+
       const result = await renderPageSSR(pageData);
-      
-      expect(result.html).toContain("<div");
-      expect(result.html).toContain("<span");
-      expect(result.html).toContain("Nested");
+
+      expect(result.html).toContain('<div');
+      expect(result.html).toContain('<span');
+      expect(result.html).toContain('Nested');
     });
 
-    test("should render children arrays", async () => {
+    test('should render children arrays', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           children: [
-            { type: "node", tag: "p", children: ["First"] },
-            { type: "node", tag: "p", children: ["Second"] }
-          ]
-        }
+            { type: 'node', tag: 'p', children: ['First'] },
+            { type: 'node', tag: 'p', children: ['Second'] },
+          ],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).toContain("First");
-      expect(result.html).toContain("Second");
+      expect(result.html).toContain('First');
+      expect(result.html).toContain('Second');
     });
 
-    test("should render string children", async () => {
+    test('should render string children', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "p",
-          children: ["Simple text"]
-        }
+          type: 'node',
+          tag: 'p',
+          children: ['Simple text'],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).toContain("Simple text");
+      expect(result.html).toContain('Simple text');
     });
 
-    test("should render number children", async () => {
+    test('should render number children', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "span",
-          children: [42]
-        }
+          type: 'node',
+          tag: 'span',
+          children: [42],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).toContain("42");
+      expect(result.html).toContain('42');
     });
 
-    test("should escape HTML in text content", async () => {
+    test('should escape HTML in text content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["<script>alert('xss')</script>"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ["<script>alert('xss')</script>"],
+        },
       };
-      
+
       const result = await renderPageSSR(pageData);
-      
-      expect(result.html).toContain("&lt;script&gt;");
-      expect(result.html).not.toContain("<script>");
+
+      expect(result.html).toContain('&lt;script&gt;');
+      expect(result.html).not.toContain('<script>');
     });
 
-    test("should render anchor tag", async () => {
+    test('should render anchor tag', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "a",
-          children: ["Go to About"]
-        }
+          type: 'node',
+          tag: 'a',
+          children: ['Go to About'],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       expect(result.html).toContain(`<a`);
-      expect(result.html).toContain("Go to About");
-      expect(result.html).toContain("</a>");
+      expect(result.html).toContain('Go to About');
+      expect(result.html).toContain('</a>');
     });
   });
 
-  describe("CSS generation", () => {
-    test("should generate CSS for responsive styles", async () => {
+  describe('CSS generation', () => {
+    test('should generate CSS for responsive styles', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           style: {
             base: {
-              fontSize: "16px",
-              color: "red"
+              fontSize: '16px',
+              color: 'red',
             },
             tablet: {
-              fontSize: "14px"
+              fontSize: '14px',
             },
             mobile: {
-              fontSize: "12px"
-            }
-          }
-        }
+              fontSize: '12px',
+            },
+          },
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       // SSR renders HTML with styles (may be inline or via classes)
       expect(result.html).toBeDefined();
-      expect(result.html).toContain("<div");
+      expect(result.html).toContain('<div');
     });
 
-    test("should generate CSS class names for responsive styles", async () => {
+    test('should generate CSS class names for responsive styles', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           style: {
             base: {
-              color: "red"
-            }
-          }
-        }
+              color: 'red',
+            },
+          },
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       // HTML should be generated with styles
       expect(result.html).toBeDefined();
-      expect(result.html).toContain("<div");
+      expect(result.html).toContain('<div');
     });
 
-    test("should handle empty responsive styles", async () => {
+    test('should handle empty responsive styles', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           style: {
             base: {},
             tablet: {},
-            mobile: {}
-          }
-        }
+            mobile: {},
+          },
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       // Should still render HTML
-      expect(result.html).toContain("<div");
+      expect(result.html).toContain('<div');
       // componentCSS might be empty or minimal
       expect(result.componentCSS).toBeDefined();
     });
   });
 
-  describe("Component rendering", () => {
-    test("should render Button component (from Button.json)", async () => {
+  describe('Component rendering', () => {
+    test('should render Button component (from Button.json)', async () => {
       const buttonComponent: ComponentDefinition = {
-        type: "Button",
+        type: 'Button',
         component: {
           interface: {
             variant: {
-              type: "select",
-              default: "primary"
+              type: 'select',
+              default: 'primary',
             },
             children: {
-              type: "string",
-              default: "Click me"
-            }
+              type: 'string',
+              default: 'Click me',
+            },
           },
           structure: {
-            type: "node",
-            tag: "button",
+            type: 'node',
+            tag: 'button',
             style: {
               base: {
                 background: {
                   _mapping: true,
-                  prop: "variant",
+                  prop: 'variant',
                   values: {
-                    primary: "blue",
-                    secondary: "gray"
-                  }
+                    primary: 'blue',
+                    secondary: 'gray',
+                  },
                 } as any,
-                color: "white"
-              }
+                color: 'white',
+              },
             },
-            children: "{{children}}"
-          }
-        }
+            children: '{{children}}',
+          },
+        },
       };
-      
+
       const pageData: JSONPage = {
         root: {
-          type: "component",
-          component: "Button",
+          type: 'component',
+          component: 'Button',
           props: {
-            variant: "primary"
+            variant: 'primary',
           },
-          children: ["Custom Button"]
-        }
+          children: ['Custom Button'],
+        },
       };
 
       const globalComponents = {
-        Button: buttonComponent
+        Button: buttonComponent,
       };
 
       const result = await renderPageSSR(pageData, globalComponents);
 
       // Should render button element
-      expect(result.html).toContain("<button");
+      expect(result.html).toContain('<button');
       // Should render children
-      expect(result.html).toContain("Custom Button");
+      expect(result.html).toContain('Custom Button');
     });
 
-    test("should render BasicCard component with template evaluation", async () => {
+    test('should render BasicCard component with template evaluation', async () => {
       const cardComponent: ComponentDefinition = {
-        type: "BasicCard",
+        type: 'BasicCard',
         component: {
           interface: {
             title: {
-              type: "string",
-              default: "Card Title"
-            }
+              type: 'string',
+              default: 'Card Title',
+            },
           },
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [
               {
-                type: "node",
-                tag: "h3",
-                children: ["{{title}}"]
-              }
-            ]
-          }
-        }
-      };
-      
+                type: 'node',
+                tag: 'h3',
+                children: ['{{title}}'],
+              },
+            ],
+          },
+        },
+      };
+
       const pageData: JSONPage = {
         root: {
-          type: "component",
-          component: "BasicCard",
+          type: 'component',
+          component: 'BasicCard',
           props: {
-            title: "My Card"
-          }
-        }
+            title: 'My Card',
+          },
+        },
       };
 
       const globalComponents = {
-        BasicCard: cardComponent
+        BasicCard: cardComponent,
       };
 
       const result = await renderPageSSR(pageData, globalComponents);
 
-      expect(result.html).toContain("<div");
-      expect(result.html).toContain("<h3");
-      expect(result.html).toContain("My Card");
+      expect(result.html).toContain('<div');
+      expect(result.html).toContain('<h3');
+      expect(result.html).toContain('My Card');
     });
   });
 
-  describe("Template evaluation in SSR", () => {
-    test("should evaluate template expressions in structure", async () => {
+  describe('Template evaluation in SSR', () => {
+    test('should evaluate template expressions in structure', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["Hello {{name}}"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ['Hello {{name}}'],
+        },
       };
-      
+
       // Note: This test may need adjustment based on actual template evaluation in SSR
       const result = await renderPageSSR(pageData);
-      
+
       // Template should be evaluated or passed through
       expect(result.html).toBeDefined();
     });
 
-    test("should handle style mappings in component structures", async () => {
+    test('should handle style mappings in component structures', async () => {
       const buttonComponent: ComponentDefinition = {
-        type: "Button",
+        type: 'Button',
         component: {
           interface: {
             variant: {
-              type: "select",
-              default: "primary"
-            }
+              type: 'select',
+              default: 'primary',
+            },
           },
           structure: {
-            type: "node",
-            tag: "button",
+            type: 'node',
+            tag: 'button',
             style: {
               base: {
                 background: {
                   _mapping: true,
-                  prop: "variant",
+                  prop: 'variant',
                   values: {
-                    primary: "blue",
-                    secondary: "gray"
-                  }
-                } as any
-              }
-            }
-          }
-        }
-      };
-      
+                    primary: 'blue',
+                    secondary: 'gray',
+                  },
+                } as any,
+              },
+            },
+          },
+        },
+      };
+
       const pageData: JSONPage = {
         root: {
-          type: "component",
-          component: "Button",
+          type: 'component',
+          component: 'Button',
           props: {
-            variant: "primary"
-          }
-        }
+            variant: 'primary',
+          },
+        },
       };
 
       const globalComponents = {
-        Button: buttonComponent
+        Button: buttonComponent,
       };
 
       const result = await renderPageSSR(pageData, globalComponents);
@@ -784,319 +771,316 @@ describe("SSR Renderer - renderPageSSR", () => {
     });
   });
 
-  describe("Error handling", () => {
-    test("should handle missing root node", async () => {
+  describe('Error handling', () => {
+    test('should handle missing root node', async () => {
       const pageData: JSONPage = {};
 
       // Implementation throws error for missing root
       await expect(renderPageSSR(pageData)).rejects.toThrow('Page data must have a root node');
     });
 
-    test("should handle null root node", async () => {
+    test('should handle null root node', async () => {
       const pageData: JSONPage = {
-        root: null as any
+        root: null as any,
       };
 
       // Implementation throws error for null root
       await expect(renderPageSSR(pageData)).rejects.toThrow('Page data must have a root node');
     });
 
-    test("should handle component with missing structure", async () => {
+    test('should handle component with missing structure', async () => {
       const invalidComponent: ComponentDefinition = {
-        type: "Invalid",
-        component: {} as any
+        type: 'Invalid',
+        component: {} as any,
       };
 
       const pageData: JSONPage = {
         root: {
-          type: "node" as const,
-          tag: "div",
-          children: []
-        }
+          type: 'node' as const,
+          tag: 'div',
+          children: [],
+        },
       };
 
       const globalComponents = {
-        Invalid: invalidComponent
+        Invalid: invalidComponent,
       };
 
       // Should not throw - page has valid root structure even if component is invalid
       const result = await renderPageSSR(pageData, globalComponents);
 
       // The page's root div renders normally since it's valid
-      expect(result.html).toBe("<div></div>");
+      expect(result.html).toBe('<div></div>');
     });
 
-    test("should handle malformed JSON structures gracefully", async () => {
+    test('should handle malformed JSON structures gracefully', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: [
-            null as any,
-            undefined as any
-          ]
-        }
+          type: 'node',
+          tag: 'div',
+          children: [null as any, undefined as any],
+        },
       };
-      
+
       const result = await renderPageSSR(pageData);
-      
+
       // Should skip null/undefined children
       expect(result.html).toBeDefined();
-      expect(result.html).toContain("<div");
+      expect(result.html).toContain('<div');
     });
   });
 
-  describe("Meta information in SSR", () => {
-    test("should extract and return meta information", async () => {
+  describe('Meta information in SSR', () => {
+    test('should extract and return meta information', async () => {
       const pageData: JSONPage = {
         meta: {
-          title: "Test Page",
-          description: "Test description"
+          title: 'Test Page',
+          description: 'Test description',
         },
         root: {
-          type: "node",
-          tag: "div",
-          children: ["Content"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ['Content'],
+        },
       };
-      
+
       const result = await renderPageSSR(pageData);
-      
-      expect(result.title).toBe("Test Page");
-      expect(result.meta).toContain("Test Page");
-      expect(result.meta).toContain("Test description");
+
+      expect(result.title).toBe('Test Page');
+      expect(result.meta).toContain('Test Page');
+      expect(result.meta).toContain('Test description');
     });
 
-    test("should use default title when meta not provided", async () => {
+    test('should use default title when meta not provided', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div"
-        }
+          type: 'node',
+          tag: 'div',
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.title).toBe("UPLO");
+      expect(result.title).toBe('UPLO');
     });
   });
 });
 
-describe("SSR Renderer - Security (XSS Prevention)", () => {
-  describe("Text content sanitization", () => {
-    test("should escape script tags in text content", async () => {
+describe('SSR Renderer - Security (XSS Prevention)', () => {
+  describe('Text content sanitization', () => {
+    test('should escape script tags in text content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["<script>alert('xss')</script>"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ["<script>alert('xss')</script>"],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).toContain("&lt;script&gt;");
-      expect(result.html).not.toContain("<script>alert");
+      expect(result.html).toContain('&lt;script&gt;');
+      expect(result.html).not.toContain('<script>alert');
     });
 
-    test("should escape event handlers in text content", async () => {
+    test('should escape event handlers in text content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ['<img onerror="alert(1)" src="x">']
-        }
+          type: 'node',
+          tag: 'div',
+          children: ['<img onerror="alert(1)" src="x">'],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       expect(result.html).not.toContain('onerror="alert');
-      expect(result.html).toContain("&lt;img");
+      expect(result.html).toContain('&lt;img');
     });
 
-    test("should escape javascript: URLs in text content", async () => {
+    test('should escape javascript: URLs in text content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ['<a href="javascript:alert(1)">click</a>']
-        }
+          type: 'node',
+          tag: 'div',
+          children: ['<a href="javascript:alert(1)">click</a>'],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       expect(result.html).not.toContain('href="javascript:');
-      expect(result.html).toContain("&lt;a");
+      expect(result.html).toContain('&lt;a');
     });
 
-    test("should escape HTML entities in text content", async () => {
+    test('should escape HTML entities in text content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "p",
-          children: ['Test & <special> "quotes" \'apostrophe\'']
-        }
+          type: 'node',
+          tag: 'p',
+          children: ['Test & <special> "quotes" \'apostrophe\''],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).toContain("&amp;");
-      expect(result.html).toContain("&lt;special&gt;");
-      expect(result.html).toContain("&quot;quotes&quot;");
+      expect(result.html).toContain('&amp;');
+      expect(result.html).toContain('&lt;special&gt;');
+      expect(result.html).toContain('&quot;quotes&quot;');
     });
 
-    test("should escape nested malicious content", async () => {
+    test('should escape nested malicious content', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           children: [
             {
-              type: "node",
-              tag: "p",
-              children: ["<script>document.cookie</script>"]
-            }
-          ]
-        }
+              type: 'node',
+              tag: 'p',
+              children: ['<script>document.cookie</script>'],
+            },
+          ],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
-      expect(result.html).not.toContain("<script>document");
-      expect(result.html).toContain("&lt;script&gt;");
+      expect(result.html).not.toContain('<script>document');
+      expect(result.html).toContain('&lt;script&gt;');
     });
   });
 
-  describe("Meta tag sanitization", () => {
-    test("should escape HTML in page title", () => {
+  describe('Meta tag sanitization', () => {
+    test('should escape HTML in page title', () => {
       const meta = {
-        title: "Test <script>alert('xss')</script> Page"
+        title: "Test <script>alert('xss')</script> Page",
       };
 
       const tags = generateMetaTags(meta);
 
-      expect(tags).toContain("<title>Test &lt;script&gt;");
-      expect(tags).not.toContain("<script>alert");
+      expect(tags).toContain('<title>Test &lt;script&gt;');
+      expect(tags).not.toContain('<script>alert');
     });
 
-    test("should escape HTML in meta description", () => {
+    test('should escape HTML in meta description', () => {
       const meta = {
-        description: 'Description with "quotes" and <tags>'
+        description: 'Description with "quotes" and <tags>',
       };
 
       const tags = generateMetaTags(meta);
 
-      expect(tags).toContain("&quot;quotes&quot;");
-      expect(tags).toContain("&lt;tags&gt;");
+      expect(tags).toContain('&quot;quotes&quot;');
+      expect(tags).toContain('&lt;tags&gt;');
     });
 
-    test("should escape HTML in Open Graph tags", () => {
+    test('should escape HTML in Open Graph tags', () => {
       const meta = {
         ogTitle: "<script>alert('og')</script>",
-        ogDescription: "Description <img src=x onerror=alert(1)>"
+        ogDescription: 'Description <img src=x onerror=alert(1)>',
       };
 
       const tags = generateMetaTags(meta);
 
       // Script tags should be escaped
-      expect(tags).not.toContain("<script>alert");
-      expect(tags).toContain("&lt;script&gt;");
+      expect(tags).not.toContain('<script>alert');
+      expect(tags).toContain('&lt;script&gt;');
       // IMG tag should be escaped, preventing onerror from executing
-      expect(tags).not.toContain("<img src=x");
-      expect(tags).toContain("&lt;img");
+      expect(tags).not.toContain('<img src=x');
+      expect(tags).toContain('&lt;img');
     });
   });
 
-  describe("Attribute sanitization", () => {
-    test("should not allow malicious attributes through style", async () => {
+  describe('Attribute sanitization', () => {
+    test('should not allow malicious attributes through style', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           style: {
             base: {
               // Attempting to inject via style properties
-              color: 'red; background-image: url("javascript:alert(1)")'
-            }
-          }
-        }
+              color: 'red; background-image: url("javascript:alert(1)")',
+            },
+          },
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       // Style should be processed safely via utility classes
       expect(result.html).toBeDefined();
-      expect(result.html).toContain("<div");
+      expect(result.html).toContain('<div');
     });
 
-    test("should handle unicode escape sequences safely", async () => {
+    test('should handle unicode escape sequences safely', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["\u003cscript\u003ealert('unicode')\u003c/script\u003e"]
-        }
+          type: 'node',
+          tag: 'div',
+          children: ["\u003cscript\u003ealert('unicode')\u003c/script\u003e"],
+        },
       };
 
       const result = await renderPageSSR(pageData);
 
       // Unicode-encoded script tags should still be escaped
-      expect(result.html).not.toContain("<script>alert");
+      expect(result.html).not.toContain('<script>alert');
     });
   });
 
-  describe("Component prop sanitization", () => {
-    test("should sanitize component props with HTML content", async () => {
+  describe('Component prop sanitization', () => {
+    test('should sanitize component props with HTML content', async () => {
       const cardComponent: ComponentDefinition = {
-        type: "Card",
+        type: 'Card',
         component: {
           interface: {
-            title: { type: "string", default: "" }
+            title: { type: 'string', default: '' },
           },
           structure: {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             children: [
               {
-                type: "node",
-                tag: "h3",
-                children: ["{{title}}"]
-              }
-            ]
-          }
-        }
+                type: 'node',
+                tag: 'h3',
+                children: ['{{title}}'],
+              },
+            ],
+          },
+        },
       };
 
       const pageData: JSONPage = {
         root: {
-          type: "component",
-          component: "Card",
+          type: 'component',
+          component: 'Card',
           props: {
-            title: "<script>alert('props')</script>"
-          }
-        }
+            title: "<script>alert('props')</script>",
+          },
+        },
       };
 
       const globalComponents = {
-        Card: cardComponent
+        Card: cardComponent,
       };
 
       const result = await renderPageSSR(pageData, globalComponents);
 
       // Script tags should be escaped when rendering
-      expect(result.html).not.toContain("<script>alert");
+      expect(result.html).not.toContain('<script>alert');
     });
   });
 
-  describe("Image sanitization", () => {
-    test("should escape src attribute in image nodes", async () => {
+  describe('Image sanitization', () => {
+    test('should escape src attribute in image nodes', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "image",
-          tag: "img",
+          type: 'image',
+          tag: 'img',
           src: 'javascript:alert("img")',
-          alt: "test"
-        } as any
+          alt: 'test',
+        } as any,
       };
 
       const result = await renderPageSSR(pageData);
@@ -1105,14 +1089,14 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
       expect(result.html).toBeDefined();
     });
 
-    test("should escape alt attribute in image nodes", async () => {
+    test('should escape alt attribute in image nodes', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "image",
-          tag: "img",
-          src: "/test.jpg",
-          alt: '"><script>alert("alt")</script><img x="'
-        } as any
+          type: 'image',
+          tag: 'img',
+          src: '/test.jpg',
+          alt: '"><script>alert("alt")</script><img x="',
+        } as any,
       };
 
       const result = await renderPageSSR(pageData);
@@ -1122,35 +1106,34 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
     });
   });
 
-  describe("Image LCP optimization", () => {
-    test("should render fetchpriority attribute", async () => {
+  describe('Image LCP optimization', () => {
+    test('should render fetchpriority attribute', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "img",
+          type: 'node',
+          tag: 'img',
           attributes: {
-            src: "/test.jpg",
-            alt: "test",
-            fetchpriority: "high"
-          }
-        } as any
+            src: '/test.jpg',
+            alt: 'test',
+            fetchpriority: 'high',
+          },
+        } as any,
       };
 
       const result = await renderPageSSR(pageData);
 
       expect(result.html).toContain('fetchpriority="high"');
     });
-
   });
 
-  describe("Embed content sanitization", () => {
-    test("should sanitize embed HTML with DOMPurify", async () => {
+  describe('Embed content sanitization', () => {
+    test('should sanitize embed HTML with DOMPurify', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "embed",
-          tag: "div",
-          html: '<div onclick="alert(1)"><script>alert(2)</script><p>safe</p></div>'
-        } as any
+          type: 'embed',
+          tag: 'div',
+          html: '<div onclick="alert(1)"><script>alert(2)</script><p>safe</p></div>',
+        } as any,
       };
 
       const result = await renderPageSSR(pageData);
@@ -1160,105 +1143,105 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
       // script tags should be stripped
       expect(result.html).not.toContain('<script>alert');
       // Safe content should remain
-      expect(result.html).toContain("safe");
+      expect(result.html).toContain('safe');
     });
 
-    test("should allow safe SVG in embeds", async () => {
+    test('should allow safe SVG in embeds', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "embed",
-          tag: "div",
-          html: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="red"/></svg>'
-        } as any
+          type: 'embed',
+          tag: 'div',
+          html: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="red"/></svg>',
+        } as any,
       };
 
       const result = await renderPageSSR(pageData);
 
       // Safe SVG should be preserved
-      expect(result.html).toContain("<svg");
-      expect(result.html).toContain("<circle");
+      expect(result.html).toContain('<svg');
+      expect(result.html).toContain('<circle');
     });
   });
 });
 
-describe("SSR Renderer - generateSSRHTML", () => {
-  test("should generate complete HTML document", async () => {
+describe('SSR Renderer - generateSSRHTML', () => {
+  test('should generate complete HTML document', async () => {
     const pageData: JSONPage = {
       meta: {
-        title: "Test Page"
+        title: 'Test Page',
       },
       root: {
-              type: "node",
-              tag: "div",
-        children: ["Hello World"]
-      }
+        type: 'node',
+        tag: 'div',
+        children: ['Hello World'],
+      },
     };
-    
-    const html = await generateSSRHTML(pageData, {}, "/", "");
-    
-    expect(html).toContain("<!DOCTYPE html>");
-    expect(html).toContain("<html");
-    expect(html).toContain("<head");
-    expect(html).toContain("<body");
+
+    const html = await generateSSRHTML(pageData, {}, '/', '');
+
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<html');
+    expect(html).toContain('<head');
+    expect(html).toContain('<body');
     expect(html).toContain('<div id="root">');
-    expect(html).toContain("Hello World");
-    expect(html).toContain("Test Page");
+    expect(html).toContain('Hello World');
+    expect(html).toContain('Test Page');
   });
 
-  test("should include CSS in style tag", async () => {
+  test('should include CSS in style tag', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "node",
-        tag: "div",
+        type: 'node',
+        tag: 'div',
         style: {
           base: {
-            color: "red"
-          }
-        }
-      }
+            color: 'red',
+          },
+        },
+      },
     };
 
     const html = await generateSSRHTML(pageData);
 
     // HTML should be generated with styles (either inline or in style tag)
-    expect(html).toContain("<div");
+    expect(html).toContain('<div');
     expect(html).toBeDefined();
   });
 
-  test("should include client script", async () => {
+  test('should include client script', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "node",
-        tag: "div"
-      }
+        type: 'node',
+        tag: 'div',
+      },
     };
 
-    const html = await generateSSRHTML(pageData, {}, "/", "", false);
+    const html = await generateSSRHTML(pageData, {}, '/', '', false);
 
     expect(html).toContain('src="/client-router.tsx"');
   });
 
-  test("should use built bundle when specified", async () => {
+  test('should use built bundle when specified', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "node",
-        tag: "div"
-      }
+        type: 'node',
+        tag: 'div',
+      },
     };
 
-    const html = await generateSSRHTML(pageData, {}, "/", "", true);
+    const html = await generateSSRHTML(pageData, {}, '/', '', true);
 
     // When useBuiltBundle is true, implementation generates static HTML without client script
     expect(html).toBeDefined();
-    expect(html).toContain("<div");
+    expect(html).toContain('<div');
   });
 
-  test("should include viewport meta tag", async () => {
+  test('should include viewport meta tag', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "node",
-        tag: "div"
-      }
+        type: 'node',
+        tag: 'div',
+      },
     };
 
     const html = await generateSSRHTML(pageData);
@@ -1268,30 +1251,38 @@ describe("SSR Renderer - generateSSRHTML", () => {
   });
 });
 
-describe("SSR Renderer - CMSList rendering", () => {
+describe('SSR Renderer - CMSList rendering', () => {
   // Mock CMS items for testing
   const mockCmsItems: CMSItem[] = [
     { _id: '1', slug: 'post-1', title: 'First Post', category: 'Tech' },
     { _id: '2', slug: 'post-2', title: 'Second Post', category: 'Design' },
   ];
 
-  test("should render children for each CMS item", async () => {
+  test('should render children for each CMS item', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         limit: 2,
-        children: [
-          { type: "node", tag: "h2", children: ["{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        children: [{ type: 'node', tag: 'h2', children: ['{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     // Create a mock CMS service
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('<h2');
     expect(result.html).toContain('First Post');
@@ -1299,81 +1290,109 @@ describe("SSR Renderer - CMSList rendering", () => {
     expect(result.html).toContain('</h2>');
   });
 
-  test("should provide item context variables (itemIndex)", async () => {
+  test('should provide item context variables (itemIndex)', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
-        children: [
-          { type: "node", tag: "span", children: ["{{itemIndex}}-{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'blog-posts',
+        children: [{ type: 'node', tag: 'span', children: ['{{itemIndex}}-{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('0-First Post');
     expect(result.html).toContain('1-Second Post');
   });
 
-  test("should provide itemFirst and itemLast flags", async () => {
+  test('should provide itemFirst and itemLast flags', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         children: [
           {
-            type: "node",
-            tag: "div",
+            type: 'node',
+            tag: 'div',
             attributes: { 'data-first': '{{itemFirst}}', 'data-last': '{{itemLast}}' },
-            children: ["{{item.title}}"]
-          }
-        ]
-      } as unknown as ComponentNode
+            children: ['{{item.title}}'],
+          },
+        ],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('data-first="true"');
     expect(result.html).toContain('data-last="true"');
   });
 
-  test("should render empty when no items match", async () => {
+  test('should render empty when no items match', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         filter: { category: 'NonExistent' },
-        children: [{ type: "node", tag: "div", children: ["{{item.title}}"] }]
-      } as unknown as ComponentNode
+        children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => [];
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     // Should not contain item content since no items match
     expect(result.html).not.toContain('First Post');
     expect(result.html).not.toContain('Second Post');
   });
 
-  test("should warn when CMS service is not available", async () => {
+  test('should warn when CMS service is not available', async () => {
     const consoleSpy = spyOn(console, 'warn').mockImplementation(() => {});
 
     const pageData: JSONPage = {
       root: {
-        type: "list",
-        sourceType: "collection",
-        source: "blog-posts",
-        children: []
-      } as unknown as ComponentNode
+        type: 'list',
+        sourceType: 'collection',
+        source: 'blog-posts',
+        children: [],
+      } as unknown as ComponentNode,
     };
 
     // No CMS service provided
@@ -1385,15 +1404,13 @@ describe("SSR Renderer - CMSList rendering", () => {
     consoleSpy.mockRestore();
   });
 
-  test("should pass through parent context to children", async () => {
+  test('should pass through parent context to children', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
-        children: [
-          { type: "node", tag: "span", children: ["{{cms.siteTitle}}-{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'blog-posts',
+        children: [{ type: 'node', tag: 'span', children: ['{{cms.siteTitle}}-{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
@@ -1402,34 +1419,54 @@ describe("SSR Renderer - CMSList rendering", () => {
     // Pass CMS context with parent variables
     const cmsContext = { cms: { siteTitle: 'MySite' } };
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      cmsContext,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('MySite-First Post');
     expect(result.html).toContain('MySite-Second Post');
   });
 
-  test("should support nested HTML structures in children", async () => {
+  test('should support nested HTML structures in children', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         children: [
           {
-            type: "node",
-            tag: "article",
+            type: 'node',
+            tag: 'article',
             children: [
-              { type: "node", tag: "h2", children: ["{{item.title}}"] },
-              { type: "node", tag: "p", children: ["Category: {{item.category}}"] }
-            ]
-          }
-        ]
-      } as unknown as ComponentNode
+              { type: 'node', tag: 'h2', children: ['{{item.title}}'] },
+              { type: 'node', tag: 'p', children: ['Category: {{item.category}}'] },
+            ],
+          },
+        ],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('<article');
     expect(result.html).toContain('<h2');
@@ -1439,11 +1476,15 @@ describe("SSR Renderer - CMSList rendering", () => {
     expect(result.html).toContain('</article>');
   });
 
-  test("should render CMS list with styles as utility classes", async () => {
+  test('should render CMS list as a pure repeater (no container) even when style is present', async () => {
+    // Current behavior: list nodes are pure repeaters — they emit only their
+    // per-item children with no wrapper element, so node-level style produces
+    // no utility classes (style a parent node instead). Previously the list
+    // rendered a styled <div data-cms-list> container.
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         style: {
           base: {
             display: 'flex',
@@ -1451,76 +1492,105 @@ describe("SSR Renderer - CMSList rendering", () => {
             gap: '24px',
           },
         },
-        children: [
-          { type: "node", tag: "div", children: ["{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
-
-    // Should wrap in div with utility classes (f=flex, fd-col=column, g-24px=gap)
-    expect(result.html).toContain('class="');
-    expect(result.html).toContain('f');
-    expect(result.html).toContain('fd-col');
-    expect(result.html).toContain('g-24px');
-    // Should have data attributes
-    expect(result.html).toContain('data-cms-list="true"');
-    expect(result.html).toContain('data-collection="blog-posts"');
-  });
-
-  test("should render CMS list with attributes", async () => {
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
+
+    // Only the repeated children are emitted — once per item, in order
+    expect(result.html).toContain('<div>First Post</div>');
+    expect(result.html).toContain('<div>Second Post</div>');
+    // No container element means no class attribute and no list data attributes
+    expect(result.html).not.toContain('class="');
+    expect(result.html).not.toContain('data-cms-list="true"');
+    expect(result.html).not.toContain('data-collection="blog-posts"');
+  });
+
+  test('should render CMS list as a pure repeater (no container) even when attributes are present', async () => {
+    // Current behavior: list nodes are pure repeaters with no wrapper element,
+    // so node-level attributes are not rendered (set them on a parent node
+    // instead). Previously the list rendered a <div data-cms-list> container
+    // carrying these attributes.
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         attributes: {
           id: 'blog-list',
           'data-testid': 'cms-blog',
         },
-        children: [
-          { type: "node", tag: "div", children: ["{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
-
-    // Should have custom attributes
-    expect(result.html).toContain('id="blog-list"');
-    expect(result.html).toContain('data-testid="cms-blog"');
-    // Should have data attributes
-    expect(result.html).toContain('data-cms-list="true"');
-    expect(result.html).toContain('data-collection="blog-posts"');
-  });
-
-  test("should process item templates in link href", async () => {
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
+
+    // Only the repeated children are emitted — once per item, in order
+    expect(result.html).toContain('<div>First Post</div>');
+    expect(result.html).toContain('<div>Second Post</div>');
+    // No container element means no custom attributes and no list data attributes
+    expect(result.html).not.toContain('id="blog-list"');
+    expect(result.html).not.toContain('data-testid="cms-blog"');
+    expect(result.html).not.toContain('data-cms-list="true"');
+    expect(result.html).not.toContain('data-collection="blog-posts"');
+  });
+
+  test('should process item templates in link href', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         children: [
           {
-            type: "link",
-            href: "/blog/{{item.slug}}",
-            children: [
-              { type: "node", tag: "span", children: ["{{item.title}}"] }
-            ]
-          }
-        ]
-      } as unknown as ComponentNode
+            type: 'link',
+            href: '/blog/{{item.slug}}',
+            children: [{ type: 'node', tag: 'span', children: ['{{item.title}}'] }],
+          },
+        ],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     // Should render link as <a> with processed href
     expect(result.html).toContain('href="/blog/post-1"');
@@ -1529,26 +1599,36 @@ describe("SSR Renderer - CMSList rendering", () => {
     expect(result.html).toContain('Second Post');
   });
 
-  test("should process item templates in anchor tag attributes", async () => {
+  test('should process item templates in anchor tag attributes', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "blog-posts",
+        type: 'cms-list',
+        collection: 'blog-posts',
         children: [
           {
-            type: "node",
-            tag: "a",
-            attributes: { href: "/blog/{{item.slug}}" },
-            children: ["{{item.title}}"]
-          }
-        ]
-      } as unknown as ComponentNode
+            type: 'node',
+            tag: 'a',
+            attributes: { href: '/blog/{{item.slug}}' },
+            children: ['{{item.title}}'],
+          },
+        ],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
     mockCmsService.queryItems = async () => mockCmsItems;
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, undefined, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      mockCmsService,
+    );
 
     // Should render anchor with processed href from attributes
     expect(result.html).toContain('href="/blog/post-1"');
@@ -1557,7 +1637,7 @@ describe("SSR Renderer - CMSList rendering", () => {
     expect(result.html).toContain('Second Post');
   });
 
-  test("should resolve items from cms context using {{cms.field}} template", async () => {
+  test('should resolve items from cms context using {{cms.field}} template', async () => {
     // This tests nested cms-list in CMS template pages where items
     // come from a reference field like {{cms.category}}
     const mockCategories: CMSItem[] = [
@@ -1567,104 +1647,122 @@ describe("SSR Renderer - CMSList rendering", () => {
 
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "categories",
-        items: "{{cms.categoryIds}}",  // Reference field from CMS context
-        itemAs: "category",
-        children: [
-          { type: "node", tag: "span", children: ["{{category.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'categories',
+        items: '{{cms.categoryIds}}', // Reference field from CMS context
+        itemAs: 'category',
+        children: [{ type: 'node', tag: 'span', children: ['{{category.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
-    mockCmsService.getItemsByIds = async (collection: string, ids: string[]) => {
+    mockCmsService.getItemsByIds = async (_collection: string, ids: string[]) => {
       // Return matching categories
-      return mockCategories.filter(c => ids.includes(c._id));
+      return mockCategories.filter((c) => ids.includes(c._id));
     };
 
     // CMS context has reference field with category IDs
     const cmsContext = { cms: { categoryIds: ['cat-1', 'cat-2'] } };
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      cmsContext,
+      mockCmsService,
+    );
 
     // Should render categories from resolved reference field
     expect(result.html).toContain('Technology');
     expect(result.html).toContain('Design');
   });
 
-  test("should resolve single item from cms context using {{cms.field}} template", async () => {
+  test('should resolve single item from cms context using {{cms.field}} template', async () => {
     // Test single reference (not array)
-    const mockCategories: CMSItem[] = [
-      { _id: 'cat-1', slug: 'tech', title: 'Technology' },
-    ];
+    const mockCategories: CMSItem[] = [{ _id: 'cat-1', slug: 'tech', title: 'Technology' }];
 
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "categories",
-        items: "{{cms.category}}",  // Single reference field
-        itemAs: "category",
-        children: [
-          { type: "node", tag: "span", children: ["{{category.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'categories',
+        items: '{{cms.category}}', // Single reference field
+        itemAs: 'category',
+        children: [{ type: 'node', tag: 'span', children: ['{{category.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
-    mockCmsService.getItemsByIds = async (collection: string, ids: string[]) => {
-      return mockCategories.filter(c => ids.includes(c._id));
+    mockCmsService.getItemsByIds = async (_collection: string, ids: string[]) => {
+      return mockCategories.filter((c) => ids.includes(c._id));
     };
 
     // CMS context has single reference (string, not array)
     const cmsContext = { cms: { category: 'cat-1' } };
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      cmsContext,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('Technology');
   });
 
-  test("should resolve nested cms field path using {{cms.nested.field}} template", async () => {
+  test('should resolve nested cms field path using {{cms.nested.field}} template', async () => {
     // Test nested path resolution like {{cms.author.categories}}
-    const mockCategories: CMSItem[] = [
-      { _id: 'cat-1', slug: 'tech', title: 'Technology' },
-    ];
+    const mockCategories: CMSItem[] = [{ _id: 'cat-1', slug: 'tech', title: 'Technology' }];
 
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "categories",
-        items: "{{cms.author.categories}}",
-        itemAs: "category",
-        children: [
-          { type: "node", tag: "span", children: ["{{category.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'categories',
+        items: '{{cms.author.categories}}',
+        itemAs: 'category',
+        children: [{ type: 'node', tag: 'span', children: ['{{category.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
-    mockCmsService.getItemsByIds = async (collection: string, ids: string[]) => {
-      return mockCategories.filter(c => ids.includes(c._id));
+    mockCmsService.getItemsByIds = async (_collection: string, ids: string[]) => {
+      return mockCategories.filter((c) => ids.includes(c._id));
     };
 
     // CMS context has nested structure
     const cmsContext = { cms: { author: { categories: ['cat-1'] } } };
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      cmsContext,
+      mockCmsService,
+    );
 
     expect(result.html).toContain('Technology');
   });
 
-  test("should return empty when cms field is missing", async () => {
+  test('should return empty when cms field is missing', async () => {
     const pageData: JSONPage = {
       root: {
-        type: "cms-list",
-        collection: "categories",
-        items: "{{cms.nonexistent}}",
-        children: [
-          { type: "node", tag: "span", children: ["{{item.title}}"] }
-        ]
-      } as unknown as ComponentNode
+        type: 'cms-list',
+        collection: 'categories',
+        items: '{{cms.nonexistent}}',
+        children: [{ type: 'node', tag: 'span', children: ['{{item.title}}'] }],
+      } as unknown as ComponentNode,
     };
 
     const mockCmsService = new CMSService();
@@ -1673,80 +1771,84 @@ describe("SSR Renderer - CMSList rendering", () => {
     // CMS context without the referenced field
     const cmsContext = { cms: { title: 'Page Title' } };
 
-    const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext, mockCmsService);
+    const result = await renderPageSSR(
+      pageData,
+      {},
+      '/',
+      '',
+      undefined,
+      undefined,
+      undefined,
+      cmsContext,
+      mockCmsService,
+    );
 
     // Should return empty (no items to render)
     expect(result.html).toBe('');
   });
 });
 
-describe("SSR Renderer - Interactive Styles", () => {
+describe('SSR Renderer - Interactive Styles', () => {
   /**
    * Tests for interactive styles (hover, active, etc.) in SSR rendering.
    * Verifies that element classes are generated correctly for both
    * page elements and component elements.
    */
 
-  describe("Page element interactive styles", () => {
-    test("should add element class for interactive styles", async () => {
+  describe('Page element interactive styles', () => {
+    test('should add element class for interactive styles', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "button",
-          label: "submit-btn",
-          interactiveStyles: [
-            { postfix: ":hover", style: { backgroundColor: "primary" } },
-          ],
-          children: ["Submit"],
+          type: 'node',
+          tag: 'button',
+          label: 'submit-btn',
+          interactiveStyles: [{ postfix: ':hover', style: { backgroundColor: 'primary' } }],
+          children: ['Submit'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/contact", "");
+      const result = await renderPageSSR(pageData, {}, '/contact', '');
 
       // Should have element class in HTML
-      expect(result.html).toContain("class=");
+      expect(result.html).toContain('class=');
       // Page elements should have p_ prefix
-      expect(result.html).toContain("p_contact_submit-btn");
+      expect(result.html).toContain('p_contact_submit-btn');
     });
 
-    test("should generate interactive CSS for page elements", async () => {
+    test('should generate interactive CSS for page elements', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          label: "card",
-          interactiveStyles: [
-            { postfix: ":hover", style: { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" } },
-          ],
-          children: ["Card content"],
+          type: 'node',
+          tag: 'div',
+          label: 'card',
+          interactiveStyles: [{ postfix: ':hover', style: { boxShadow: '0 4px 12px rgba(0,0,0,0.1)' } }],
+          children: ['Card content'],
         },
       };
 
-      const result = await generateSSRHTML(pageData, {}, "/about");
+      const result = await generateSSRHTML(pageData, {}, '/about');
 
       // Generated CSS should include interactive styles
       // generateSSRHTML returns the full HTML string directly
-      expect(result).toContain("p_about_card");
+      expect(result).toContain('p_about_card');
     });
 
-    test("should generate correct class for nested page elements", async () => {
+    test('should generate correct class for nested page elements', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           children: [
             {
-              type: "node",
-              tag: "div",
+              type: 'node',
+              tag: 'div',
               children: [
                 {
-                  type: "node",
-                  tag: "button",
-                  label: "nested-btn",
-                  interactiveStyles: [
-                    { postfix: ":hover", style: { opacity: "0.9" } },
-                  ],
-                  children: ["Click"],
+                  type: 'node',
+                  tag: 'button',
+                  label: 'nested-btn',
+                  interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.9' } }],
+                  children: ['Click'],
                 },
               ],
             },
@@ -1754,295 +1856,291 @@ describe("SSR Renderer - Interactive Styles", () => {
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/services", "");
+      const result = await renderPageSSR(pageData, {}, '/services', '');
 
       // Nested element should have correct page class
-      expect(result.html).toContain("p_services_nested-btn");
+      expect(result.html).toContain('p_services_nested-btn');
     });
 
-    test("should handle multiple interactive states", async () => {
+    test('should handle multiple interactive states', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "a",
-          label: "nav-link",
+          type: 'node',
+          tag: 'a',
+          label: 'nav-link',
           interactiveStyles: [
-            { postfix: ":hover", style: { color: "primary" } },
-            { postfix: ":active", style: { color: "primary-dark" } },
-            { postfix: ":focus", style: { outline: "2px solid var(--primary)" } },
+            { postfix: ':hover', style: { color: 'primary' } },
+            { postfix: ':active', style: { color: 'primary-dark' } },
+            { postfix: ':focus', style: { outline: '2px solid var(--primary)' } },
           ],
-          children: ["Link"],
+          children: ['Link'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
       // Should have single class for all states
-      expect(result.html).toContain("p_index_nav-link");
+      expect(result.html).toContain('p_index_nav-link');
     });
   });
 
-  describe("Responsive interactive styles", () => {
-    test("should handle responsive hover styles", async () => {
+  describe('Responsive interactive styles', () => {
+    test('should handle responsive hover styles', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          label: "responsive-card",
+          type: 'node',
+          tag: 'div',
+          label: 'responsive-card',
           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 content"],
+          children: ['Responsive content'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/test", "");
+      const result = await renderPageSSR(pageData, {}, '/test', '');
 
       // Should have element class
-      expect(result.html).toContain("p_test_responsive-card");
+      expect(result.html).toContain('p_test_responsive-card');
     });
   });
 
-  describe("Interactive styles with generateElementClass flag", () => {
-    test("should add element class when generateElementClass is true", async () => {
+  describe('Interactive styles with generateElementClass flag', () => {
+    test('should add element class when generateElementClass is true', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          label: "target-element",
+          type: 'node',
+          tag: 'div',
+          label: 'target-element',
           generateElementClass: true,
-          children: ["Has class flag"],
+          children: ['Has class flag'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/page", "");
+      const result = await renderPageSSR(pageData, {}, '/page', '');
 
       // Should have element class even without interactive styles
-      expect(result.html).toContain("p_page_target-element");
+      expect(result.html).toContain('p_page_target-element');
     });
   });
 
-  describe("Edge cases", () => {
-    test("should not add element class when no interactive styles or flag", async () => {
+  describe('Edge cases', () => {
+    test('should not add element class when no interactive styles or flag', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["Plain element"],
+          type: 'node',
+          tag: 'div',
+          children: ['Plain element'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/plain", "");
+      const result = await renderPageSSR(pageData, {}, '/plain', '');
 
       // Should not have p_ prefixed class
-      expect(result.html).not.toContain("p_plain_");
+      expect(result.html).not.toContain('p_plain_');
     });
 
-    test("should handle empty interactive styles array", async () => {
+    test('should handle empty interactive styles array', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           interactiveStyles: [],
-          children: ["Empty styles"],
+          children: ['Empty styles'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/empty", "");
+      const result = await renderPageSSR(pageData, {}, '/empty', '');
 
       // Empty array should not add class
-      expect(result.html).not.toContain("p_empty_");
+      expect(result.html).not.toContain('p_empty_');
     });
 
-    test("should handle index page path", async () => {
+    test('should handle index page path', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "button",
-          label: "hero-cta",
-          interactiveStyles: [
-            { postfix: ":hover", style: { backgroundColor: "primary" } },
-          ],
-          children: ["Get Started"],
+          type: 'node',
+          tag: 'button',
+          label: 'hero-cta',
+          interactiveStyles: [{ postfix: ':hover', style: { backgroundColor: 'primary' } }],
+          children: ['Get Started'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
       // Root path "/" should use "index" as file name
-      expect(result.html).toContain("p_index_hero-cta");
+      expect(result.html).toContain('p_index_hero-cta');
     });
 
-    test("should handle nested page paths", async () => {
+    test('should handle nested page paths', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          label: "blog-card",
-          interactiveStyles: [
-            { postfix: ":hover", style: { transform: "translateY(-2px)" } },
-          ],
-          children: ["Blog post"],
+          type: 'node',
+          tag: 'div',
+          label: 'blog-card',
+          interactiveStyles: [{ postfix: ':hover', style: { transform: 'translateY(-2px)' } }],
+          children: ['Blog post'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/blog/posts", "");
+      const result = await renderPageSSR(pageData, {}, '/blog/posts', '');
 
       // Nested path should be sanitized (slashes become underscores)
-      expect(result.html).toContain("p_blog_posts_blog-card");
+      expect(result.html).toContain('p_blog_posts_blog-card');
     });
   });
 
-  describe("SSR Renderer - Conditional Rendering (if property)", () => {
-    test("should render node when if is true", async () => {
+  describe('SSR Renderer - Conditional Rendering (if property)', () => {
+    test('should render node when if is true', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           if: true,
-          children: ["Visible content"],
+          children: ['Visible content'],
         } as any,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).toContain("Visible content");
+      expect(result.html).toContain('Visible content');
     });
 
-    test("should skip node when if is false", async () => {
+    test('should skip node when if is false', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           if: false,
-          children: ["Hidden content"],
+          children: ['Hidden content'],
         } as any,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).not.toContain("Hidden content");
-      expect(result.html).toBe("");
+      expect(result.html).not.toContain('Hidden content');
+      expect(result.html).toBe('');
     });
 
-    test("should render node when if property is absent", async () => {
+    test('should render node when if property is absent', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
-          children: ["Default visible"],
+          type: 'node',
+          tag: 'div',
+          children: ['Default visible'],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).toContain("Default visible");
+      expect(result.html).toContain('Default visible');
     });
 
-    test("should skip children when parent if is false", async () => {
+    test('should skip children when parent if is false', async () => {
       const pageData: JSONPage = {
         root: {
-          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,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).not.toContain("Child 1");
-      expect(result.html).not.toContain("Child 2");
+      expect(result.html).not.toContain('Child 1');
+      expect(result.html).not.toContain('Child 2');
     });
 
-    test("should handle if with embed nodes", async () => {
+    test('should handle if with embed nodes', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "embed",
-          html: "<svg></svg>",
+          type: 'embed',
+          html: '<svg></svg>',
           if: false,
         } as any,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).not.toContain("<svg>");
+      expect(result.html).not.toContain('<svg>');
     });
 
-    test("should handle if with link nodes", async () => {
+    test('should handle if with link nodes', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "link",
-          href: "/page",
+          type: 'link',
+          href: '/page',
           if: false,
-          children: ["Hidden link"],
+          children: ['Hidden link'],
         } as any,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).not.toContain("Hidden link");
+      expect(result.html).not.toContain('Hidden link');
     });
 
-    test("should handle if with locale-list nodes", async () => {
+    test('should handle if with locale-list nodes', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "locale-list",
+          type: 'locale-list',
           if: false,
         } as any,
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).not.toContain("locale-list");
+      expect(result.html).not.toContain('locale-list');
     });
 
-    test("should render conditional child nodes independently", async () => {
+    test('should render conditional child nodes independently', async () => {
       const pageData: JSONPage = {
         root: {
-          type: "node",
-          tag: "div",
+          type: 'node',
+          tag: 'div',
           children: [
-            { type: "node", tag: "span", if: true, children: ["Visible"] } as any,
-            { type: "node", tag: "span", if: false, children: ["Hidden"] } as any,
-            { type: "node", tag: "span", children: ["Always visible"] },
+            { type: 'node', tag: 'span', if: true, children: ['Visible'] } as any,
+            { type: 'node', tag: 'span', if: false, children: ['Hidden'] } as any,
+            { type: 'node', tag: 'span', children: ['Always visible'] },
           ],
         },
       };
 
-      const result = await renderPageSSR(pageData, {}, "/", "");
+      const result = await renderPageSSR(pageData, {}, '/', '');
 
-      expect(result.html).toContain("Visible");
-      expect(result.html).not.toContain("Hidden");
-      expect(result.html).toContain("Always visible");
+      expect(result.html).toContain('Visible');
+      expect(result.html).not.toContain('Hidden');
+      expect(result.html).toContain('Always visible');
     });
 
-    test("should handle if mapping with component props in SSR", async () => {
+    test('should handle if mapping with component props in SSR', async () => {
       const components: Record<string, ComponentDefinition> = {
         ConditionalBanner: {
           component: {
             interface: {
-              showBanner: { type: "boolean", default: false },
+              showBanner: { type: 'boolean', default: false },
             },
             structure: {
-              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: ["Banner content"],
+              children: ['Banner content'],
             } as any,
           },
         },
@@ -2051,32 +2149,32 @@ describe("SSR Renderer - Interactive Styles", () => {
       // Test with showBanner: true
       const pageDataVisible: JSONPage = {
         root: {
-          type: "component",
-          component: "ConditionalBanner",
+          type: 'component',
+          component: 'ConditionalBanner',
           props: { showBanner: true },
         } as any,
       };
 
-      const resultVisible = await renderPageSSR(pageDataVisible, components, "/", "");
-      expect(resultVisible.html).toContain("Banner content");
+      const resultVisible = await renderPageSSR(pageDataVisible, components, '/', '');
+      expect(resultVisible.html).toContain('Banner content');
 
       // Test with showBanner: false
       const pageDataHidden: JSONPage = {
         root: {
-          type: "component",
-          component: "ConditionalBanner",
+          type: 'component',
+          component: 'ConditionalBanner',
           props: { showBanner: false },
         } as any,
       };
 
-      const resultHidden = await renderPageSSR(pageDataHidden, components, "/", "");
-      expect(resultHidden.html).not.toContain("Banner content");
+      const resultHidden = await renderPageSSR(pageDataHidden, components, '/', '');
+      expect(resultHidden.html).not.toContain('Banner content');
     });
   });
 });
 
-describe("SSR Renderer - List node rendering", () => {
-  test("should render children for each item in list prop", async () => {
+describe('SSR Renderer - List node rendering', () => {
+  test('should render children for each item in list prop', async () => {
     // Component with list prop definition
     const components: Record<string, ComponentDefinition> = {
       ItemsList: {
@@ -2085,34 +2183,28 @@ describe("SSR Renderer - List node rendering", () => {
             items: {
               type: 'list',
               itemSchema: {
-                title: { type: 'string' }
+                title: { type: 'string' },
               },
-              default: []
-            }
+              default: [],
+            },
           },
           structure: {
-            type: "list",
-            source: "items",
-            children: [
-              { type: "node", tag: "div", children: ["{{item.title}}"] }
-            ]
-          } as any
-        }
-      }
+            type: 'list',
+            source: 'items',
+            children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
+          } as any,
+        },
+      },
     };
 
     const pageData: JSONPage = {
       root: {
-        type: "component",
-        component: "ItemsList",
+        type: 'component',
+        component: 'ItemsList',
         props: {
-          items: [
-            { title: "First Item" },
-            { title: "Second Item" },
-            { title: "Third Item" }
-          ]
-        }
-      } as any
+          items: [{ title: 'First Item' }, { title: 'Second Item' }, { title: 'Third Item' }],
+        },
+      } as any,
     };
 
     const result = await renderPageSSR(pageData, components, '/', '');
@@ -2122,7 +2214,7 @@ describe("SSR Renderer - List node rendering", () => {
     expect(result.html).toContain('Third Item');
   });
 
-  test("should provide item context variables (itemIndex, itemFirst, itemLast)", async () => {
+  test('should provide item context variables (itemIndex, itemFirst, itemLast)', async () => {
     const components: Record<string, ComponentDefinition> = {
       TagsList: {
         component: {
@@ -2130,34 +2222,36 @@ describe("SSR Renderer - List node rendering", () => {
             tags: {
               type: 'list',
               itemSchema: {
-                name: { type: 'string' }
+                name: { type: 'string' },
               },
-              default: []
-            }
+              default: [],
+            },
           },
           structure: {
-            type: "list",
-            source: "tags",
-            itemAs: "tag",
+            type: 'list',
+            source: 'tags',
+            itemAs: 'tag',
             children: [
-              { type: "node", tag: "span", attributes: { 'data-index': '{{tagIndex}}', 'data-first': '{{tagFirst}}', 'data-last': '{{tagLast}}' }, children: ["{{tag.name}}"] }
-            ]
-          } as any
-        }
-      }
+              {
+                type: 'node',
+                tag: 'span',
+                attributes: { 'data-index': '{{tagIndex}}', 'data-first': '{{tagFirst}}', 'data-last': '{{tagLast}}' },
+                children: ['{{tag.name}}'],
+              },
+            ],
+          } as any,
+        },
+      },
     };
 
     const pageData: JSONPage = {
       root: {
-        type: "component",
-        component: "TagsList",
+        type: 'component',
+        component: 'TagsList',
         props: {
-          tags: [
-            { name: "Tag1" },
-            { name: "Tag2" }
-          ]
-        }
-      } as any
+          tags: [{ name: 'Tag1' }, { name: 'Tag2' }],
+        },
+      } as any,
     };
 
     const result = await renderPageSSR(pageData, components, '/', '');
@@ -2170,7 +2264,7 @@ describe("SSR Renderer - List node rendering", () => {
     expect(result.html).toContain('Tag2');
   });
 
-  test("should render empty when list prop is empty", async () => {
+  test('should render empty when list prop is empty', async () => {
     const components: Record<string, ComponentDefinition> = {
       EmptyList: {
         component: {
@@ -2178,30 +2272,28 @@ describe("SSR Renderer - List node rendering", () => {
             items: {
               type: 'list',
               itemSchema: {
-                title: { type: 'string' }
+                title: { type: 'string' },
               },
-              default: []
-            }
+              default: [],
+            },
           },
           structure: {
-            type: "list",
-            source: "items",
-            children: [
-              { type: "node", tag: "div", children: ["{{item.title}}"] }
-            ]
-          } as any
-        }
-      }
+            type: 'list',
+            source: 'items',
+            children: [{ type: 'node', tag: 'div', children: ['{{item.title}}'] }],
+          } as any,
+        },
+      },
     };
 
     const pageData: JSONPage = {
       root: {
-        type: "component",
-        component: "EmptyList",
+        type: 'component',
+        component: 'EmptyList',
         props: {
-          items: []
-        }
-      } as any
+          items: [],
+        },
+      } as any,
     };
 
     const result = await renderPageSSR(pageData, components, '/', '');
@@ -2210,7 +2302,7 @@ describe("SSR Renderer - List node rendering", () => {
     expect(result.html).not.toContain('item.');
   });
 
-  test("should support nested lists", async () => {
+  test('should support nested lists', async () => {
     const components: Record<string, ComponentDefinition> = {
       CategoryList: {
         component: {
@@ -2218,44 +2310,46 @@ describe("SSR Renderer - List node rendering", () => {
             categories: {
               type: 'list',
               itemSchema: {
-                name: { type: 'string' }
+                name: { type: 'string' },
               },
-              default: []
-            }
+              default: [],
+            },
           },
           structure: {
-            type: "list",
-            source: "categories",
-            itemAs: "category",
+            type: 'list',
+            source: 'categories',
+            itemAs: 'category',
             children: [
-              { type: "node", tag: "div", children: [
-                "{{category.name}}",
-                {
-                  type: "list",
-                  source: "{{category.items}}",
-                  itemAs: "subItem",
-                  children: [
-                    { type: "node", tag: "span", children: ["{{subItem.label}}"] }
-                  ]
-                }
-              ] }
-            ]
-          } as any
-        }
-      }
+              {
+                type: 'node',
+                tag: 'div',
+                children: [
+                  '{{category.name}}',
+                  {
+                    type: 'list',
+                    source: '{{category.items}}',
+                    itemAs: 'subItem',
+                    children: [{ type: 'node', tag: 'span', children: ['{{subItem.label}}'] }],
+                  },
+                ],
+              },
+            ],
+          } as any,
+        },
+      },
     };
 
     const pageData: JSONPage = {
       root: {
-        type: "component",
-        component: "CategoryList",
+        type: 'component',
+        component: 'CategoryList',
         props: {
           categories: [
-            { name: "Category A", items: [{ label: "Item A1" }, { label: "Item A2" }] },
-            { name: "Category B", items: [{ label: "Item B1" }] }
-          ]
-        }
-      } as any
+            { name: 'Category A', items: [{ label: 'Item A1' }, { label: 'Item A2' }] },
+            { name: 'Category B', items: [{ label: 'Item B1' }] },
+          ],
+        },
+      } as any,
     };
 
     const result = await renderPageSSR(pageData, components, '/', '');