@pyreon/runtime-dom 0.11.5 → 0.11.7

package/src/tests/mount.test.ts

@@ -1,4 +1,4 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
 import {
   ErrorBoundary as _ErrorBoundary,
   createRef,
@@ -14,9 +14,9 @@ import {
   Portal,
   Show,
   Switch,
-} from "@pyreon/core"
-import { cell, signal } from "@pyreon/reactivity"
-import { installDevTools, registerComponent, unregisterComponent } from "../devtools"
+} from '@pyreon/core'
+import { cell, signal } from '@pyreon/reactivity'
+import { installDevTools, registerComponent, unregisterComponent } from '../devtools'
 import {
   KeepAlive as _KeepAlive,
   Transition as _Transition,
@@ -28,8 +28,8 @@ import {
   mount,
   sanitizeHtml,
   setSanitizer,
-} from "../index"
-import { mountChild } from "../mount"
+} from '../index'
+import { mountChild } from '../mount'
 
 // Cast components that return VNodeChild (not VNode | null) so h() accepts them
 const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>>
@@ -38,178 +38,178 @@ const ErrorBoundary = _ErrorBoundary as unknown as ComponentFn<Record<string, un
 const KeepAlive = _KeepAlive as unknown as ComponentFn<Record<string, unknown>>
 
 function container(): HTMLElement {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   document.body.appendChild(el)
   return el
 }
 
 // ─── Static mounting ─────────────────────────────────────────────────────────
 
