@pyreon/head 0.11.5 → 0.11.6

package/src/tests/head.test.ts

@@ -1,32 +1,32 @@
-import { h } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import type { HeadContextValue } from "../index"
-import { createHeadContext, HeadProvider, useHead } from "../index"
-import { renderWithHead } from "../ssr"
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import type { HeadContextValue } from '../index'
+import { createHeadContext, HeadProvider, useHead } from '../index'
+import { renderWithHead } from '../ssr'
 
 // ─── SSR tests ────────────────────────────────────────────────────────────────
 
-describe("renderWithHead — SSR", () => {
-  test("extracts <title> from useHead", async () => {
+describe('renderWithHead — SSR', () => {
+  test('extracts <title> from useHead', async () => {
     function Page() {
-      useHead({ title: "Hello Pyreon" })
-      return h("main", null, "content")
+      useHead({ title: 'Hello Pyreon' })
+      return h('main', null, 'content')
     }
     const { html, head } = await renderWithHead(h(Page, null))
-    expect(html).toContain("<main>")
-    expect(head).toContain("<title>Hello Pyreon</title>")
+    expect(html).toContain('<main>')
+    expect(head).toContain('<title>Hello Pyreon</title>')
   })
 
-  test("extracts <meta> tags from useHead", async () => {
+  test('extracts <meta> tags from useHead', async () => {
     function Page() {
       useHead({
         meta: [
-          { name: "description", content: "A great page" },
-          { property: "og:title", content: "Hello" },
+          { name: 'description', content: 'A great page' },
+          { property: 'og:title', content: 'Hello' },
         ],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('name="description"')
@@ -34,74 +34,74 @@ describe("renderWithHead — SSR", () => {
     expect(head).toContain('property="og:title"')
   })
 
-  test("extracts <link> tags from useHead", async () => {
+  test('extracts <link> tags from useHead', async () => {
     function Page() {
-      useHead({ link: [{ rel: "canonical", href: "https://example.com/page" }] })
-      return h("div", null)
+      useHead({ link: [{ rel: 'canonical', href: 'https://example.com/page' }] })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('rel="canonical"')
     expect(head).toContain('href="https://example.com/page"')
   })
 
-  test("deduplication: innermost title wins", async () => {
+  test('deduplication: innermost title wins', async () => {
     function Inner() {
-      useHead({ title: "Inner Title" })
-      return h("span", null)
+      useHead({ title: 'Inner Title' })
+      return h('span', null)
     }
     function Outer() {
-      useHead({ title: "Outer Title" })
-      return h("div", null, h(Inner, null))
+      useHead({ title: 'Outer Title' })
+      return h('div', null, h(Inner, null))
     }
     const { head } = await renderWithHead(h(Outer, null))
     // Only one <title> — Inner wins (last-added wins per key)
     const titleMatches = head.match(/<title>/g)
     expect(titleMatches).toHaveLength(1)
-    expect(head).toContain("<title>Inner Title</title>")
+    expect(head).toContain('<title>Inner Title</title>')
   })
 
-  test("escapes HTML entities in title", async () => {
+  test('escapes HTML entities in title', async () => {
     function Page() {
-      useHead({ title: "A & B <script>" })
-      return h("div", null)
+      useHead({ title: 'A & B <script>' })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("A &amp; B &lt;script&gt;")
-    expect(head).not.toContain("<script>")
+    expect(head).toContain('A &amp; B &lt;script&gt;')
+    expect(head).not.toContain('<script>')
   })
 
-  test("works with async component", async () => {
+  test('works with async component', async () => {
     async function AsyncPage() {
       await new Promise((r) => setTimeout(r, 1))
-      useHead({ title: "Async Page" })
-      return h("div", null)
+      useHead({ title: 'Async Page' })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(AsyncPage as never, null))
-    expect(head).toContain("<title>Async Page</title>")
+    expect(head).toContain('<title>Async Page</title>')
   })
 
-  test("renders <style> tags", async () => {
+  test('renders <style> tags', async () => {
     function Page() {
-      useHead({ style: [{ children: "body { color: red }" }] })
-      return h("div", null)
+      useHead({ style: [{ children: 'body { color: red }' }] })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<style>body { color: red }</style>")
+    expect(head).toContain('<style>body { color: red }</style>')
   })
 
-  test("renders <noscript> tags", async () => {
+  test('renders <noscript> tags', async () => {
     function Page() {
-      useHead({ noscript: [{ children: "<p>Please enable JavaScript</p>" }] })
-      return h("div", null)
+      useHead({ noscript: [{ children: '<p>Please enable JavaScript</p>' }] })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<noscript><p>Please enable JavaScript</p></noscript>")
+    expect(head).toContain('<noscript><p>Please enable JavaScript</p></noscript>')
   })
 
-  test("renders JSON-LD script tag", async () => {
+  test('renders JSON-LD script tag', async () => {
     function Page() {
-      useHead({ jsonLd: { "@type": "WebPage", name: "Test" } })
-      return h("div", null)
+      useHead({ jsonLd: { '@type': 'WebPage', name: 'Test' } })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('type="application/ld+json"')
@@ -109,53 +109,53 @@ describe("renderWithHead — SSR", () => {
     expect(head).toContain('"name":"Test"')
   })
 
-  test("script content is not HTML-escaped", async () => {
+  test('script content is not HTML-escaped', async () => {
     function Page() {
-      useHead({ script: [{ children: "var x = 1 < 2 && 3 > 1" }] })
-      return h("div", null)
+      useHead({ script: [{ children: 'var x = 1 < 2 && 3 > 1' }] })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("var x = 1 < 2 && 3 > 1")
-    expect(head).not.toContain("&lt;")
+    expect(head).toContain('var x = 1 < 2 && 3 > 1')
+    expect(head).not.toContain('&lt;')
   })
 
-  test("titleTemplate with %s placeholder", async () => {
+  test('titleTemplate with %s placeholder', async () => {
     function Layout() {
-      useHead({ titleTemplate: "%s | My App" })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: '%s | My App' })
+      return h('div', null, h(Page, null))
     }
     function Page() {
-      useHead({ title: "About" })
-      return h("span", null)
+      useHead({ title: 'About' })
+      return h('span', null)
     }
     const { head } = await renderWithHead(h(Layout, null))
-    expect(head).toContain("<title>About | My App</title>")
+    expect(head).toContain('<title>About | My App</title>')
   })
 
-  test("titleTemplate with function", async () => {
+  test('titleTemplate with function', async () => {
     function Layout() {
-      useHead({ titleTemplate: (t: string) => (t ? `${t} — Site` : "Site") })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: (t: string) => (t ? `${t} — Site` : 'Site') })
+      return h('div', null, h(Page, null))
     }
     function Page() {
-      useHead({ title: "Home" })
-      return h("span", null)
+      useHead({ title: 'Home' })
+      return h('span', null)
     }
     const { head } = await renderWithHead(h(Layout, null))
-    expect(head).toContain("<title>Home — Site</title>")
+    expect(head).toContain('<title>Home — Site</title>')
   })
 
-  test("returns htmlAttrs and bodyAttrs", async () => {
+  test('returns htmlAttrs and bodyAttrs', async () => {
     function Page() {
-      useHead({ htmlAttrs: { lang: "en", dir: "ltr" }, bodyAttrs: { class: "dark" } })
-      return h("div", null)
+      useHead({ htmlAttrs: { lang: 'en', dir: 'ltr' }, bodyAttrs: { class: 'dark' } })
+      return h('div', null)
     }
     const result = await renderWithHead(h(Page, null))
-    expect(result.htmlAttrs).toEqual({ lang: "en", dir: "ltr" })
-    expect(result.bodyAttrs).toEqual({ class: "dark" })
+    expect(result.htmlAttrs).toEqual({ lang: 'en', dir: 'ltr' })
+    expect(result.bodyAttrs).toEqual({ class: 'dark' })
   })
 
-  test("ssr.ts: serializeTag for non-void, non-raw tag with children (line 76)", async () => {
+  test('ssr.ts: serializeTag for non-void, non-raw tag with children (line 76)', async () => {
     // A <noscript> is raw, but let's use a tag that goes through esc() path
     // Actually noscript IS raw. We need a non-void, non-raw tag with children.
     // The only non-void non-raw tags possible: title (handled separately).
@@ -176,87 +176,87 @@ describe("renderWithHead — SSR", () => {
     // Line 60: tag.children ?? "" when children is undefined
     function _Page() {
       // title with undefined children — manually add to context
-      return h("div", null)
+      return h('div', null)
     }
     // Test title with no children set (tag.children is undefined → fallback to "")
     const ctx2 = createHeadContext()
-    ctx2.add(Symbol(), { tags: [{ tag: "title", key: "title" }] }) // no children prop
+    ctx2.add(Symbol(), { tags: [{ tag: 'title', key: 'title' }] }) // no children prop
     const tags = ctx2.resolve()
     expect(tags[0]?.children).toBeUndefined()
     // Now test through renderWithHead — the title tag should render with empty content
     function PageNoTitle() {
-      useHead({ title: "" })
-      return h("div", null)
+      useHead({ title: '' })
+      return h('div', null)
     }
     const result = await renderWithHead(h(PageNoTitle, null))
-    expect(result.head).toContain("<title></title>")
+    expect(result.head).toContain('<title></title>')
   })
 
-  test("ssr.ts: serializeTag renders noscript with closing-tag escaping (line 76)", async () => {
+  test('ssr.ts: serializeTag renders noscript with closing-tag escaping (line 76)', async () => {
     function Page() {
       useHead({
-        noscript: [{ children: "test </noscript><script>alert(1)</script>" }],
+        noscript: [{ children: 'test </noscript><script>alert(1)</script>' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     // The raw path should escape </noscript> to <\/noscript>
-    expect(head).toContain("<\\/noscript>")
+    expect(head).toContain('<\\/noscript>')
   })
 
-  test("ssr.ts: serializeTag for title with undefined children (line 60)", async () => {
+  test('ssr.ts: serializeTag for title with undefined children (line 60)', async () => {
     // Directly test by adding a title tag with no children to context
     const ctx2 = createHeadContext()
-    ctx2.add(Symbol(), { tags: [{ tag: "title", key: "title" }] })
+    ctx2.add(Symbol(), { tags: [{ tag: 'title', key: 'title' }] })
     // Use renderWithHead with a component that adds title tag without children
     function _Page() {
-      return h("div", null)
+      return h('div', null)
     }
     // We need to test serializeTag with title where children is undefined
     // Since we can't call serializeTag directly, let's use renderWithHead
     // with a titleTemplate and no title to exercise both template branches
     function PageWithTemplate() {
-      useHead({ titleTemplate: "%s | Site" })
-      return h("div", null, h(Inner, null))
+      useHead({ titleTemplate: '%s | Site' })
+      return h('div', null, h(Inner, null))
     }
     function Inner() {
-      useHead({ title: "" }) // empty string title with template
-      return h("span", null)
+      useHead({ title: '' }) // empty string title with template
+      return h('span', null)
     }
     const { head } = await renderWithHead(h(PageWithTemplate, null))
-    expect(head).toContain("<title> | Site</title>")
+    expect(head).toContain('<title> | Site</title>')
   })
 
-  test("ssr.ts: script tag with closing tag escaping (line 76)", async () => {
+  test('ssr.ts: script tag with closing tag escaping (line 76)', async () => {
     function Page() {
       useHead({
         script: [{ children: "var x = '</script><img onerror=alert(1)>'" }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<\\/script>")
+    expect(head).toContain('<\\/script>')
   })
 
-  test("use-head.ts: reactive function input on SSR (line 88)", async () => {
+  test('use-head.ts: reactive function input on SSR (line 88)', async () => {
     // The SSR path for function input evaluates once synchronously
     function Page() {
-      useHead(() => ({ title: "SSR Reactive" }))
-      return h("div", null)
+      useHead(() => ({ title: 'SSR Reactive' }))
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<title>SSR Reactive</title>")
+    expect(head).toContain('<title>SSR Reactive</title>')
   })
 
-  test("multiple link tags with same rel but different href are kept", async () => {
+  test('multiple link tags with same rel but different href are kept', async () => {
     function Page() {
       useHead({
         link: [
-          { rel: "stylesheet", href: "/a.css" },
-          { rel: "stylesheet", href: "/b.css" },
+          { rel: 'stylesheet', href: '/a.css' },
+          { rel: 'stylesheet', href: '/b.css' },
         ],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('href="/a.css"')
@@ -266,43 +266,43 @@ describe("renderWithHead — SSR", () => {
 
 // ─── CSR tests ────────────────────────────────────────────────────────────────
 
-describe("useHead — CSR", () => {
+describe('useHead — CSR', () => {
   let container: HTMLElement
   let ctx: HeadContextValue
 
   beforeEach(() => {
-    container = document.createElement("div")
+    container = document.createElement('div')
     document.body.appendChild(container)
     ctx = createHeadContext()
     // Clean up any pyreon-injected head tags from prior tests
-    for (const el of document.head.querySelectorAll("[data-pyreon-head]")) el.remove()
-    document.title = ""
+    for (const el of document.head.querySelectorAll('[data-pyreon-head]')) el.remove()
+    document.title = ''
   })
 
-  test("syncs document.title on mount", () => {
+  test('syncs document.title on mount', () => {
     function Page() {
-      useHead({ title: "CSR Title" })
-      return h("div", null)
+      useHead({ title: 'CSR Title' })
+      return h('div', null)
     }
     // When using h() directly (not JSX), component children must be in props.children
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.title).toBe("CSR Title")
+    expect(document.title).toBe('CSR Title')
   })
 
-  test("syncs <meta> tags on mount", () => {
+  test('syncs <meta> tags on mount', () => {
     function Page() {
-      useHead({ meta: [{ name: "description", content: "CSR desc" }] })
-      return h("div", null)
+      useHead({ meta: [{ name: 'description', content: 'CSR desc' }] })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const meta = document.head.querySelector('meta[name="description"]')
-    expect(meta?.getAttribute("content")).toBe("CSR desc")
+    expect(meta?.getAttribute('content')).toBe('CSR desc')
   })
 
-  test("removes meta tags on unmount", () => {
+  test('removes meta tags on unmount', () => {
     function Page() {
-      useHead({ meta: [{ name: "keywords", content: "pyreon" }] })
-      return h("div", null)
+      useHead({ meta: [{ name: 'keywords', content: 'pyreon' }] })
+      return h('div', null)
     }
     const cleanup = mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     expect(document.head.querySelector('meta[name="keywords"]')).not.toBeNull()
@@ -310,33 +310,33 @@ describe("useHead — CSR", () => {
     expect(document.head.querySelector('meta[name="keywords"]')).toBeNull()
   })
 
-  test("reactive useHead updates title when signal changes", () => {
-    const title = signal("Initial")
+  test('reactive useHead updates title when signal changes', () => {
+    const title = signal('Initial')
     function Page() {
       useHead(() => ({ title: title() }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.title).toBe("Initial")
-    title.set("Updated")
-    expect(document.title).toBe("Updated")
+    expect(document.title).toBe('Initial')
+    title.set('Updated')
+    expect(document.title).toBe('Updated')
   })
 
-  test("syncs <style> tags on mount", () => {
+  test('syncs <style> tags on mount', () => {
     function Page() {
-      useHead({ style: [{ children: "body { margin: 0 }" }] })
-      return h("div", null)
+      useHead({ style: [{ children: 'body { margin: 0 }' }] })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    const style = document.head.querySelector("style[data-pyreon-head]")
+    const style = document.head.querySelector('style[data-pyreon-head]')
     expect(style).not.toBeNull()
-    expect(style?.textContent).toBe("body { margin: 0 }")
+    expect(style?.textContent).toBe('body { margin: 0 }')
   })
 
-  test("syncs JSON-LD script on mount", () => {
+  test('syncs JSON-LD script on mount', () => {
     function Page() {
-      useHead({ jsonLd: { "@type": "WebPage", name: "Test" } })
-      return h("div", null)
+      useHead({ jsonLd: { '@type': 'WebPage', name: 'Test' } })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const script = document.head.querySelector('script[type="application/ld+json"]')
@@ -344,75 +344,75 @@ describe("useHead — CSR", () => {
     expect(script?.textContent).toContain('"@type":"WebPage"')
   })
 
-  test("titleTemplate applies to document.title", () => {
+  test('titleTemplate applies to document.title', () => {
     function Layout() {
-      useHead({ titleTemplate: "%s | My App" })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: '%s | My App' })
+      return h('div', null, h(Page, null))
     }
     function Page() {
-      useHead({ title: "Dashboard" })
-      return h("span", null)
+      useHead({ title: 'Dashboard' })
+      return h('span', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Layout, null) }), container)
-    expect(document.title).toBe("Dashboard | My App")
+    expect(document.title).toBe('Dashboard | My App')
   })
 
-  test("htmlAttrs sets attributes on <html>", () => {
+  test('htmlAttrs sets attributes on <html>', () => {
     function Page() {
-      useHead({ htmlAttrs: { lang: "fr" } })
-      return h("div", null)
+      useHead({ htmlAttrs: { lang: 'fr' } })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.documentElement.getAttribute("lang")).toBe("fr")
+    expect(document.documentElement.getAttribute('lang')).toBe('fr')
   })
 
-  test("bodyAttrs sets attributes on <body>", () => {
+  test('bodyAttrs sets attributes on <body>', () => {
     function Page() {
-      useHead({ bodyAttrs: { class: "dark-mode" } })
-      return h("div", null)
+      useHead({ bodyAttrs: { class: 'dark-mode' } })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.body.getAttribute("class")).toBe("dark-mode")
+    expect(document.body.getAttribute('class')).toBe('dark-mode')
   })
 
-  test("incremental sync updates attributes in place", () => {
-    const desc = signal("initial")
+  test('incremental sync updates attributes in place', () => {
+    const desc = signal('initial')
     function Page() {
-      useHead(() => ({ meta: [{ name: "description", content: desc() }] }))
-      return h("div", null)
+      useHead(() => ({ meta: [{ name: 'description', content: desc() }] }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const meta1 = document.head.querySelector('meta[name="description"]')
-    expect(meta1?.getAttribute("content")).toBe("initial")
-    desc.set("updated")
+    expect(meta1?.getAttribute('content')).toBe('initial')
+    desc.set('updated')
     const meta2 = document.head.querySelector('meta[name="description"]')
     // Same element should be reused (incremental sync)
     expect(meta2).toBe(meta1)
-    expect(meta2?.getAttribute("content")).toBe("updated")
+    expect(meta2?.getAttribute('content')).toBe('updated')
   })
 
-  test("titleTemplate function applies to document.title in CSR", () => {
+  test('titleTemplate function applies to document.title in CSR', () => {
     function Layout() {
-      useHead({ titleTemplate: (t: string) => (t ? `${t} - App` : "App") })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: (t: string) => (t ? `${t} - App` : 'App') })
+      return h('div', null, h(Page, null))
     }
     function Page() {
-      useHead({ title: "CSR Page" })
-      return h("span", null)
+      useHead({ title: 'CSR Page' })
+      return h('span', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Layout, null) }), container)
-    expect(document.title).toBe("CSR Page - App")
+    expect(document.title).toBe('CSR Page - App')
   })
 
-  test("removes stale elements when tags change", () => {
+  test('removes stale elements when tags change', () => {
     const show = signal(true)
     function Page() {
       useHead(() => {
         const tags: { name: string; content: string }[] = []
-        if (show()) tags.push({ name: "keywords", content: "pyreon" })
+        if (show()) tags.push({ name: 'keywords', content: 'pyreon' })
         return { meta: tags }
       })
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     expect(document.head.querySelector('meta[name="keywords"]')).not.toBeNull()
@@ -420,368 +420,368 @@ describe("useHead — CSR", () => {
     expect(document.head.querySelector('meta[name="keywords"]')).toBeNull()
   })
 
-  test("patchAttrs removes old attributes no longer in props", () => {
-    const attrs = signal<Record<string, string>>({ name: "test", content: "value" })
+  test('patchAttrs removes old attributes no longer in props', () => {
+    const attrs = signal<Record<string, string>>({ name: 'test', content: 'value' })
     function Page() {
       useHead(() => ({ meta: [attrs()] }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const el = document.head.querySelector('meta[name="test"]')
-    expect(el?.getAttribute("content")).toBe("value")
+    expect(el?.getAttribute('content')).toBe('value')
     // Change attrs to remove 'content'
-    attrs.set({ name: "test" })
+    attrs.set({ name: 'test' })
     const el2 = document.head.querySelector('meta[name="test"]')
-    expect(el2?.getAttribute("content")).toBeNull()
+    expect(el2?.getAttribute('content')).toBeNull()
   })
 
-  test("syncElementAttrs removes previously managed attrs", () => {
+  test('syncElementAttrs removes previously managed attrs', () => {
     const show = signal(true)
     function Page() {
-      useHead(() => (show() ? { htmlAttrs: { lang: "en", dir: "ltr" } } : { htmlAttrs: {} }))
-      return h("div", null)
+      useHead(() => (show() ? { htmlAttrs: { lang: 'en', dir: 'ltr' } } : { htmlAttrs: {} }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.documentElement.getAttribute("lang")).toBe("en")
-    expect(document.documentElement.getAttribute("dir")).toBe("ltr")
+    expect(document.documentElement.getAttribute('lang')).toBe('en')
+    expect(document.documentElement.getAttribute('dir')).toBe('ltr')
     show.set(false)
     // Previously managed attrs should be removed
-    expect(document.documentElement.getAttribute("lang")).toBeNull()
-    expect(document.documentElement.getAttribute("dir")).toBeNull()
+    expect(document.documentElement.getAttribute('lang')).toBeNull()
+    expect(document.documentElement.getAttribute('dir')).toBeNull()
   })
 
-  test("link tag key deduplication by rel when no href", async () => {
+  test('link tag key deduplication by rel when no href', async () => {
     function Page() {
       useHead({
-        link: [{ rel: "icon" }],
+        link: [{ rel: 'icon' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("rel=")
+    expect(head).toContain('rel=')
   })
 
-  test("link tag key uses index when no href or rel", async () => {
+  test('link tag key uses index when no href or rel', async () => {
     function Page() {
       useHead({
-        link: [{ crossorigin: "anonymous" }],
+        link: [{ crossorigin: 'anonymous' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<link")
+    expect(head).toContain('<link')
   })
 
-  test("meta tag key uses property when name is absent", async () => {
+  test('meta tag key uses property when name is absent', async () => {
     function Page() {
       useHead({
-        meta: [{ property: "og:title", content: "OG" }],
+        meta: [{ property: 'og:title', content: 'OG' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('property="og:title"')
   })
 
-  test("meta tag key falls back to index when no name or property", async () => {
+  test('meta tag key falls back to index when no name or property', async () => {
     function Page() {
       useHead({
-        meta: [{ charset: "utf-8" }],
+        meta: [{ charset: 'utf-8' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('charset="utf-8"')
   })
 
-  test("script tag with src uses src as key", async () => {
+  test('script tag with src uses src as key', async () => {
     function Page() {
       useHead({
-        script: [{ src: "/app.js" }],
+        script: [{ src: '/app.js' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain('src="/app.js"')
   })
 
-  test("script tag without src uses index as key", async () => {
+  test('script tag without src uses index as key', async () => {
     function Page() {
       useHead({
         script: [{ children: "console.log('hi')" }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     expect(head).toContain("console.log('hi')")
   })
 
-  test("base tag renders in SSR", async () => {
+  test('base tag renders in SSR', async () => {
     function Page() {
-      useHead({ base: { href: "/" } })
-      return h("div", null)
+      useHead({ base: { href: '/' } })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<base")
+    expect(head).toContain('<base')
     expect(head).toContain('href="/"')
   })
 
-  test("noscript raw content escaping in SSR", async () => {
+  test('noscript raw content escaping in SSR', async () => {
     function Page() {
       useHead({
-        noscript: [{ children: "<p>Enable JS</p>" }],
+        noscript: [{ children: '<p>Enable JS</p>' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     // noscript is a raw tag, content preserved
-    expect(head).toContain("<p>Enable JS</p>")
+    expect(head).toContain('<p>Enable JS</p>')
   })
 
-  test("style content escaping in SSR prevents tag injection", async () => {
+  test('style content escaping in SSR prevents tag injection', async () => {
     function Page() {
       useHead({
-        style: [{ children: "body { color: red } </style><script>" }],
+        style: [{ children: 'body { color: red } </style><script>' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
     // Closing tag should be escaped
-    expect(head).toContain("<\\/style>")
+    expect(head).toContain('<\\/style>')
   })
 
-  test("unkeyed tags are all preserved in resolve", () => {
+  test('unkeyed tags are all preserved in resolve', () => {
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [{ tag: "meta", props: { name: "a", content: "1" } }] })
-    ctx.add(id2, { tags: [{ tag: "meta", props: { name: "b", content: "2" } }] })
+    ctx.add(id1, { tags: [{ tag: 'meta', props: { name: 'a', content: '1' } }] })
+    ctx.add(id2, { tags: [{ tag: 'meta', props: { name: 'b', content: '2' } }] })
     const tags = ctx.resolve()
     expect(tags).toHaveLength(2)
     ctx.remove(id1)
     ctx.remove(id2)
   })
 
-  test("title tag without children renders empty", async () => {
+  test('title tag without children renders empty', async () => {
     function Page() {
-      useHead({ title: "" })
-      return h("div", null)
+      useHead({ title: '' })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<title></title>")
+    expect(head).toContain('<title></title>')
   })
 
-  test("useHead with no context is a no-op", () => {
+  test('useHead with no context is a no-op', () => {
     // Calling useHead outside of any HeadProvider should not throw
     expect(() => {
-      useHead({ title: "No Provider" })
+      useHead({ title: 'No Provider' })
     }).not.toThrow()
   })
 
-  test("CSR sync creates new elements for unkeyed tags", () => {
+  test('CSR sync creates new elements for unkeyed tags', () => {
     function Page() {
-      useHead({ meta: [{ name: "viewport", content: "width=device-width" }] })
-      return h("div", null)
+      useHead({ meta: [{ name: 'viewport', content: 'width=device-width' }] })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const meta = document.head.querySelector('meta[name="viewport"]')
     expect(meta).not.toBeNull()
   })
 
-  test("CSR patchAttrs sets new attribute values", () => {
-    const val = signal("initial")
+  test('CSR patchAttrs sets new attribute values', () => {
+    const val = signal('initial')
     function Page() {
       useHead(() => ({
-        meta: [{ name: "test-patch", content: val() }],
+        meta: [{ name: 'test-patch', content: val() }],
       }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const el = document.head.querySelector('meta[name="test-patch"]')
-    expect(el?.getAttribute("content")).toBe("initial")
-    val.set("changed")
-    expect(el?.getAttribute("content")).toBe("changed")
+    expect(el?.getAttribute('content')).toBe('initial')
+    val.set('changed')
+    expect(el?.getAttribute('content')).toBe('changed')
   })
 
-  test("dom.ts: syncDom creates new meta element when none exists", () => {
+  test('dom.ts: syncDom creates new meta element when none exists', () => {
     function Page() {
-      useHead({ meta: [{ name: "keywords", content: "test,coverage" }] })
-      return h("div", null)
+      useHead({ meta: [{ name: 'keywords', content: 'test,coverage' }] })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const meta = document.head.querySelector('meta[name="keywords"]')
     expect(meta).not.toBeNull()
-    expect(meta?.getAttribute("content")).toBe("test,coverage")
+    expect(meta?.getAttribute('content')).toBe('test,coverage')
   })
 
-  test("dom.ts: syncDom replaces element when tag name differs from found (line 41-49)", () => {
+  test('dom.ts: syncDom replaces element when tag name differs from found (line 41-49)', () => {
     // Pre-create a keyed element with a different tag name
-    const existing = document.createElement("link")
-    existing.setAttribute("data-pyreon-head", "style-0")
+    const existing = document.createElement('link')
+    existing.setAttribute('data-pyreon-head', 'style-0')
     document.head.appendChild(existing)
 
     function Page() {
-      useHead({ style: [{ children: ".x { color: red }" }] })
-      return h("div", null)
+      useHead({ style: [{ children: '.x { color: red }' }] })
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     // The old link should be removed (stale), new style element created
-    const style = document.head.querySelector("style[data-pyreon-head]")
+    const style = document.head.querySelector('style[data-pyreon-head]')
     expect(style).not.toBeNull()
-    expect(style?.textContent).toBe(".x { color: red }")
+    expect(style?.textContent).toBe('.x { color: red }')
   })
 
-  test("dom.ts: syncDom handles tag with empty key (line 34)", () => {
+  test('dom.ts: syncDom handles tag with empty key (line 34)', () => {
     // A tag with no key should not use byKey lookup (empty key → undefined)
     function Page() {
       useHead({
-        meta: [{ charset: "utf-8" }], // no name or property → key is "meta-0"
+        meta: [{ charset: 'utf-8' }], // no name or property → key is "meta-0"
       })
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const meta = document.head.querySelector('meta[charset="utf-8"]')
     expect(meta).not.toBeNull()
   })
 
-  test("dom.ts: syncDom patches textContent when content changes (line 40)", () => {
-    const content = signal("initial content")
+  test('dom.ts: syncDom patches textContent when content changes (line 40)', () => {
+    const content = signal('initial content')
     function Page() {
       useHead(() => ({
         style: [{ children: content() }],
       }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    const style = document.head.querySelector("style[data-pyreon-head]")
-    expect(style?.textContent).toBe("initial content")
-    content.set("updated content")
-    expect(style?.textContent).toBe("updated content")
+    const style = document.head.querySelector('style[data-pyreon-head]')
+    expect(style?.textContent).toBe('initial content')
+    content.set('updated content')
+    expect(style?.textContent).toBe('updated content')
   })
 
-  test("dom.ts: syncElementAttrs removes managed-attrs tracker when all attrs removed (line 99-100)", () => {
+  test('dom.ts: syncElementAttrs removes managed-attrs tracker when all attrs removed (line 99-100)', () => {
     const show = signal(true)
     function Page() {
-      useHead(() => (show() ? { bodyAttrs: { "data-theme": "dark" } } : { bodyAttrs: {} }))
-      return h("div", null)
+      useHead(() => (show() ? { bodyAttrs: { 'data-theme': 'dark' } } : { bodyAttrs: {} }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.body.getAttribute("data-theme")).toBe("dark")
-    expect(document.body.getAttribute("data-pyreon-head-attrs")).toBe("data-theme")
+    expect(document.body.getAttribute('data-theme')).toBe('dark')
+    expect(document.body.getAttribute('data-pyreon-head-attrs')).toBe('data-theme')
     show.set(false)
-    expect(document.body.getAttribute("data-theme")).toBeNull()
+    expect(document.body.getAttribute('data-theme')).toBeNull()
     // The managed-attrs tracker should also be removed
-    expect(document.body.getAttribute("data-pyreon-head-attrs")).toBeNull()
+    expect(document.body.getAttribute('data-pyreon-head-attrs')).toBeNull()
   })
 
-  test("dom.ts: syncElementAttrs updates managed attrs tracking (lines 92-98)", () => {
-    const val = signal("en")
+  test('dom.ts: syncElementAttrs updates managed attrs tracking (lines 92-98)', () => {
+    const val = signal('en')
     function Page() {
-      useHead(() => ({ htmlAttrs: { lang: val(), "data-x": "y" } }))
-      return h("div", null)
+      useHead(() => ({ htmlAttrs: { lang: val(), 'data-x': 'y' } }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    const managed = document.documentElement.getAttribute("data-pyreon-head-attrs")
-    expect(managed).toContain("lang")
-    expect(managed).toContain("data-x")
+    const managed = document.documentElement.getAttribute('data-pyreon-head-attrs')
+    expect(managed).toContain('lang')
+    expect(managed).toContain('data-x')
     // Update to only one attr to verify partial removal
-    val.set("fr")
-    expect(document.documentElement.getAttribute("lang")).toBe("fr")
+    val.set('fr')
+    expect(document.documentElement.getAttribute('lang')).toBe('fr')
   })
 
-  test("provider.tsx: HeadProvider handles function children (line 32)", () => {
+  test('provider.tsx: HeadProvider handles function children (line 32)', () => {
     function Page() {
-      useHead({ title: "Func Children" })
-      return h("div", null, "hello")
+      useHead({ title: 'Func Children' })
+      return h('div', null, 'hello')
     }
     // Pass children as a function (thunk)
     const childFn = () => h(Page, null)
     mount(h(HeadProvider, { context: ctx, children: childFn }), container)
-    expect(document.title).toBe("Func Children")
+    expect(document.title).toBe('Func Children')
   })
 
-  test("dom.ts: patchAttrs removes old attrs not in new props (line 67)", () => {
+  test('dom.ts: patchAttrs removes old attrs not in new props (line 67)', () => {
     const val = signal<Record<string, string>>({
-      name: "desc",
-      content: "old",
-      "data-extra": "yes",
+      name: 'desc',
+      content: 'old',
+      'data-extra': 'yes',
     })
     function Page() {
       useHead(() => ({ meta: [val()] }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const el = document.head.querySelector('meta[name="desc"]')
-    expect(el?.getAttribute("data-extra")).toBe("yes")
+    expect(el?.getAttribute('data-extra')).toBe('yes')
     // Update to remove data-extra attr
-    val.set({ name: "desc", content: "new" })
-    expect(el?.getAttribute("data-extra")).toBeNull()
-    expect(el?.getAttribute("content")).toBe("new")
+    val.set({ name: 'desc', content: 'new' })
+    expect(el?.getAttribute('data-extra')).toBeNull()
+    expect(el?.getAttribute('content')).toBe('new')
   })
 
-  test("dom.ts: syncDom skips textContent update when content already matches (line 40 false)", () => {
+  test('dom.ts: syncDom skips textContent update when content already matches (line 40 false)', () => {
     const trigger = signal(0)
     function Page() {
       useHead(() => {
         trigger() // subscribe so effect re-runs
-        return { style: [{ children: "unchanged" }] }
+        return { style: [{ children: 'unchanged' }] }
       })
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    const style = document.head.querySelector("style[data-pyreon-head]")
-    expect(style?.textContent).toBe("unchanged")
+    const style = document.head.querySelector('style[data-pyreon-head]')
+    expect(style?.textContent).toBe('unchanged')
     // Re-trigger syncDom with same content — exercises the "content matches" branch
     trigger.set(1)
-    expect(style?.textContent).toBe("unchanged")
+    expect(style?.textContent).toBe('unchanged')
   })
 
-  test("dom.ts: syncDom handles tag.children when content changes (line 39-40)", () => {
-    const s = signal("body1")
+  test('dom.ts: syncDom handles tag.children when content changes (line 39-40)', () => {
+    const s = signal('body1')
     function Page() {
       useHead(() => ({ style: [{ children: s() }] }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    const style = document.head.querySelector("style[data-pyreon-head]")
-    expect(style?.textContent).toBe("body1")
-    s.set("body2")
-    expect(style?.textContent).toBe("body2")
+    const style = document.head.querySelector('style[data-pyreon-head]')
+    expect(style?.textContent).toBe('body1')
+    s.set('body2')
+    expect(style?.textContent).toBe('body2')
   })
 })
 
 // ─── createHeadContext — context stacking & caching ──────────────────────────
 
-describe("createHeadContext", () => {
-  test("resolve returns empty array when no entries", () => {
+describe('createHeadContext', () => {
+  test('resolve returns empty array when no entries', () => {
     const ctx = createHeadContext()
     expect(ctx.resolve()).toEqual([])
   })
 
-  test("resolve caches result until dirty", () => {
+  test('resolve caches result until dirty', () => {
     const ctx = createHeadContext()
     const id = Symbol()
-    ctx.add(id, { tags: [{ tag: "meta", key: "a", props: { name: "a" } }] })
+    ctx.add(id, { tags: [{ tag: 'meta', key: 'a', props: { name: 'a' } }] })
     const first = ctx.resolve()
     const second = ctx.resolve()
     expect(first).toBe(second) // same array reference — cached
   })
 
-  test("resolve invalidates cache after add", () => {
+  test('resolve invalidates cache after add', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
-    ctx.add(id1, { tags: [{ tag: "meta", key: "a", props: { name: "a" } }] })
+    ctx.add(id1, { tags: [{ tag: 'meta', key: 'a', props: { name: 'a' } }] })
     const first = ctx.resolve()
     const id2 = Symbol()
-    ctx.add(id2, { tags: [{ tag: "meta", key: "b", props: { name: "b" } }] })
+    ctx.add(id2, { tags: [{ tag: 'meta', key: 'b', props: { name: 'b' } }] })
     const second = ctx.resolve()
     expect(first).not.toBe(second) // different reference — rebuilt
     expect(second).toHaveLength(2)
   })
 
-  test("resolve invalidates cache after remove", () => {
+  test('resolve invalidates cache after remove', () => {
     const ctx = createHeadContext()
     const id = Symbol()
-    ctx.add(id, { tags: [{ tag: "meta", key: "a", props: { name: "a" } }] })
+    ctx.add(id, { tags: [{ tag: 'meta', key: 'a', props: { name: 'a' } }] })
     const first = ctx.resolve()
     ctx.remove(id)
     const second = ctx.resolve()
@@ -789,59 +789,59 @@ describe("createHeadContext", () => {
     expect(first).not.toBe(second)
   })
 
-  test("keyed tags deduplicate — last added wins", () => {
+  test('keyed tags deduplicate — last added wins', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [{ tag: "title", key: "title", children: "First" }] })
-    ctx.add(id2, { tags: [{ tag: "title", key: "title", children: "Second" }] })
+    ctx.add(id1, { tags: [{ tag: 'title', key: 'title', children: 'First' }] })
+    ctx.add(id2, { tags: [{ tag: 'title', key: 'title', children: 'Second' }] })
     const tags = ctx.resolve()
     expect(tags).toHaveLength(1)
-    expect(tags[0]?.children).toBe("Second")
+    expect(tags[0]?.children).toBe('Second')
   })
 
-  test("resolveTitleTemplate returns undefined when none set", () => {
+  test('resolveTitleTemplate returns undefined when none set', () => {
     const ctx = createHeadContext()
     expect(ctx.resolveTitleTemplate()).toBeUndefined()
   })
 
-  test("resolveTitleTemplate returns last added template", () => {
+  test('resolveTitleTemplate returns last added template', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [], titleTemplate: "%s | Site A" })
-    ctx.add(id2, { tags: [], titleTemplate: "%s | Site B" })
-    expect(ctx.resolveTitleTemplate()).toBe("%s | Site B")
+    ctx.add(id1, { tags: [], titleTemplate: '%s | Site A' })
+    ctx.add(id2, { tags: [], titleTemplate: '%s | Site B' })
+    expect(ctx.resolveTitleTemplate()).toBe('%s | Site B')
   })
 
-  test("resolveHtmlAttrs merges from multiple entries", () => {
+  test('resolveHtmlAttrs merges from multiple entries', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [], htmlAttrs: { lang: "en" } })
-    ctx.add(id2, { tags: [], htmlAttrs: { dir: "ltr" } })
-    expect(ctx.resolveHtmlAttrs()).toEqual({ lang: "en", dir: "ltr" })
+    ctx.add(id1, { tags: [], htmlAttrs: { lang: 'en' } })
+    ctx.add(id2, { tags: [], htmlAttrs: { dir: 'ltr' } })
+    expect(ctx.resolveHtmlAttrs()).toEqual({ lang: 'en', dir: 'ltr' })
   })
 
-  test("resolveHtmlAttrs later entries override earlier", () => {
+  test('resolveHtmlAttrs later entries override earlier', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [], htmlAttrs: { lang: "en" } })
-    ctx.add(id2, { tags: [], htmlAttrs: { lang: "fr" } })
-    expect(ctx.resolveHtmlAttrs()).toEqual({ lang: "fr" })
+    ctx.add(id1, { tags: [], htmlAttrs: { lang: 'en' } })
+    ctx.add(id2, { tags: [], htmlAttrs: { lang: 'fr' } })
+    expect(ctx.resolveHtmlAttrs()).toEqual({ lang: 'fr' })
   })
 
-  test("resolveBodyAttrs merges from multiple entries", () => {
+  test('resolveBodyAttrs merges from multiple entries', () => {
     const ctx = createHeadContext()
     const id1 = Symbol()
     const id2 = Symbol()
-    ctx.add(id1, { tags: [], bodyAttrs: { class: "dark" } })
-    ctx.add(id2, { tags: [], bodyAttrs: { "data-page": "home" } })
-    expect(ctx.resolveBodyAttrs()).toEqual({ class: "dark", "data-page": "home" })
+    ctx.add(id1, { tags: [], bodyAttrs: { class: 'dark' } })
+    ctx.add(id2, { tags: [], bodyAttrs: { 'data-page': 'home' } })
+    expect(ctx.resolveBodyAttrs()).toEqual({ class: 'dark', 'data-page': 'home' })
   })
 
-  test("remove non-existent id does not throw", () => {
+  test('remove non-existent id does not throw', () => {
     const ctx = createHeadContext()
     expect(() => ctx.remove(Symbol())).not.toThrow()
   })
@@ -849,316 +849,316 @@ describe("createHeadContext", () => {
 
 // ─── HeadProvider — context stacking ─────────────────────────────────────────
 
-describe("HeadProvider — context stacking", () => {
+describe('HeadProvider — context stacking', () => {
   let container: HTMLElement
 
   beforeEach(() => {
-    container = document.createElement("div")
+    container = document.createElement('div')
     document.body.appendChild(container)
-    for (const el of document.head.querySelectorAll("[data-pyreon-head]")) el.remove()
-    document.title = ""
+    for (const el of document.head.querySelectorAll('[data-pyreon-head]')) el.remove()
+    document.title = ''
   })
 
-  test("auto-creates context when no context prop", () => {
+  test('auto-creates context when no context prop', () => {
     function Page() {
-      useHead({ title: "Auto Context" })
-      return h("div", null)
+      useHead({ title: 'Auto Context' })
+      return h('div', null)
     }
     // HeadProvider without context prop
     mount(h(HeadProvider, { children: h(Page, null) }), container)
-    expect(document.title).toBe("Auto Context")
+    expect(document.title).toBe('Auto Context')
   })
 
-  test("nested HeadProviders — inner context receives inner useHead calls", () => {
+  test('nested HeadProviders — inner context receives inner useHead calls', () => {
     const outerCtx = createHeadContext()
     const innerCtx = createHeadContext()
 
     function Outer() {
-      useHead({ title: "Outer" })
-      return h("div", null, h(HeadProvider, { context: innerCtx, children: h(Inner, null) }))
+      useHead({ title: 'Outer' })
+      return h('div', null, h(HeadProvider, { context: innerCtx, children: h(Inner, null) }))
     }
     function Inner() {
-      useHead({ title: "Inner" })
-      return h("span", null)
+      useHead({ title: 'Inner' })
+      return h('span', null)
     }
     mount(h(HeadProvider, { context: outerCtx, children: h(Outer, null) }), container)
     // Outer context has "Outer" title, inner context has "Inner" title
     // The outer syncDom runs and sets title to "Outer"
     // Both contexts sync independently
     const outerTags = outerCtx.resolve()
-    expect(outerTags.some((t) => t.children === "Outer")).toBe(true)
+    expect(outerTags.some((t) => t.children === 'Outer')).toBe(true)
     // The inner context should have Inner's title registered
     const innerTags = innerCtx.resolve()
-    expect(innerTags.some((t) => t.children === "Inner")).toBe(true)
+    expect(innerTags.some((t) => t.children === 'Inner')).toBe(true)
   })
 })
 
 // ─── useHead with reactive signals — CSR ────────────────────────────────────
 
-describe("useHead — reactive signal-driven values", () => {
+describe('useHead — reactive signal-driven values', () => {
   let container: HTMLElement
   let ctx: HeadContextValue
 
   beforeEach(() => {
-    container = document.createElement("div")
+    container = document.createElement('div')
     document.body.appendChild(container)
     ctx = createHeadContext()
-    for (const el of document.head.querySelectorAll("[data-pyreon-head]")) el.remove()
-    document.title = ""
+    for (const el of document.head.querySelectorAll('[data-pyreon-head]')) el.remove()
+    document.title = ''
   })
 
-  test("reactive meta tags update when signal changes", () => {
-    const description = signal("Initial description")
+  test('reactive meta tags update when signal changes', () => {
+    const description = signal('Initial description')
     function Page() {
       useHead(() => ({
-        meta: [{ name: "description", content: description() }],
+        meta: [{ name: 'description', content: description() }],
       }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.head.querySelector('meta[name="description"]')?.getAttribute("content")).toBe(
-      "Initial description",
+    expect(document.head.querySelector('meta[name="description"]')?.getAttribute('content')).toBe(
+      'Initial description',
     )
-    description.set("Updated description")
-    expect(document.head.querySelector('meta[name="description"]')?.getAttribute("content")).toBe(
-      "Updated description",
+    description.set('Updated description')
+    expect(document.head.querySelector('meta[name="description"]')?.getAttribute('content')).toBe(
+      'Updated description',
     )
   })
 
-  test("reactive link tags update when signal changes", () => {
-    const href = signal("/page-v1")
+  test('reactive link tags update when signal changes', () => {
+    const href = signal('/page-v1')
     function Page() {
       useHead(() => ({
-        link: [{ rel: "canonical", href: href() }],
+        link: [{ rel: 'canonical', href: href() }],
       }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const link = document.head.querySelector('link[rel="canonical"]')
-    expect(link?.getAttribute("href")).toBe("/page-v1")
-    href.set("/page-v2")
+    expect(link?.getAttribute('href')).toBe('/page-v1')
+    href.set('/page-v2')
     // A new link element is created because the key changes (includes href)
-    const newLink = document.head.querySelector("link[data-pyreon-head]")
+    const newLink = document.head.querySelector('link[data-pyreon-head]')
     expect(newLink).not.toBeNull()
   })
 
-  test("reactive bodyAttrs update when signal changes", () => {
-    const theme = signal("light")
+  test('reactive bodyAttrs update when signal changes', () => {
+    const theme = signal('light')
     function Page() {
-      useHead(() => ({ bodyAttrs: { "data-theme": theme() } }))
-      return h("div", null)
+      useHead(() => ({ bodyAttrs: { 'data-theme': theme() } }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.body.getAttribute("data-theme")).toBe("light")
-    theme.set("dark")
-    expect(document.body.getAttribute("data-theme")).toBe("dark")
+    expect(document.body.getAttribute('data-theme')).toBe('light')
+    theme.set('dark')
+    expect(document.body.getAttribute('data-theme')).toBe('dark')
   })
 
-  test("reactive htmlAttrs update when signal changes", () => {
-    const lang = signal("en")
+  test('reactive htmlAttrs update when signal changes', () => {
+    const lang = signal('en')
     function Page() {
       useHead(() => ({ htmlAttrs: { lang: lang() } }))
-      return h("div", null)
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
-    expect(document.documentElement.getAttribute("lang")).toBe("en")
-    lang.set("de")
-    expect(document.documentElement.getAttribute("lang")).toBe("de")
+    expect(document.documentElement.getAttribute('lang')).toBe('en')
+    lang.set('de')
+    expect(document.documentElement.getAttribute('lang')).toBe('de')
   })
 
-  test("reactive jsonLd updates when signal changes", () => {
-    const pageName = signal("Home")
+  test('reactive jsonLd updates when signal changes', () => {
+    const pageName = signal('Home')
     function Page() {
-      useHead(() => ({ jsonLd: { "@type": "WebPage", name: pageName() } }))
-      return h("div", null)
+      useHead(() => ({ jsonLd: { '@type': 'WebPage', name: pageName() } }))
+      return h('div', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Page, null) }), container)
     const script = document.head.querySelector('script[type="application/ld+json"]')
     expect(script?.textContent).toContain('"name":"Home"')
-    pageName.set("About")
+    pageName.set('About')
     const updated = document.head.querySelector('script[type="application/ld+json"]')
     expect(updated?.textContent).toContain('"name":"About"')
   })
 
-  test("reactive titleTemplate with signal-driven title", () => {
-    const pageTitle = signal("Home")
+  test('reactive titleTemplate with signal-driven title', () => {
+    const pageTitle = signal('Home')
     function Layout() {
-      useHead({ titleTemplate: "%s | MySite" })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: '%s | MySite' })
+      return h('div', null, h(Page, null))
     }
     function Page() {
       useHead(() => ({ title: pageTitle() }))
-      return h("span", null)
+      return h('span', null)
     }
     mount(h(HeadProvider, { context: ctx, children: h(Layout, null) }), container)
-    expect(document.title).toBe("Home | MySite")
-    pageTitle.set("About")
-    expect(document.title).toBe("About | MySite")
+    expect(document.title).toBe('Home | MySite')
+    pageTitle.set('About')
+    expect(document.title).toBe('About | MySite')
   })
 })
 
 // ─── renderWithHead — SSR subpath import ─────────────────────────────────────
 
-describe("renderWithHead — @pyreon/head/ssr subpath", () => {
-  test("renderWithHead is importable from ssr module", async () => {
-    const mod = await import("../ssr")
-    expect(typeof mod.renderWithHead).toBe("function")
+describe('renderWithHead — @pyreon/head/ssr subpath', () => {
+  test('renderWithHead is importable from ssr module', async () => {
+    const mod = await import('../ssr')
+    expect(typeof mod.renderWithHead).toBe('function')
   })
 
-  test("renderWithHead with multiple useHead calls merges tags", async () => {
+  test('renderWithHead with multiple useHead calls merges tags', async () => {
     function Layout() {
-      useHead({ titleTemplate: "%s | App", htmlAttrs: { lang: "en" } })
-      return h("div", null, h(Page, null))
+      useHead({ titleTemplate: '%s | App', htmlAttrs: { lang: 'en' } })
+      return h('div', null, h(Page, null))
     }
     function Page() {
       useHead({
-        title: "Dashboard",
-        meta: [{ name: "description", content: "Dashboard page" }],
-        bodyAttrs: { class: "dashboard" },
+        title: 'Dashboard',
+        meta: [{ name: 'description', content: 'Dashboard page' }],
+        bodyAttrs: { class: 'dashboard' },
       })
-      return h("span", null)
+      return h('span', null)
     }
     const result = await renderWithHead(h(Layout, null))
-    expect(result.head).toContain("<title>Dashboard | App</title>")
+    expect(result.head).toContain('<title>Dashboard | App</title>')
     expect(result.head).toContain('name="description"')
-    expect(result.htmlAttrs).toEqual({ lang: "en" })
-    expect(result.bodyAttrs).toEqual({ class: "dashboard" })
+    expect(result.htmlAttrs).toEqual({ lang: 'en' })
+    expect(result.bodyAttrs).toEqual({ class: 'dashboard' })
   })
 
-  test("renderWithHead with empty head returns empty string", async () => {
+  test('renderWithHead with empty head returns empty string', async () => {
     function Page() {
-      return h("div", null, "content")
+      return h('div', null, 'content')
     }
     const result = await renderWithHead(h(Page, null))
-    expect(result.head).toBe("")
-    expect(result.html).toContain("content")
+    expect(result.head).toBe('')
+    expect(result.html).toContain('content')
   })
 
-  test("renderWithHead serializes HTML comment openers in script content", async () => {
+  test('renderWithHead serializes HTML comment openers in script content', async () => {
     function Page() {
-      useHead({ script: [{ children: "if (x <!-- y) {}" }] })
-      return h("div", null)
+      useHead({ script: [{ children: 'if (x <!-- y) {}' }] })
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<\\!--")
-    expect(head).not.toContain("<!--")
+    expect(head).toContain('<\\!--')
+    expect(head).not.toContain('<!--')
   })
 })
 
 // ─── SSR — additional branch coverage ────────────────────────────────────────
 
-describe("renderWithHead — SSR additional branches", () => {
-  test("ssr.ts: title without children (line 60)", async () => {
+describe('renderWithHead — SSR additional branches', () => {
+  test('ssr.ts: title without children (line 60)', async () => {
     function Page() {
       useHead({} as any) // no title field at all
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toBe("") // no tags
+    expect(head).toBe('') // no tags
   })
 
-  test("ssr.ts: non-raw tag with children (line 76)", async () => {
+  test('ssr.ts: non-raw tag with children (line 76)', async () => {
     function Page() {
       useHead({
-        noscript: [{ children: "<p>Enable JavaScript</p>" }],
+        noscript: [{ children: '<p>Enable JavaScript</p>' }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("<noscript>")
-    expect(head).toContain("Enable JavaScript")
+    expect(head).toContain('<noscript>')
+    expect(head).toContain('Enable JavaScript')
   })
 
-  test("ssr.ts: function titleTemplate in SSR", async () => {
+  test('ssr.ts: function titleTemplate in SSR', async () => {
     function Page() {
       useHead({
-        title: "Page Title",
+        title: 'Page Title',
         titleTemplate: (t: string) => `${t} | MySite`,
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("Page Title | MySite")
+    expect(head).toContain('Page Title | MySite')
   })
 
-  test("ssr.ts: string titleTemplate in SSR", async () => {
+  test('ssr.ts: string titleTemplate in SSR', async () => {
     function Page() {
       useHead({
-        title: "Page",
-        titleTemplate: "%s - App",
+        title: 'Page',
+        titleTemplate: '%s - App',
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("Page - App")
+    expect(head).toContain('Page - App')
   })
 
-  test("use-head.ts: reactive input in SSR evaluates once (line 86-88)", async () => {
+  test('use-head.ts: reactive input in SSR evaluates once (line 86-88)', async () => {
     function Page() {
       useHead(() => ({
-        title: "SSR Reactive",
-        meta: [{ name: "desc", content: "from function" }],
+        title: 'SSR Reactive',
+        meta: [{ name: 'desc', content: 'from function' }],
       }))
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("SSR Reactive")
+    expect(head).toContain('SSR Reactive')
   })
 
-  test("use-head.ts: link key without href falls back to rel (line 20)", async () => {
+  test('use-head.ts: link key without href falls back to rel (line 20)', async () => {
     function Page() {
       useHead({
         link: [
-          { rel: "preconnect" }, // no href → key uses rel
-          { rel: "dns-prefetch" }, // another no-href
+          { rel: 'preconnect' }, // no href → key uses rel
+          { rel: 'dns-prefetch' }, // another no-href
         ],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("preconnect")
-    expect(head).toContain("dns-prefetch")
+    expect(head).toContain('preconnect')
+    expect(head).toContain('dns-prefetch')
   })
 
-  test("use-head.ts: link key without href or rel falls back to index (line 20)", async () => {
+  test('use-head.ts: link key without href or rel falls back to index (line 20)', async () => {
     function Page() {
       useHead({
-        link: [{ type: "text/css" }], // no href, no rel → key is "link-0"
+        link: [{ type: 'text/css' }], // no href, no rel → key is "link-0"
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("text/css")
+    expect(head).toContain('text/css')
   })
 
-  test("use-head.ts: script with children in SSR (line 30)", async () => {
+  test('use-head.ts: script with children in SSR (line 30)', async () => {
     function Page() {
       useHead({
         script: [{ children: "console.log('hi')" }],
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { head } = await renderWithHead(h(Page, null))
-    expect(head).toContain("console.log")
+    expect(head).toContain('console.log')
   })
 
-  test("ssr.ts: htmlAttrs and bodyAttrs in result", async () => {
+  test('ssr.ts: htmlAttrs and bodyAttrs in result', async () => {
     function Page() {
       useHead({
-        htmlAttrs: { lang: "en", dir: "ltr" },
-        bodyAttrs: { class: "dark" },
+        htmlAttrs: { lang: 'en', dir: 'ltr' },
+        bodyAttrs: { class: 'dark' },
       })
-      return h("div", null)
+      return h('div', null)
     }
     const { htmlAttrs, bodyAttrs } = await renderWithHead(h(Page, null))
-    expect(htmlAttrs.lang).toBe("en")
-    expect(bodyAttrs.class).toBe("dark")
+    expect(htmlAttrs.lang).toBe('en')
+    expect(bodyAttrs.class).toBe('dark')
   })
 })
 
 // ─── SSR paths via document mocking ──────────────────────────────────────────
 
-describe("useHead — SSR paths (document undefined)", () => {
+describe('useHead — SSR paths (document undefined)', () => {
   const origDoc = globalThis.document
 
   beforeEach(() => {
@@ -1169,19 +1169,21 @@ describe("useHead — SSR paths (document undefined)", () => {
     globalThis.document = origDoc
   })
 
-  test("syncDom is no-op when document is undefined (dom.ts line 13)", async () => {
-    const { syncDom } = await import("../dom")
+  test('syncDom is no-op when document is undefined (dom.ts line 13)', async () => {
+    const { syncDom } = await import('../dom')
     const ctx2 = createHeadContext()
-    ctx2.add(Symbol(), { tags: [{ tag: "meta", key: "test", props: { name: "x", content: "y" } }] })
+    ctx2.add(Symbol(), {
+      tags: [{ tag: 'meta', key: 'test', props: { name: 'x', content: 'y' } }],
+    })
     // Should not throw — early return because document is undefined
     syncDom(ctx2)
   })
 
-  test("useHead static input registers synchronously in SSR (use-head.ts line 88-92)", async () => {
+  test('useHead static input registers synchronously in SSR (use-head.ts line 88-92)', async () => {
     // In SSR (no document), static input doesn't trigger syncDom
-    const { useHead: _uh } = await import("../use-head")
+    const { useHead: _uh } = await import('../use-head')
     // This just verifies the code path doesn't error when document is undefined
     // The actual registration happens via the context
-    expect(typeof document).toBe("undefined")
+    expect(typeof document).toBe('undefined')
   })
 })