@pyreon/runtime-dom 0.11.4 → 0.11.6

package/src/tests/coverage.test.ts

@@ -3,7 +3,7 @@
  * Covers gaps in: devtools.ts, template.ts, mount.ts, transition.ts,
  * hydrate.ts, transition-group.ts, nodes.ts, props.ts
  */
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
 import {
   createRef,
   defineComponent,
@@ -14,9 +14,9 @@ import {
   onUnmount,
   onUpdate,
   Portal,
-} from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import { installDevTools, registerComponent, unregisterComponent } from "../devtools"
+} from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { installDevTools, registerComponent, unregisterComponent } from '../devtools'
 import {
   Transition as _Transition,
   TransitionGroup as _TransitionGroup,
@@ -25,53 +25,53 @@ import {
   mount,
   sanitizeHtml,
   setSanitizer,
-} from "../index"
-import { mountChild } from "../mount"
+} from '../index'
+import { mountChild } from '../mount'
 
 const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>>
 const TransitionGroup = _TransitionGroup 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
 }
 
 // ─── template.ts — _tpl() compiler API (lines 72-80) ─────────────────────────
 
-describe("_tpl — compiler-facing template API", () => {
-  test("creates a NativeItem from HTML string and bind function", () => {
+describe('_tpl — compiler-facing template API', () => {
+  test('creates a NativeItem from HTML string and bind function', () => {
     const el = container()
     const native = _tpl('<div class="box"><span></span></div>', (root) => {
-      const span = root.querySelector("span")!
-      span.textContent = "hello"
+      const span = root.querySelector('span')!
+      span.textContent = 'hello'
       return null
     })
     expect(native.__isNative).toBe(true)
     expect(native.el).toBeInstanceOf(HTMLElement)
     el.appendChild(native.el)
-    expect(el.querySelector(".box span")?.textContent).toBe("hello")
+    expect(el.querySelector('.box span')?.textContent).toBe('hello')
   })
 
-  test("caches template elements — same HTML string reuses template", () => {
+  test('caches template elements — same HTML string reuses template', () => {
     const html = '<p class="cached"><em></em></p>'
     const n1 = _tpl(html, (root) => {
-      root.querySelector("em")!.textContent = "first"
+      root.querySelector('em')!.textContent = 'first'
       return null
     })
     const n2 = _tpl(html, (root) => {
-      root.querySelector("em")!.textContent = "second"
+      root.querySelector('em')!.textContent = 'second'
       return null
     })
     // Both produce valid elements but they are separate clones
     expect(n1.el).not.toBe(n2.el)
-    expect((n1.el as HTMLElement).querySelector("em")?.textContent).toBe("first")
-    expect((n2.el as HTMLElement).querySelector("em")?.textContent).toBe("second")
+    expect((n1.el as HTMLElement).querySelector('em')?.textContent).toBe('first')
+    expect((n2.el as HTMLElement).querySelector('em')?.textContent).toBe('second')
   })
 
-  test("bind function can return a cleanup", () => {
+  test('bind function can return a cleanup', () => {
     let cleaned = false
-    const native = _tpl("<div></div>", () => {
+    const native = _tpl('<div></div>', () => {
       return () => {
         cleaned = true
       }
@@ -81,22 +81,22 @@ describe("_tpl — compiler-facing template API", () => {
     expect(cleaned).toBe(true)
   })
 
-  test("mountChild handles NativeItem from _tpl", () => {
+  test('mountChild handles NativeItem from _tpl', () => {
     const el = container()
-    const native = _tpl("<span>tpl</span>", () => null)
+    const native = _tpl('<span>tpl</span>', () => null)
     const cleanup = mountChild(native as unknown as VNodeChild, el, null)
-    expect(el.querySelector("span")?.textContent).toBe("tpl")
+    expect(el.querySelector('span')?.textContent).toBe('tpl')
     cleanup()
   })
 
-  test("mountChild handles NativeItem with cleanup from _tpl", () => {
+  test('mountChild handles NativeItem with cleanup from _tpl', () => {
     const el = container()
     let cleaned = false
-    const native = _tpl("<span>tpl2</span>", () => () => {
+    const native = _tpl('<span>tpl2</span>', () => () => {
       cleaned = true
     })
     const cleanup = mountChild(native as unknown as VNodeChild, el, null)
-    expect(el.querySelector("span")?.textContent).toBe("tpl2")
+    expect(el.querySelector('span')?.textContent).toBe('tpl2')
     cleanup()
     expect(cleaned).toBe(true)
   })
@@ -104,44 +104,44 @@ describe("_tpl — compiler-facing template API", () => {
 
 // ─── devtools.ts — overlay and $p helpers (lines 155-258, 267-290) ────────────
 
-describe("DevTools — overlay and $p console helpers", () => {
+describe('DevTools — overlay and $p console helpers', () => {
   beforeAll(() => {
     installDevTools()
   })
 
-  test("enableOverlay and disableOverlay toggle overlay state", () => {
+  test('enableOverlay and disableOverlay toggle overlay state', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
     // Enable overlay
     devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe("crosshair")
+    expect(document.body.style.cursor).toBe('crosshair')
 
     // Enable again — should be noop (already active)
     devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe("crosshair")
+    expect(document.body.style.cursor).toBe('crosshair')
 
     // Disable overlay
     devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
 
     // Disable again — should be noop (already disabled)
     devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
   })
 
-  test("overlay creates overlay and tooltip elements", () => {
+  test('overlay creates overlay and tooltip elements', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
     devtools.enableOverlay()
-    expect(document.getElementById("__pyreon-overlay")).not.toBeNull()
+    expect(document.getElementById('__pyreon-overlay')).not.toBeNull()
     devtools.disableOverlay()
   })
 
-  test("overlay mousemove with no registered component hides overlay", () => {
+  test('overlay mousemove with no registered component hides overlay', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
@@ -149,71 +149,71 @@ describe("DevTools — overlay and $p console helpers", () => {
     devtools.enableOverlay()
 
     // Simulate mousemove over an unregistered element
-    const target = document.createElement("div")
+    const target = document.createElement('div')
     document.body.appendChild(target)
-    const event = new MouseEvent("mousemove", { clientX: 10, clientY: 10, bubbles: true })
+    const event = new MouseEvent('mousemove', { clientX: 10, clientY: 10, bubbles: true })
     document.dispatchEvent(event)
 
     devtools.disableOverlay()
     target.remove()
   })
 
-  test("overlay mousemove highlights registered component", () => {
+  test('overlay mousemove highlights registered component', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
 
-    const target = document.createElement("div")
-    target.style.cssText = "width:100px;height:100px;position:fixed;top:0;left:0;"
+    const target = document.createElement('div')
+    target.style.cssText = 'width:100px;height:100px;position:fixed;top:0;left:0;'
     document.body.appendChild(target)
-    registerComponent("overlay-test", "OverlayComp", target, null)
+    registerComponent('overlay-test', 'OverlayComp', target, null)
 
     devtools.enableOverlay()
 
     // Simulate mousemove over the registered element
-    const event = new MouseEvent("mousemove", { clientX: 50, clientY: 50, bubbles: true })
+    const event = new MouseEvent('mousemove', { clientX: 50, clientY: 50, bubbles: true })
     document.dispatchEvent(event)
 
     // Simulate same element again — should be noop (same _currentHighlight)
-    const event2 = new MouseEvent("mousemove", { clientX: 50, clientY: 50, bubbles: true })
+    const event2 = new MouseEvent('mousemove', { clientX: 50, clientY: 50, bubbles: true })
     document.dispatchEvent(event2)
 
     devtools.disableOverlay()
-    unregisterComponent("overlay-test")
+    unregisterComponent('overlay-test')
     target.remove()
   })
 
-  test("overlay click logs component and disables overlay", () => {
+  test('overlay click logs component and disables overlay', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
 
-    const target = document.createElement("div")
-    target.style.cssText = "width:100px;height:100px;position:fixed;top:0;left:0;"
+    const target = document.createElement('div')
+    target.style.cssText = 'width:100px;height:100px;position:fixed;top:0;left:0;'
     document.body.appendChild(target)
 
     // Register parent and child for parent logging branch
-    registerComponent("click-parent", "ClickParent", null, null)
-    registerComponent("click-test", "ClickComp", target, "click-parent")
+    registerComponent('click-parent', 'ClickParent', null, null)
+    registerComponent('click-test', 'ClickComp', target, 'click-parent')
 
     devtools.enableOverlay()
 
-    const event = new MouseEvent("click", { clientX: 50, clientY: 50, bubbles: true })
+    const event = new MouseEvent('click', { clientX: 50, clientY: 50, bubbles: true })
     document.dispatchEvent(event)
 
     // In happy-dom elementFromPoint returns null, so the click handler
     // returns early without calling disableOverlay. Manually disable.
     devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
 
-    unregisterComponent("click-test")
-    unregisterComponent("click-parent")
+    unregisterComponent('click-test')
+    unregisterComponent('click-parent')
     target.remove()
   })
 
-  test("overlay click on unregistered element — no console log", () => {
+  test('overlay click on unregistered element — no console log', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
@@ -222,76 +222,76 @@ describe("DevTools — overlay and $p console helpers", () => {
     devtools.enableOverlay()
 
     // Click on area with no component
-    const event = new MouseEvent("click", { clientX: 0, clientY: 0, bubbles: true })
+    const event = new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true })
     document.dispatchEvent(event)
 
     // In happy-dom elementFromPoint returns null, so click handler returns
     // early. Manually disable overlay and verify cursor is restored.
     devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
   })
 
-  test("Escape key disables overlay", () => {
+  test('Escape key disables overlay', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
 
     devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe("crosshair")
+    expect(document.body.style.cursor).toBe('crosshair')
 
-    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
     document.dispatchEvent(event)
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
   })
 
-  test("Ctrl+Shift+P toggles overlay", () => {
+  test('Ctrl+Shift+P toggles overlay', () => {
     // Enable via Ctrl+Shift+P
-    const enableEvent = new KeyboardEvent("keydown", {
-      key: "P",
+    const enableEvent = new KeyboardEvent('keydown', {
+      key: 'P',
       ctrlKey: true,
       shiftKey: true,
       bubbles: true,
     })
     window.dispatchEvent(enableEvent)
-    expect(document.body.style.cursor).toBe("crosshair")
+    expect(document.body.style.cursor).toBe('crosshair')
 
     // Disable via Ctrl+Shift+P
-    const disableEvent = new KeyboardEvent("keydown", {
-      key: "P",
+    const disableEvent = new KeyboardEvent('keydown', {
+      key: 'P',
       ctrlKey: true,
       shiftKey: true,
       bubbles: true,
     })
     window.dispatchEvent(disableEvent)
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
   })
 
-  test("overlay with component that has children shows child count", () => {
+  test('overlay with component that has children shows child count', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
 
-    const target = document.createElement("div")
-    target.style.cssText = "width:100px;height:100px;position:fixed;top:50px;left:50px;"
+    const target = document.createElement('div')
+    target.style.cssText = 'width:100px;height:100px;position:fixed;top:50px;left:50px;'
     document.body.appendChild(target)
 
-    registerComponent("parent-ov", "ParentOv", target, null)
-    registerComponent("child-ov-1", "ChildOv1", null, "parent-ov")
+    registerComponent('parent-ov', 'ParentOv', target, null)
+    registerComponent('child-ov-1', 'ChildOv1', null, 'parent-ov')
 
     devtools.enableOverlay()
 
-    const event = new MouseEvent("mousemove", { clientX: 75, clientY: 75, bubbles: true })
+    const event = new MouseEvent('mousemove', { clientX: 75, clientY: 75, bubbles: true })
     document.dispatchEvent(event)
 
     devtools.disableOverlay()
-    unregisterComponent("child-ov-1")
-    unregisterComponent("parent-ov")
+    unregisterComponent('child-ov-1')
+    unregisterComponent('parent-ov')
     target.remove()
   })
 
-  test("$p console helpers exist and work", () => {
+  test('$p console helpers exist and work', () => {
     const $p = (window as unknown as Record<string, unknown>).$p as {
       components: () => unknown[]
       tree: () => unknown[]
@@ -304,7 +304,7 @@ describe("DevTools — overlay and $p console helpers", () => {
     expect($p).toBeDefined()
 
     // $p.components()
-    registerComponent("$p-test", "$pTest", null, null)
+    registerComponent('$p-test', '$pTest', null, null)
     const comps = $p.components()
     expect(comps.length).toBeGreaterThan(0)
 
@@ -313,24 +313,24 @@ describe("DevTools — overlay and $p console helpers", () => {
     expect(Array.isArray(tree)).toBe(true)
 
     // $p.highlight()
-    $p.highlight("$p-test")
+    $p.highlight('$p-test')
 
     // $p.inspect() — toggles overlay on
     $p.inspect()
-    expect(document.body.style.cursor).toBe("crosshair")
+    expect(document.body.style.cursor).toBe('crosshair')
     // $p.inspect() — toggles overlay off
     $p.inspect()
-    expect(document.body.style.cursor).toBe("")
+    expect(document.body.style.cursor).toBe('')
 
     // $p.stats()
     const stats = $p.stats()
     expect(stats.total).toBeGreaterThan(0)
-    expect(typeof stats.roots).toBe("number")
+    expect(typeof stats.roots).toBe('number')
 
     // $p.help()
     $p.help()
 
-    unregisterComponent("$p-test")
+    unregisterComponent('$p-test')
   })
 
   test("$p.stats shows singular 'root' for 1 root", () => {
@@ -338,70 +338,70 @@ describe("DevTools — overlay and $p console helpers", () => {
     const $p = (window as unknown as Record<string, unknown>).$p as {
       stats: () => { total: number; roots: number }
     }
-    registerComponent("sole-root", "SoleRoot", null, null)
+    registerComponent('sole-root', 'SoleRoot', null, null)
     const stats = $p.stats()
     expect(stats.roots).toBeGreaterThanOrEqual(1)
-    unregisterComponent("sole-root")
+    unregisterComponent('sole-root')
   })
 })
 
 // ─── mount.ts — uncovered branches ───────────────────────────────────────────
 
-describe("mount.ts — uncovered branches", () => {
-  test("component returning invalid value triggers dev warning (line 283)", () => {
+describe('mount.ts — uncovered branches', () => {
+  test('component returning invalid value triggers dev warning (line 283)', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
     // Component returns an object without 'type' property — triggers invalid return warning
     const BadComp = (() => ({ weird: true })) as unknown as ComponentFn
     mount(h(BadComp, null), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("returned an invalid value"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('returned an invalid value'))
     warnSpy.mockRestore()
   })
 
-  test("component returning Promise triggers dev warning", () => {
+  test('component returning Promise triggers dev warning', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
     const AsyncComp = (() => Promise.resolve(null)) as unknown as ComponentFn
     mount(h(AsyncComp, null), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("returned a Promise"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('returned a Promise'))
     warnSpy.mockRestore()
   })
 
-  test("void element with children triggers dev warning", () => {
+  test('void element with children triggers dev warning', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
-    mount(h("img", null, "child text"), el)
+    mount(h('img', null, 'child text'), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("void element"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('void element'))
     warnSpy.mockRestore()
   })
 
-  test("Portal with falsy target warns", () => {
+  test('Portal with falsy target warns', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
     mount(h(Portal, { target: null }), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Portal"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Portal'))
     warnSpy.mockRestore()
   })
 
-  test("component subtree mount error with propagateError (lines 298-309)", () => {
+  test('component subtree mount error with propagateError (lines 298-309)', () => {
     const el = container()
-    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     // Component whose subtree throws during mount
     const Outer = defineComponent(() => {
       // Inner component throws during mount (not setup)
       const Inner = defineComponent(() => {
         // Return a VNode that will throw when mounted
-        return h("div", null, (() => {
-          throw new Error("subtree mount error")
+        return h('div', null, (() => {
+          throw new Error('subtree mount error')
         }) as unknown as VNodeChild)
       })
       return h(Inner, null)
@@ -411,16 +411,16 @@ describe("mount.ts — uncovered branches", () => {
     errorSpy.mockRestore()
   })
 
-  test("mountChildren with >2 children and cleanups (line 387)", () => {
+  test('mountChildren with >2 children and cleanups (line 387)', () => {
     const el = container()
-    const s1 = signal("a")
-    const s2 = signal("b")
-    const s3 = signal("c")
+    const s1 = signal('a')
+    const s2 = signal('b')
+    const s3 = signal('c')
 
     // 3 reactive children will all have cleanups, hitting the map+cleanup path
     const unmount = mount(
       h(
-        "div",
+        'div',
         null,
         () => s1(),
         () => s2(),
@@ -429,87 +429,87 @@ describe("mount.ts — uncovered branches", () => {
       el,
     )
 
-    expect(el.querySelector("div")?.textContent).toContain("a")
-    expect(el.querySelector("div")?.textContent).toContain("b")
-    expect(el.querySelector("div")?.textContent).toContain("c")
+    expect(el.querySelector('div')?.textContent).toContain('a')
+    expect(el.querySelector('div')?.textContent).toContain('b')
+    expect(el.querySelector('div')?.textContent).toContain('c')
 
     unmount()
   })
 
-  test("mountElement with ref + propCleanup at _elementDepth > 0", () => {
+  test('mountElement with ref + propCleanup at _elementDepth > 0', () => {
     const el = container()
     const ref = createRef<HTMLElement>()
-    const cls = signal("foo")
+    const cls = signal('foo')
 
     // Nested element with ref AND reactive prop — exercises the combined cleanup path
-    mount(h("div", null, h("span", { ref, class: () => cls() }, "inner")), el)
+    mount(h('div', null, h('span', { ref, class: () => cls() }, 'inner')), el)
 
     expect(ref.current).not.toBeNull()
-    expect(ref.current?.className).toBe("foo")
+    expect(ref.current?.className).toBe('foo')
   })
 
-  test("mountElement with propCleanup only at _elementDepth > 0", () => {
+  test('mountElement with propCleanup only at _elementDepth > 0', () => {
     const el = container()
-    const cls = signal("bar")
+    const cls = signal('bar')
 
     // Nested element with reactive prop but no ref
-    const unmount = mount(h("div", null, h("span", { class: () => cls() }, "inner")), el)
+    const unmount = mount(h('div', null, h('span', { class: () => cls() }, 'inner')), el)
 
-    expect(el.querySelector("span")?.className).toBe("bar")
-    cls.set("baz")
-    expect(el.querySelector("span")?.className).toBe("baz")
+    expect(el.querySelector('span')?.className).toBe('bar')
+    cls.set('baz')
+    expect(el.querySelector('span')?.className).toBe('baz')
     unmount()
   })
 
-  test("reactive text at _elementDepth > 0 returns just dispose", () => {
+  test('reactive text at _elementDepth > 0 returns just dispose', () => {
     const el = container()
-    const text = signal("nested")
+    const text = signal('nested')
 
     // Reactive text inside a parent element — should skip DOM removal closure
     const unmount = mount(
-      h("div", null, () => text()),
+      h('div', null, () => text()),
       el,
     )
 
-    expect(el.querySelector("div")?.textContent).toBe("nested")
-    text.set("updated")
-    expect(el.querySelector("div")?.textContent).toBe("updated")
+    expect(el.querySelector('div')?.textContent).toBe('nested')
+    text.set('updated')
+    expect(el.querySelector('div')?.textContent).toBe('updated')
     unmount()
   })
 
-  test("NativeItem without cleanup at _elementDepth > 0", () => {
+  test('NativeItem without cleanup at _elementDepth > 0', () => {
     const el = container()
-    const native = _tpl("<b>native</b>", () => null)
+    const native = _tpl('<b>native</b>', () => null)
 
     // Mount NativeItem inside a parent element
-    mount(h("div", null, native as unknown as VNodeChild), el)
-    expect(el.querySelector("b")?.textContent).toBe("native")
+    mount(h('div', null, native as unknown as VNodeChild), el)
+    expect(el.querySelector('b')?.textContent).toBe('native')
   })
 
-  test("NativeItem with cleanup at _elementDepth > 0", () => {
+  test('NativeItem with cleanup at _elementDepth > 0', () => {
     const el = container()
     let _cleaned = false
-    const native = _tpl("<b>native2</b>", () => () => {
+    const native = _tpl('<b>native2</b>', () => () => {
       _cleaned = true
     })
 
-    mount(h("div", null, native as unknown as VNodeChild), el)
-    expect(el.querySelector("b")?.textContent).toBe("native2")
+    mount(h('div', null, native as unknown as VNodeChild), el)
+    expect(el.querySelector('b')?.textContent).toBe('native2')
   })
 })
 
 // ─── transition.ts — uncovered branches (lines 152, 165, 170-175) ────────────
 
-describe("Transition — uncovered branches", () => {
-  test("onUnmount cancels pending leave (line 152)", async () => {
+describe('Transition — uncovered branches', () => {
+  test('onUnmount cancels pending leave (line 152)', async () => {
     const el = container()
     const visible = signal(true)
 
     const unmount = mount(
       h(Transition, {
         show: visible,
-        name: "fade",
-        children: h("div", { id: "unmount-leave" }, "content"),
+        name: 'fade',
+        children: h('div', { id: 'unmount-leave' }, 'content'),
       }),
       el,
     )
@@ -521,7 +521,7 @@ describe("Transition — uncovered branches", () => {
     unmount()
   })
 
-  test("non-object/array child returns rawChild (line 165)", () => {
+  test('non-object/array child returns rawChild (line 165)', () => {
     const el = container()
     const visible = signal(true)
 
@@ -529,13 +529,13 @@ describe("Transition — uncovered branches", () => {
     mount(
       h(Transition, {
         show: visible,
-        children: "just text" as unknown as VNodeChild,
+        children: 'just text' as unknown as VNodeChild,
       }),
       el,
     )
   })
 
-  test("array child returns rawChild (line 164)", () => {
+  test('array child returns rawChild (line 164)', () => {
     const el = container()
     const visible = signal(true)
 
@@ -543,18 +543,18 @@ describe("Transition — uncovered branches", () => {
     mount(
       h(Transition, {
         show: visible,
-        children: [h("span", null, "a"), h("span", null, "b")] as unknown as VNodeChild,
+        children: [h('span', null, 'a'), h('span', null, 'b')] as unknown as VNodeChild,
       }),
       el,
     )
   })
 
-  test("component child warns and returns vnode (lines 170-175)", () => {
+  test('component child warns and returns vnode (lines 170-175)', () => {
     const el = container()
     const visible = signal(true)
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
-    const Inner = defineComponent(() => h("span", null, "comp child"))
+    const Inner = defineComponent(() => h('span', null, 'comp child'))
 
     mount(
       h(Transition, {
@@ -564,16 +564,16 @@ describe("Transition — uncovered branches", () => {
       el,
     )
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Transition child is a component"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Transition child is a component'))
     warnSpy.mockRestore()
   })
 
-  test("leave with no ref.current sets isMounted false immediately (line 142-144)", async () => {
+  test('leave with no ref.current sets isMounted false immediately (line 142-144)', async () => {
     const el = container()
     const visible = signal(true)
 
     // Use a non-string type (like a component) so ref won't be injected
-    const Comp = () => h("span", null, "no-ref")
+    const Comp = () => h('span', null, 'no-ref')
     mount(
       h(Transition, {
         show: visible,
@@ -587,7 +587,7 @@ describe("Transition — uncovered branches", () => {
     await new Promise<void>((r) => queueMicrotask(r))
   })
 
-  test("onAfterEnter callback fires after enter transition", async () => {
+  test('onAfterEnter callback fires after enter transition', async () => {
     const el = container()
     const visible = signal(false)
     let afterEnterCalled = false
@@ -595,11 +595,11 @@ describe("Transition — uncovered branches", () => {
     mount(
       h(Transition, {
         show: visible,
-        name: "fade",
+        name: 'fade',
         onAfterEnter: () => {
           afterEnterCalled = true
         },
-        children: h("div", { id: "after-enter-test" }, "content"),
+        children: h('div', { id: 'after-enter-test' }, 'content'),
       }),
       el,
     )
@@ -609,14 +609,14 @@ describe("Transition — uncovered branches", () => {
 
     // Trigger rAF
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const target = el.querySelector("#after-enter-test")
+    const target = el.querySelector('#after-enter-test')
     if (target) {
-      target.dispatchEvent(new Event("transitionend"))
+      target.dispatchEvent(new Event('transitionend'))
     }
     expect(afterEnterCalled).toBe(true)
   })
 
-  test("onAfterLeave callback fires after leave transition", async () => {
+  test('onAfterLeave callback fires after leave transition', async () => {
     const el = container()
     const visible = signal(true)
     let afterLeaveCalled = false
@@ -624,59 +624,59 @@ describe("Transition — uncovered branches", () => {
     mount(
       h(Transition, {
         show: visible,
-        name: "fade",
+        name: 'fade',
         onAfterLeave: () => {
           afterLeaveCalled = true
         },
-        children: h("div", { id: "after-leave-test" }, "content"),
+        children: h('div', { id: 'after-leave-test' }, 'content'),
       }),
       el,
     )
 
-    const target = el.querySelector("#after-leave-test")
+    const target = el.querySelector('#after-leave-test')
     visible.set(false)
 
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
     if (target) {
-      target.dispatchEvent(new Event("transitionend"))
+      target.dispatchEvent(new Event('transitionend'))
     }
     await new Promise<void>((r) => queueMicrotask(r))
     expect(afterLeaveCalled).toBe(true)
   })
 
-  test("tooltip repositions when near top of viewport", () => {
+  test('tooltip repositions when near top of viewport', () => {
     const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
       enableOverlay: () => void
       disableOverlay: () => void
     }
 
-    const target = document.createElement("div")
+    const target = document.createElement('div')
     // Position near top so tooltip moves below element (rect.top < 35)
-    target.style.cssText = "width:100px;height:20px;position:fixed;top:10px;left:10px;"
+    target.style.cssText = 'width:100px;height:20px;position:fixed;top:10px;left:10px;'
     document.body.appendChild(target)
-    registerComponent("top-comp", "TopComp", target, null)
+    registerComponent('top-comp', 'TopComp', target, null)
 
     devtools.enableOverlay()
 
-    const event = new MouseEvent("mousemove", { clientX: 50, clientY: 15, bubbles: true })
+    const event = new MouseEvent('mousemove', { clientX: 50, clientY: 15, bubbles: true })
     document.dispatchEvent(event)
 
     devtools.disableOverlay()
-    unregisterComponent("top-comp")
+    unregisterComponent('top-comp')
     target.remove()
   })
 })
 
 // ─── hydrate.ts — uncovered branches (lines 162-183, 338) ────────────────────
 
-describe("hydrate.ts — uncovered branches", () => {
-  test("For hydration with SSR markers — full path with afterEnd (lines 162-183)", () => {
+describe('hydrate.ts — uncovered branches', () => {
+  test('For hydration with SSR markers — full path with afterEnd (lines 162-183)', () => {
     const el = container()
     // SSR markers with content after the end marker
-    el.innerHTML = "<!--pyreon-for--><li>a</li><li>b</li><!--/pyreon-for--><p>after</p>"
+    el.innerHTML = '<!--pyreon-for--><li>a</li><li>b</li><!--/pyreon-for--><p>after</p>'
     const items = signal([
-      { id: 1, label: "a" },
-      { id: 2, label: "b" },
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
     ])
     const cleanup = hydrateRoot(
       el,
@@ -686,40 +686,40 @@ describe("hydrate.ts — uncovered branches", () => {
         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),
         }),
-        h("p", null, "after"),
+        h('p', null, 'after'),
       ),
     )
     cleanup()
   })
 
-  test("component with onUpdate hooks during hydration (line 338)", () => {
+  test('component with onUpdate hooks during hydration (line 338)', () => {
     const el = container()
-    el.innerHTML = "<span>update-test</span>"
+    el.innerHTML = '<span>update-test</span>'
     let _updateCalled = false
 
     const Comp = defineComponent(() => {
       onUpdate(() => {
         _updateCalled = true
       })
-      return h("span", null, "update-test")
+      return h('span', null, 'update-test')
     })
 
     const cleanup = hydrateRoot(el, h(Comp, null))
     cleanup()
   })
 
-  test("component with onUnmount hook during hydration cleanup", () => {
+  test('component with onUnmount hook during hydration cleanup', () => {
     const el = container()
-    el.innerHTML = "<span>unmount-test</span>"
+    el.innerHTML = '<span>unmount-test</span>'
     let unmountCalled = false
 
     const Comp = defineComponent(() => {
       onUnmount(() => {
         unmountCalled = true
       })
-      return h("span", null, "unmount-test")
+      return h('span', null, 'unmount-test')
     })
 
     const cleanup = hydrateRoot(el, h(Comp, null))
@@ -727,16 +727,16 @@ describe("hydrate.ts — uncovered branches", () => {
     expect(unmountCalled).toBe(true)
   })
 
-  test("component with mount cleanup during hydration", () => {
+  test('component with mount cleanup during hydration', () => {
     const el = container()
-    el.innerHTML = "<span>mount-cleanup</span>"
+    el.innerHTML = '<span>mount-cleanup</span>'
     let mountCleanupCalled = false
 
     const Comp = defineComponent(() => {
       onMount(() => () => {
         mountCleanupCalled = true
       })
-      return h("span", null, "mount-cleanup")
+      return h('span', null, 'mount-cleanup')
     })
 
     const cleanup = hydrateRoot(el, h(Comp, null))
@@ -744,57 +744,57 @@ describe("hydrate.ts — uncovered branches", () => {
     expect(mountCleanupCalled).toBe(true)
   })
 
-  test("hydrates component with children merge", () => {
+  test('hydrates component with children merge', () => {
     const el = container()
-    el.innerHTML = "<div><b>child</b></div>"
+    el.innerHTML = '<div><b>child</b></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("b", null, "child")))
+    const cleanup = hydrateRoot(el, h(Wrapper, null, h('b', null, 'child')))
     cleanup()
   })
 
-  test("hydrates reactive accessor returning VNode with domNode present", () => {
+  test('hydrates reactive accessor returning VNode with domNode present', () => {
     const el = container()
-    el.innerHTML = "<div><span>initial</span></div>"
-    const content = signal<VNodeChild>(h("span", null, "initial"))
+    el.innerHTML = '<div><span>initial</span></div>'
+    const content = signal<VNodeChild>(h('span', null, 'initial'))
     // Reactive accessor returns a VNode — goes through the complex reactive path with marker
-    const cleanup = hydrateRoot(el, h("div", null, (() => content()) as unknown as VNodeChild))
+    const cleanup = hydrateRoot(el, h('div', null, (() => content()) as unknown as VNodeChild))
     cleanup()
   })
 })
 
 // ─── transition-group.ts — FLIP move animation (lines 209-218) ───────────────
 
-describe("TransitionGroup — FLIP move animation", () => {
-  test("FLIP animation fires for moved items", async () => {
+describe('TransitionGroup — FLIP move animation', () => {
+  test('FLIP animation fires for moved items', async () => {
     const el = container()
     const items = signal([
-      { 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(TransitionGroup, {
-        tag: "div",
-        name: "list",
+        tag: 'div',
+        name: 'list',
         items: () => items(),
         keyFn: (item: { id: number }) => item.id,
         render: (item: { id: number; label: string }) =>
-          h("span", { class: "flip-item" }, item.label),
+          h('span', { class: 'flip-item' }, item.label),
       }),
       el,
     )
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll("span.flip-item").length).toBe(3)
+    expect(el.querySelectorAll('span.flip-item').length).toBe(3)
 
     // Reorder to trigger FLIP
     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' },
     ])
 
     // Wait for the effect and rAF chains
@@ -804,23 +804,23 @@ describe("TransitionGroup — FLIP move animation", () => {
     await new Promise<void>((r) => requestAnimationFrame(() => r()))
 
     // Fire transitionend to clean up move class
-    const spans = el.querySelectorAll("span.flip-item")
+    const spans = el.querySelectorAll('span.flip-item')
     for (const span of spans) {
-      span.dispatchEvent(new Event("transitionend"))
+      span.dispatchEvent(new Event('transitionend'))
     }
 
     // Items should be reordered
-    const reorderedSpans = el.querySelectorAll("span.flip-item")
-    expect(reorderedSpans[0]?.textContent).toBe("c")
-    expect(reorderedSpans[1]?.textContent).toBe("a")
-    expect(reorderedSpans[2]?.textContent).toBe("b")
+    const reorderedSpans = el.querySelectorAll('span.flip-item')
+    expect(reorderedSpans[0]?.textContent).toBe('c')
+    expect(reorderedSpans[1]?.textContent).toBe('a')
+    expect(reorderedSpans[2]?.textContent).toBe('b')
   })
 })
 
 // ─── nodes.ts — empty mount placeholder paths (lines 433-435, 493-496) ───────
 
-describe("nodes.ts — placeholder comment paths", () => {
-  test("mountFor fresh render — component returning null uses placeholder", () => {
+describe('nodes.ts — placeholder comment paths', () => {
+  test('mountFor fresh render — component returning null uses placeholder', () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
 
@@ -830,7 +830,7 @@ describe("nodes.ts — placeholder comment paths", () => {
 
     mount(
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
@@ -842,7 +842,7 @@ describe("nodes.ts — placeholder comment paths", () => {
     )
   })
 
-  test("mountFor replace-all — component returning null uses placeholder", () => {
+  test('mountFor replace-all — component returning null uses placeholder', () => {
     const el = container()
     const items = signal([{ id: 1 }])
 
@@ -850,7 +850,7 @@ describe("nodes.ts — placeholder comment paths", () => {
 
     mount(
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
@@ -865,7 +865,7 @@ describe("nodes.ts — placeholder comment paths", () => {
     items.set([{ id: 10 }, { id: 11 }])
   })
 
-  test("mountFor step 3 — new entries with component returning null (lines 493-496)", () => {
+  test('mountFor step 3 — new entries with component returning null (lines 493-496)', () => {
     const el = container()
     const items = signal([{ id: 1 }, { id: 2 }])
 
@@ -873,7 +873,7 @@ describe("nodes.ts — placeholder comment paths", () => {
 
     mount(
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
@@ -888,22 +888,22 @@ describe("nodes.ts — placeholder comment paths", () => {
     items.set([{ id: 1 }, { id: 2 }, { id: 3 }])
   })
 
-  test("mountFor with NativeItem having cleanup in replace-all path", () => {
+  test('mountFor with NativeItem having cleanup in replace-all path', () => {
     const el = container()
     type R = { id: number; label: string }
     let cleanupCount = 0
 
-    const items = signal<R[]>([{ id: 1, label: "old" }])
+    const items = signal<R[]>([{ id: 1, label: 'old' }])
 
     mount(
       h(
-        "div",
+        'div',
         null,
         For({
           each: items,
           by: (r) => r.id,
           children: (r) => {
-            const native = _tpl("<b></b>", (root) => {
+            const native = _tpl('<b></b>', (root) => {
               root.textContent = r.label
               return () => {
                 cleanupCount++
@@ -917,47 +917,47 @@ describe("nodes.ts — placeholder comment paths", () => {
     )
 
     // Replace all — should call cleanup on old entries
-    items.set([{ id: 10, label: "new" }])
+    items.set([{ id: 10, label: 'new' }])
     expect(cleanupCount).toBe(1)
   })
 })
 
 // ─── props.ts — uncovered branches (lines 213, 242, 273-277) ─────────────────
 
-describe("props.ts — uncovered branches", () => {
-  test("multiple prop cleanups chain correctly (line 213)", () => {
+describe('props.ts — uncovered branches', () => {
+  test('multiple prop cleanups chain correctly (line 213)', () => {
     const el = container()
-    const cls = signal("a")
-    const title = signal("t")
+    const cls = signal('a')
+    const title = signal('t')
 
     // Two reactive props => two cleanups that chain
-    const unmount = mount(h("div", { class: () => cls(), title: () => title() }), el)
+    const unmount = mount(h('div', { class: () => cls(), title: () => title() }), el)
 
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.className).toBe("a")
-    expect(div.title).toBe("t")
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.className).toBe('a')
+    expect(div.title).toBe('t')
 
-    cls.set("b")
-    title.set("u")
-    expect(div.className).toBe("b")
-    expect(div.title).toBe("u")
+    cls.set('b')
+    title.set('u')
+    expect(div.className).toBe('b')
+    expect(div.title).toBe('u')
 
     unmount()
   })
 
-  test("non-function event handler triggers dev warning", () => {
+  test('non-function event handler triggers dev warning', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
-    mount(h("button", { onClick: "not a function" }), el)
+    mount(h('button', { onClick: 'not a function' }), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("non-function value"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('non-function value'))
     warnSpy.mockRestore()
   })
 
-  test("innerHTML with setHTML method (line 242)", async () => {
+  test('innerHTML with setHTML method (line 242)', async () => {
     const el = container()
-    const div = document.createElement("div")
+    const div = document.createElement('div')
     el.appendChild(div)
 
     // Mock setHTML on the element
@@ -968,170 +968,170 @@ describe("props.ts — uncovered branches", () => {
     }
 
     // Use applyProp directly for this test
-    const { applyProp } = await import("../props")
-    applyProp(div, "innerHTML", "<b>via setHTML</b>")
+    const { applyProp } = await import('../props')
+    applyProp(div, 'innerHTML', '<b>via setHTML</b>')
     expect(setHTMLCalled).toBe(true)
-    expect(div.innerHTML).toBe("<b>via setHTML</b>")
+    expect(div.innerHTML).toBe('<b>via setHTML</b>')
   })
 
-  test("multiple chained prop cleanups (3+ reactive props)", () => {
+  test('multiple chained prop cleanups (3+ reactive props)', () => {
     const el = container()
-    const a = signal("a")
-    const b = signal("b")
-    const c = signal("c")
+    const a = signal('a')
+    const b = signal('b')
+    const c = signal('c')
 
     const unmount = mount(
-      h("div", {
+      h('div', {
         class: () => a(),
         title: () => b(),
-        "data-x": () => c(),
+        'data-x': () => c(),
       }),
       el,
     )
 
-    const div = el.querySelector("div") as HTMLElement
-    expect(div.className).toBe("a")
-    expect(div.title).toBe("b")
-    expect(div.getAttribute("data-x")).toBe("c")
+    const div = el.querySelector('div') as HTMLElement
+    expect(div.className).toBe('a')
+    expect(div.title).toBe('b')
+    expect(div.getAttribute('data-x')).toBe('c')
 
     unmount()
   })
 
-  test("sanitizeHtml with no DOMParser or Sanitizer falls back to tag stripping", () => {
+  test('sanitizeHtml with no DOMParser or Sanitizer falls back to tag stripping', () => {
     // This path is hard to test in happy-dom since DOMParser exists,
     // but we can test the custom sanitizer path
-    setSanitizer((html) => html.replace(/<[^>]*>/g, ""))
-    const result = sanitizeHtml("<b>bold</b><script>bad</script>")
-    expect(result).toBe("boldbad")
+    setSanitizer((html) => html.replace(/<[^>]*>/g, ''))
+    const result = sanitizeHtml('<b>bold</b><script>bad</script>')
+    expect(result).toBe('boldbad')
     setSanitizer(null)
   })
 
-  test("dangerouslySetInnerHTML warns in dev mode", () => {
+  test('dangerouslySetInnerHTML warns in dev mode', () => {
     const el = container()
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
-    mount(h("div", { dangerouslySetInnerHTML: { __html: "<em>raw</em>" } }), el)
+    mount(h('div', { dangerouslySetInnerHTML: { __html: '<em>raw</em>' } }), el)
 
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("dangerouslySetInnerHTML"))
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('dangerouslySetInnerHTML'))
     warnSpy.mockRestore()
   })
 
-  test("style as null/undefined does nothing", () => {
+  test('style as null/undefined does nothing', () => {
     const el = container()
-    mount(h("div", { style: null as unknown as string }), el)
+    mount(h('div', { style: null as unknown as string }), el)
     // Should not throw
-    expect(el.querySelector("div")).not.toBeNull()
+    expect(el.querySelector('div')).not.toBeNull()
   })
 })
 
 // ─── Additional edge cases for mount.ts ──────────────────────────────────────
 
-describe("mount.ts — additional edge cases", () => {
-  test("mountElement no reactive work and no ref at depth > 0 returns noop", () => {
+describe('mount.ts — additional edge cases', () => {
+  test('mountElement no reactive work and no ref at depth > 0 returns noop', () => {
     const el = container()
     // Static nested element with no reactive props, no ref — returns noop at _elementDepth > 0
-    const unmount = mount(h("div", null, h("span", null, "static")), el)
-    expect(el.querySelector("span")?.textContent).toBe("static")
+    const unmount = mount(h('div', null, h('span', null, 'static')), el)
+    expect(el.querySelector('span')?.textContent).toBe('static')
     unmount()
   })
 
-  test("mountChildren 2-child path where one cleanup is noop", () => {
+  test('mountChildren 2-child path where one cleanup is noop', () => {
     const el = container()
     // 2 children: one static (noop cleanup) and one with cleanup
-    const cls = signal("x")
-    mount(h("div", null, h("span", null, "static"), h("b", { class: () => cls() }, "reactive")), el)
-    expect(el.querySelectorAll("span").length).toBe(1)
-    expect(el.querySelector("b")?.className).toBe("x")
+    const cls = signal('x')
+    mount(h('div', null, h('span', null, 'static'), h('b', { class: () => cls() }, 'reactive')), el)
+    expect(el.querySelectorAll('span').length).toBe(1)
+    expect(el.querySelector('b')?.className).toBe('x')
   })
 
-  test("mountChildren 2-child path where both cleanups are noop", () => {
+  test('mountChildren 2-child path where both cleanups are noop', () => {
     const el = container()
     // 2 static children — both noop cleanup
-    mount(h("div", null, h("span", null, "a"), h("b", null, "b")), el)
-    expect(el.querySelector("span")?.textContent).toBe("a")
-    expect(el.querySelector("b")?.textContent).toBe("b")
+    mount(h('div', null, h('span', null, 'a'), h('b', null, 'b')), el)
+    expect(el.querySelector('span')?.textContent).toBe('a')
+    expect(el.querySelector('b')?.textContent).toBe('b')
   })
 
-  test("mountChildren 2-child path where first cleanup is noop", () => {
+  test('mountChildren 2-child path where first cleanup is noop', () => {
     const el = container()
-    const cls = signal("x")
+    const cls = signal('x')
     // First child static (noop), second child reactive
-    mount(h("div", null, "text", h("b", { class: () => cls() }, "reactive")), el)
+    mount(h('div', null, 'text', h('b', { class: () => cls() }, 'reactive')), el)
   })
 
-  test("isKeyedArray returns false for empty array", () => {
+  test('isKeyedArray returns false for empty array', () => {
     const el = container()
     const items = signal<{ id: number }[]>([])
     // Reactive accessor returning empty array — should not use keyed reconciler
     mount(
-      h("div", null, () => items().map((it) => h("span", { key: it.id }))),
+      h('div', null, () => items().map((it) => h('span', { key: it.id }))),
       el,
     )
-    expect(el.querySelector("span")).toBeNull()
+    expect(el.querySelector('span')).toBeNull()
   })
 
-  test("isKeyedArray returns false for non-keyed vnodes", () => {
+  test('isKeyedArray returns false for non-keyed vnodes', () => {
     const el = container()
     const items = signal([1, 2, 3])
     // VNodes without keys — should NOT use keyed reconciler
     mount(
-      h("div", null, () => items().map((n) => h("span", null, String(n)))),
+      h('div', null, () => items().map((n) => h('span', null, String(n)))),
       el,
     )
-    expect(el.querySelectorAll("span").length).toBe(3)
+    expect(el.querySelectorAll('span').length).toBe(3)
   })
 })
 
 // ─── hydrate.ts — additional branches ────────────────────────────────────────
 
-describe("hydrate.ts — additional branches", () => {
-  test("hydrates component returning null", () => {
+describe('hydrate.ts — additional branches', () => {
+  test('hydrates component returning null', () => {
     const el = container()
-    el.innerHTML = ""
+    el.innerHTML = ''
     const NullComp = defineComponent(() => null)
     const cleanup = hydrateRoot(el, h(NullComp, null))
     cleanup()
   })
 
-  test("hydrates element mismatch — element found but wrong tag", () => {
+  test('hydrates element mismatch — element found but wrong tag', () => {
     const el = container()
-    el.innerHTML = "<div>wrong tag</div>"
+    el.innerHTML = '<div>wrong tag</div>'
     // Expect a <p> but find <div>
-    const cleanup = hydrateRoot(el, h("p", null, "right"))
+    const cleanup = hydrateRoot(el, h('p', null, 'right'))
     cleanup()
   })
 
-  test("hydrates For without SSR markers but with existing domNode (non-comment)", () => {
+  test('hydrates For without SSR markers but with existing domNode (non-comment)', () => {
     const el = container()
     // Existing element (not a comment) — takes the no-markers path
-    el.innerHTML = "<span>not a for marker</span>"
-    const items = signal([{ id: 1, label: "a" }])
+    el.innerHTML = '<span>not a for marker</span>'
+    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("hydrates PortalSymbol — always remounts", async () => {
+  test('hydrates PortalSymbol — always remounts', async () => {
     const el = container()
     const target = container()
-    el.innerHTML = ""
+    el.innerHTML = ''
 
-    const { Portal } = await import("@pyreon/core")
-    const cleanup = hydrateRoot(el, Portal({ target, children: h("span", null, "portal") }))
-    expect(target.querySelector("span")?.textContent).toBe("portal")
+    const { Portal } = await import('@pyreon/core')
+    const cleanup = hydrateRoot(el, Portal({ target, children: h('span', null, 'portal') }))
+    expect(target.querySelector('span')?.textContent).toBe('portal')
     cleanup()
   })
 
-  test("reactive accessor with complex VNode and existing domNode inserts marker before domNode", () => {
+  test('reactive accessor with complex VNode and existing domNode inserts marker before domNode', () => {
     const el = container()
-    el.innerHTML = "<span>existing</span>"
-    const content = signal<VNodeChild>(h("b", null, "complex"))
+    el.innerHTML = '<span>existing</span>'
+    const content = signal<VNodeChild>(h('b', null, 'complex'))
     const cleanup = hydrateRoot(el, (() => content()) as unknown as VNodeChild)
     cleanup()
   })