-describe("mount — static", () => {
-  test("mounts a text node", () => {
+describe('mount — static', () => {
+  test('mounts a text node', () => {
     const el = container()
-    mount("hello", el)
-    expect(el.textContent).toBe("hello")
+    mount('hello', el)
+    expect(el.textContent).toBe('hello')
   })
 
-  test("mounts a number as text", () => {
+  test('mounts a number as text', () => {
     const el = container()
     mount(42, el)
-    expect(el.textContent).toBe("42")
+    expect(el.textContent).toBe('42')
   })
 
-  test("mounts a simple element", () => {
+  test('mounts a simple element', () => {
     const el = container()
-    mount(h("span", null, "world"), el)
-    expect(el.innerHTML).toBe("<span>world</span>")
+    mount(h('span', null, 'world'), el)
+    expect(el.innerHTML).toBe('<span>world</span>')
   })
 
-  test("mounts nested elements", () => {
+  test('mounts nested elements', () => {
     const el = container()
-    mount(h("div", null, h("p", null, "nested")), el)
-    expect(el.querySelector("p")?.textContent).toBe("nested")
+    mount(h('div', null, h('p', null, 'nested')), el)
+    expect(el.querySelector('p')?.textContent).toBe('nested')
   })
 
-  test("mounts null / undefined / false as nothing", () => {
+  test('mounts null / undefined / false as nothing', () => {
     const el = container()
     mount(null, el)
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
     mount(undefined, el)
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
     mount(false, el)
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 
-  test("mounts a Fragment", () => {
+  test('mounts a Fragment', () => {
     const el = container()
-    mount(h(Fragment, null, h("span", null, "a"), h("span", null, "b")), el)
-    expect(el.querySelectorAll("span").length).toBe(2)
+    mount(h(Fragment, null, h('span', null, 'a'), h('span', null, 'b')), el)
+    expect(el.querySelectorAll('span').length).toBe(2)
   })
 })
 
 // ─── Props ────────────────────────────────────────────────────────────────────
 
-describe("mount — props", () => {
-  test("sets class attribute", () => {
+describe('mount — props', () => {
+  test('sets class attribute', () => {
     const el = container()
-    mount(h("div", { class: "foo bar" }), el)
-    expect(el.querySelector("div")?.className).toBe("foo bar")
+    mount(h('div', { class: 'foo bar' }), el)
+    expect(el.querySelector('div')?.className).toBe('foo bar')
   })
 
-  test("sets arbitrary attribute", () => {
+  test('sets arbitrary attribute', () => {
     const el = container()
-    mount(h("div", { "data-id": "123" }), el)
-    expect(el.querySelector("div")?.getAttribute("data-id")).toBe("123")
+    mount(h('div', { 'data-id': '123' }), el)
+    expect(el.querySelector('div')?.getAttribute('data-id')).toBe('123')
   })
 
-  test("removes attribute when value is null", () => {
+  test('removes attribute when value is null', () => {
     const el = container()
-    mount(h("div", { "data-x": null }), el)
-    expect(el.querySelector("div")?.hasAttribute("data-x")).toBe(false)
+    mount(h('div', { 'data-x': null }), el)
+    expect(el.querySelector('div')?.hasAttribute('data-x')).toBe(false)
   })
 
-  test("attaches event listener", () => {
+  test('attaches event listener', () => {
     const el = container()
     let clicked = false
     mount(
       h(
-        "button",
+        'button',
         {
           onClick: () => {
             clicked = true
           },
         },
-        "click me",
+        'click me',
       ),
       el,
     )
-    el.querySelector("button")?.click()
+    el.querySelector('button')?.click()
     expect(clicked).toBe(true)
   })
 })
 
 // ─── Reactive props & children ────────────────────────────────────────────────
 
-describe("mount — reactive", () => {
-  test("reactive text child updates", () => {
+describe('mount — reactive', () => {
+  test('reactive text child updates', () => {
     const el = container()
-    const text = signal("hello")
+    const text = signal('hello')
     mount(
-      h("div", null, () => text()),
+      h('div', null, () => text()),
       el,
     )
-    expect(el.querySelector("div")?.textContent).toBe("hello")
-    text.set("world")
-    expect(el.querySelector("div")?.textContent).toBe("world")
+    expect(el.querySelector('div')?.textContent).toBe('hello')
+    text.set('world')
+    expect(el.querySelector('div')?.textContent).toBe('world')
   })
 
-  test("reactive class prop updates", () => {
+  test('reactive class prop updates', () => {
     const el = container()
-    const cls = signal("a")
-    mount(h("div", { class: () => cls() }), el)
-    expect(el.querySelector("div")?.className).toBe("a")
-    cls.set("b")
-    expect(el.querySelector("div")?.className).toBe("b")
+    const cls = signal('a')
+    mount(h('div', { class: () => cls() }), el)
+    expect(el.querySelector('div')?.className).toBe('a')
+    cls.set('b')
+    expect(el.querySelector('div')?.className).toBe('b')
   })
 })
 
 // ─── Components ───────────────────────────────────────────────────────────────
 
-describe("mount — components", () => {
-  test("mounts a functional component", () => {
+describe('mount — components', () => {
+  test('mounts a functional component', () => {
     const Greeting = defineComponent(({ name }: { name: string }) =>
-      h("p", null, `Hello, ${name}!`),
+      h('p', null, `Hello, ${name}!`),
     )
     const el = container()
-    mount(h(Greeting, { name: "Pyreon" }), el)
-    expect(el.querySelector("p")?.textContent).toBe("Hello, Pyreon!")
+    mount(h(Greeting, { name: 'Pyreon' }), el)
+    expect(el.querySelector('p')?.textContent).toBe('Hello, Pyreon!')
   })
 
-  test("component with reactive state updates DOM", () => {
+  test('component with reactive state updates DOM', () => {
     const Counter = defineComponent(() => {
       const count = signal(0)
       return h(
-        "div",
+        'div',
         null,
-        h("span", null, () => String(count())),
-        h("button", { onClick: () => count.update((n) => n + 1) }, "+"),
+        h('span', null, () => String(count())),
+        h('button', { onClick: () => count.update((n) => n + 1) }, '+'),
       )
     })
     const el = container()
     mount(h(Counter, {}), el)
-    expect(el.querySelector("span")?.textContent).toBe("0")
-    el.querySelector("button")?.click()
-    expect(el.querySelector("span")?.textContent).toBe("1")
-    el.querySelector("button")?.click()
-    expect(el.querySelector("span")?.textContent).toBe("2")
+    expect(el.querySelector('span')?.textContent).toBe('0')
+    el.querySelector('button')?.click()
+    expect(el.querySelector('span')?.textContent).toBe('1')
+    el.querySelector('button')?.click()
+    expect(el.querySelector('span')?.textContent).toBe('2')
   })
 })
 
 // ─── Unmount ──────────────────────────────────────────────────────────────────
 
-describe("mount — refs", () => {
-  test("ref.current is set after mount", () => {
+describe('mount — refs', () => {
+  test('ref.current is set after mount', () => {
     const el = container()
     const ref = createRef<HTMLButtonElement>()
     expect(ref.current).toBeNull()
-    mount(h("button", { ref }), el)
+    mount(h('button', { ref }), el)
     expect(ref.current).toBeInstanceOf(HTMLButtonElement)
   })
 
-  test("ref.current is cleared after unmount", () => {
+  test('ref.current is cleared after unmount', () => {
     const el = container()
     const ref = createRef<HTMLDivElement>()
-    const unmount = mount(h("div", { ref }), el)
+    const unmount = mount(h('div', { ref }), el)
     expect(ref.current).not.toBeNull()
     unmount()
     expect(ref.current).toBeNull()
   })
 
-  test("callback ref is called with element after mount", () => {
+  test('callback ref is called with element after mount', () => {
     const el = container()
     let refEl: Element | null = null
     mount(
-      h("div", {
+      h('div', {
         ref: (e: Element) => {
           refEl = e
         },
@@ -219,11 +219,11 @@ describe("mount — refs", () => {
     expect(refEl).toBeInstanceOf(HTMLDivElement)
   })
 
-  test("callback ref element is not nulled on unmount", () => {
+  test('callback ref element is not nulled on unmount', () => {
     const el = container()
     let refEl: Element | null = null
     const unmount = mount(
-      h("div", {
+      h('div', {
         ref: (e: Element) => {
           refEl = e
         },
@@ -236,185 +236,185 @@ describe("mount — refs", () => {
     expect(refEl).toBeInstanceOf(HTMLDivElement)
   })
 
-  test("ref is not emitted as an HTML attribute", () => {
+  test('ref is not emitted as an HTML attribute', () => {
     const el = container()
     const ref = createRef<HTMLDivElement>()
-    mount(h("div", { ref }), el)
-    expect(el.firstElementChild?.hasAttribute("ref")).toBe(false)
+    mount(h('div', { ref }), el)
+    expect(el.firstElementChild?.hasAttribute('ref')).toBe(false)
   })
 })
 
-describe("mount — unmount", () => {
-  test("unmount removes mounted nodes", () => {
+describe('mount — unmount', () => {
+  test('unmount removes mounted nodes', () => {
     const el = container()
-    const unmount = mount(h("div", null, "bye"), el)
-    expect(el.innerHTML).not.toBe("")
+    const unmount = mount(h('div', null, 'bye'), el)
+    expect(el.innerHTML).not.toBe('')
     unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 
-  test("unmount disposes reactive effects", () => {
+  test('unmount disposes reactive effects', () => {
     const el = container()
-    const text = signal("initial")
+    const text = signal('initial')
     const unmount = mount(
-      h("p", null, () => text()),
+      h('p', null, () => text()),
       el,
     )
     unmount()
-    text.set("updated")
+    text.set('updated')
     // After unmount, node is gone — no error thrown, no stale update
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── For ──────────────────────────────────────────────────────────────────────
 
-describe("mount — For", () => {
+describe('mount — For', () => {
   type Item = { id: number; label: string }
 
-  test("renders initial list", () => {
+  test('renders initial list', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(3)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("a")
-    expect(el.querySelectorAll("li")[2]?.textContent).toBe("c")
+    expect(el.querySelectorAll('li').length).toBe(3)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
+    expect(el.querySelectorAll('li')[2]?.textContent).toBe('c')
   })
 
-  test("appends new items", () => {
+  test('appends new items', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "a" }])
+    const items = signal<Item[]>([{ id: 1, label: 'a' }])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(1)
+    expect(el.querySelectorAll('li').length).toBe(1)
     items.set([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[1]?.textContent).toBe("b")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[1]?.textContent).toBe('b')
   })
 
-  test("removes items", () => {
+  test('removes items', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
-    items.set([{ id: 1, label: "a" }])
-    expect(el.querySelectorAll("li").length).toBe(1)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("a")
+    items.set([{ id: 1, label: 'a' }])
+    expect(el.querySelectorAll('li').length).toBe(1)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
   })
 
-  test("swaps two items (small-k fast path)", () => {
+  test('swaps two items (small-k fast path)', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
     items.set([
-      { id: 1, label: "a" },
-      { id: 3, label: "c" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
     ])
-    const lis = el.querySelectorAll("li")
-    expect(lis[0]?.textContent).toBe("a")
-    expect(lis[1]?.textContent).toBe("c")
-    expect(lis[2]?.textContent).toBe("b")
+    const lis = el.querySelectorAll('li')
+    expect(lis[0]?.textContent).toBe('a')
+    expect(lis[1]?.textContent).toBe('c')
+    expect(lis[2]?.textContent).toBe('b')
   })
 
-  test("replaces all items", () => {
+  test('replaces all items', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "old" }])
+    const items = signal<Item[]>([{ id: 1, label: 'old' }])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
-    items.set([{ id: 99, label: "new" }])
-    const lis = el.querySelectorAll("li")
+    items.set([{ id: 99, label: 'new' }])
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(1)
-    expect(lis[0]?.textContent).toBe("new")
+    expect(lis[0]?.textContent).toBe('new')
   })
 
-  test("clears list", () => {
+  test('clears list', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "x" }])
+    const items = signal<Item[]>([{ id: 1, label: 'x' }])
     mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
     items.set([])
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
   })
 
-  test("unmount cleans up", () => {
+  test('unmount cleans up', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "x" }])
+    const items = signal<Item[]>([{ id: 1, label: 'x' }])
     const unmount = mount(
       h(
-        "ul",
+        'ul',
         null,
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
       ),
       el,
     )
     unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── For + NativeItem (createTemplate path — what the benchmark uses) ─────
 
-describe("mount — For + NativeItem (createTemplate)", () => {
+describe('mount — For + NativeItem (createTemplate)', () => {
   type RR = { id: number; label: ReturnType<typeof cell<string>> }
 
   function makeRR(id: number, text: string): RR {
     return { id, label: cell(text) }
   }
 
-  const rowFactory = createTemplate<RR>("<tr><td>\x00</td><td>\x00</td></tr>", (tr, row) => {
+  const rowFactory = createTemplate<RR>('<tr><td>\x00</td><td>\x00</td></tr>', (tr, row) => {
     const td1 = tr.firstChild as HTMLElement
     const td2 = td1.nextSibling as HTMLElement
     const t1 = td1.firstChild as Text
@@ -427,302 +427,302 @@ describe("mount — For + NativeItem (createTemplate)", () => {
     return null
   })
 
-  test("renders initial list with correct text", () => {
+  test('renders initial list with correct text', () => {
     const el = container()
-    const items = signal<RR[]>([makeRR(1, "a"), makeRR(2, "b"), makeRR(3, "c")])
+    const items = signal<RR[]>([makeRR(1, 'a'), makeRR(2, 'b'), makeRR(3, 'c')])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
-    const trs = el.querySelectorAll("tr")
+    const trs = el.querySelectorAll('tr')
     expect(trs.length).toBe(3)
-    expect(trs[0]?.querySelectorAll("td")[1]?.textContent).toBe("a")
-    expect(trs[2]?.querySelectorAll("td")[1]?.textContent).toBe("c")
+    expect(trs[0]?.querySelectorAll('td')[1]?.textContent).toBe('a')
+    expect(trs[2]?.querySelectorAll('td')[1]?.textContent).toBe('c')
   })
 
-  test("cell.set() updates text in-place (partial update)", () => {
+  test('cell.set() updates text in-place (partial update)', () => {
     const el = container()
-    const rows = [makeRR(1, "hello"), makeRR(2, "world")]
+    const rows = [makeRR(1, 'hello'), makeRR(2, 'world')]
     const items = signal<RR[]>(rows)
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
     // Update label via cell — should change DOM without re-rendering list
     const first = rows[0]
-    if (!first) throw new Error("missing row")
-    first.label.set("changed")
-    expect(el.querySelectorAll("tr")[0]?.querySelectorAll("td")[1]?.textContent).toBe("changed")
+    if (!first) throw new Error('missing row')
+    first.label.set('changed')
+    expect(el.querySelectorAll('tr')[0]?.querySelectorAll('td')[1]?.textContent).toBe('changed')
     // Second row untouched
-    expect(el.querySelectorAll("tr")[1]?.querySelectorAll("td")[1]?.textContent).toBe("world")
+    expect(el.querySelectorAll('tr')[1]?.querySelectorAll('td')[1]?.textContent).toBe('world')
   })
 
-  test("replace all rows", () => {
+  test('replace all rows', () => {
     const el = container()
-    const items = signal<RR[]>([makeRR(1, "old")])
+    const items = signal<RR[]>([makeRR(1, 'old')])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
-    items.set([makeRR(10, "new1"), makeRR(11, "new2")])
-    const trs = el.querySelectorAll("tr")
+    items.set([makeRR(10, 'new1'), makeRR(11, 'new2')])
+    const trs = el.querySelectorAll('tr')
     expect(trs.length).toBe(2)
-    expect(trs[0]?.querySelectorAll("td")[0]?.textContent).toBe("10")
-    expect(trs[1]?.querySelectorAll("td")[1]?.textContent).toBe("new2")
+    expect(trs[0]?.querySelectorAll('td')[0]?.textContent).toBe('10')
+    expect(trs[1]?.querySelectorAll('td')[1]?.textContent).toBe('new2')
   })
 
-  test("swap rows preserves DOM identity", () => {
+  test('swap rows preserves DOM identity', () => {
     const el = container()
-    const r1 = makeRR(1, "a")
-    const r2 = makeRR(2, "b")
-    const r3 = makeRR(3, "c")
+    const r1 = makeRR(1, 'a')
+    const r2 = makeRR(2, 'b')
+    const r3 = makeRR(3, 'c')
     const items = signal<RR[]>([r1, r2, r3])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
-    const origTr2 = el.querySelectorAll("tr")[1]
-    const origTr3 = el.querySelectorAll("tr")[2]
+    const origTr2 = el.querySelectorAll('tr')[1]
+    const origTr3 = el.querySelectorAll('tr')[2]
     // Swap positions 1 and 2
     items.set([r1, r3, r2])
-    const trs = el.querySelectorAll("tr")
-    expect(trs[1]?.querySelectorAll("td")[1]?.textContent).toBe("c")
-    expect(trs[2]?.querySelectorAll("td")[1]?.textContent).toBe("b")
+    const trs = el.querySelectorAll('tr')
+    expect(trs[1]?.querySelectorAll('td')[1]?.textContent).toBe('c')
+    expect(trs[2]?.querySelectorAll('td')[1]?.textContent).toBe('b')
     // Same DOM nodes reused, just moved
     expect(trs[1]).toBe(origTr3)
     expect(trs[2]).toBe(origTr2)
   })
 
-  test("clear removes all rows", () => {
+  test('clear removes all rows', () => {
     const el = container()
-    const items = signal<RR[]>([makeRR(1, "x"), makeRR(2, "y")])
+    const items = signal<RR[]>([makeRR(1, 'x'), makeRR(2, 'y')])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
     items.set([])
-    expect(el.querySelectorAll("tr").length).toBe(0)
+    expect(el.querySelectorAll('tr').length).toBe(0)
   })
 
-  test("clear then re-create works", () => {
+  test('clear then re-create works', () => {
     const el = container()
-    const items = signal<RR[]>([makeRR(1, "first")])
+    const items = signal<RR[]>([makeRR(1, 'first')])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
     items.set([])
-    expect(el.querySelectorAll("tr").length).toBe(0)
-    items.set([makeRR(5, "back")])
-    expect(el.querySelectorAll("tr").length).toBe(1)
-    expect(el.querySelectorAll("td")[1]?.textContent).toBe("back")
+    expect(el.querySelectorAll('tr').length).toBe(0)
+    items.set([makeRR(5, 'back')])
+    expect(el.querySelectorAll('tr').length).toBe(1)
+    expect(el.querySelectorAll('td')[1]?.textContent).toBe('back')
   })
 
-  test("append items to existing list", () => {
+  test('append items to existing list', () => {
     const el = container()
-    const r1 = makeRR(1, "a")
+    const r1 = makeRR(1, 'a')
     const items = signal<RR[]>([r1])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
-    items.set([r1, makeRR(2, "b"), makeRR(3, "c")])
-    expect(el.querySelectorAll("tr").length).toBe(3)
-    expect(el.querySelectorAll("tr")[2]?.querySelectorAll("td")[1]?.textContent).toBe("c")
+    items.set([r1, makeRR(2, 'b'), makeRR(3, 'c')])
+    expect(el.querySelectorAll('tr').length).toBe(3)
+    expect(el.querySelectorAll('tr')[2]?.querySelectorAll('td')[1]?.textContent).toBe('c')
   })
 
-  test("remove items from middle", () => {
+  test('remove items from middle', () => {
     const el = container()
-    const r1 = makeRR(1, "a")
-    const r2 = makeRR(2, "b")
-    const r3 = makeRR(3, "c")
+    const r1 = makeRR(1, 'a')
+    const r2 = makeRR(2, 'b')
+    const r3 = makeRR(3, 'c')
     const items = signal<RR[]>([r1, r2, r3])
     mount(
       h(
-        "table",
+        'table',
         null,
-        h("tbody", null, For({ each: items, by: (r) => r.id, children: rowFactory })),
+        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
       ),
       el,
     )
     items.set([r1, r3])
-    const trs = el.querySelectorAll("tr")
+    const trs = el.querySelectorAll('tr')
     expect(trs.length).toBe(2)
-    expect(trs[0]?.querySelectorAll("td")[1]?.textContent).toBe("a")
-    expect(trs[1]?.querySelectorAll("td")[1]?.textContent).toBe("c")
+    expect(trs[0]?.querySelectorAll('td')[1]?.textContent).toBe('a')
+    expect(trs[1]?.querySelectorAll('td')[1]?.textContent).toBe('c')
   })
 })
 
 // ─── Portal ───────────────────────────────────────────────────────────────────
 
-describe("mount — Portal", () => {
-  test("renders into target instead of parent", () => {
+describe('mount — Portal', () => {
+  test('renders into target instead of parent', () => {
     const src = container()
     const target = container()
-    mount(Portal({ target, children: h("span", null, "portaled") }), src)
+    mount(Portal({ target, children: h('span', null, 'portaled') }), src)
     // content appears in target, not in src
-    expect(target.querySelector("span")?.textContent).toBe("portaled")
-    expect(src.querySelector("span")).toBeNull()
+    expect(target.querySelector('span')?.textContent).toBe('portaled')
+    expect(src.querySelector('span')).toBeNull()
   })
 
-  test("unmount removes content from target", () => {
+  test('unmount removes content from target', () => {
     const src = container()
     const target = container()
-    const unmount = mount(Portal({ target, children: h("p", null, "bye") }), src)
-    expect(target.querySelector("p")).not.toBeNull()
+    const unmount = mount(Portal({ target, children: h('p', null, 'bye') }), src)
+    expect(target.querySelector('p')).not.toBeNull()
     unmount()
-    expect(target.querySelector("p")).toBeNull()
+    expect(target.querySelector('p')).toBeNull()
   })
 
-  test("portal content updates reactively", () => {
+  test('portal content updates reactively', () => {
     const src = container()
     const target = container()
-    const text = signal("hello")
-    mount(Portal({ target, children: h("span", null, () => text()) }), src)
-    expect(target.querySelector("span")?.textContent).toBe("hello")
-    text.set("world")
-    expect(target.querySelector("span")?.textContent).toBe("world")
+    const text = signal('hello')
+    mount(Portal({ target, children: h('span', null, () => text()) }), src)
+    expect(target.querySelector('span')?.textContent).toBe('hello')
+    text.set('world')
+    expect(target.querySelector('span')?.textContent).toBe('world')
   })
 
-  test("portal inside component renders into target", () => {
+  test('portal inside component renders into target', () => {
     const src = container()
     const target = container()
-    const Modal = () => Portal({ target, children: h("dialog", null, "modal content") })
+    const Modal = () => Portal({ target, children: h('dialog', null, 'modal content') })
     mount(h(Modal, null), src)
-    expect(target.querySelector("dialog")?.textContent).toBe("modal content")
-    expect(src.querySelector("dialog")).toBeNull()
+    expect(target.querySelector('dialog')?.textContent).toBe('modal content')
+    expect(src.querySelector('dialog')).toBeNull()
   })
 
-  test("portal re-mount after unmount works correctly", () => {
+  test('portal re-mount after unmount works correctly', () => {
     const src = container()
     const target = container()
-    const unmount1 = mount(Portal({ target, children: h("span", null, "first") }), src)
-    expect(target.querySelector("span")?.textContent).toBe("first")
+    const unmount1 = mount(Portal({ target, children: h('span', null, 'first') }), src)
+    expect(target.querySelector('span')?.textContent).toBe('first')
     unmount1()
-    expect(target.querySelector("span")).toBeNull()
+    expect(target.querySelector('span')).toBeNull()
     // Re-mount into same target
-    const unmount2 = mount(Portal({ target, children: h("span", null, "second") }), src)
-    expect(target.querySelector("span")?.textContent).toBe("second")
+    const unmount2 = mount(Portal({ target, children: h('span', null, 'second') }), src)
+    expect(target.querySelector('span')?.textContent).toBe('second')
     unmount2()
-    expect(target.querySelector("span")).toBeNull()
+    expect(target.querySelector('span')).toBeNull()
   })
 
-  test("multiple portals into same target", () => {
+  test('multiple portals into same target', () => {
     const src = container()
     const target = container()
-    const unmount1 = mount(Portal({ target, children: h("span", { class: "a" }, "A") }), src)
-    const unmount2 = mount(Portal({ target, children: h("span", { class: "b" }, "B") }), src)
-    expect(target.querySelectorAll("span").length).toBe(2)
-    expect(target.querySelector(".a")?.textContent).toBe("A")
-    expect(target.querySelector(".b")?.textContent).toBe("B")
+    const unmount1 = mount(Portal({ target, children: h('span', { class: 'a' }, 'A') }), src)
+    const unmount2 = mount(Portal({ target, children: h('span', { class: 'b' }, 'B') }), src)
+    expect(target.querySelectorAll('span').length).toBe(2)
+    expect(target.querySelector('.a')?.textContent).toBe('A')
+    expect(target.querySelector('.b')?.textContent).toBe('B')
     unmount1()
-    expect(target.querySelectorAll("span").length).toBe(1)
-    expect(target.querySelector(".b")?.textContent).toBe("B")
+    expect(target.querySelectorAll('span').length).toBe(1)
+    expect(target.querySelector('.b')?.textContent).toBe('B')
     unmount2()
-    expect(target.querySelectorAll("span").length).toBe(0)
+    expect(target.querySelectorAll('span').length).toBe(0)
   })
 
-  test("portal with reactive Show toggle", () => {
+  test('portal with reactive Show toggle', () => {
     const src = container()
     const target = container()
     const visible = signal(true)
     mount(
-      h("div", null, () =>
-        visible() ? Portal({ target, children: h("span", null, "vis") }) : null,
+      h('div', null, () =>
+        visible() ? Portal({ target, children: h('span', null, 'vis') }) : null,
       ),
       src,
     )
-    expect(target.querySelector("span")?.textContent).toBe("vis")
+    expect(target.querySelector('span')?.textContent).toBe('vis')
     visible.set(false)
-    expect(target.querySelector("span")).toBeNull()
+    expect(target.querySelector('span')).toBeNull()
     visible.set(true)
-    expect(target.querySelector("span")?.textContent).toBe("vis")
+    expect(target.querySelector('span')?.textContent).toBe('vis')
   })
 })
 
 // ─── ErrorBoundary ────────────────────────────────────────────────────────────
 
-describe("ErrorBoundary", () => {
-  test("renders fallback when child throws", () => {
+describe('ErrorBoundary', () => {
+  test('renders fallback when child throws', () => {
     const el = container()
     function Broken(): never {
-      throw new Error("boom")
+      throw new Error('boom')
     }
     mount(
       h(ErrorBoundary, {
-        fallback: (err: unknown) => h("p", { id: "fb" }, String(err)),
+        fallback: (err: unknown) => h('p', { id: 'fb' }, String(err)),
         children: h(Broken, null),
       }),
       el,
     )
-    expect(el.querySelector("#fb")?.textContent).toContain("boom")
+    expect(el.querySelector('#fb')?.textContent).toContain('boom')
   })
 
-  test("renders children when no error", () => {
+  test('renders children when no error', () => {
     const el = container()
     function Fine() {
-      return h("p", { id: "ok" }, "works")
+      return h('p', { id: 'ok' }, 'works')
     }
     mount(
       h(ErrorBoundary, {
-        fallback: () => h("p", null, "error"),
+        fallback: () => h('p', null, 'error'),
         children: h(Fine, null),
       }),
       el,
     )
-    expect(el.querySelector("#ok")?.textContent).toBe("works")
+    expect(el.querySelector('#ok')?.textContent).toBe('works')
   })
 
-  test("reset() clears error and re-renders children", () => {
+  test('reset() clears error and re-renders children', () => {
     const el = container()
     let shouldThrow = true
 
     function MaybeThrow() {
-      if (shouldThrow) throw new Error("recoverable")
-      return h("p", { id: "recovered" }, "back")
+      if (shouldThrow) throw new Error('recoverable')
+      return h('p', { id: 'recovered' }, 'back')
     }
 
     mount(
       h(ErrorBoundary, {
         fallback: (_err: unknown, reset: () => void) =>
           h(
-            "button",
+            'button',
             {
-              id: "retry",
+              id: 'retry',
               onClick: () => {
                 shouldThrow = false
                 reset()
               },
             },
-            "retry",
+            'retry',
           ),
         children: h(MaybeThrow, null),
       }),
@@ -730,77 +730,77 @@ describe("ErrorBoundary", () => {
     )
 
     // Fallback rendered
-    expect(el.querySelector("#retry")).not.toBeNull()
-    expect(el.querySelector("#recovered")).toBeNull()
+    expect(el.querySelector('#retry')).not.toBeNull()
+    expect(el.querySelector('#recovered')).toBeNull()
 
     // Click retry — reset() fires, shouldThrow is false, children re-render
-    ;(el.querySelector("#retry") as HTMLButtonElement).click()
+    ;(el.querySelector('#retry') as HTMLButtonElement).click()
 
-    expect(el.querySelector("#recovered")?.textContent).toBe("back")
-    expect(el.querySelector("#retry")).toBeNull()
+    expect(el.querySelector('#recovered')?.textContent).toBe('back')
+    expect(el.querySelector('#retry')).toBeNull()
   })
 
-  test("reset() with signal-driven children", () => {
+  test('reset() with signal-driven children', () => {
     const el = container()
     const broken = signal(true)
 
     function Reactive() {
-      if (broken()) throw new Error("signal error")
-      return h("p", { id: "signal-ok" }, "fixed")
+      if (broken()) throw new Error('signal error')
+      return h('p', { id: 'signal-ok' }, 'fixed')
     }
 
     mount(
       h(ErrorBoundary, {
         fallback: (_err: unknown, reset: () => void) =>
           h(
-            "button",
+            'button',
             {
-              id: "fix",
+              id: 'fix',
               onClick: () => {
                 broken.set(false)
                 reset()
               },
             },
-            "fix",
+            'fix',
           ),
         children: h(Reactive, null),
       }),
       el,
     )
 
-    expect(el.querySelector("#fix")).not.toBeNull()
-    ;(el.querySelector("#fix") as HTMLButtonElement).click()
-    expect(el.querySelector("#signal-ok")?.textContent).toBe("fixed")
+    expect(el.querySelector('#fix')).not.toBeNull()
+    ;(el.querySelector('#fix') as HTMLButtonElement).click()
+    expect(el.querySelector('#signal-ok')?.textContent).toBe('fixed')
   })
 })
 
 // ─── Transition component ─────────────────────────────────────────────────────
 
-describe("Transition", () => {
-  test("mounts child when show starts true", () => {
+describe('Transition', () => {
+  test('mounts child when show starts true', () => {
     const el = container()
     const visible = signal(true)
-    mount(h(Transition, { show: visible, children: h("div", { id: "target" }, "hi") }), el)
-    expect(el.querySelector("#target")).not.toBeNull()
+    mount(h(Transition, { show: visible, children: h('div', { id: 'target' }, 'hi') }), el)
+    expect(el.querySelector('#target')).not.toBeNull()
   })
 
-  test("does not mount child when show starts false", () => {
+  test('does not mount child when show starts false', () => {
     const el = container()
     const visible = signal(false)
-    mount(h(Transition, { show: visible, children: h("div", { id: "target" }, "hi") }), el)
-    expect(el.querySelector("#target")).toBeNull()
+    mount(h(Transition, { show: visible, children: h('div', { id: 'target' }, 'hi') }), el)
+    expect(el.querySelector('#target')).toBeNull()
   })
 
-  test("mounts child reactively when show becomes true", () => {
+  test('mounts child reactively when show becomes true', () => {
     const el = container()
     const visible = signal(false)
-    mount(h(Transition, { show: visible, children: h("div", { id: "target" }, "hi") }), el)
-    expect(el.querySelector("#target")).toBeNull()
+    mount(h(Transition, { show: visible, children: h('div', { id: 'target' }, 'hi') }), el)
+    expect(el.querySelector('#target')).toBeNull()
     visible.set(true)
-    expect(el.querySelector("#target")).not.toBeNull()
+    expect(el.querySelector('#target')).not.toBeNull()
   })
 
-  test("calls onBeforeEnter when entering", async () => {
+  test('calls onBeforeEnter when entering', async () => {
     const el = container()
     const visible = signal(false)
     let called = false
@@ -810,7 +810,7 @@ describe("Transition", () => {
         onBeforeEnter: () => {
           called = true
         },
-        children: h("div", { id: "t" }),
+        children: h('div', { id: 't' }),
       }),
       el,
     )
@@ -823,190 +823,190 @@ describe("Transition", () => {
 
 // ─── Show component ───────────────────────────────────────────────────────────
 
-describe("Show", () => {
-  test("renders children when when() is truthy", () => {
+describe('Show', () => {
+  test('renders children when when() is truthy', () => {
     const el = container()
-    mount(h(Show, { when: () => true }, h("span", { id: "s" }, "yes")), el)
-    expect(el.querySelector("#s")).not.toBeNull()
+    mount(h(Show, { when: () => true }, h('span', { id: 's' }, 'yes')), el)
+    expect(el.querySelector('#s')).not.toBeNull()
   })
 
-  test("renders fallback when when() is falsy", () => {
+  test('renders fallback when when() is falsy', () => {
     const el = container()
     mount(
       h(
         Show,
-        { when: () => false, fallback: h("span", { id: "fb" }, "no") },
-        h("span", { id: "s" }, "yes"),
+        { when: () => false, fallback: h('span', { id: 'fb' }, 'no') },
+        h('span', { id: 's' }, 'yes'),
       ),
       el,
     )
-    expect(el.querySelector("#s")).toBeNull()
-    expect(el.querySelector("#fb")).not.toBeNull()
+    expect(el.querySelector('#s')).toBeNull()
+    expect(el.querySelector('#fb')).not.toBeNull()
   })
 
-  test("reactively toggles on signal change", () => {
+  test('reactively toggles on signal change', () => {
     const el = container()
     const show = signal(false)
-    mount(h(Show, { when: show }, h("div", { id: "t" }, "visible")), el)
-    expect(el.querySelector("#t")).toBeNull()
+    mount(h(Show, { when: show }, h('div', { id: 't' }, 'visible')), el)
+    expect(el.querySelector('#t')).toBeNull()
     show.set(true)
-    expect(el.querySelector("#t")).not.toBeNull()
+    expect(el.querySelector('#t')).not.toBeNull()
     show.set(false)
-    expect(el.querySelector("#t")).toBeNull()
+    expect(el.querySelector('#t')).toBeNull()
   })
 
-  test("renders nothing when falsy and no fallback", () => {
+  test('renders nothing when falsy and no fallback', () => {
     const el = container()
-    mount(h(Show, { when: () => false }, h("div", null, "hi")), el)
-    expect(el.textContent).toBe("")
+    mount(h(Show, { when: () => false }, h('div', null, 'hi')), el)
+    expect(el.textContent).toBe('')
   })
 })
 
 // ─── Switch / Match components ────────────────────────────────────────────────
 
-describe("Switch / Match", () => {
-  test("renders first matching branch", () => {
+describe('Switch / Match', () => {
+  test('renders first matching branch', () => {
     const el = container()
-    const route = signal("home")
+    const route = signal('home')
     mount(
       h(
         Switch,
-        { fallback: h("span", { id: "notfound" }) },
-        h(Match, { when: () => route() === "home" }, h("span", { id: "home" })),
-        h(Match, { when: () => route() === "about" }, h("span", { id: "about" })),
+        { fallback: h('span', { id: 'notfound' }) },
+        h(Match, { when: () => route() === 'home' }, h('span', { id: 'home' })),
+        h(Match, { when: () => route() === 'about' }, h('span', { id: 'about' })),
       ),
       el,
     )
-    expect(el.querySelector("#home")).not.toBeNull()
-    expect(el.querySelector("#about")).toBeNull()
-    expect(el.querySelector("#notfound")).toBeNull()
+    expect(el.querySelector('#home')).not.toBeNull()
+    expect(el.querySelector('#about')).toBeNull()
+    expect(el.querySelector('#notfound')).toBeNull()
   })
 
-  test("renders fallback when no match", () => {
+  test('renders fallback when no match', () => {
     const el = container()
-    const route = signal("other")
+    const route = signal('other')
     mount(
       h(
         Switch,
-        { fallback: h("span", { id: "notfound" }) },
-        h(Match, { when: () => route() === "home" }, h("span", { id: "home" })),
+        { fallback: h('span', { id: 'notfound' }) },
+        h(Match, { when: () => route() === 'home' }, h('span', { id: 'home' })),
       ),
       el,
     )
-    expect(el.querySelector("#notfound")).not.toBeNull()
-    expect(el.querySelector("#home")).toBeNull()
+    expect(el.querySelector('#notfound')).not.toBeNull()
+    expect(el.querySelector('#home')).toBeNull()
   })
 
-  test("switches branch reactively", () => {
+  test('switches branch reactively', () => {
     const el = container()
-    const route = signal("home")
+    const route = signal('home')
     mount(
       h(
         Switch,
-        { fallback: h("span", { id: "notfound" }) },
-        h(Match, { when: () => route() === "home" }, h("span", { id: "home" })),
-        h(Match, { when: () => route() === "about" }, h("span", { id: "about" })),
+        { fallback: h('span', { id: 'notfound' }) },
+        h(Match, { when: () => route() === 'home' }, h('span', { id: 'home' })),
+        h(Match, { when: () => route() === 'about' }, h('span', { id: 'about' })),
       ),
       el,
     )
-    expect(el.querySelector("#home")).not.toBeNull()
-    route.set("about")
-    expect(el.querySelector("#home")).toBeNull()
-    expect(el.querySelector("#about")).not.toBeNull()
-    route.set("other")
-    expect(el.querySelector("#notfound")).not.toBeNull()
+    expect(el.querySelector('#home')).not.toBeNull()
+    route.set('about')
+    expect(el.querySelector('#home')).toBeNull()
+    expect(el.querySelector('#about')).not.toBeNull()
+    route.set('other')
+    expect(el.querySelector('#notfound')).not.toBeNull()
   })
 })
 
 // ─── Props (extended coverage) ───────────────────────────────────────────────
 
-describe("mount — props (extended)", () => {
-  test("style as string sets cssText", () => {
+describe('mount — props (extended)', () => {
+  test('style as string sets cssText', () => {
     const el = container()
-    mount(h("div", { style: "color: red; font-size: 14px" }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.style.color).toBe("red")
-    expect(div.style.fontSize).toBe("14px")
+    mount(h('div', { style: 'color: red; font-size: 14px' }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.style.color).toBe('red')
+    expect(div.style.fontSize).toBe('14px')
   })
 
-  test("style as object sets individual properties", () => {
+  test('style as object sets individual properties', () => {
     const el = container()
-    mount(h("div", { style: { color: "blue", marginTop: "10px" } }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.style.color).toBe("blue")
-    expect(div.style.marginTop).toBe("10px")
+    mount(h('div', { style: { color: 'blue', marginTop: '10px' } }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.style.color).toBe('blue')
+    expect(div.style.marginTop).toBe('10px')
   })
 
-  test("style object auto-appends px to numeric values", () => {
+  test('style object auto-appends px to numeric values', () => {
     const el = container()
-    mount(h("div", { style: { height: 100, marginTop: 20, opacity: 0.5, zIndex: 10 } }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.style.height).toBe("100px")
-    expect(div.style.marginTop).toBe("20px")
-    expect(div.style.opacity).toBe("0.5")
-    expect(div.style.zIndex).toBe("10")
+    mount(h('div', { style: { height: 100, marginTop: 20, opacity: 0.5, zIndex: 10 } }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.style.height).toBe('100px')
+    expect(div.style.marginTop).toBe('20px')
+    expect(div.style.opacity).toBe('0.5')
+    expect(div.style.zIndex).toBe('10')
   })
 
-  test("style object handles CSS custom properties", () => {
+  test('style object handles CSS custom properties', () => {
     const el = container()
-    mount(h("div", { style: { "--my-color": "red" } }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.style.getPropertyValue("--my-color")).toBe("red")
+    mount(h('div', { style: { '--my-color': 'red' } }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.style.getPropertyValue('--my-color')).toBe('red')
   })
 
-  test("className sets class attribute", () => {
+  test('className sets class attribute', () => {
     const el = container()
-    mount(h("div", { className: "my-class" }), el)
-    expect(el.querySelector("div")?.getAttribute("class")).toBe("my-class")
+    mount(h('div', { className: 'my-class' }), el)
+    expect(el.querySelector('div')?.getAttribute('class')).toBe('my-class')
   })
 
-  test("class null sets empty class", () => {
+  test('class null sets empty class', () => {
     const el = container()
-    mount(h("div", { class: null }), el)
-    expect(el.querySelector("div")?.getAttribute("class")).toBe("")
+    mount(h('div', { class: null }), el)
+    expect(el.querySelector('div')?.getAttribute('class')).toBe('')
   })
 
-  test("boolean attribute true sets empty attr", () => {
+  test('boolean attribute true sets empty attr', () => {
     const el = container()
-    mount(h("input", { disabled: true }), el)
-    const input = el.querySelector("input") as HTMLInputElement
+    mount(h('input', { disabled: true }), el)
+    const input = el.querySelector('input') as HTMLInputElement
     expect(input.disabled).toBe(true)
   })
 
-  test("boolean attribute false removes attr", () => {
+  test('boolean attribute false removes attr', () => {
     const el = container()
-    mount(h("input", { disabled: false }), el)
-    const input = el.querySelector("input") as HTMLInputElement
+    mount(h('input', { disabled: false }), el)
+    const input = el.querySelector('input') as HTMLInputElement
     expect(input.disabled).toBe(false)
   })
 
-  test("event handler receives event object", () => {
+  test('event handler receives event object', () => {
     const el = container()
     let receivedEvent: Event | null = null
     mount(
       h(
-        "button",
+        'button',
         {
           onClick: (e: Event) => {
             receivedEvent = e
           },
         },
-        "click",
+        'click',
       ),
       el,
     )
-    el.querySelector("button")?.click()
+    el.querySelector('button')?.click()
     expect(receivedEvent).not.toBeNull()
     expect(receivedEvent).toBeInstanceOf(Event)
   })
 
-  test("multiple event handlers on same element", () => {
+  test('multiple event handlers on same element', () => {
     const el = container()
     let mouseDown = false
     let mouseUp = false
     mount(
       h(
-        "div",
+        'div',
         {
           onMousedown: () => {
             mouseDown = true
@@ -1015,212 +1015,212 @@ describe("mount — props (extended)", () => {
             mouseUp = true
           },
         },
-        "target",
+        'target',
       ),
       el,
     )
-    const div = el.querySelector("div") as HTMLElement
-    div.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }))
-    div.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }))
+    const div = el.querySelector('div') as HTMLElement
+    div.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    div.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
     expect(mouseDown).toBe(true)
     expect(mouseUp).toBe(true)
   })
 
-  test("event handler cleanup on unmount", () => {
+  test('event handler cleanup on unmount', () => {
     const el = container()
     let count = 0
     const unmount = mount(
       h(
-        "button",
+        'button',
         {
           onClick: () => {
             count++
           },
         },
-        "click",
+        'click',
       ),
       el,
     )
-    el.querySelector("button")?.click()
+    el.querySelector('button')?.click()
     expect(count).toBe(1)
     unmount()
     // Button removed from DOM so click won't reach it
     expect(count).toBe(1)
   })
 
-  test("sanitizes javascript: in href", () => {
+  test('sanitizes javascript: in href', () => {
     const el = container()
-    mount(h("a", { href: "javascript:alert(1)" }), el)
-    const a = el.querySelector("a") as HTMLAnchorElement
+    mount(h('a', { href: 'javascript:alert(1)' }), el)
+    const a = el.querySelector('a') as HTMLAnchorElement
     // Should not have the dangerous href set
-    expect(a.getAttribute("href")).not.toBe("javascript:alert(1)")
+    expect(a.getAttribute('href')).not.toBe('javascript:alert(1)')
   })
 
-  test("sanitizes data: in src", () => {
+  test('sanitizes data: in src', () => {
     const el = container()
-    mount(h("img", { src: "data:text/html,<script>alert(1)</script>" }), el)
-    const img = el.querySelector("img") as HTMLImageElement
-    expect(img.getAttribute("src")).not.toBe("data:text/html,<script>alert(1)</script>")
+    mount(h('img', { src: 'data:text/html,<script>alert(1)</script>' }), el)
+    const img = el.querySelector('img') as HTMLImageElement
+    expect(img.getAttribute('src')).not.toBe('data:text/html,<script>alert(1)</script>')
   })
 
-  test("allows safe href values", () => {
+  test('allows safe href values', () => {
     const el = container()
-    mount(h("a", { href: "https://example.com" }), el)
-    const a = el.querySelector("a") as HTMLAnchorElement
-    expect(a.href).toContain("https://example.com")
+    mount(h('a', { href: 'https://example.com' }), el)
+    const a = el.querySelector('a') as HTMLAnchorElement
+    expect(a.href).toContain('https://example.com')
   })
 
-  test("innerHTML sets content", () => {
+  test('innerHTML sets content', () => {
     const el = container()
-    mount(h("div", { innerHTML: "<b>bold</b>" }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.innerHTML).toBe("<b>bold</b>")
+    mount(h('div', { innerHTML: '<b>bold</b>' }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.innerHTML).toBe('<b>bold</b>')
   })
 
-  test("dangerouslySetInnerHTML sets __html content", () => {
+  test('dangerouslySetInnerHTML sets __html content', () => {
     const el = container()
-    mount(h("div", { dangerouslySetInnerHTML: { __html: "<em>raw</em>" } }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.innerHTML).toBe("<em>raw</em>")
+    mount(h('div', { dangerouslySetInnerHTML: { __html: '<em>raw</em>' } }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.innerHTML).toBe('<em>raw</em>')
   })
 
-  test("reactive style updates", () => {
+  test('reactive style updates', () => {
     const el = container()
-    const color = signal("red")
-    mount(h("div", { style: () => `color: ${color()}` }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.style.color).toBe("red")
-    color.set("blue")
-    expect(div.style.color).toBe("blue")
+    const color = signal('red')
+    mount(h('div', { style: () => `color: ${color()}` }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.style.color).toBe('red')
+    color.set('blue')
+    expect(div.style.color).toBe('blue')
   })
 
-  test("DOM property (value) set via prop", () => {
+  test('DOM property (value) set via prop', () => {
     const el = container()
-    mount(h("input", { value: "hello" }), el)
-    const input = el.querySelector("input") as HTMLInputElement
-    expect(input.value).toBe("hello")
+    mount(h('input', { value: 'hello' }), el)
+    const input = el.querySelector('input') as HTMLInputElement
+    expect(input.value).toBe('hello')
   })
 
-  test("data-* attributes set correctly", () => {
+  test('data-* attributes set correctly', () => {
     const el = container()
-    mount(h("div", { "data-testid": "foo", "data-count": "42" }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.getAttribute("data-testid")).toBe("foo")
-    expect(div.getAttribute("data-count")).toBe("42")
+    mount(h('div', { 'data-testid': 'foo', 'data-count': '42' }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.getAttribute('data-testid')).toBe('foo')
+    expect(div.getAttribute('data-count')).toBe('42')
   })
 })
 
 // ─── Keyed list (nodes.ts) — additional reorder patterns ────────────────────
 
-describe("mount — For keyed list reorder patterns", () => {
+describe('mount — For keyed list reorder patterns', () => {
   type Item = { id: number; label: string }
 
   function mountList(el: HTMLElement, items: ReturnType<typeof signal<Item[]>>) {
     mount(
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r) => r.id,
-          children: (r) => h("li", { key: r.id }, r.label),
+          children: (r) => h('li', { key: r.id }, r.label),
         }),
       ),
       el,
     )
   }
 
-  test("reverse order", () => {
+  test('reverse order', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
-      { id: 5, label: "e" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
+      { id: 5, label: 'e' },
     ])
     mountList(el, items)
     items.set([
-      { id: 5, label: "e" },
-      { id: 4, label: "d" },
-      { id: 3, label: "c" },
-      { id: 2, label: "b" },
-      { id: 1, label: "a" },
+      { id: 5, label: 'e' },
+      { id: 4, label: 'd' },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
+      { id: 1, label: 'a' },
     ])
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(5)
-    expect(lis[0]?.textContent).toBe("e")
-    expect(lis[1]?.textContent).toBe("d")
-    expect(lis[2]?.textContent).toBe("c")
-    expect(lis[3]?.textContent).toBe("b")
-    expect(lis[4]?.textContent).toBe("a")
+    expect(lis[0]?.textContent).toBe('e')
+    expect(lis[1]?.textContent).toBe('d')
+    expect(lis[2]?.textContent).toBe('c')
+    expect(lis[3]?.textContent).toBe('b')
+    expect(lis[4]?.textContent).toBe('a')
   })
 
-  test("move single item to front", () => {
+  test('move single item to front', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mountList(el, items)
     items.set([
-      { id: 3, label: "c" },
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 3, label: 'c' },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
-    const lis = el.querySelectorAll("li")
-    expect(lis[0]?.textContent).toBe("c")
-    expect(lis[1]?.textContent).toBe("a")
-    expect(lis[2]?.textContent).toBe("b")
+    const lis = el.querySelectorAll('li')
+    expect(lis[0]?.textContent).toBe('c')
+    expect(lis[1]?.textContent).toBe('a')
+    expect(lis[2]?.textContent).toBe('b')
   })
 
-  test("prepend items", () => {
+  test('prepend items', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
     ])
     mountList(el, items)
     items.set([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
     ])
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(4)
-    expect(lis[0]?.textContent).toBe("a")
-    expect(lis[1]?.textContent).toBe("b")
-    expect(lis[2]?.textContent).toBe("c")
-    expect(lis[3]?.textContent).toBe("d")
+    expect(lis[0]?.textContent).toBe('a')
+    expect(lis[1]?.textContent).toBe('b')
+    expect(lis[2]?.textContent).toBe('c')
+    expect(lis[3]?.textContent).toBe('d')
   })
 
-  test("interleave new items", () => {
+  test('interleave new items', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 3, label: "c" },
-      { id: 5, label: "e" },
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
+      { id: 5, label: 'e' },
     ])
     mountList(el, items)
     items.set([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
-      { id: 5, label: "e" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
+      { id: 5, label: 'e' },
     ])
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(5)
-    expect(lis[0]?.textContent).toBe("a")
-    expect(lis[1]?.textContent).toBe("b")
-    expect(lis[2]?.textContent).toBe("c")
-    expect(lis[3]?.textContent).toBe("d")
-    expect(lis[4]?.textContent).toBe("e")
+    expect(lis[0]?.textContent).toBe('a')
+    expect(lis[1]?.textContent).toBe('b')
+    expect(lis[2]?.textContent).toBe('c')
+    expect(lis[3]?.textContent).toBe('d')
+    expect(lis[4]?.textContent).toBe('e')
   })
 
-  test("large reorder triggers LIS fallback (>8 diffs)", () => {
+  test('large reorder triggers LIS fallback (>8 diffs)', () => {
     const el = container()
     const initial = Array.from({ length: 20 }, (_, i) => ({
       id: i + 1,
@@ -1232,119 +1232,119 @@ describe("mount — For keyed list reorder patterns", () => {
     const shuffled = [...initial]
     shuffled.splice(0, 15, ...shuffled.slice(0, 15).reverse())
     items.set(shuffled)
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(20)
     for (let i = 0; i < 20; i++) {
       expect(lis[i]?.textContent).toBe(shuffled[i]?.label)
     }
   })
 
-  test("remove from front and back simultaneously", () => {
+  test('remove from front and back simultaneously', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
-      { id: 5, label: "e" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
+      { id: 5, label: 'e' },
     ])
     mountList(el, items)
     items.set([
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
     ])
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(3)
-    expect(lis[0]?.textContent).toBe("b")
-    expect(lis[2]?.textContent).toBe("d")
+    expect(lis[0]?.textContent).toBe('b')
+    expect(lis[2]?.textContent).toBe('d')
   })
 
-  test("swap first and last", () => {
+  test('swap first and last', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mountList(el, items)
     items.set([
-      { id: 3, label: "c" },
-      { id: 2, label: "b" },
-      { id: 1, label: "a" },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
+      { id: 1, label: 'a' },
     ])
-    const lis = el.querySelectorAll("li")
-    expect(lis[0]?.textContent).toBe("c")
-    expect(lis[1]?.textContent).toBe("b")
-    expect(lis[2]?.textContent).toBe("a")
+    const lis = el.querySelectorAll('li')
+    expect(lis[0]?.textContent).toBe('c')
+    expect(lis[1]?.textContent).toBe('b')
+    expect(lis[2]?.textContent).toBe('a')
   })
 
-  test("multiple rapid updates", () => {
+  test('multiple rapid updates', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "a" }])
+    const items = signal<Item[]>([{ id: 1, label: 'a' }])
     mountList(el, items)
     items.set([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
     items.set([
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
-    items.set([{ id: 4, label: "d" }])
-    const lis = el.querySelectorAll("li")
+    items.set([{ id: 4, label: 'd' }])
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(1)
-    expect(lis[0]?.textContent).toBe("d")
+    expect(lis[0]?.textContent).toBe('d')
   })
 })
 
 // ─── Transition (extended coverage) ──────────────────────────────────────────
 
-describe("Transition — extended", () => {
-  test("custom class names", () => {
+describe('Transition — extended', () => {
+  test('custom class names', () => {
     const el = container()
     const visible = signal(false)
     mount(
       h(Transition, {
         show: visible,
-        enterFrom: "my-enter-from",
-        enterActive: "my-enter-active",
-        enterTo: "my-enter-to",
-        children: h("div", { id: "custom" }, "content"),
+        enterFrom: 'my-enter-from',
+        enterActive: 'my-enter-active',
+        enterTo: 'my-enter-to',
+        children: h('div', { id: 'custom' }, 'content'),
       }),
       el,
     )
-    expect(el.querySelector("#custom")).toBeNull()
+    expect(el.querySelector('#custom')).toBeNull()
     visible.set(true)
-    expect(el.querySelector("#custom")).not.toBeNull()
+    expect(el.querySelector('#custom')).not.toBeNull()
   })
 
-  test("leave hides element after animation", async () => {
+  test('leave hides element after animation', async () => {
     const el = container()
     const visible = signal(true)
     mount(
       h(Transition, {
         show: visible,
-        children: h("div", { id: "leave-test" }, "content"),
+        children: h('div', { id: 'leave-test' }, 'content'),
       }),
       el,
     )
-    expect(el.querySelector("#leave-test")).not.toBeNull()
+    expect(el.querySelector('#leave-test')).not.toBeNull()
     visible.set(false)
     // After rAF + transitionend, the element should be removed
     // In happy-dom, we simulate the transitionend
-    const target = el.querySelector("#leave-test")
+    const target = el.querySelector('#leave-test')
     if (target) {
       // Wait for the requestAnimationFrame callback
       await new Promise<void>((r) => requestAnimationFrame(() => r()))
-      target.dispatchEvent(new Event("transitionend"))
+      target.dispatchEvent(new Event('transitionend'))
     }
     // isMounted should now be false
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("#leave-test")).toBeNull()
+    expect(el.querySelector('#leave-test')).toBeNull()
   })
 
-  test("appear triggers enter animation on initial mount", async () => {
+  test('appear triggers enter animation on initial mount', async () => {
     const el = container()
     const visible = signal(true)
     let beforeEnterCalled = false
@@ -1355,7 +1355,7 @@ describe("Transition — extended", () => {
         onBeforeEnter: () => {
           beforeEnterCalled = true
         },
-        children: h("div", { id: "appear-test" }, "content"),
+        children: h('div', { id: 'appear-test' }, 'content'),
       }),
       el,
     )
@@ -1363,7 +1363,7 @@ describe("Transition — extended", () => {
     expect(beforeEnterCalled).toBe(true)
   })
 
-  test("calls onBeforeLeave when leaving", async () => {
+  test('calls onBeforeLeave when leaving', async () => {
     const el = container()
     const visible = signal(true)
     let beforeLeaveCalled = false
@@ -1373,7 +1373,7 @@ describe("Transition — extended", () => {
         onBeforeLeave: () => {
           beforeLeaveCalled = true
         },
-        children: h("div", { id: "leave-cb" }, "content"),
+        children: h('div', { id: 'leave-cb' }, 'content'),
       }),
       el,
     )
@@ -1382,14 +1382,14 @@ describe("Transition — extended", () => {
     expect(beforeLeaveCalled).toBe(true)
   })
 
-  test("re-entering during leave cancels leave", async () => {
+  test('re-entering during leave cancels leave', async () => {
     const el = container()
     const visible = signal(true)
     mount(
       h(Transition, {
         show: visible,
-        name: "fade",
-        children: h("div", { id: "reenter" }, "content"),
+        name: 'fade',
+        children: h('div', { id: 'reenter' }, 'content'),
       }),
       el,
     )
@@ -1398,157 +1398,157 @@ describe("Transition — extended", () => {
     // Before the leave animation finishes, re-enter
     visible.set(true)
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("#reenter")).not.toBeNull()
+    expect(el.querySelector('#reenter')).not.toBeNull()
   })
 
-  test("transition with name prefix", () => {
+  test('transition with name prefix', () => {
     const el = container()
     const visible = signal(true)
     mount(
       h(Transition, {
         show: visible,
-        name: "slide",
-        children: h("div", { id: "named" }, "content"),
+        name: 'slide',
+        children: h('div', { id: 'named' }, 'content'),
       }),
       el,
     )
-    expect(el.querySelector("#named")).not.toBeNull()
+    expect(el.querySelector('#named')).not.toBeNull()
   })
 })
 
 // ─── Hydration ───────────────────────────────────────────────────────────────
 
-describe("hydrateRoot", () => {
-  test("hydrates basic element", async () => {
+describe('hydrateRoot', () => {
+  test('hydrates basic element', async () => {
     const el = container()
-    el.innerHTML = "<div><span>hello</span></div>"
-    const cleanup = hydrateRoot(el, h("div", null, h("span", null, "hello")))
-    expect(el.querySelector("span")?.textContent).toBe("hello")
+    el.innerHTML = '<div><span>hello</span></div>'
+    const cleanup = hydrateRoot(el, h('div', null, h('span', null, 'hello')))
+    expect(el.querySelector('span')?.textContent).toBe('hello')
     cleanup()
   })
 
-  test("hydrates and attaches event handler", async () => {
+  test('hydrates and attaches event handler', async () => {
     const el = container()
-    el.innerHTML = "<button>click me</button>"
+    el.innerHTML = '<button>click me</button>'
     let clicked = false
     hydrateRoot(
       el,
       h(
-        "button",
+        'button',
         {
           onClick: () => {
             clicked = true
           },
         },
-        "click me",
+        'click me',
       ),
     )
-    el.querySelector("button")?.click()
+    el.querySelector('button')?.click()
     expect(clicked).toBe(true)
   })
 
-  test("hydrates text content", async () => {
+  test('hydrates text content', async () => {
     const el = container()
-    el.innerHTML = "<p>some text</p>"
-    const cleanup = hydrateRoot(el, h("p", null, "some text"))
-    expect(el.querySelector("p")?.textContent).toBe("some text")
+    el.innerHTML = '<p>some text</p>'
+    const cleanup = hydrateRoot(el, h('p', null, 'some text'))
+    expect(el.querySelector('p')?.textContent).toBe('some text')
     cleanup()
   })
 
-  test("hydrates reactive text", async () => {
+  test('hydrates reactive text', async () => {
     const el = container()
-    el.innerHTML = "<div>initial</div>"
-    const text = signal("initial")
+    el.innerHTML = '<div>initial</div>'
+    const text = signal('initial')
     hydrateRoot(
       el,
-      h("div", null, () => text()),
+      h('div', null, () => text()),
     )
-    expect(el.querySelector("div")?.textContent).toBe("initial")
-    text.set("updated")
-    expect(el.querySelector("div")?.textContent).toBe("updated")
+    expect(el.querySelector('div')?.textContent).toBe('initial')
+    text.set('updated')
+    expect(el.querySelector('div')?.textContent).toBe('updated')
   })
 
-  test("hydrates nested elements", async () => {
+  test('hydrates nested elements', async () => {
     const el = container()
-    el.innerHTML = "<div><p><span>deep</span></p></div>"
-    const cleanup = hydrateRoot(el, h("div", null, h("p", null, h("span", null, "deep"))))
-    expect(el.querySelector("span")?.textContent).toBe("deep")
+    el.innerHTML = '<div><p><span>deep</span></p></div>'
+    const cleanup = hydrateRoot(el, h('div', null, h('p', null, h('span', null, 'deep'))))
+    expect(el.querySelector('span')?.textContent).toBe('deep')
     cleanup()
   })
 
-  test("hydrates component", async () => {
+  test('hydrates component', async () => {
     const el = container()
-    el.innerHTML = "<p>Hello, World!</p>"
-    const Greeting = defineComponent(() => h("p", null, "Hello, World!"))
+    el.innerHTML = '<p>Hello, World!</p>'
+    const Greeting = defineComponent(() => h('p', null, 'Hello, World!'))
     const cleanup = hydrateRoot(el, h(Greeting, null))
-    expect(el.querySelector("p")?.textContent).toBe("Hello, World!")
+    expect(el.querySelector('p')?.textContent).toBe('Hello, World!')
     cleanup()
   })
 })
 
 // ─── Mount edge cases ────────────────────────────────────────────────────────
 
-describe("mount — edge cases", () => {
-  test("null children in fragment", () => {
+describe('mount — edge cases', () => {
+  test('null children in fragment', () => {
     const el = container()
-    mount(h(Fragment, null, null, "text", null), el)
-    expect(el.textContent).toBe("text")
+    mount(h(Fragment, null, null, 'text', null), el)
+    expect(el.textContent).toBe('text')
   })
 
-  test("deeply nested fragments", () => {
+  test('deeply nested fragments', () => {
     const el = container()
-    mount(h(Fragment, null, h(Fragment, null, h(Fragment, null, h("span", null, "deep")))), el)
-    expect(el.querySelector("span")?.textContent).toBe("deep")
+    mount(h(Fragment, null, h(Fragment, null, h(Fragment, null, h('span', null, 'deep')))), el)
+    expect(el.querySelector('span')?.textContent).toBe('deep')
   })
 
-  test("component returning null", () => {
+  test('component returning null', () => {
     const el = container()
     const NullComp = defineComponent(() => null)
     mount(h(NullComp, null), el)
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 
-  test("component returning fragment with mixed children", () => {
+  test('component returning fragment with mixed children', () => {
     const el = container()
-    const Mixed = defineComponent(() => h(Fragment, null, "text", h("b", null, "bold"), null, 42))
+    const Mixed = defineComponent(() => h(Fragment, null, 'text', h('b', null, 'bold'), null, 42))
     mount(h(Mixed, null), el)
-    expect(el.textContent).toContain("text")
-    expect(el.querySelector("b")?.textContent).toBe("bold")
-    expect(el.textContent).toContain("42")
+    expect(el.textContent).toContain('text')
+    expect(el.querySelector('b')?.textContent).toBe('bold')
+    expect(el.textContent).toContain('42')
   })
 
-  test("mounting array of children", () => {
+  test('mounting array of children', () => {
     const el = container()
-    mount(h("div", null, ...[h("span", null, "a"), h("span", null, "b"), h("span", null, "c")]), el)
-    expect(el.querySelectorAll("span").length).toBe(3)
+    mount(h('div', null, ...[h('span', null, 'a'), h('span', null, 'b'), h('span', null, 'c')]), el)
+    expect(el.querySelectorAll('span').length).toBe(3)
   })
 
-  test("reactive child toggling between null and element", () => {
+  test('reactive child toggling between null and element', () => {
     const el = container()
     const show = signal(false)
     mount(
-      h("div", null, () => (show() ? h("span", { id: "toggle" }, "yes") : null)),
+      h('div', null, () => (show() ? h('span', { id: 'toggle' }, 'yes') : null)),
       el,
     )
-    expect(el.querySelector("#toggle")).toBeNull()
+    expect(el.querySelector('#toggle')).toBeNull()
     show.set(true)
-    expect(el.querySelector("#toggle")).not.toBeNull()
+    expect(el.querySelector('#toggle')).not.toBeNull()
     show.set(false)
-    expect(el.querySelector("#toggle")).toBeNull()
+    expect(el.querySelector('#toggle')).toBeNull()
   })
 
-  test("reactive child returning component renders content", () => {
+  test('reactive child returning component renders content', () => {
     const el = container()
-    const Dashboard = () => h("div", { id: "dashboard" }, "Dashboard content")
-    const Store = () => h("div", { id: "store" }, "Store content")
-    const activeTab = signal("dashboard")
+    const Dashboard = () => h('div', { id: 'dashboard' }, 'Dashboard content')
+    const Store = () => h('div', { id: 'store' }, 'Store content')
+    const activeTab = signal('dashboard')
     const tabs = [
-      { id: "dashboard", component: Dashboard },
-      { id: "store", component: Store },
+      { id: 'dashboard', component: Dashboard },
+      { id: 'store', component: Store },
     ]
 
     mount(
-      h("div", null, () => {
+      h('div', null, () => {
         const tab = tabs.find((t) => t.id === activeTab())
         if (!tab) return null
         const Component = tab.component
@@ -1557,528 +1557,528 @@ describe("mount — edge cases", () => {
       el,
     )
 
-    expect(el.querySelector("#dashboard")).not.toBeNull()
-    expect(el.querySelector("#dashboard")?.textContent).toBe("Dashboard content")
+    expect(el.querySelector('#dashboard')).not.toBeNull()
+    expect(el.querySelector('#dashboard')?.textContent).toBe('Dashboard content')
 
-    activeTab.set("store")
-    expect(el.querySelector("#store")).not.toBeNull()
-    expect(el.querySelector("#store")?.textContent).toBe("Store content")
-    expect(el.querySelector("#dashboard")).toBeNull()
+    activeTab.set('store')
+    expect(el.querySelector('#store')).not.toBeNull()
+    expect(el.querySelector('#store')?.textContent).toBe('Store content')
+    expect(el.querySelector('#dashboard')).toBeNull()
   })
 
-  test("reactive child returning component with internal signals", () => {
+  test('reactive child returning component with internal signals', () => {
     const el = container()
     const Dashboard = () => {
       const count = signal(0)
-      return h("div", { id: "dashboard" }, () => `Count: ${count()}`)
+      return h('div', { id: 'dashboard' }, () => `Count: ${count()}`)
     }
     const Settings = () => {
-      return h("div", { id: "settings" }, h("span", null, "Settings page"))
+      return h('div', { id: 'settings' }, h('span', null, 'Settings page'))
     }
-    const activeTab = signal<string>("dashboard")
+    const activeTab = signal<string>('dashboard')
 
     mount(
-      h("div", null, () => {
+      h('div', null, () => {
         const tab = activeTab()
-        if (tab === "dashboard") return h(Dashboard, null)
-        if (tab === "settings") return h(Settings, null)
+        if (tab === 'dashboard') return h(Dashboard, null)
+        if (tab === 'settings') return h(Settings, null)
         return null
       }),
       el,
     )
 
-    expect(el.querySelector("#dashboard")).not.toBeNull()
-    expect(el.querySelector("#dashboard")?.textContent).toBe("Count: 0")
+    expect(el.querySelector('#dashboard')).not.toBeNull()
+    expect(el.querySelector('#dashboard')?.textContent).toBe('Count: 0')
 
-    activeTab.set("settings")
-    expect(el.querySelector("#settings")).not.toBeNull()
-    expect(el.querySelector("#settings")?.textContent).toBe("Settings page")
-    expect(el.querySelector("#dashboard")).toBeNull()
+    activeTab.set('settings')
+    expect(el.querySelector('#settings')).not.toBeNull()
+    expect(el.querySelector('#settings')?.textContent).toBe('Settings page')
+    expect(el.querySelector('#dashboard')).toBeNull()
 
-    activeTab.set("none")
-    expect(el.querySelector("#settings")).toBeNull()
-    expect(el.querySelector("#dashboard")).toBeNull()
+    activeTab.set('none')
+    expect(el.querySelector('#settings')).toBeNull()
+    expect(el.querySelector('#dashboard')).toBeNull()
   })
 
-  test("reactive Dynamic component switching", () => {
+  test('reactive Dynamic component switching', () => {
     const el = container()
-    const Dashboard = () => h("div", { id: "dashboard" }, "Dashboard")
-    const Settings = () => h("div", { id: "settings" }, "Settings")
-    const activeTab = signal<string>("dashboard")
+    const Dashboard = () => h('div', { id: 'dashboard' }, 'Dashboard')
+    const Settings = () => h('div', { id: 'settings' }, 'Settings')
+    const activeTab = signal<string>('dashboard')
     const components: Record<string, ComponentFn> = { dashboard: Dashboard, settings: Settings }
 
     mount(
-      h("div", null, () => h(Dynamic, { component: components[activeTab()] })),
+      h('div', null, () => h(Dynamic, { component: components[activeTab()] })),
       el,
     )
 
-    expect(el.querySelector("#dashboard")?.textContent).toBe("Dashboard")
+    expect(el.querySelector('#dashboard')?.textContent).toBe('Dashboard')
 
-    activeTab.set("settings")
-    expect(el.querySelector("#settings")?.textContent).toBe("Settings")
-    expect(el.querySelector("#dashboard")).toBeNull()
+    activeTab.set('settings')
+    expect(el.querySelector('#settings')?.textContent).toBe('Settings')
+    expect(el.querySelector('#dashboard')).toBeNull()
   })
 
-  test("boolean false renders nothing", () => {
+  test('boolean false renders nothing', () => {
     const el = container()
-    mount(h("div", null, false), el)
-    expect(el.querySelector("div")?.textContent).toBe("")
+    mount(h('div', null, false), el)
+    expect(el.querySelector('div')?.textContent).toBe('')
   })
 
-  test("number 0 renders as text", () => {
+  test('number 0 renders as text', () => {
     const el = container()
-    mount(h("div", null, 0), el)
-    expect(el.querySelector("div")?.textContent).toBe("0")
+    mount(h('div', null, 0), el)
+    expect(el.querySelector('div')?.textContent).toBe('0')
   })
 
-  test("empty string renders as text node", () => {
+  test('empty string renders as text node', () => {
     const el = container()
-    mount(h("div", null, ""), el)
-    expect(el.querySelector("div")?.textContent).toBe("")
+    mount(h('div', null, ''), el)
+    expect(el.querySelector('div')?.textContent).toBe('')
   })
 
-  test("component with children prop", () => {
+  test('component with children prop', () => {
     const el = container()
     const Wrapper = defineComponent((props: { children?: VNodeChild }) => {
-      return h("div", { id: "wrapper" }, props.children)
+      return h('div', { id: 'wrapper' }, props.children)
     })
-    mount(h(Wrapper, null, h("span", null, "child")), el)
-    expect(el.querySelector("#wrapper span")?.textContent).toBe("child")
+    mount(h(Wrapper, null, h('span', null, 'child')), el)
+    expect(el.querySelector('#wrapper span')?.textContent).toBe('child')
   })
 })
 
 // ─── KeepAlive ───────────────────────────────────────────────────────────────
 
-describe("KeepAlive", () => {
-  test("mounts children and preserves them when toggled", async () => {
+describe('KeepAlive', () => {
+  test('mounts children and preserves them when toggled', async () => {
     const el = container()
     const active = signal(true)
-    mount(h(KeepAlive, { active }, h("div", { id: "kept" }, "alive")), el)
+    mount(h(KeepAlive, { active }, h('div', { id: 'kept' }, 'alive')), el)
     // KeepAlive mounts in onMount which fires sync in this framework
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("#kept")).not.toBeNull()
+    expect(el.querySelector('#kept')).not.toBeNull()
     active.set(false)
     // Content should still exist in DOM but container hidden
-    expect(el.querySelector("#kept")).not.toBeNull()
+    expect(el.querySelector('#kept')).not.toBeNull()
   })
 
-  test("cleanup disposes effect and child cleanup", async () => {
+  test('cleanup disposes effect and child cleanup', async () => {
     const el = container()
     const active = signal(true)
-    const unmount = mount(h(KeepAlive, { active }, h("div", { id: "ka-cleanup" }, "content")), el)
+    const unmount = mount(h(KeepAlive, { active }, h('div', { id: 'ka-cleanup' }, 'content')), el)
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("#ka-cleanup")).not.toBeNull()
+    expect(el.querySelector('#ka-cleanup')).not.toBeNull()
     unmount()
     // After unmount, the KeepAlive container is gone
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 
-  test("active defaults to true when not provided", async () => {
+  test('active defaults to true when not provided', async () => {
     const el = container()
-    mount(h(KeepAlive, {}, h("div", { id: "ka-default" }, "visible")), el)
+    mount(h(KeepAlive, {}, h('div', { id: 'ka-default' }, 'visible')), el)
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("#ka-default")).not.toBeNull()
+    expect(el.querySelector('#ka-default')).not.toBeNull()
     // Container should be visible (display not set to none)
-    const wrapper = el.querySelector("div[style]") as HTMLElement | null
+    const wrapper = el.querySelector('div[style]') as HTMLElement | null
     // If wrapper exists, display should not be none
-    if (wrapper) expect(wrapper.style.display).not.toBe("none")
+    if (wrapper) expect(wrapper.style.display).not.toBe('none')
   })
 
-  test("toggles display:none when active changes", async () => {
+  test('toggles display:none when active changes', async () => {
     const el = container()
     const active = signal(true)
-    mount(h(KeepAlive, { active }, h("span", { id: "ka-toggle" }, "x")), el)
+    mount(h(KeepAlive, { active }, h('span', { id: 'ka-toggle' }, 'x')), el)
     await new Promise<void>((r) => queueMicrotask(r))
     // Find the container div that KeepAlive creates
-    const containers = el.querySelectorAll("div")
-    const keepAliveContainer = Array.from(containers).find((d) => d.querySelector("#ka-toggle")) as
+    const containers = el.querySelectorAll('div')
+    const keepAliveContainer = Array.from(containers).find((d) => d.querySelector('#ka-toggle')) as
       | HTMLElement
       | undefined
     if (keepAliveContainer) {
-      expect(keepAliveContainer.style.display).not.toBe("none")
+      expect(keepAliveContainer.style.display).not.toBe('none')
       active.set(false)
-      expect(keepAliveContainer.style.display).toBe("none")
+      expect(keepAliveContainer.style.display).toBe('none')
       active.set(true)
-      expect(keepAliveContainer.style.display).toBe("")
+      expect(keepAliveContainer.style.display).toBe('')
     }
   })
 })
 
 // ─── Hydration (extended coverage) ───────────────────────────────────────────
 
-describe("hydrateRoot — extended", () => {
-  test("hydrates Fragment children", async () => {
+describe('hydrateRoot — extended', () => {
+  test('hydrates Fragment children', async () => {
     const el = container()
-    el.innerHTML = "<span>a</span><span>b</span>"
-    const cleanup = hydrateRoot(el, h(Fragment, null, h("span", null, "a"), h("span", null, "b")))
-    const spans = el.querySelectorAll("span")
+    el.innerHTML = '<span>a</span><span>b</span>'
+    const cleanup = hydrateRoot(el, h(Fragment, null, h('span', null, 'a'), h('span', null, 'b')))
+    const spans = el.querySelectorAll('span')
     expect(spans.length).toBe(2)
-    expect(spans[0]?.textContent).toBe("a")
-    expect(spans[1]?.textContent).toBe("b")
+    expect(spans[0]?.textContent).toBe('a')
+    expect(spans[1]?.textContent).toBe('b')
     cleanup()
   })
 
-  test("hydrates array children", async () => {
+  test('hydrates array children', async () => {
     const el = container()
-    el.innerHTML = "<div><span>x</span><span>y</span></div>"
-    const cleanup = hydrateRoot(el, h("div", null, h("span", null, "x"), h("span", null, "y")))
-    expect(el.querySelectorAll("span").length).toBe(2)
+    el.innerHTML = '<div><span>x</span><span>y</span></div>'
+    const cleanup = hydrateRoot(el, h('div', null, h('span', null, 'x'), h('span', null, 'y')))
+    expect(el.querySelectorAll('span').length).toBe(2)
     cleanup()
   })
 
-  test("hydrates null/false child — returns noop", async () => {
+  test('hydrates null/false child — returns noop', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
-    const cleanup = hydrateRoot(el, h("div", null, null, false))
-    expect(el.querySelector("div")).not.toBeNull()
+    el.innerHTML = '<div></div>'
+    const cleanup = hydrateRoot(el, h('div', null, null, false))
+    expect(el.querySelector('div')).not.toBeNull()
     cleanup()
   })
 
-  test("hydrates reactive accessor returning null initially", async () => {
+  test('hydrates reactive accessor returning null initially', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
+    el.innerHTML = '<div></div>'
     const show = signal<string | null>(null)
     const cleanup = hydrateRoot(
       el,
-      h("div", null, () => show()),
+      h('div', null, () => show()),
     )
     // Initially null — a comment marker is inserted
-    show.set("hello")
+    show.set('hello')
     // After update, the text should appear
-    expect(el.textContent).toContain("hello")
+    expect(el.textContent).toContain('hello')
     cleanup()
   })
 
-  test("hydrates reactive text that mismatches DOM node type", async () => {
+  test('hydrates reactive text that mismatches DOM node type', async () => {
     const el = container()
-    el.innerHTML = "<div><span>wrong</span></div>"
-    const text = signal("hello")
+    el.innerHTML = '<div><span>wrong</span></div>'
+    const text = signal('hello')
     // Reactive text expects a TextNode but finds a SPAN — should fall back
     const cleanup = hydrateRoot(
       el,
-      h("div", null, () => text()),
+      h('div', null, () => text()),
     )
     cleanup()
   })
 
-  test("hydrates reactive VNode (complex initial value)", async () => {
+  test('hydrates reactive VNode (complex initial value)', async () => {
     const el = container()
-    el.innerHTML = "<div><p>old</p></div>"
-    const content = signal<VNodeChild>(h("p", null, "old"))
-    const cleanup = hydrateRoot(el, h("div", null, (() => content()) as unknown as VNodeChild))
+    el.innerHTML = '<div><p>old</p></div>'
+    const content = signal<VNodeChild>(h('p', null, 'old'))
+    const cleanup = hydrateRoot(el, h('div', null, (() => content()) as unknown as VNodeChild))
     cleanup()
   })
 
-  test("hydrates static text node", async () => {
+  test('hydrates static text node', async () => {
     const el = container()
-    el.innerHTML = "just text"
-    const cleanup = hydrateRoot(el, "just text")
-    expect(el.textContent).toContain("just text")
+    el.innerHTML = 'just text'
+    const cleanup = hydrateRoot(el, 'just text')
+    expect(el.textContent).toContain('just text')
     cleanup()
   })
 
-  test("hydrates number as text", async () => {
+  test('hydrates number as text', async () => {
     const el = container()
-    el.innerHTML = "42"
+    el.innerHTML = '42'
     const cleanup = hydrateRoot(el, 42)
-    expect(el.textContent).toContain("42")
+    expect(el.textContent).toContain('42')
     cleanup()
   })
 
-  test("hydration tag mismatch falls back to mount", async () => {
+  test('hydration tag mismatch falls back to mount', async () => {
     const el = container()
-    el.innerHTML = "<div>wrong</div>"
+    el.innerHTML = '<div>wrong</div>'
     // Expect span but find div — should fall back
-    const cleanup = hydrateRoot(el, h("span", null, "right"))
+    const cleanup = hydrateRoot(el, h('span', null, 'right'))
     // The span should have been mounted via fallback
     cleanup()
   })
 
-  test("hydrates element with ref", async () => {
+  test('hydrates element with ref', async () => {
     const el = container()
-    el.innerHTML = "<button>click</button>"
+    el.innerHTML = '<button>click</button>'
     const ref = createRef<HTMLButtonElement>()
-    const cleanup = hydrateRoot(el, h("button", { ref }, "click"))
+    const cleanup = hydrateRoot(el, h('button', { ref }, 'click'))
     expect(ref.current).not.toBeNull()
-    expect(ref.current?.tagName).toBe("BUTTON")
+    expect(ref.current?.tagName).toBe('BUTTON')
     cleanup()
     expect(ref.current).toBeNull()
   })
 
-  test("hydrates Portal — always remounts", async () => {
+  test('hydrates Portal — always remounts', async () => {
     const el = container()
     const target = container()
-    el.innerHTML = ""
-    const cleanup = hydrateRoot(el, Portal({ target, children: h("span", null, "portaled") }))
-    expect(target.querySelector("span")?.textContent).toBe("portaled")
+    el.innerHTML = ''
+    const cleanup = hydrateRoot(el, Portal({ target, children: h('span', null, 'portaled') }))
+    expect(target.querySelector('span')?.textContent).toBe('portaled')
     cleanup()
   })
 
-  test("hydrates component with children prop", async () => {
+  test('hydrates component with children prop', async () => {
     const el = container()
-    el.innerHTML = "<div><p>child content</p></div>"
+    el.innerHTML = '<div><p>child content</p></div>'
     const Wrapper = defineComponent((props: { children?: VNodeChild }) =>
-      h("div", null, props.children),
+      h('div', null, props.children),
     )
-    const cleanup = hydrateRoot(el, h(Wrapper, null, h("p", null, "child content")))
-    expect(el.querySelector("p")?.textContent).toBe("child content")
+    const cleanup = hydrateRoot(el, h(Wrapper, null, h('p', null, 'child content')))
+    expect(el.querySelector('p')?.textContent).toBe('child content')
     cleanup()
   })
 
-  test("hydrates component that throws — error handled gracefully", async () => {
+  test('hydrates component that throws — error handled gracefully', async () => {
     const el = container()
-    el.innerHTML = "<p>content</p>"
+    el.innerHTML = '<p>content</p>'
     const Broken = defineComponent((): never => {
-      throw new Error("hydration boom")
+      throw new Error('hydration boom')
     })
     // Should not throw — error is caught internally
     const cleanup = hydrateRoot(el, h(Broken, null))
     cleanup()
   })
 
-  test("hydrates with For — fresh mount fallback (no markers)", async () => {
+  test('hydrates with For — fresh mount fallback (no markers)', async () => {
     const el = container()
-    el.innerHTML = "<ul></ul>"
-    const items = signal([{ id: 1, label: "a" }])
+    el.innerHTML = '<ul></ul>'
+    const items = signal([{ id: 1, label: 'a' }])
     const cleanup = hydrateRoot(
       el,
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h("li", null, r.label),
+          children: (r: { id: number; label: string }) => h('li', null, r.label),
         }),
       ),
     )
     cleanup()
   })
 
-  test("hydrates with For — SSR markers present", async () => {
+  test('hydrates with For — SSR markers present', async () => {
     const el = container()
-    el.innerHTML = "<!--pyreon-for--><li>a</li><!--/pyreon-for-->"
-    const items = signal([{ id: 1, label: "a" }])
+    el.innerHTML = '<!--pyreon-for--><li>a</li><!--/pyreon-for-->'
+    const items = signal([{ id: 1, label: 'a' }])
     const cleanup = hydrateRoot(
       el,
       For({
         each: items,
         by: (r: { id: number }) => r.id,
-        children: (r: { id: number; label: string }) => h("li", null, r.label),
+        children: (r: { id: number; label: string }) => h('li', null, r.label),
       }),
     )
     cleanup()
   })
 
-  test("hydration skips comment and whitespace text nodes", async () => {
+  test('hydration skips comment and whitespace text nodes', async () => {
     const el = container()
     // Simulate SSR output with comments and whitespace
-    el.innerHTML = "<!-- comment -->   <p>real</p>"
-    const cleanup = hydrateRoot(el, h("p", null, "real"))
-    expect(el.querySelector("p")?.textContent).toBe("real")
+    el.innerHTML = '<!-- comment -->   <p>real</p>'
+    const cleanup = hydrateRoot(el, h('p', null, 'real'))
+    expect(el.querySelector('p')?.textContent).toBe('real')
     cleanup()
   })
 
-  test("hydrates with missing DOM node (null domNode)", async () => {
+  test('hydrates with missing DOM node (null domNode)', async () => {
     const el = container()
-    el.innerHTML = ""
+    el.innerHTML = ''
     // VNode expects content but DOM is empty — should fall back
-    const cleanup = hydrateRoot(el, h("div", null, "content"))
+    const cleanup = hydrateRoot(el, h('div', null, 'content'))
     cleanup()
   })
 
-  test("hydrates reactive accessor returning VNode with no domNode", async () => {
+  test('hydrates reactive accessor returning VNode with no domNode', async () => {
     const el = container()
-    el.innerHTML = ""
-    const content = signal<VNodeChild>(h("p", null, "dynamic"))
+    el.innerHTML = ''
+    const content = signal<VNodeChild>(h('p', null, 'dynamic'))
     const cleanup = hydrateRoot(el, (() => content()) as unknown as VNodeChild)
     cleanup()
   })
 
-  test("hydrates component with onMount hooks", async () => {
+  test('hydrates component with onMount hooks', async () => {
     const el = container()
-    el.innerHTML = "<span>mounted</span>"
+    el.innerHTML = '<span>mounted</span>'
     let mountCalled = false
     const Comp = defineComponent(() => {
       onMount(() => {
         mountCalled = true
       })
-      return h("span", null, "mounted")
+      return h('span', null, 'mounted')
     })
     const cleanup = hydrateRoot(el, h(Comp, null))
     expect(mountCalled).toBe(true)
     cleanup()
   })
 
-  test("hydrates text mismatch for static string — falls back", async () => {
+  test('hydrates text mismatch for static string — falls back', async () => {
     const el = container()
     // Put an element where text is expected
-    el.innerHTML = "<span>not text</span>"
-    const cleanup = hydrateRoot(el, "plain text")
+    el.innerHTML = '<span>not text</span>'
+    const cleanup = hydrateRoot(el, 'plain text')
     cleanup()
   })
 })
 
 // ─── mountFor — additional edge cases ────────────────────────────────────────
 
-describe("mountFor — edge cases", () => {
+describe('mountFor — edge cases', () => {
   type Item = { id: number; label: string }
 
   function mountForList(el: HTMLElement, items: ReturnType<typeof signal<Item[]>>) {
     mount(
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r) => r.id,
-          children: (r) => h("li", { key: r.id }, r.label),
+          children: (r) => h('li', { key: r.id }, r.label),
         }),
       ),
       el,
     )
   }
 
-  test("empty initial → add items (fresh render path)", () => {
+  test('empty initial → add items (fresh render path)', () => {
     const el = container()
     const items = signal<Item[]>([])
     mountForList(el, items)
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
     items.set([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("a")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
   })
 
-  test("clear then add uses fresh render path", () => {
+  test('clear then add uses fresh render path', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "x" }])
+    const items = signal<Item[]>([{ id: 1, label: 'x' }])
     mountForList(el, items)
     items.set([])
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
     items.set([
-      { id: 2, label: "y" },
-      { id: 3, label: "z" },
+      { id: 2, label: 'y' },
+      { id: 3, label: 'z' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("y")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('y')
   })
 
-  test("clear path with parent-swap optimization", () => {
+  test('clear path with parent-swap optimization', () => {
     // When the For's markers are the first and last children of a parent,
     // the clear path uses parent-swap for O(1) clear.
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     // Mount directly in the ul so markers are first/last children
     mount(
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r) => r.id,
-          children: (r) => h("li", { key: r.id }, r.label),
+          children: (r) => h('li', { key: r.id }, r.label),
         }),
       ),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(3)
+    expect(el.querySelectorAll('li').length).toBe(3)
     items.set([])
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
   })
 
-  test("clear path without parent-swap (markers not first/last)", () => {
+  test('clear path without parent-swap (markers not first/last)', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "a" }])
+    const items = signal<Item[]>([{ id: 1, label: 'a' }])
     // Mount with extra siblings so markers are not first/last
     mount(
       h(
-        "div",
+        'div',
         null,
-        h("span", null, "before"),
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
-        h("span", null, "after"),
+        h('span', null, 'before'),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
+        h('span', null, 'after'),
       ),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(1)
+    expect(el.querySelectorAll('li').length).toBe(1)
     items.set([])
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
     // The before/after spans should still be present
-    expect(el.querySelectorAll("span").length).toBe(2)
+    expect(el.querySelectorAll('span').length).toBe(2)
   })
 
-  test("replace-all with parent-swap optimization", () => {
+  test('replace-all with parent-swap optimization', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "old1" },
-      { id: 2, label: "old2" },
+      { id: 1, label: 'old1' },
+      { id: 2, label: 'old2' },
     ])
     mount(
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r) => r.id,
-          children: (r) => h("li", { key: r.id }, r.label),
+          children: (r) => h('li', { key: r.id }, r.label),
         }),
       ),
       el,
     )
     // Replace with completely new keys
     items.set([
-      { id: 10, label: "new1" },
-      { id: 11, label: "new2" },
+      { id: 10, label: 'new1' },
+      { id: 11, label: 'new2' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("new1")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('new1')
   })
 
-  test("replace-all without parent-swap (extra siblings)", () => {
+  test('replace-all without parent-swap (extra siblings)', () => {
     const el = container()
-    const items = signal<Item[]>([{ id: 1, label: "old" }])
+    const items = signal<Item[]>([{ id: 1, label: 'old' }])
     mount(
       h(
-        "div",
+        'div',
         null,
-        h("span", null, "before"),
-        For({ each: items, by: (r) => r.id, children: (r) => h("li", { key: r.id }, r.label) }),
-        h("span", null, "after"),
+        h('span', null, 'before'),
+        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
+        h('span', null, 'after'),
       ),
       el,
     )
-    items.set([{ id: 10, label: "new" }])
-    expect(el.querySelectorAll("li").length).toBe(1)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("new")
-    expect(el.querySelectorAll("span").length).toBe(2)
+    items.set([{ id: 10, label: 'new' }])
+    expect(el.querySelectorAll('li').length).toBe(1)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('new')
+    expect(el.querySelectorAll('span').length).toBe(2)
   })
 
-  test("remove stale entries", () => {
+  test('remove stale entries', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mountForList(el, items)
     // Remove middle item — hits stale entry removal path
     items.set([
-      { id: 1, label: "a" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("a")
-    expect(el.querySelectorAll("li")[1]?.textContent).toBe("c")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
+    expect(el.querySelectorAll('li')[1]?.textContent).toBe('c')
   })
 
-  test("LIS fallback for complex reorder (>8 diffs, same length)", () => {
+  test('LIS fallback for complex reorder (>8 diffs, same length)', () => {
     const el = container()
     // Create 15 items, then reverse all — forces > SMALL_K diffs and LIS path
     const initial = Array.from({ length: 15 }, (_, i) => ({
@@ -2089,13 +2089,13 @@ describe("mountFor — edge cases", () => {
     mountForList(el, items)
     // Reverse all items: 15 diffs > SMALL_K (8)
     items.set([...initial].reverse())
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(15)
-    expect(lis[0]?.textContent).toBe("o") // last letter reversed
-    expect(lis[14]?.textContent).toBe("a")
+    expect(lis[0]?.textContent).toBe('o') // last letter reversed
+    expect(lis[14]?.textContent).toBe('a')
   })
 
-  test("LIS fallback for reorder with different length", () => {
+  test('LIS fallback for reorder with different length', () => {
     const el = container()
     const initial = Array.from({ length: 10 }, (_, i) => ({
       id: i + 1,
@@ -2105,268 +2105,268 @@ describe("mountFor — edge cases", () => {
     mountForList(el, items)
     // Reverse and add one — different length triggers LIS
     const reversed = [...initial].reverse()
-    reversed.push({ id: 99, label: "z" })
+    reversed.push({ id: 99, label: 'z' })
     items.set(reversed)
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(11)
-    expect(lis[0]?.textContent).toBe("j")
-    expect(lis[10]?.textContent).toBe("z")
+    expect(lis[0]?.textContent).toBe('j')
+    expect(lis[10]?.textContent).toBe('z')
   })
 
-  test("small-k reorder path (<=8 diffs, same length)", () => {
+  test('small-k reorder path (<=8 diffs, same length)', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
-      { id: 4, label: "d" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+      { id: 4, label: 'd' },
     ])
     mountForList(el, items)
     // Swap positions 1 and 2 — only 2 diffs < SMALL_K
     items.set([
-      { id: 1, label: "a" },
-      { id: 3, label: "c" },
-      { id: 2, label: "b" },
-      { id: 4, label: "d" },
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
+      { id: 4, label: 'd' },
     ])
-    const lis = el.querySelectorAll("li")
-    expect(lis[1]?.textContent).toBe("c")
-    expect(lis[2]?.textContent).toBe("b")
+    const lis = el.querySelectorAll('li')
+    expect(lis[1]?.textContent).toBe('c')
+    expect(lis[2]?.textContent).toBe('b')
   })
 
-  test("add and remove items simultaneously", () => {
+  test('add and remove items simultaneously', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
-      { id: 3, label: "c" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
     ])
     mountForList(el, items)
     // Remove 2, add 4 and 5
     items.set([
-      { id: 1, label: "a" },
-      { id: 4, label: "d" },
-      { id: 3, label: "c" },
-      { id: 5, label: "e" },
+      { id: 1, label: 'a' },
+      { id: 4, label: 'd' },
+      { id: 3, label: 'c' },
+      { id: 5, label: 'e' },
     ])
-    const lis = el.querySelectorAll("li")
+    const lis = el.querySelectorAll('li')
     expect(lis.length).toBe(4)
-    expect(lis[0]?.textContent).toBe("a")
+    expect(lis[0]?.textContent).toBe('a')
     // Verify all expected items are present
     const texts = Array.from(lis).map((li) => li.textContent)
-    expect(texts).toContain("a")
-    expect(texts).toContain("c")
-    expect(texts).toContain("d")
-    expect(texts).toContain("e")
+    expect(texts).toContain('a')
+    expect(texts).toContain('c')
+    expect(texts).toContain('d')
+    expect(texts).toContain('e')
   })
 
-  test("unmount For cleanup disposes all entries", () => {
+  test('unmount For cleanup disposes all entries', () => {
     const el = container()
     const items = signal<Item[]>([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
     const unmount = mount(
       h(
-        "ul",
+        'ul',
         null,
         For({
           each: items,
           by: (r) => r.id,
-          children: (r) => h("li", { key: r.id }, r.label),
+          children: (r) => h('li', { key: r.id }, r.label),
         }),
       ),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(2)
+    expect(el.querySelectorAll('li').length).toBe(2)
     unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── mountKeyedList — additional coverage ────────────────────────────────────
 
-describe("mountKeyedList — via reactive keyed array", () => {
-  test("reactive accessor returning keyed VNode array uses mountKeyedList", () => {
+describe('mountKeyedList — via reactive keyed array', () => {
+  test('reactive accessor returning keyed VNode array uses mountKeyedList', () => {
     const el = container()
     const items = signal([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
     ])
     mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
-    expect(el.querySelectorAll("li").length).toBe(2)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("a")
+    expect(el.querySelectorAll('li').length).toBe(2)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
   })
 
-  test("mountKeyedList handles clear (empty array)", () => {
+  test('mountKeyedList handles clear (empty array)', () => {
     const el = container()
     const items = signal([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
     ])
     mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
     items.set([])
-    expect(el.querySelectorAll("li").length).toBe(0)
+    expect(el.querySelectorAll('li').length).toBe(0)
   })
 
-  test("mountKeyedList handles reorder", () => {
+  test('mountKeyedList handles reorder', () => {
     const el = container()
     const items = signal([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
-      { id: 3, text: "c" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
+      { id: 3, text: 'c' },
     ])
     mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
     items.set([
-      { id: 3, text: "c" },
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
+      { id: 3, text: 'c' },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
     ])
-    const lis = el.querySelectorAll("li")
-    expect(lis[0]?.textContent).toBe("c")
-    expect(lis[1]?.textContent).toBe("a")
-    expect(lis[2]?.textContent).toBe("b")
+    const lis = el.querySelectorAll('li')
+    expect(lis[0]?.textContent).toBe('c')
+    expect(lis[1]?.textContent).toBe('a')
+    expect(lis[2]?.textContent).toBe('b')
   })
 
-  test("mountKeyedList removes stale entries", () => {
+  test('mountKeyedList removes stale entries', () => {
     const el = container()
     const items = signal([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
-      { id: 3, text: "c" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
+      { id: 3, text: 'c' },
     ])
     mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
-    items.set([{ id: 2, text: "b" }])
-    expect(el.querySelectorAll("li").length).toBe(1)
-    expect(el.querySelectorAll("li")[0]?.textContent).toBe("b")
+    items.set([{ id: 2, text: 'b' }])
+    expect(el.querySelectorAll('li').length).toBe(1)
+    expect(el.querySelectorAll('li')[0]?.textContent).toBe('b')
   })
 
-  test("mountKeyedList adds new entries", () => {
+  test('mountKeyedList adds new entries', () => {
     const el = container()
-    const items = signal([{ id: 1, text: "a" }])
+    const items = signal([{ id: 1, text: 'a' }])
     mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
     items.set([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
-      { id: 3, text: "c" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
+      { id: 3, text: 'c' },
     ])
-    expect(el.querySelectorAll("li").length).toBe(3)
+    expect(el.querySelectorAll('li').length).toBe(3)
   })
 
-  test("mountKeyedList cleanup disposes all entries", () => {
+  test('mountKeyedList cleanup disposes all entries', () => {
     const el = container()
     const items = signal([
-      { id: 1, text: "a" },
-      { id: 2, text: "b" },
+      { id: 1, text: 'a' },
+      { id: 2, text: 'b' },
     ])
     const unmount = mount(
-      h("ul", null, () => items().map((it) => h("li", { key: it.id }, it.text))),
+      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
       el,
     )
     unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── mountReactive — additional coverage ─────────────────────────────────────
 
-describe("mountReactive — edge cases", () => {
-  test("reactive accessor returning null then VNode", () => {
+describe('mountReactive — edge cases', () => {
+  test('reactive accessor returning null then VNode', () => {
     const el = container()
     const show = signal(false)
     mount(
-      h("div", null, () => (show() ? h("span", null, "yes") : null)),
+      h('div', null, () => (show() ? h('span', null, 'yes') : null)),
       el,
     )
-    expect(el.querySelector("span")).toBeNull()
+    expect(el.querySelector('span')).toBeNull()
     show.set(true)
-    expect(el.querySelector("span")?.textContent).toBe("yes")
+    expect(el.querySelector('span')?.textContent).toBe('yes')
   })
 
-  test("reactive accessor returning false", () => {
+  test('reactive accessor returning false', () => {
     const el = container()
     const show = signal(false)
     mount(
-      h("div", null, () => (show() ? "visible" : false)),
+      h('div', null, () => (show() ? 'visible' : false)),
       el,
     )
-    expect(el.querySelector("div")?.textContent).toBe("")
+    expect(el.querySelector('div')?.textContent).toBe('')
     show.set(true)
-    expect(el.querySelector("div")?.textContent).toBe("visible")
+    expect(el.querySelector('div')?.textContent).toBe('visible')
   })
 
-  test("reactive text fast path — null/undefined fallback", () => {
+  test('reactive text fast path — null/undefined fallback', () => {
     const el = container()
-    const text = signal<string | null>("hello")
+    const text = signal<string | null>('hello')
     mount(
-      h("div", null, () => text()),
+      h('div', null, () => text()),
       el,
     )
-    expect(el.querySelector("div")?.textContent).toBe("hello")
+    expect(el.querySelector('div')?.textContent).toBe('hello')
     text.set(null)
-    expect(el.querySelector("div")?.textContent).toBe("")
+    expect(el.querySelector('div')?.textContent).toBe('')
   })
 
-  test("reactive boolean text fast path", () => {
+  test('reactive boolean text fast path', () => {
     const el = container()
     const val = signal(true)
     mount(
-      h("div", null, () => val()),
+      h('div', null, () => val()),
       el,
     )
-    expect(el.querySelector("div")?.textContent).toBe("true")
+    expect(el.querySelector('div')?.textContent).toBe('true')
     val.set(false)
-    expect(el.querySelector("div")?.textContent).toBe("")
+    expect(el.querySelector('div')?.textContent).toBe('')
   })
 
-  test("mountReactive cleanup when anchor has no parent", () => {
+  test('mountReactive cleanup when anchor has no parent', () => {
     const el = container()
     const show = signal(true)
     const unmount = mount(
-      h("div", null, () => (show() ? h("span", null, "content") : null)),
+      h('div', null, () => (show() ? h('span', null, 'content') : null)),
       el,
     )
     unmount()
     // Should not throw even though marker may be detached
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── mount.ts — component branches ──────────────────────────────────────────
 
-describe("mount — component branches", () => {
-  test("component returning Fragment", () => {
+describe('mount — component branches', () => {
+  test('component returning Fragment', () => {
     const el = container()
     const FragComp = defineComponent(() =>
-      h(Fragment, null, h("span", null, "a"), h("span", null, "b")),
+      h(Fragment, null, h('span', null, 'a'), h('span', null, 'b')),
     )
     mount(h(FragComp, null), el)
-    expect(el.querySelectorAll("span").length).toBe(2)
+    expect(el.querySelectorAll('span').length).toBe(2)
   })
 
-  test("component with onMount returning cleanup", async () => {
+  test('component with onMount returning cleanup', async () => {
     const el = container()
     let cleaned = false
     const Comp = defineComponent(() => {
       onMount(() => () => {
         cleaned = true
       })
-      return h("div", null, "with-cleanup")
+      return h('div', null, 'with-cleanup')
     })
     const unmount = mount(h(Comp, null), el)
     expect(cleaned).toBe(false)
@@ -2374,14 +2374,14 @@ describe("mount — component branches", () => {
     expect(cleaned).toBe(true)
   })
 
-  test("component with onUnmount hook", async () => {
+  test('component with onUnmount hook', async () => {
     const el = container()
     let unmounted = false
     const Comp = defineComponent(() => {
       onUnmount(() => {
         unmounted = true
       })
-      return h("div", null, "unmount-test")
+      return h('div', null, 'unmount-test')
     })
     const unmount = mount(h(Comp, null), el)
     expect(unmounted).toBe(false)
@@ -2389,7 +2389,7 @@ describe("mount — component branches", () => {
     expect(unmounted).toBe(true)
   })
 
-  test("component with onUpdate hook", async () => {
+  test('component with onUpdate hook', async () => {
     const el = container()
     const Comp = defineComponent(() => {
       const count = signal(0)
@@ -2397,187 +2397,187 @@ describe("mount — component branches", () => {
         /* update tracked */
       })
       return h(
-        "div",
+        'div',
         null,
-        h("span", null, () => String(count())),
-        h("button", { onClick: () => count.update((n: number) => n + 1) }, "+"),
+        h('span', null, () => String(count())),
+        h('button', { onClick: () => count.update((n: number) => n + 1) }, '+'),
       )
     })
     mount(h(Comp, null), el)
     // Click to trigger update
-    el.querySelector("button")?.click()
+    el.querySelector('button')?.click()
     // onUpdate fires via microtask
   })
 
-  test("component children merge into props.children", () => {
+  test('component children merge into props.children', () => {
     const el = container()
     const Parent = defineComponent((props: { children?: VNodeChild }) =>
-      h("div", { id: "parent" }, props.children),
+      h('div', { id: 'parent' }, props.children),
     )
-    mount(h(Parent, null, h("span", null, "child1"), h("span", null, "child2")), el)
-    const spans = el.querySelectorAll("#parent span")
+    mount(h(Parent, null, h('span', null, 'child1'), h('span', null, 'child2')), el)
+    const spans = el.querySelectorAll('#parent span')
     expect(spans.length).toBe(2)
   })
 
-  test("component with single child merges as singular children prop", () => {
+  test('component with single child merges as singular children prop', () => {
     const el = container()
     const Parent = defineComponent((props: { children?: VNodeChild }) =>
-      h("div", { id: "single" }, props.children),
+      h('div', { id: 'single' }, props.children),
     )
-    mount(h(Parent, null, h("b", null, "only")), el)
-    expect(el.querySelector("#single b")?.textContent).toBe("only")
+    mount(h(Parent, null, h('b', null, 'only')), el)
+    expect(el.querySelector('#single b')?.textContent).toBe('only')
   })
 
-  test("component props.children already set — no merge", () => {
+  test('component props.children already set — no merge', () => {
     const el = container()
     const Parent = defineComponent((props: { children?: VNodeChild }) =>
-      h("div", { id: "no-merge" }, props.children),
+      h('div', { id: 'no-merge' }, props.children),
     )
-    mount(h(Parent, { children: h("em", null, "explicit") }, h("b", null, "ignored")), el)
-    expect(el.querySelector("#no-merge em")?.textContent).toBe("explicit")
+    mount(h(Parent, { children: h('em', null, 'explicit') }, h('b', null, 'ignored')), el)
+    expect(el.querySelector('#no-merge em')?.textContent).toBe('explicit')
   })
 
-  test("anonymous component name fallback", () => {
+  test('anonymous component name fallback', () => {
     const el = container()
     // Use an anonymous arrow function
-    const comp = (() => h("span", null, "anon")) as unknown as ReturnType<typeof defineComponent>
+    const comp = (() => h('span', null, 'anon')) as unknown as ReturnType<typeof defineComponent>
     mount(h(comp, null), el)
-    expect(el.querySelector("span")?.textContent).toBe("anon")
+    expect(el.querySelector('span')?.textContent).toBe('anon')
   })
 })
 
 // ─── props.ts — additional coverage ──────────────────────────────────────────
 
-describe("props — additional coverage", () => {
-  test("reactive prop via function", () => {
+describe('props — additional coverage', () => {
+  test('reactive prop via function', () => {
     const el = container()
-    const title = signal("hello")
-    mount(h("div", { title: () => title() }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.title).toBe("hello")
-    title.set("world")
-    expect(div.title).toBe("world")
+    const title = signal('hello')
+    mount(h('div', { title: () => title() }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.title).toBe('hello')
+    title.set('world')
+    expect(div.title).toBe('world')
   })
 
-  test("null value removes attribute", () => {
+  test('null value removes attribute', () => {
     const el = container()
-    mount(h("div", { "data-x": "initial" }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.getAttribute("data-x")).toBe("initial")
+    mount(h('div', { 'data-x': 'initial' }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.getAttribute('data-x')).toBe('initial')
   })
 
-  test("key and ref props are skipped in applyProps", () => {
+  test('key and ref props are skipped in applyProps', () => {
     const el = container()
     const ref = createRef<HTMLDivElement>()
-    mount(h("div", { key: "k", ref, "data-test": "yes" }), el)
-    const div = el.querySelector("div") as HTMLElement
+    mount(h('div', { key: 'k', ref, 'data-test': 'yes' }), el)
+    const div = el.querySelector('div') as HTMLElement
     // key should not be an attribute
-    expect(div.hasAttribute("key")).toBe(false)
+    expect(div.hasAttribute('key')).toBe(false)
     // ref should not be an attribute
-    expect(div.hasAttribute("ref")).toBe(false)
+    expect(div.hasAttribute('ref')).toBe(false)
     // data-test should be set
-    expect(div.getAttribute("data-test")).toBe("yes")
+    expect(div.getAttribute('data-test')).toBe('yes')
   })
 
-  test("sanitizes javascript: in action attribute", () => {
+  test('sanitizes javascript: in action attribute', () => {
     const el = container()
-    mount(h("form", { action: "javascript:void(0)" }), el)
-    const form = el.querySelector("form") as HTMLFormElement
-    expect(form.getAttribute("action")).not.toBe("javascript:void(0)")
+    mount(h('form', { action: 'javascript:void(0)' }), el)
+    const form = el.querySelector('form') as HTMLFormElement
+    expect(form.getAttribute('action')).not.toBe('javascript:void(0)')
   })
 
-  test("sanitizes data: in formaction", () => {
+  test('sanitizes data: in formaction', () => {
     const el = container()
-    mount(h("button", { formaction: "data:text/html,<script>alert(1)</script>" }), el)
-    const btn = el.querySelector("button") as HTMLButtonElement
-    expect(btn.getAttribute("formaction")).not.toBe("data:text/html,<script>alert(1)</script>")
+    mount(h('button', { formaction: 'data:text/html,<script>alert(1)</script>' }), el)
+    const btn = el.querySelector('button') as HTMLButtonElement
+    expect(btn.getAttribute('formaction')).not.toBe('data:text/html,<script>alert(1)</script>')
   })
 
-  test("sanitizes javascript: with leading whitespace", () => {
+  test('sanitizes javascript: with leading whitespace', () => {
     const el = container()
-    mount(h("a", { href: "  javascript:alert(1)" }), el)
-    const a = el.querySelector("a") as HTMLAnchorElement
-    expect(a.getAttribute("href")).not.toBe("  javascript:alert(1)")
+    mount(h('a', { href: '  javascript:alert(1)' }), el)
+    const a = el.querySelector('a') as HTMLAnchorElement
+    expect(a.getAttribute('href')).not.toBe('  javascript:alert(1)')
   })
 
-  test("sanitizeHtml preserves safe tags", async () => {
-    const result = sanitizeHtml("<b>bold</b><em>italic</em>")
-    expect(result).toContain("<b>bold</b>")
-    expect(result).toContain("<em>italic</em>")
+  test('sanitizeHtml preserves safe tags', async () => {
+    const result = sanitizeHtml('<b>bold</b><em>italic</em>')
+    expect(result).toContain('<b>bold</b>')
+    expect(result).toContain('<em>italic</em>')
   })
 
-  test("sanitizeHtml strips script tags", async () => {
-    const result = sanitizeHtml("<div>safe</div><script>alert(1)</script>")
-    expect(result).toContain("safe")
-    expect(result).not.toContain("<script>")
+  test('sanitizeHtml strips script tags', async () => {
+    const result = sanitizeHtml('<div>safe</div><script>alert(1)</script>')
+    expect(result).toContain('safe')
+    expect(result).not.toContain('<script>')
   })
 
-  test("sanitizeHtml strips event handler attributes", async () => {
+  test('sanitizeHtml strips event handler attributes', async () => {
     const result = sanitizeHtml('<div onclick="alert(1)">hello</div>')
-    expect(result).toContain("hello")
-    expect(result).not.toContain("onclick")
+    expect(result).toContain('hello')
+    expect(result).not.toContain('onclick')
   })
 
-  test("sanitizeHtml strips javascript: URLs", async () => {
+  test('sanitizeHtml strips javascript: URLs', async () => {
     const result = sanitizeHtml('<a href="javascript:alert(1)">link</a>')
-    expect(result).not.toContain("javascript:")
+    expect(result).not.toContain('javascript:')
   })
 
-  test("setSanitizer overrides built-in sanitizer", async () => {
+  test('setSanitizer overrides built-in sanitizer', async () => {
     // Set custom sanitizer that uppercases everything
     setSanitizer((html: string) => html.toUpperCase())
-    expect(sanitizeHtml("<b>hello</b>")).toBe("<B>HELLO</B>")
+    expect(sanitizeHtml('<b>hello</b>')).toBe('<B>HELLO</B>')
     // Reset to built-in
     setSanitizer(null)
     // Built-in should work again
-    const result = sanitizeHtml("<b>safe</b><script>bad</script>")
-    expect(result).toContain("safe")
-    expect(result).not.toContain("<script>")
+    const result = sanitizeHtml('<b>safe</b><script>bad</script>')
+    expect(result).toContain('safe')
+    expect(result).not.toContain('<script>')
   })
 
-  test("sanitizeHtml strips iframe and object tags", async () => {
+  test('sanitizeHtml strips iframe and object tags', async () => {
     const result = sanitizeHtml(
       '<div>ok</div><iframe src="evil"></iframe><object data="x"></object>',
     )
-    expect(result).toContain("ok")
-    expect(result).not.toContain("<iframe")
-    expect(result).not.toContain("<object")
+    expect(result).toContain('ok')
+    expect(result).not.toContain('<iframe')
+    expect(result).not.toContain('<object')
   })
 
-  test("sanitizeHtml handles nested unsafe elements", async () => {
-    const result = sanitizeHtml("<div><script><script>alert(1)</script></script></div>")
-    expect(result).not.toContain("<script")
+  test('sanitizeHtml handles nested unsafe elements', async () => {
+    const result = sanitizeHtml('<div><script><script>alert(1)</script></script></div>')
+    expect(result).not.toContain('<script')
   })
 
-  test("DOM property for known properties like value", () => {
+  test('DOM property for known properties like value', () => {
     const el = container()
-    mount(h("input", { value: "test", type: "text" }), el)
-    const input = el.querySelector("input") as HTMLInputElement
-    expect(input.value).toBe("test")
+    mount(h('input', { value: 'test', type: 'text' }), el)
+    const input = el.querySelector('input') as HTMLInputElement
+    expect(input.value).toBe('test')
   })
 
-  test("setAttribute fallback for unknown attributes", () => {
+  test('setAttribute fallback for unknown attributes', () => {
     const el = container()
-    mount(h("div", { "aria-label": "test label" }), el)
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.getAttribute("aria-label")).toBe("test label")
+    mount(h('div', { 'aria-label': 'test label' }), el)
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.getAttribute('aria-label')).toBe('test label')
   })
 })
 
 // ─── DevTools ────────────────────────────────────────────────────────────────
 
-describe("DevTools", () => {
-  test("installDevTools sets __PYREON_DEVTOOLS__ on window", async () => {
+describe('DevTools', () => {
+  test('installDevTools sets __PYREON_DEVTOOLS__ on window', async () => {
     installDevTools()
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as Record<
       string,
       unknown
     >
     expect(devtools).not.toBeNull()
-    expect(devtools.version).toBe("0.1.0")
+    expect(devtools.version).toBe('0.1.0')
   })
 
-  test("registerComponent and getAllComponents", async () => {
+  test('registerComponent and getAllComponents', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       getAllComponents: () => {
         id: string
@@ -2591,17 +2591,17 @@ describe("DevTools", () => {
       onComponentUnmount: (cb: (id: string) => void) => () => void
     }
 
-    registerComponent("test-1", "TestComp", null, null)
+    registerComponent('test-1', 'TestComp', null, null)
     const all = devtools.getAllComponents()
-    const found = all.find((c: { id: string }) => c.id === "test-1")
+    const found = all.find((c: { id: string }) => c.id === 'test-1')
     expect(found).not.toBeUndefined()
-    expect(found?.name).toBe("TestComp")
+    expect(found?.name).toBe('TestComp')
 
     // Cleanup
-    unregisterComponent("test-1")
+    unregisterComponent('test-1')
   })
 
-  test("registerComponent with parentId creates parent-child relationship", async () => {
+  test('registerComponent with parentId creates parent-child relationship', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       getAllComponents: () => {
         id: string
@@ -2611,55 +2611,55 @@ describe("DevTools", () => {
       }[]
     }
 
-    registerComponent("parent-1", "Parent", null, null)
-    registerComponent("child-1", "Child", null, "parent-1")
+    registerComponent('parent-1', 'Parent', null, null)
+    registerComponent('child-1', 'Child', null, 'parent-1')
 
-    const parent = devtools.getAllComponents().find((c: { id: string }) => c.id === "parent-1")
-    expect(parent?.childIds).toContain("child-1")
+    const parent = devtools.getAllComponents().find((c: { id: string }) => c.id === 'parent-1')
+    expect(parent?.childIds).toContain('child-1')
 
-    unregisterComponent("child-1")
-    const parentAfter = devtools.getAllComponents().find((c: { id: string }) => c.id === "parent-1")
-    expect(parentAfter?.childIds).not.toContain("child-1")
+    unregisterComponent('child-1')
+    const parentAfter = devtools.getAllComponents().find((c: { id: string }) => c.id === 'parent-1')
+    expect(parentAfter?.childIds).not.toContain('child-1')
 
-    unregisterComponent("parent-1")
+    unregisterComponent('parent-1')
   })
 
-  test("getComponentTree returns only root components", async () => {
+  test('getComponentTree returns only root components', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       getComponentTree: () => { id: string; parentId: string | null }[]
     }
 
-    registerComponent("root-1", "Root", null, null)
-    registerComponent("sub-1", "Sub", null, "root-1")
+    registerComponent('root-1', 'Root', null, null)
+    registerComponent('sub-1', 'Sub', null, 'root-1')
 
     const tree = devtools.getComponentTree()
-    const rootInTree = tree.find((c: { id: string }) => c.id === "root-1")
-    const subInTree = tree.find((c: { id: string }) => c.id === "sub-1")
+    const rootInTree = tree.find((c: { id: string }) => c.id === 'root-1')
+    const subInTree = tree.find((c: { id: string }) => c.id === 'sub-1')
     expect(rootInTree).not.toBeUndefined()
     expect(subInTree).toBeUndefined() // sub is not root
 
-    unregisterComponent("sub-1")
-    unregisterComponent("root-1")
+    unregisterComponent('sub-1')
+    unregisterComponent('root-1')
   })
 
-  test("highlight adds and removes outline", async () => {
+  test('highlight adds and removes outline', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       highlight: (id: string) => void
     }
-    const el = document.createElement("div")
+    const el = document.createElement('div')
     document.body.appendChild(el)
-    registerComponent("hl-1", "Highlight", el, null)
-    devtools.highlight("hl-1")
-    expect(el.style.outline).toContain("#00b4d8")
+    registerComponent('hl-1', 'Highlight', el, null)
+    devtools.highlight('hl-1')
+    expect(el.style.outline).toContain('#00b4d8')
 
     // Highlight non-existent — should not throw
-    devtools.highlight("non-existent")
+    devtools.highlight('non-existent')
 
-    unregisterComponent("hl-1")
+    unregisterComponent('hl-1')
     el.remove()
   })
 
-  test("onComponentMount and onComponentUnmount listeners", async () => {
+  test('onComponentMount and onComponentUnmount listeners', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       onComponentMount: (cb: (entry: { id: string; name: string }) => void) => () => void
       onComponentUnmount: (cb: (id: string) => void) => () => void
@@ -2670,150 +2670,150 @@ describe("DevTools", () => {
     const unsubMount = devtools.onComponentMount((entry) => mountedIds.push(entry.id))
     const unsubUnmount = devtools.onComponentUnmount((id) => unmountedIds.push(id))
 
-    registerComponent("listen-1", "ListenComp", null, null)
-    expect(mountedIds).toContain("listen-1")
+    registerComponent('listen-1', 'ListenComp', null, null)
+    expect(mountedIds).toContain('listen-1')
 
-    unregisterComponent("listen-1")
-    expect(unmountedIds).toContain("listen-1")
+    unregisterComponent('listen-1')
+    expect(unmountedIds).toContain('listen-1')
 
     // Unsub and verify listeners are removed
     unsubMount()
     unsubUnmount()
-    registerComponent("listen-2", "ListenComp2", null, null)
-    expect(mountedIds).not.toContain("listen-2")
-    unregisterComponent("listen-2")
-    expect(unmountedIds).not.toContain("listen-2")
+    registerComponent('listen-2', 'ListenComp2', null, null)
+    expect(mountedIds).not.toContain('listen-2')
+    unregisterComponent('listen-2')
+    expect(unmountedIds).not.toContain('listen-2')
   })
 
-  test("unregisterComponent is noop for unknown id", async () => {
+  test('unregisterComponent is noop for unknown id', async () => {
     // Should not throw
-    unregisterComponent("does-not-exist")
+    unregisterComponent('does-not-exist')
   })
 
-  test("highlight with no el is noop", async () => {
+  test('highlight with no el is noop', async () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       highlight: (id: string) => void
     }
-    registerComponent("no-el", "NoEl", null, null)
+    registerComponent('no-el', 'NoEl', null, null)
     // Should not throw
-    devtools.highlight("no-el")
-    unregisterComponent("no-el")
+    devtools.highlight('no-el')
+    unregisterComponent('no-el')
   })
 })
 
 // ─── TransitionGroup ─────────────────────────────────────────────────────────
 
-describe("TransitionGroup", () => {
-  test("renders container element with specified tag", async () => {
+describe('TransitionGroup', () => {
+  test('renders container element with specified tag', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
     mount(
       h(TransitionGroup, {
-        tag: "ul",
-        name: "list",
+        tag: 'ul',
+        name: 'list',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("li", null, String(item.id)),
+        render: (item: { id: number }) => h('li', null, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector("ul")).not.toBeNull()
+    expect(el.querySelector('ul')).not.toBeNull()
   })
 
-  test("renders initial items", async () => {
+  test('renders initial items', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }, { id: 3 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
+        tag: 'div',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    const spans = el.querySelectorAll("span.item")
+    const spans = el.querySelectorAll('span.item')
     expect(spans.length).toBe(3)
-    expect(spans[0]?.textContent).toBe("1")
-    expect(spans[2]?.textContent).toBe("3")
+    expect(spans[0]?.textContent).toBe('1')
+    expect(spans[2]?.textContent).toBe('3')
   })
 
-  test("adding items triggers enter animation", async () => {
+  test('adding items triggers enter animation', async () => {
     const el = container()
     const items = signal([{ id: 1 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "fade",
+        tag: 'div',
+        name: 'fade',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span.item").length).toBe(1)
+    expect(el.querySelectorAll('span.item').length).toBe(1)
 
     // Add a new item
     items.set([{ id: 1 }, { id: 2 }])
     // Wait for the microtask (enter animation scheduled via queueMicrotask)
     await new Promise<void>((r) => queueMicrotask(r))
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span.item").length).toBe(2)
+    expect(el.querySelectorAll('span.item').length).toBe(2)
   })
 
-  test("removing items keeps element during leave animation", async () => {
+  test('removing items keeps element during leave animation', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "fade",
+        tag: 'div',
+        name: 'fade',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span.item").length).toBe(2)
+    expect(el.querySelectorAll('span.item').length).toBe(2)
 
     // Remove item 2
     items.set([{ id: 1 }])
     // Element should still be in DOM during leave animation
-    expect(el.querySelectorAll("span.item").length).toBeGreaterThanOrEqual(1)
+    expect(el.querySelectorAll('span.item').length).toBeGreaterThanOrEqual(1)
   })
 
-  test("default tag is div and default name is pyreon", async () => {
+  test('default tag is div and default name is pyreon', async () => {
     const el = container()
     const items = signal([{ id: 1 }])
     mount(
       h(TransitionGroup, {
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", null, String(item.id)),
+        render: (item: { id: number }) => h('span', null, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
     // Default tag is div
-    expect(el.querySelector("div")).not.toBeNull()
+    expect(el.querySelector('div')).not.toBeNull()
   })
 
-  test("appear option triggers enter on initial mount", async () => {
+  test('appear option triggers enter on initial mount', async () => {
     const el = container()
     let enterCalled = false
     const items = signal([{ id: 1 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "test",
+        tag: 'div',
+        name: 'test',
         appear: true,
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "appear-item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'appear-item' }, String(item.id)),
         onBeforeEnter: () => {
           enterCalled = true
         },
@@ -2825,40 +2825,40 @@ describe("TransitionGroup", () => {
     expect(enterCalled).toBe(true)
   })
 
-  test("custom class name overrides", async () => {
+  test('custom class name overrides', async () => {
     const el = container()
     const items = signal([{ id: 1 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        enterFrom: "my-enter-from",
-        enterActive: "my-enter-active",
-        enterTo: "my-enter-to",
-        leaveFrom: "my-leave-from",
-        leaveActive: "my-leave-active",
-        leaveTo: "my-leave-to",
-        moveClass: "my-move",
+        tag: 'div',
+        enterFrom: 'my-enter-from',
+        enterActive: 'my-enter-active',
+        enterTo: 'my-enter-to',
+        leaveFrom: 'my-leave-from',
+        leaveActive: 'my-leave-active',
+        leaveTo: 'my-leave-to',
+        moveClass: 'my-move',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", null, String(item.id)),
+        render: (item: { id: number }) => h('span', null, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span").length).toBe(1)
+    expect(el.querySelectorAll('span').length).toBe(1)
   })
 
-  test("leave callback with no ref.current removes entry immediately", async () => {
+  test('leave callback with no ref.current removes entry immediately', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
+        tag: 'div',
         items,
         keyFn: (item: { id: number }) => item.id,
         // Return a non-element VNode (component VNode) so ref won't be injected
         render: (item: { id: number }) => {
-          const Comp = () => h("span", null, String(item.id))
+          const Comp = () => h('span', null, String(item.id))
           return h(Comp, null) as unknown as ReturnType<typeof h>
         },
       }),
@@ -2871,44 +2871,44 @@ describe("TransitionGroup", () => {
     await new Promise<void>((r) => queueMicrotask(r))
   })
 
-  test("reorder triggers move animation setup", async () => {
+  test('reorder triggers move animation setup', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }, { id: 3 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "list",
+        tag: 'div',
+        name: 'list',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "reorder-item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'reorder-item' }, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span.reorder-item").length).toBe(3)
+    expect(el.querySelectorAll('span.reorder-item').length).toBe(3)
 
     // Reorder items
     items.set([{ id: 3 }, { id: 1 }, { id: 2 }])
     await new Promise<void>((r) => queueMicrotask(r))
 
     // Items should be reordered
-    const spans = el.querySelectorAll("span.reorder-item")
-    expect(spans[0]?.textContent).toBe("3")
-    expect(spans[1]?.textContent).toBe("1")
-    expect(spans[2]?.textContent).toBe("2")
+    const spans = el.querySelectorAll('span.reorder-item')
+    expect(spans[0]?.textContent).toBe('3')
+    expect(spans[1]?.textContent).toBe('1')
+    expect(spans[2]?.textContent).toBe('2')
   })
 
-  test("onAfterEnter callback fires after enter transition", async () => {
+  test('onAfterEnter callback fires after enter transition', async () => {
     const el = container()
     let afterEnterCalled = false
     const items = signal<{ id: number }[]>([])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "fade",
+        tag: 'div',
+        name: 'fade',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", null, String(item.id)),
+        render: (item: { id: number }) => h('span', null, String(item.id)),
         onAfterEnter: () => {
           afterEnterCalled = true
         },
@@ -2924,24 +2924,24 @@ describe("TransitionGroup", () => {
 
     // Trigger rAF and transitionend
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const span = el.querySelector("span")
+    const span = el.querySelector('span')
     if (span) {
-      span.dispatchEvent(new Event("transitionend"))
+      span.dispatchEvent(new Event('transitionend'))
     }
     expect(afterEnterCalled).toBe(true)
   })
 
-  test("onBeforeLeave and onAfterLeave callbacks fire", async () => {
+  test('onBeforeLeave and onAfterLeave callbacks fire', async () => {
     const el = container()
     let beforeLeaveCalled = false
     const items = signal([{ id: 1 }])
     mount(
       h(TransitionGroup, {
-        tag: "div",
-        name: "fade",
+        tag: 'div',
+        name: 'fade',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", { class: "leave-item" }, String(item.id)),
+        render: (item: { id: number }) => h('span', { class: 'leave-item' }, String(item.id)),
         onBeforeLeave: () => {
           beforeLeaveCalled = true
         },
@@ -2959,22 +2959,22 @@ describe("TransitionGroup", () => {
 
     // Trigger leave animation completion
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const span = el.querySelector("span.leave-item")
+    const span = el.querySelector('span.leave-item')
     if (span) {
-      span.dispatchEvent(new Event("transitionend"))
+      span.dispatchEvent(new Event('transitionend'))
     }
     // afterLeave fires inside rAF callback, might need another tick
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
     if (span) {
-      span.dispatchEvent(new Event("transitionend"))
+      span.dispatchEvent(new Event('transitionend'))
     }
   })
 })
 
 // ─── Hydration debug ────────────────────────────────────────────────────────
 
-describe("hydration warnings", () => {
-  test("enableHydrationWarnings and disableHydrationWarnings", async () => {
+describe('hydration warnings', () => {
+  test('enableHydrationWarnings and disableHydrationWarnings', async () => {
     // Should not throw
     enableHydrationWarnings()
     disableHydrationWarnings()
@@ -2984,119 +2984,119 @@ describe("hydration warnings", () => {
 
 // ─── Additional hydrate.ts branch coverage ───────────────────────────────────
 
-describe("hydrateRoot — branch coverage", () => {
-  test("hydrates raw array child (non-Fragment array path)", async () => {
+describe('hydrateRoot — branch coverage', () => {
+  test('hydrates raw array child (non-Fragment array path)', async () => {
     const el = container()
-    el.innerHTML = "<span>a</span><span>b</span>"
+    el.innerHTML = '<span>a</span><span>b</span>'
     // Pass an array directly — hits the Array.isArray branch in hydrateChild
-    const cleanup = hydrateRoot(el, [h("span", null, "a"), h("span", null, "b")])
-    expect(el.querySelectorAll("span").length).toBe(2)
+    const cleanup = hydrateRoot(el, [h('span', null, 'a'), h('span', null, 'b')])
+    expect(el.querySelectorAll('span').length).toBe(2)
     cleanup()
   })
 
-  test("hydrates For with SSR markers (start/end comment pair)", async () => {
+  test('hydrates For with SSR markers (start/end comment pair)', async () => {
     const el = container()
-    el.innerHTML = "<div><!--pyreon-for--><li>item1</li><li>item2</li><!--/pyreon-for--></div>"
+    el.innerHTML = '<div><!--pyreon-for--><li>item1</li><li>item2</li><!--/pyreon-for--></div>'
     const items = signal([
-      { id: 1, label: "item1" },
-      { id: 2, label: "item2" },
+      { id: 1, label: 'item1' },
+      { id: 2, label: 'item2' },
     ])
     const cleanup = hydrateRoot(
       el,
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
           by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h("li", null, r.label),
+          children: (r: { id: number; label: string }) => h('li', null, r.label),
         }),
       ),
     )
     cleanup()
   })
 
-  test("hydrates reactive accessor returning null with no domNode", async () => {
+  test('hydrates reactive accessor returning null with no domNode', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
+    el.innerHTML = '<div></div>'
     const show = signal<VNodeChild>(null)
     // The div has no children, so domNode will be null inside
-    const cleanup = hydrateRoot(el, h("div", null, (() => show()) as unknown as VNodeChild))
-    show.set("hello")
+    const cleanup = hydrateRoot(el, h('div', null, (() => show()) as unknown as VNodeChild))
+    show.set('hello')
     cleanup()
   })
 
-  test("hydrates reactive VNode accessor with marker when no domNode", async () => {
+  test('hydrates reactive VNode accessor with marker when no domNode', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
-    const content = signal<VNodeChild>(h("span", null, "initial"))
-    const cleanup = hydrateRoot(el, h("div", null, (() => content()) as unknown as VNodeChild))
+    el.innerHTML = '<div></div>'
+    const content = signal<VNodeChild>(h('span', null, 'initial'))
+    const cleanup = hydrateRoot(el, h('div', null, (() => content()) as unknown as VNodeChild))
     cleanup()
   })
 
-  test("hydrates unknown symbol vnode type — returns noop", async () => {
+  test('hydrates unknown symbol vnode type — returns noop', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
-    const weirdVNode = { type: Symbol("weird"), props: {}, children: [], key: null }
-    const cleanup = hydrateRoot(el, h("div", null, weirdVNode as VNodeChild))
+    el.innerHTML = '<div></div>'
+    const weirdVNode = { type: Symbol('weird'), props: {}, children: [], key: null }
+    const cleanup = hydrateRoot(el, h('div', null, weirdVNode as VNodeChild))
     cleanup()
   })
 
-  test("hydration of text that matches existing text node — cleanup removes it", async () => {
+  test('hydration of text that matches existing text node — cleanup removes it', async () => {
     const el = container()
-    el.innerHTML = "hello"
-    const cleanup = hydrateRoot(el, "hello")
-    expect(el.textContent).toBe("hello")
+    el.innerHTML = 'hello'
+    const cleanup = hydrateRoot(el, 'hello')
+    expect(el.textContent).toBe('hello')
     cleanup()
   })
 
-  test("For with no SSR markers and domNode present", async () => {
+  test('For with no SSR markers and domNode present', async () => {
     const el = container()
-    el.innerHTML = "<div><span>existing</span></div>"
-    const items = signal([{ id: 1, label: "a" }])
+    el.innerHTML = '<div><span>existing</span></div>'
+    const items = signal([{ id: 1, label: 'a' }])
     const cleanup = hydrateRoot(
       el,
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
           by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h("li", null, r.label),
+          children: (r: { id: number; label: string }) => h('li', null, r.label),
         }),
       ),
     )
     cleanup()
   })
 
-  test("For with no SSR markers and no domNode", async () => {
+  test('For with no SSR markers and no domNode', async () => {
     const el = container()
-    el.innerHTML = "<div></div>"
-    const items = signal([{ id: 1, label: "a" }])
+    el.innerHTML = '<div></div>'
+    const items = signal([{ id: 1, label: 'a' }])
     const cleanup = hydrateRoot(
       el,
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
           by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h("li", null, r.label),
+          children: (r: { id: number; label: string }) => h('li', null, r.label),
         }),
       ),
     )
     cleanup()
   })
 
-  test("reactive accessor returning null when domNode exists", async () => {
+  test('reactive accessor returning null when domNode exists', async () => {
     const el = container()
     // Put a real DOM node that will be domNode, but accessor returns null
-    el.innerHTML = "<div><span>existing</span></div>"
+    el.innerHTML = '<div><span>existing</span></div>'
     const show = signal<VNodeChild>(null)
     // The span is the domNode, but accessor returns null — hits line 91-92
     const cleanup = hydrateRoot(
       el,
-      h("div", null, (() => show()) as unknown as VNodeChild, h("span", null, "existing")),
+      h('div', null, (() => show()) as unknown as VNodeChild, h('span', null, 'existing')),
     )
     cleanup()
   })
@@ -3104,22 +3104,22 @@ describe("hydrateRoot — branch coverage", () => {
 
 // ─── mount.ts — error handling branches ──────────────────────────────────────
 
-describe("mount — error handling branches", () => {
-  test("mountChild with raw array", async () => {
+describe('mount — error handling branches', () => {
+  test('mountChild with raw array', async () => {
     const el = container()
     // Pass an array directly to mountChild (line 72)
-    const cleanup = mountChild([h("span", null, "x"), h("span", null, "y")], el, null)
-    expect(el.querySelectorAll("span").length).toBe(2)
+    const cleanup = mountChild([h('span', null, 'x'), h('span', null, 'y')], el, null)
+    expect(el.querySelectorAll('span').length).toBe(2)
     cleanup()
   })
 
-  test("component subtree throw is caught", () => {
+  test('component subtree throw is caught', () => {
     const el = container()
     // A component whose render output itself causes an error during mount
     const BadRender = defineComponent(() => {
       // Return a VNode that includes a broken component child
       const Throws = defineComponent((): never => {
-        throw new Error("subtree error")
+        throw new Error('subtree error')
       })
       return h(Throws, null)
     })
@@ -3127,26 +3127,26 @@ describe("mount — error handling branches", () => {
     mount(h(BadRender, null), el)
   })
 
-  test("onMount hook that throws is caught", async () => {
+  test('onMount hook that throws is caught', async () => {
     const el = container()
     const Comp = defineComponent(() => {
       onMount(() => {
-        throw new Error("onMount error")
+        throw new Error('onMount error')
       })
-      return h("div", null, "content")
+      return h('div', null, 'content')
     })
     // Should not throw
     mount(h(Comp, null), el)
-    expect(el.querySelector("div")?.textContent).toBe("content")
+    expect(el.querySelector('div')?.textContent).toBe('content')
   })
 
-  test("onUnmount hook that throws is caught", async () => {
+  test('onUnmount hook that throws is caught', async () => {
     const el = container()
     const Comp = defineComponent(() => {
       onUnmount(() => {
-        throw new Error("onUnmount error")
+        throw new Error('onUnmount error')
       })
-      return h("div", null, "content")
+      return h('div', null, 'content')
     })
     const unmount = mount(h(Comp, null), el)
     // Should not throw
@@ -3156,57 +3156,57 @@ describe("mount — error handling branches", () => {
 
 // ─── TransitionGroup — unmount cleanup ───────────────────────────────────────
 
-describe("TransitionGroup — cleanup", () => {
-  test("unmount disposes effect and cleans up entries", async () => {
+describe('TransitionGroup — cleanup', () => {
+  test('unmount disposes effect and cleans up entries', async () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
     const unmount = mount(
       h(TransitionGroup, {
-        tag: "div",
+        tag: 'div',
         items,
         keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h("span", null, String(item.id)),
+        render: (item: { id: number }) => h('span', null, String(item.id)),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span").length).toBe(2)
+    expect(el.querySelectorAll('span').length).toBe(2)
     unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── Error paths (no ErrorBoundary) ──────────────────────────────────────────
 
-describe("mount — error paths", () => {
-  test("component that throws during setup fires console.error", () => {
+describe('mount — error paths', () => {
+  test('component that throws during setup fires console.error', () => {
     const el = container()
-    const spy = vi.spyOn(console, "error").mockImplementation(() => {})
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     const Broken: ComponentFn = () => {
-      throw new Error("setup boom")
+      throw new Error('setup boom')
     }
     mount(h(Broken, null), el)
 
     expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining("threw during setup"),
+      expect.stringContaining('threw during setup'),
       expect.any(Error),
     )
     spy.mockRestore()
   })
 
-  test("component that throws during render fires console.error", () => {
+  test('component that throws during render fires console.error', () => {
     const el = container()
-    const spy = vi.spyOn(console, "error").mockImplementation(() => {})
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     const BrokenChild: ComponentFn = () => {
-      throw new Error("render boom")
+      throw new Error('render boom')
     }
     // Parent returns a child that throws when mounted (render phase)
     const Parent: ComponentFn = () => h(BrokenChild, null)
     mount(h(Parent, null), el)
 
-    expect(spy).toHaveBeenCalledWith(expect.stringContaining("threw during"), expect.any(Error))
+    expect(spy).toHaveBeenCalledWith(expect.stringContaining('threw during'), expect.any(Error))
     spy.mockRestore()
   })
 })