@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/tests/mount.test.ts

@@ -1,3529 +0,0 @@
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import {
-  ErrorBoundary as _ErrorBoundary,
-  createRef,
-  Dynamic,
-  defineComponent,
-  For,
-  Fragment,
-  h,
-  lazy,
-  Match,
-  onMount,
-  onUnmount,
-  onUpdate,
-  Portal,
-  Show,
-  Suspense as _Suspense,
-  Switch,
-} from '@pyreon/core'
-import { cell, signal } from '@pyreon/reactivity'
-import { installDevTools, registerComponent, unregisterComponent } from '../devtools'
-import {
-  KeepAlive as _KeepAlive,
-  Transition as _Transition,
-  TransitionGroup as _TransitionGroup,
-  createTemplate,
-  disableHydrationWarnings,
-  enableHydrationWarnings,
-  hydrateRoot,
-  mount,
-  sanitizeHtml,
-  setSanitizer,
-} 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>>
-const TransitionGroup = _TransitionGroup as unknown as ComponentFn<Record<string, unknown>>
-const ErrorBoundary = _ErrorBoundary as unknown as ComponentFn<Record<string, unknown>>
-const KeepAlive = _KeepAlive as unknown as ComponentFn<Record<string, unknown>>
-const Suspense = _Suspense as unknown as ComponentFn<Record<string, unknown>>
-
-function container(): HTMLElement {
-  const el = document.createElement('div')
-  document.body.appendChild(el)
-  return el
-}
-
-// ─── Static mounting ─────────────────────────────────────────────────────────
-
-describe('mount — static', () => {
-  test('mounts a text node', () => {
-    const el = container()
-    mount('hello', el)
-    expect(el.textContent).toBe('hello')
-  })
-
-  test('mounts a number as text', () => {
-    const el = container()
-    mount(42, el)
-    expect(el.textContent).toBe('42')
-  })
-
-  test('mounts a simple element', () => {
-    const el = container()
-    mount(h('span', null, 'world'), el)
-    expect(el.innerHTML).toBe('<span>world</span>')
-  })
-
-  test('mounts nested elements', () => {
-    const el = container()
-    mount(h('div', null, h('p', null, 'nested')), el)
-    expect(el.querySelector('p')?.textContent).toBe('nested')
-  })
-
-  test('mounts null / undefined / false as nothing', () => {
-    const el = container()
-    mount(null, el)
-    expect(el.innerHTML).toBe('')
-    mount(undefined, el)
-    expect(el.innerHTML).toBe('')
-    mount(false, el)
-    expect(el.innerHTML).toBe('')
-  })
-
-  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)
-  })
-})
-
-// ─── Props ────────────────────────────────────────────────────────────────────
-
-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')
-  })
-
-  test('sets arbitrary attribute', () => {
-    const el = container()
-    mount(h('div', { 'data-id': '123' }), el)
-    expect(el.querySelector('div')?.getAttribute('data-id')).toBe('123')
-  })
-
-  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)
-  })
-
-  test('attaches event listener', () => {
-    const el = container()
-    let clicked = false
-    mount(
-      h(
-        'button',
-        {
-          onClick: () => {
-            clicked = true
-          },
-        },
-        'click me',
-      ),
-      el,
-    )
-    el.querySelector('button')?.click()
-    expect(clicked).toBe(true)
-  })
-})
-
-// ─── Reactive props & children ────────────────────────────────────────────────
-
-describe('mount — reactive', () => {
-  test('reactive text child updates', () => {
-    const el = container()
-    const text = signal('hello')
-    mount(
-      h('div', null, () => text()),
-      el,
-    )
-    expect(el.querySelector('div')?.textContent).toBe('hello')
-    text.set('world')
-    expect(el.querySelector('div')?.textContent).toBe('world')
-  })
-
-  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')
-  })
-})
-
-// ─── Components ───────────────────────────────────────────────────────────────
-
-describe('mount — components', () => {
-  test('mounts a functional component', () => {
-    const Greeting = defineComponent(({ name }: { name: string }) =>
-      h('p', null, `Hello, ${name}!`),
-    )
-    const el = container()
-    mount(h(Greeting, { name: 'Pyreon' }), el)
-    expect(el.querySelector('p')?.textContent).toBe('Hello, Pyreon!')
-  })
-
-  test('component with reactive state updates DOM', () => {
-    const Counter = defineComponent(() => {
-      const count = signal(0)
-      return h(
-        'div',
-        null,
-        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')
-  })
-})
-
-// ─── Unmount ──────────────────────────────────────────────────────────────────
-
-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)
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
-  })
-
-  test('ref.current is cleared after unmount', () => {
-    const el = container()
-    const ref = createRef<HTMLDivElement>()
-    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', () => {
-    const el = container()
-    let refEl: Element | null = null
-    mount(
-      h('div', {
-        ref: (e: Element) => {
-          refEl = e
-        },
-      }),
-      el,
-    )
-    expect(refEl).toBeInstanceOf(HTMLDivElement)
-  })
-
-  test('callback ref is invoked with null on unmount', () => {
-    const el = container()
-    let refEl: Element | null = null
-    const unmount = mount(
-      h('div', {
-        ref: (e: Element | null) => {
-          refEl = e
-        },
-      }),
-      el,
-    )
-    expect(refEl).toBeInstanceOf(HTMLDivElement)
-    unmount()
-    // Fixed: callback refs are now called with null on cleanup
-    // to match React/Solid/Vue behavior and the RefCallback<T> type.
-    expect(refEl).toBeNull()
-  })
-
-  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)
-  })
-})
-
-describe('mount — unmount', () => {
-  test('unmount removes mounted nodes', () => {
-    const el = container()
-    const unmount = mount(h('div', null, 'bye'), el)
-    expect(el.innerHTML).not.toBe('')
-    unmount()
-    expect(el.innerHTML).toBe('')
-  })
-
-  test('unmount disposes reactive effects', () => {
-    const el = container()
-    const text = signal('initial')
-    const unmount = mount(
-      h('p', null, () => text()),
-      el,
-    )
-    unmount()
-    text.set('updated')
-    // After unmount, node is gone — no error thrown, no stale update
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── For ──────────────────────────────────────────────────────────────────────
-
-describe('mount — For', () => {
-  type Item = { id: number; label: string }
-
-  test('renders initial list', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-      { id: 3, label: 'c' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        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')
-  })
-
-  test('appends new items', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'a' }])
-    mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li').length).toBe(1)
-    items.set([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    expect(el.querySelectorAll('li').length).toBe(2)
-    expect(el.querySelectorAll('li')[1]?.textContent).toBe('b')
-  })
-
-  test('removes items', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        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')
-  })
-
-  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' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        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' },
-    ])
-    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', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'old' }])
-    mount(
-      h(
-        'ul',
-        null,
-        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')
-    expect(lis.length).toBe(1)
-    expect(lis[0]?.textContent).toBe('new')
-  })
-
-  test('clears list', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'x' }])
-    mount(
-      h(
-        'ul',
-        null,
-        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)
-  })
-
-  test('unmount cleans up', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'x' }])
-    const unmount = mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    unmount()
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── For + NativeItem (createTemplate path — what the benchmark uses) ─────
-
-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 td1 = tr.firstChild as HTMLElement
-    const td2 = td1.nextSibling as HTMLElement
-    const t1 = td1.firstChild as Text
-    const t2 = td2.firstChild as Text
-    t1.data = String(row.id)
-    t2.data = row.label.peek()
-    row.label.listen(() => {
-      t2.data = row.label.peek()
-    })
-    return null
-  })
-
-  test('renders initial list with correct text', () => {
-    const el = container()
-    const items = signal<RR[]>([makeRR(1, 'a'), makeRR(2, 'b'), makeRR(3, 'c')])
-    mount(
-      h(
-        'table',
-        null,
-        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
-      ),
-      el,
-    )
-    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')
-  })
-
-  test('cell.set() updates text in-place (partial update)', () => {
-    const el = container()
-    const rows = [makeRR(1, 'hello'), makeRR(2, 'world')]
-    const items = signal<RR[]>(rows)
-    mount(
-      h(
-        'table',
-        null,
-        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')
-    // Second row untouched
-    expect(el.querySelectorAll('tr')[1]?.querySelectorAll('td')[1]?.textContent).toBe('world')
-  })
-
-  test('replace all rows', () => {
-    const el = container()
-    const items = signal<RR[]>([makeRR(1, 'old')])
-    mount(
-      h(
-        'table',
-        null,
-        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')
-    expect(trs.length).toBe(2)
-    expect(trs[0]?.querySelectorAll('td')[0]?.textContent).toBe('10')
-    expect(trs[1]?.querySelectorAll('td')[1]?.textContent).toBe('new2')
-  })
-
-  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 items = signal<RR[]>([r1, r2, r3])
-    mount(
-      h(
-        'table',
-        null,
-        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]
-    // 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')
-    // Same DOM nodes reused, just moved
-    expect(trs[1]).toBe(origTr3)
-    expect(trs[2]).toBe(origTr2)
-  })
-
-  test('clear removes all rows', () => {
-    const el = container()
-    const items = signal<RR[]>([makeRR(1, 'x'), makeRR(2, 'y')])
-    mount(
-      h(
-        'table',
-        null,
-        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
-      ),
-      el,
-    )
-    items.set([])
-    expect(el.querySelectorAll('tr').length).toBe(0)
-  })
-
-  test('clear then re-create works', () => {
-    const el = container()
-    const items = signal<RR[]>([makeRR(1, 'first')])
-    mount(
-      h(
-        'table',
-        null,
-        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')
-  })
-
-  test('append items to existing list', () => {
-    const el = container()
-    const r1 = makeRR(1, 'a')
-    const items = signal<RR[]>([r1])
-    mount(
-      h(
-        'table',
-        null,
-        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')
-  })
-
-  test('remove items from middle', () => {
-    const el = container()
-    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',
-        null,
-        h('tbody', null, For({ each: items, by: (r) => r.id, children: rowFactory })),
-      ),
-      el,
-    )
-    items.set([r1, r3])
-    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')
-  })
-})
-
-// ─── Portal ───────────────────────────────────────────────────────────────────
-
-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)
-    // content appears in target, not in src
-    expect(target.querySelector('span')?.textContent).toBe('portaled')
-    expect(src.querySelector('span')).toBeNull()
-  })
-
-  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()
-    unmount()
-    expect(target.querySelector('p')).toBeNull()
-  })
-
-  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')
-  })
-
-  test('portal inside component renders into target', () => {
-    const src = container()
-    const target = container()
-    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()
-  })
-
-  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')
-    unmount1()
-    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')
-    unmount2()
-    expect(target.querySelector('span')).toBeNull()
-  })
-
-  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')
-    unmount1()
-    expect(target.querySelectorAll('span').length).toBe(1)
-    expect(target.querySelector('.b')?.textContent).toBe('B')
-    unmount2()
-    expect(target.querySelectorAll('span').length).toBe(0)
-  })
-
-  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,
-      ),
-      src,
-    )
-    expect(target.querySelector('span')?.textContent).toBe('vis')
-    visible.set(false)
-    expect(target.querySelector('span')).toBeNull()
-    visible.set(true)
-    expect(target.querySelector('span')?.textContent).toBe('vis')
-  })
-})
-
-// ─── ErrorBoundary ────────────────────────────────────────────────────────────
-
-describe('ErrorBoundary', () => {
-  test('renders fallback when child throws', () => {
-    const el = container()
-    function Broken(): never {
-      throw new Error('boom')
-    }
-    mount(
-      h(ErrorBoundary, {
-        fallback: (err: unknown) => h('p', { id: 'fb' }, String(err)),
-        children: h(Broken, null),
-      }),
-      el,
-    )
-    expect(el.querySelector('#fb')?.textContent).toContain('boom')
-  })
-
-  test('renders children when no error', () => {
-    const el = container()
-    function Fine() {
-      return h('p', { id: 'ok' }, 'works')
-    }
-    mount(
-      h(ErrorBoundary, {
-        fallback: () => h('p', null, 'error'),
-        children: h(Fine, null),
-      }),
-      el,
-    )
-    expect(el.querySelector('#ok')?.textContent).toBe('works')
-  })
-
-  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')
-    }
-
-    mount(
-      h(ErrorBoundary, {
-        fallback: (_err: unknown, reset: () => void) =>
-          h(
-            'button',
-            {
-              id: 'retry',
-              onClick: () => {
-                shouldThrow = false
-                reset()
-              },
-            },
-            'retry',
-          ),
-        children: h(MaybeThrow, null),
-      }),
-      el,
-    )
-
-    // Fallback rendered
-    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()
-
-    expect(el.querySelector('#recovered')?.textContent).toBe('back')
-    expect(el.querySelector('#retry')).toBeNull()
-  })
-
-  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')
-    }
-
-    mount(
-      h(ErrorBoundary, {
-        fallback: (_err: unknown, reset: () => void) =>
-          h(
-            'button',
-            {
-              id: 'fix',
-              onClick: () => {
-                broken.set(false)
-                reset()
-              },
-            },
-            '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')
-  })
-
-  // ── lazy() + Suspense + ErrorBoundary integration ──
-  //
-  // The `lazy(loader)` wrapper throws synchronously when its loader's
-  // promise rejects (`error()` returns truthy → `throw err`).
-  //
-  // Pyreon components run ONCE — reactivity comes from reading signals
-  // inside reactive scopes. `lazy()`'s wrapper reads its `error` /
-  // `loaded` signals inline, so the surrounding context must be a
-  // reactive scope for signal changes to trigger re-render.
-  //
-  // `Suspense` wraps its children in `h(Fragment, null, () => ...)` —
-  // an explicit reactive accessor that calls `__loading()`. THAT
-  // accessor's reactive scope is what tracks lazy's signals: when the
-  // loader rejects, the accessor re-runs, the lazy child re-mounts,
-  // the wrapper throws, mountComponent catches, dispatches to the
-  // nearest `<ErrorBoundary>` on the boundary stack.
-  //
-  // Without Suspense, lazy()'s post-mount errors don't surface (no
-  // reactive scope to drive re-render). This is consistent with the
-  // framework's component-runs-once contract — but worth pinning
-  // down with explicit tests.
-
-  test('lazy() loader rejection surfaces to ErrorBoundary via Suspense', async () => {
-    const el = container()
-    const Comp = lazy<Record<string, never>>(() =>
-      Promise.reject(new Error('module load failed')),
-    )
-
-    mount(
-      h(ErrorBoundary, {
-        fallback: (err: unknown) =>
-          h('p', { id: 'lazy-fb' }, `Caught: ${(err as Error).message}`),
-        children: h(
-          Suspense,
-          { fallback: h('p', { id: 'spinner' }, 'loading...') },
-          h(Comp, {}),
-        ),
-      }),
-      el,
-    )
-
-    // Initial render: lazy is still loading → Suspense shows spinner,
-    // boundary fallback NOT triggered yet.
-    expect(el.querySelector('#spinner')).not.toBeNull()
-    expect(el.querySelector('#lazy-fb')).toBeNull()
-
-    // Wait for promise rejection to flush.
-    await new Promise((r) => setTimeout(r, 0))
-    // Reactive flush.
-    await Promise.resolve()
-
-    // After load fails: Suspense's reactive accessor re-runs → child
-    // wrapper throws → caught by mountComponent → dispatched to
-    // ErrorBoundary → fallback rendered.
-    expect(el.querySelector('#lazy-fb')?.textContent).toContain('module load failed')
-    expect(el.querySelector('#spinner')).toBeNull()
-  })
-
-  test('lazy() resolves successfully renders content without firing fallback', async () => {
-    const el = container()
-    const Inner: ComponentFn<Record<string, never>> = () =>
-      h('p', { id: 'loaded' }, 'content')
-    const Comp = lazy<Record<string, never>>(() => Promise.resolve({ default: Inner }))
-
-    let fallbackInvocations = 0
-    mount(
-      h(ErrorBoundary, {
-        fallback: () => {
-          fallbackInvocations++
-          return h('p', { id: 'should-not-appear' }, 'error')
-        },
-        children: h(
-          Suspense,
-          { fallback: h('p', { id: 'spinner' }, 'loading...') },
-          h(Comp, {}),
-        ),
-      }),
-      el,
-    )
-
-    await new Promise((r) => setTimeout(r, 0))
-    await Promise.resolve()
-
-    expect(el.querySelector('#loaded')?.textContent).toBe('content')
-    expect(el.querySelector('#should-not-appear')).toBeNull()
-    expect(fallbackInvocations).toBe(0)
-  })
-})
-
-// ─── Transition component ─────────────────────────────────────────────────────
-
-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()
-  })
-
-  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()
-  })
-
-  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()
-    visible.set(true)
-    expect(el.querySelector('#target')).not.toBeNull()
-  })
-
-  test('calls onBeforeEnter when entering', async () => {
-    const el = container()
-    const visible = signal(false)
-    let called = false
-    mount(
-      h(Transition, {
-        show: visible,
-        onBeforeEnter: () => {
-          called = true
-        },
-        children: h('div', { id: 't' }),
-      }),
-      el,
-    )
-    visible.set(true)
-    // onBeforeEnter fires inside queueMicrotask — wait one microtask tick
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(called).toBe(true)
-  })
-})
-
-// ─── Show component ───────────────────────────────────────────────────────────
-
-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()
-  })
-
-  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'),
-      ),
-      el,
-    )
-    expect(el.querySelector('#s')).toBeNull()
-    expect(el.querySelector('#fb')).not.toBeNull()
-  })
-
-  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()
-    show.set(true)
-    expect(el.querySelector('#t')).not.toBeNull()
-    show.set(false)
-    expect(el.querySelector('#t')).toBeNull()
-  })
-
-  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('')
-  })
-})
-
-// ─── Switch / Match components ────────────────────────────────────────────────
-
-describe('Switch / Match', () => {
-  test('renders first matching branch', () => {
-    const el = container()
-    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' })),
-      ),
-      el,
-    )
-    expect(el.querySelector('#home')).not.toBeNull()
-    expect(el.querySelector('#about')).toBeNull()
-    expect(el.querySelector('#notfound')).toBeNull()
-  })
-
-  test('renders fallback when no match', () => {
-    const el = container()
-    const route = signal('other')
-    mount(
-      h(
-        Switch,
-        { 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()
-  })
-
-  test('switches branch reactively', () => {
-    const el = container()
-    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' })),
-      ),
-      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()
-  })
-})
-
-// ─── Props (extended coverage) ───────────────────────────────────────────────
-
-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')
-  })
-
-  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')
-  })
-
-  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')
-  })
-
-  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')
-  })
-
-  test('className sets class attribute', () => {
-    const el = container()
-    mount(h('div', { className: 'my-class' }), el)
-    expect(el.querySelector('div')?.getAttribute('class')).toBe('my-class')
-  })
-
-  test('class null sets empty class', () => {
-    const el = container()
-    mount(h('div', { class: null }), el)
-    expect(el.querySelector('div')?.getAttribute('class')).toBe('')
-  })
-
-  test('boolean attribute true sets empty attr', () => {
-    const el = container()
-    mount(h('input', { disabled: true }), el)
-    const input = el.querySelector('input') as HTMLInputElement
-    expect(input.disabled).toBe(true)
-  })
-
-  test('boolean attribute false removes attr', () => {
-    const el = container()
-    mount(h('input', { disabled: false }), el)
-    const input = el.querySelector('input') as HTMLInputElement
-    expect(input.disabled).toBe(false)
-  })
-
-  test('event handler receives event object', () => {
-    const el = container()
-    let receivedEvent: Event | null = null
-    mount(
-      h(
-        'button',
-        {
-          onClick: (e: Event) => {
-            receivedEvent = e
-          },
-        },
-        'click',
-      ),
-      el,
-    )
-    el.querySelector('button')?.click()
-    expect(receivedEvent).not.toBeNull()
-    expect(receivedEvent).toBeInstanceOf(Event)
-  })
-
-  test('multiple event handlers on same element', () => {
-    const el = container()
-    let mouseDown = false
-    let mouseUp = false
-    mount(
-      h(
-        'div',
-        {
-          onMousedown: () => {
-            mouseDown = true
-          },
-          onMouseup: () => {
-            mouseUp = true
-          },
-        },
-        'target',
-      ),
-      el,
-    )
-    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', () => {
-    const el = container()
-    let count = 0
-    const unmount = mount(
-      h(
-        'button',
-        {
-          onClick: () => {
-            count++
-          },
-        },
-        'click',
-      ),
-      el,
-    )
-    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', () => {
-    const el = container()
-    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)')
-  })
-
-  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>')
-  })
-
-  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')
-  })
-
-  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>')
-  })
-
-  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>')
-  })
-
-  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')
-  })
-
-  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')
-  })
-
-  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')
-  })
-})
-
-// ─── Keyed list (nodes.ts) — additional 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',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => h('li', { key: r.id }, r.label),
-        }),
-      ),
-      el,
-    )
-  }
-
-  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' },
-    ])
-    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' },
-    ])
-    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')
-  })
-
-  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' },
-    ])
-    mountList(el, items)
-    items.set([
-      { 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')
-  })
-
-  test('prepend items', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { 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' },
-    ])
-    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')
-  })
-
-  test('interleave new items', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { 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' },
-    ])
-    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')
-  })
-
-  test('large reorder triggers LIS fallback (>8 diffs)', () => {
-    const el = container()
-    const initial = Array.from({ length: 20 }, (_, i) => ({
-      id: i + 1,
-      label: String.fromCharCode(97 + i),
-    }))
-    const items = signal<Item[]>(initial)
-    mountList(el, items)
-    // Shuffle: reverse first 15 items to force >8 diffs
-    const shuffled = [...initial]
-    shuffled.splice(0, 15, ...shuffled.slice(0, 15).reverse())
-    items.set(shuffled)
-    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', () => {
-    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' },
-    ])
-    mountList(el, items)
-    items.set([
-      { id: 2, label: 'b' },
-      { id: 3, label: 'c' },
-      { id: 4, label: 'd' },
-    ])
-    const lis = el.querySelectorAll('li')
-    expect(lis.length).toBe(3)
-    expect(lis[0]?.textContent).toBe('b')
-    expect(lis[2]?.textContent).toBe('d')
-  })
-
-  test('swap first and last', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { 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' },
-    ])
-    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', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'a' }])
-    mountList(el, items)
-    items.set([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    items.set([
-      { id: 2, label: 'b' },
-      { id: 3, label: 'c' },
-    ])
-    items.set([{ id: 4, label: 'd' }])
-    const lis = el.querySelectorAll('li')
-    expect(lis.length).toBe(1)
-    expect(lis[0]?.textContent).toBe('d')
-  })
-})
-
-// ─── Transition (extended coverage) ──────────────────────────────────────────
-
-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'),
-      }),
-      el,
-    )
-    expect(el.querySelector('#custom')).toBeNull()
-    visible.set(true)
-    expect(el.querySelector('#custom')).not.toBeNull()
-  })
-
-  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'),
-      }),
-      el,
-    )
-    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')
-    if (target) {
-      // Wait for the requestAnimationFrame callback
-      await new Promise<void>((r) => requestAnimationFrame(() => r()))
-      target.dispatchEvent(new Event('transitionend'))
-    }
-    // isMounted should now be false
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector('#leave-test')).toBeNull()
-  })
-
-  test('appear triggers enter animation on initial mount', async () => {
-    const el = container()
-    const visible = signal(true)
-    let beforeEnterCalled = false
-    mount(
-      h(Transition, {
-        show: visible,
-        appear: true,
-        onBeforeEnter: () => {
-          beforeEnterCalled = true
-        },
-        children: h('div', { id: 'appear-test' }, 'content'),
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(beforeEnterCalled).toBe(true)
-  })
-
-  test('calls onBeforeLeave when leaving', async () => {
-    const el = container()
-    const visible = signal(true)
-    let beforeLeaveCalled = false
-    mount(
-      h(Transition, {
-        show: visible,
-        onBeforeLeave: () => {
-          beforeLeaveCalled = true
-        },
-        children: h('div', { id: 'leave-cb' }, 'content'),
-      }),
-      el,
-    )
-    visible.set(false)
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(beforeLeaveCalled).toBe(true)
-  })
-
-  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'),
-      }),
-      el,
-    )
-    // Start leaving
-    visible.set(false)
-    // Before the leave animation finishes, re-enter
-    visible.set(true)
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector('#reenter')).not.toBeNull()
-  })
-
-  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'),
-      }),
-      el,
-    )
-    expect(el.querySelector('#named')).not.toBeNull()
-  })
-})
-
-// ─── Hydration ───────────────────────────────────────────────────────────────
-
-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')
-    cleanup()
-  })
-
-  test('hydrates and attaches event handler', async () => {
-    const el = container()
-    el.innerHTML = '<button>click me</button>'
-    let clicked = false
-    hydrateRoot(
-      el,
-      h(
-        'button',
-        {
-          onClick: () => {
-            clicked = true
-          },
-        },
-        'click me',
-      ),
-    )
-    el.querySelector('button')?.click()
-    expect(clicked).toBe(true)
-  })
-
-  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')
-    cleanup()
-  })
-
-  test('hydrates reactive text', async () => {
-    const el = container()
-    el.innerHTML = '<div>initial</div>'
-    const text = signal('initial')
-    hydrateRoot(
-      el,
-      h('div', null, () => text()),
-    )
-    expect(el.querySelector('div')?.textContent).toBe('initial')
-    text.set('updated')
-    expect(el.querySelector('div')?.textContent).toBe('updated')
-  })
-
-  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')
-    cleanup()
-  })
-
-  test('hydrates component', async () => {
-    const el = container()
-    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!')
-    cleanup()
-  })
-})
-
-// ─── Mount edge cases ────────────────────────────────────────────────────────
-
-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')
-  })
-
-  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')
-  })
-
-  test('component returning null', () => {
-    const el = container()
-    const NullComp = defineComponent(() => null)
-    mount(h(NullComp, null), el)
-    expect(el.innerHTML).toBe('')
-  })
-
-  test('component returning fragment with mixed children', () => {
-    const el = container()
-    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')
-  })
-
-  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)
-  })
-
-  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)),
-      el,
-    )
-    expect(el.querySelector('#toggle')).toBeNull()
-    show.set(true)
-    expect(el.querySelector('#toggle')).not.toBeNull()
-    show.set(false)
-    expect(el.querySelector('#toggle')).toBeNull()
-  })
-
-  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 tabs = [
-      { id: 'dashboard', component: Dashboard },
-      { id: 'store', component: Store },
-    ]
-
-    mount(
-      h('div', null, () => {
-        const tab = tabs.find((t) => t.id === activeTab())
-        if (!tab) return null
-        const Component = tab.component
-        return h(Component, null)
-      }),
-      el,
-    )
-
-    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()
-  })
-
-  test('reactive child returning component with internal signals', () => {
-    const el = container()
-    const Dashboard = () => {
-      const count = signal(0)
-      return h('div', { id: 'dashboard' }, () => `Count: ${count()}`)
-    }
-    const Settings = () => {
-      return h('div', { id: 'settings' }, h('span', null, 'Settings page'))
-    }
-    const activeTab = signal<string>('dashboard')
-
-    mount(
-      h('div', null, () => {
-        const tab = activeTab()
-        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')
-
-    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()
-  })
-
-  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 components: Record<string, ComponentFn> = { dashboard: Dashboard, settings: Settings }
-
-    mount(
-      h('div', null, () => h(Dynamic, { component: components[activeTab()] })),
-      el,
-    )
-
-    expect(el.querySelector('#dashboard')?.textContent).toBe('Dashboard')
-
-    activeTab.set('settings')
-    expect(el.querySelector('#settings')?.textContent).toBe('Settings')
-    expect(el.querySelector('#dashboard')).toBeNull()
-  })
-
-  test('boolean false renders nothing', () => {
-    const el = container()
-    mount(h('div', null, false), el)
-    expect(el.querySelector('div')?.textContent).toBe('')
-  })
-
-  test('number 0 renders as text', () => {
-    const el = container()
-    mount(h('div', null, 0), el)
-    expect(el.querySelector('div')?.textContent).toBe('0')
-  })
-
-  test('empty string renders as text node', () => {
-    const el = container()
-    mount(h('div', null, ''), el)
-    expect(el.querySelector('div')?.textContent).toBe('')
-  })
-
-  test('component with children prop', () => {
-    const el = container()
-    const Wrapper = defineComponent((props: { children?: VNodeChild }) => {
-      return h('div', { id: 'wrapper' }, props.children)
-    })
-    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 () => {
-    const el = container()
-    const active = signal(true)
-    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()
-    active.set(false)
-    // Content should still exist in DOM but container hidden
-    expect(el.querySelector('#kept')).not.toBeNull()
-  })
-
-  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)
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelector('#ka-cleanup')).not.toBeNull()
-    unmount()
-    // After unmount, the KeepAlive container is gone
-    expect(el.innerHTML).toBe('')
-  })
-
-  test('active defaults to true when not provided', async () => {
-    const el = container()
-    mount(h(KeepAlive, {}, h('div', { id: 'ka-default' }, 'visible')), el)
-    await new Promise<void>((r) => queueMicrotask(r))
-    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
-    // If wrapper exists, display should not be none
-    if (wrapper) expect(wrapper.style.display).not.toBe('none')
-  })
-
-  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)
-    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
-      | HTMLElement
-      | undefined
-    if (keepAliveContainer) {
-      expect(keepAliveContainer.style.display).not.toBe('none')
-      active.set(false)
-      expect(keepAliveContainer.style.display).toBe('none')
-      active.set(true)
-      expect(keepAliveContainer.style.display).toBe('')
-    }
-  })
-})
-
-// ─── Hydration (extended coverage) ───────────────────────────────────────────
-
-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')
-    expect(spans.length).toBe(2)
-    expect(spans[0]?.textContent).toBe('a')
-    expect(spans[1]?.textContent).toBe('b')
-    cleanup()
-  })
-
-  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)
-    cleanup()
-  })
-
-  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()
-    cleanup()
-  })
-
-  test('hydrates reactive accessor returning null initially', async () => {
-    const el = container()
-    el.innerHTML = '<div></div>'
-    const show = signal<string | null>(null)
-    const cleanup = hydrateRoot(
-      el,
-      h('div', null, () => show()),
-    )
-    // Initially null — a comment marker is inserted
-    show.set('hello')
-    // After update, the text should appear
-    expect(el.textContent).toContain('hello')
-    cleanup()
-  })
-
-  test('hydrates reactive text that mismatches DOM node type', async () => {
-    const el = container()
-    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()),
-    )
-    cleanup()
-  })
-
-  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))
-    cleanup()
-  })
-
-  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')
-    cleanup()
-  })
-
-  test('hydrates number as text', async () => {
-    const el = container()
-    el.innerHTML = '42'
-    const cleanup = hydrateRoot(el, 42)
-    expect(el.textContent).toContain('42')
-    cleanup()
-  })
-
-  test('hydration tag mismatch falls back to mount', async () => {
-    const el = container()
-    el.innerHTML = '<div>wrong</div>'
-    // Expect span but find div — should fall back
-    const cleanup = hydrateRoot(el, h('span', null, 'right'))
-    // The span should have been mounted via fallback
-    cleanup()
-  })
-
-  test('hydrates element with ref', async () => {
-    const el = container()
-    el.innerHTML = '<button>click</button>'
-    const ref = createRef<HTMLButtonElement>()
-    const cleanup = hydrateRoot(el, h('button', { ref }, 'click'))
-    expect(ref.current).not.toBeNull()
-    expect(ref.current?.tagName).toBe('BUTTON')
-    cleanup()
-    expect(ref.current).toBeNull()
-  })
-
-  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')
-    cleanup()
-  })
-
-  test('hydrates component with children prop', async () => {
-    const el = container()
-    el.innerHTML = '<div><p>child content</p></div>'
-    const Wrapper = defineComponent((props: { children?: VNodeChild }) =>
-      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')
-    cleanup()
-  })
-
-  test('hydrates component that throws — error handled gracefully', async () => {
-    const el = container()
-    el.innerHTML = '<p>content</p>'
-    const Broken = defineComponent((): never => {
-      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 () => {
-    const el = container()
-    el.innerHTML = '<ul></ul>'
-    const items = signal([{ id: 1, label: 'a' }])
-    const cleanup = hydrateRoot(
-      el,
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h('li', null, r.label),
-        }),
-      ),
-    )
-    cleanup()
-  })
-
-  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' }])
-    const cleanup = hydrateRoot(
-      el,
-      For({
-        each: items,
-        by: (r: { id: number }) => r.id,
-        children: (r: { id: number; label: string }) => h('li', null, r.label),
-      }),
-    )
-    cleanup()
-  })
-
-  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')
-    cleanup()
-  })
-
-  test('hydrates with missing DOM node (null domNode)', async () => {
-    const el = container()
-    el.innerHTML = ''
-    // VNode expects content but DOM is empty — should fall back
-    const cleanup = hydrateRoot(el, h('div', null, 'content'))
-    cleanup()
-  })
-
-  test('hydrates reactive accessor returning VNode with no domNode', async () => {
-    const el = container()
-    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 () => {
-    const el = container()
-    el.innerHTML = '<span>mounted</span>'
-    let mountCalled = false
-    const Comp = defineComponent(() => {
-      onMount(() => {
-        mountCalled = true
-      })
-      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 () => {
-    const el = container()
-    // Put an element where text is expected
-    el.innerHTML = '<span>not text</span>'
-    const cleanup = hydrateRoot(el, 'plain text')
-    cleanup()
-  })
-})
-
-// ─── mountFor — additional edge cases ────────────────────────────────────────
-
-describe('mountFor — edge cases', () => {
-  type Item = { id: number; label: string }
-
-  function mountForList(el: HTMLElement, items: ReturnType<typeof signal<Item[]>>) {
-    mount(
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => h('li', { key: r.id }, r.label),
-        }),
-      ),
-      el,
-    )
-  }
-
-  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)
-    items.set([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    expect(el.querySelectorAll('li').length).toBe(2)
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('a')
-  })
-
-  test('clear then add uses fresh render path', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'x' }])
-    mountForList(el, items)
-    items.set([])
-    expect(el.querySelectorAll('li').length).toBe(0)
-    items.set([
-      { id: 2, label: 'y' },
-      { id: 3, label: 'z' },
-    ])
-    expect(el.querySelectorAll('li').length).toBe(2)
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('y')
-  })
-
-  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' },
-    ])
-    // Mount directly in the ul so markers are first/last children
-    mount(
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => h('li', { key: r.id }, r.label),
-        }),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li').length).toBe(3)
-    items.set([])
-    expect(el.querySelectorAll('li').length).toBe(0)
-  })
-
-  test('clear path without parent-swap (markers not first/last)', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'a' }])
-    // Mount with extra siblings so markers are not first/last
-    mount(
-      h(
-        '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'),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li').length).toBe(1)
-    items.set([])
-    expect(el.querySelectorAll('li').length).toBe(0)
-    // The before/after spans should still be present
-    expect(el.querySelectorAll('span').length).toBe(2)
-  })
-
-  test('replace-all with parent-swap optimization', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'old1' },
-      { id: 2, label: 'old2' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          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' },
-    ])
-    expect(el.querySelectorAll('li').length).toBe(2)
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('new1')
-  })
-
-  test('replace-all without parent-swap (extra siblings)', () => {
-    const el = container()
-    const items = signal<Item[]>([{ id: 1, label: 'old' }])
-    mount(
-      h(
-        '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'),
-      ),
-      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)
-  })
-
-  test('remove stale entries', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { 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' },
-    ])
-    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)', () => {
-    const el = container()
-    // Create 15 items, then reverse all — forces > SMALL_K diffs and LIS path
-    const initial = Array.from({ length: 15 }, (_, i) => ({
-      id: i + 1,
-      label: String.fromCharCode(97 + i),
-    }))
-    const items = signal<Item[]>(initial)
-    mountForList(el, items)
-    // Reverse all items: 15 diffs > SMALL_K (8)
-    items.set([...initial].reverse())
-    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')
-  })
-
-  test('LIS fallback for reorder with different length', () => {
-    const el = container()
-    const initial = Array.from({ length: 10 }, (_, i) => ({
-      id: i + 1,
-      label: String.fromCharCode(97 + i),
-    }))
-    const items = signal<Item[]>(initial)
-    mountForList(el, items)
-    // Reverse and add one — different length triggers LIS
-    const reversed = [...initial].reverse()
-    reversed.push({ id: 99, label: 'z' })
-    items.set(reversed)
-    const lis = el.querySelectorAll('li')
-    expect(lis.length).toBe(11)
-    expect(lis[0]?.textContent).toBe('j')
-    expect(lis[10]?.textContent).toBe('z')
-  })
-
-  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' },
-    ])
-    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' },
-    ])
-    const lis = el.querySelectorAll('li')
-    expect(lis[1]?.textContent).toBe('c')
-    expect(lis[2]?.textContent).toBe('b')
-  })
-
-  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' },
-    ])
-    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' },
-    ])
-    const lis = el.querySelectorAll('li')
-    expect(lis.length).toBe(4)
-    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')
-  })
-
-  test('unmount For cleanup disposes all entries', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    const unmount = mount(
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => h('li', { key: r.id }, r.label),
-        }),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li').length).toBe(2)
-    unmount()
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── mountKeyedList — additional coverage ────────────────────────────────────
-
-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' },
-    ])
-    mount(
-      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')
-  })
-
-  test('mountKeyedList handles clear (empty array)', () => {
-    const el = container()
-    const items = signal([
-      { id: 1, text: 'a' },
-      { id: 2, text: 'b' },
-    ])
-    mount(
-      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
-      el,
-    )
-    items.set([])
-    expect(el.querySelectorAll('li').length).toBe(0)
-  })
-
-  test('mountKeyedList handles reorder', () => {
-    const el = container()
-    const items = signal([
-      { 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))),
-      el,
-    )
-    items.set([
-      { 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')
-  })
-
-  test('mountKeyedList removes stale entries', () => {
-    const el = container()
-    const items = signal([
-      { 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))),
-      el,
-    )
-    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', () => {
-    const el = container()
-    const items = signal([{ id: 1, text: 'a' }])
-    mount(
-      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' },
-    ])
-    expect(el.querySelectorAll('li').length).toBe(3)
-  })
-
-  test('mountKeyedList cleanup disposes all entries', () => {
-    const el = container()
-    const items = signal([
-      { id: 1, text: 'a' },
-      { id: 2, text: 'b' },
-    ])
-    const unmount = mount(
-      h('ul', null, () => items().map((it) => h('li', { key: it.id }, it.text))),
-      el,
-    )
-    unmount()
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── mountReactive — additional coverage ─────────────────────────────────────
-
-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)),
-      el,
-    )
-    expect(el.querySelector('span')).toBeNull()
-    show.set(true)
-    expect(el.querySelector('span')?.textContent).toBe('yes')
-  })
-
-  test('reactive accessor returning false', () => {
-    const el = container()
-    const show = signal(false)
-    mount(
-      h('div', null, () => (show() ? 'visible' : false)),
-      el,
-    )
-    expect(el.querySelector('div')?.textContent).toBe('')
-    show.set(true)
-    expect(el.querySelector('div')?.textContent).toBe('visible')
-  })
-
-  test('reactive text fast path — null/undefined fallback', () => {
-    const el = container()
-    const text = signal<string | null>('hello')
-    mount(
-      h('div', null, () => text()),
-      el,
-    )
-    expect(el.querySelector('div')?.textContent).toBe('hello')
-    text.set(null)
-    expect(el.querySelector('div')?.textContent).toBe('')
-  })
-
-  test('reactive boolean text fast path', () => {
-    const el = container()
-    const val = signal(true)
-    mount(
-      h('div', null, () => val()),
-      el,
-    )
-    expect(el.querySelector('div')?.textContent).toBe('true')
-    val.set(false)
-    expect(el.querySelector('div')?.textContent).toBe('')
-  })
-
-  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)),
-      el,
-    )
-    unmount()
-    // Should not throw even though marker may be detached
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── mount.ts — component branches ──────────────────────────────────────────
-
-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')),
-    )
-    mount(h(FragComp, null), el)
-    expect(el.querySelectorAll('span').length).toBe(2)
-  })
-
-  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')
-    })
-    const unmount = mount(h(Comp, null), el)
-    expect(cleaned).toBe(false)
-    unmount()
-    expect(cleaned).toBe(true)
-  })
-
-  test('component with onUnmount hook', async () => {
-    const el = container()
-    let unmounted = false
-    const Comp = defineComponent(() => {
-      onUnmount(() => {
-        unmounted = true
-      })
-      return h('div', null, 'unmount-test')
-    })
-    const unmount = mount(h(Comp, null), el)
-    expect(unmounted).toBe(false)
-    unmount()
-    expect(unmounted).toBe(true)
-  })
-
-  test('component with onUpdate hook', async () => {
-    const el = container()
-    const Comp = defineComponent(() => {
-      const count = signal(0)
-      onUpdate(() => {
-        /* update tracked */
-      })
-      return h(
-        'div',
-        null,
-        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()
-    // onUpdate fires via microtask
-  })
-
-  test('component children merge into props.children', () => {
-    const el = container()
-    const Parent = defineComponent((props: { children?: VNodeChild }) =>
-      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')
-    expect(spans.length).toBe(2)
-  })
-
-  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),
-    )
-    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', () => {
-    const el = container()
-    const Parent = defineComponent((props: { children?: VNodeChild }) =>
-      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')
-  })
-
-  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>
-    mount(h(comp, null), el)
-    expect(el.querySelector('span')?.textContent).toBe('anon')
-  })
-})
-
-// ─── props.ts — additional coverage ──────────────────────────────────────────
-
-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')
-  })
-
-  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')
-  })
-
-  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
-    // key should not be an attribute
-    expect(div.hasAttribute('key')).toBe(false)
-    // ref should not be an attribute
-    expect(div.hasAttribute('ref')).toBe(false)
-    // data-test should be set
-    expect(div.getAttribute('data-test')).toBe('yes')
-  })
-
-  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)')
-  })
-
-  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>')
-  })
-
-  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)')
-  })
-
-  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 event handler attributes', async () => {
-    const result = sanitizeHtml('<div onclick="alert(1)">hello</div>')
-    expect(result).toContain('hello')
-    expect(result).not.toContain('onclick')
-  })
-
-  test('sanitizeHtml strips javascript: URLs', async () => {
-    const result = sanitizeHtml('<a href="javascript:alert(1)">link</a>')
-    expect(result).not.toContain('javascript:')
-  })
-
-  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>')
-    // 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>')
-  })
-
-  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')
-  })
-
-  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', () => {
-    const el = container()
-    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', () => {
-    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')
-  })
-})
-
-// ─── DevTools ────────────────────────────────────────────────────────────────
-
-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')
-  })
-
-  test('registerComponent and getAllComponents', async () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      getAllComponents: () => {
-        id: string
-        name: string
-        parentId: string | null
-        childIds: string[]
-      }[]
-      getComponentTree: () => { id: string; name: string; parentId: string | null }[]
-      highlight: (id: string) => void
-      onComponentMount: (cb: (entry: { id: string }) => void) => () => void
-      onComponentUnmount: (cb: (id: string) => void) => () => void
-    }
-
-    registerComponent('test-1', 'TestComp', null, null)
-    const all = devtools.getAllComponents()
-    const found = all.find((c: { id: string }) => c.id === 'test-1')
-    expect(found).not.toBeUndefined()
-    expect(found?.name).toBe('TestComp')
-
-    // Cleanup
-    unregisterComponent('test-1')
-  })
-
-  test('registerComponent with parentId creates parent-child relationship', async () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      getAllComponents: () => {
-        id: string
-        name: string
-        parentId: string | null
-        childIds: string[]
-      }[]
-    }
-
-    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')
-
-    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')
-  })
-
-  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')
-
-    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')
-    expect(rootInTree).not.toBeUndefined()
-    expect(subInTree).toBeUndefined() // sub is not root
-
-    unregisterComponent('sub-1')
-    unregisterComponent('root-1')
-  })
-
-  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')
-    document.body.appendChild(el)
-    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')
-
-    unregisterComponent('hl-1')
-    el.remove()
-  })
-
-  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
-    }
-
-    const mountedIds: string[] = []
-    const unmountedIds: string[] = []
-    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')
-
-    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')
-  })
-
-  test('unregisterComponent is noop for unknown id', async () => {
-    // Should not throw
-    unregisterComponent('does-not-exist')
-  })
-
-  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)
-    // Should not throw
-    devtools.highlight('no-el')
-    unregisterComponent('no-el')
-  })
-})
-
-// ─── TransitionGroup ─────────────────────────────────────────────────────────
-
-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',
-        items,
-        keyFn: (item: { id: number }) => 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()
-  })
-
-  test('renders initial items', async () => {
-    const el = container()
-    const items = signal([{ id: 1 }, { id: 2 }, { id: 3 }])
-    mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        items,
-        keyFn: (item: { id: number }) => 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')
-    expect(spans.length).toBe(3)
-    expect(spans[0]?.textContent).toBe('1')
-    expect(spans[2]?.textContent).toBe('3')
-  })
-
-  test('adding items triggers enter animation', async () => {
-    const el = container()
-    const items = signal([{ id: 1 }])
-    mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        name: 'fade',
-        items,
-        keyFn: (item: { id: number }) => 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)
-
-    // 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)
-  })
-
-  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',
-        items,
-        keyFn: (item: { id: number }) => 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)
-
-    // Remove item 2
-    items.set([{ id: 1 }])
-    // Element should still be in DOM during leave animation
-    expect(el.querySelectorAll('span.item').length).toBeGreaterThanOrEqual(1)
-  })
-
-  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)),
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-    // Default tag is div
-    expect(el.querySelector('div')).not.toBeNull()
-  })
-
-  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',
-        appear: true,
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', { class: 'appear-item' }, String(item.id)),
-        onBeforeEnter: () => {
-          enterCalled = true
-        },
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(enterCalled).toBe(true)
-  })
-
-  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',
-        items,
-        keyFn: (item: { id: number }) => 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)
-  })
-
-  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',
-        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))
-          return h(Comp, null) as unknown as ReturnType<typeof h>
-        },
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-    // Remove an item — since ref.current will be null for component VNodes,
-    // the entry is cleaned up immediately
-    items.set([{ id: 1 }])
-    await new Promise<void>((r) => queueMicrotask(r))
-  })
-
-  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',
-        items,
-        keyFn: (item: { id: number }) => 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)
-
-    // 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')
-  })
-
-  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',
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', null, String(item.id)),
-        onAfterEnter: () => {
-          afterEnterCalled = true
-        },
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-
-    // Add item (not first run, so enter animation triggers)
-    items.set([{ id: 1 }])
-    await new Promise<void>((r) => queueMicrotask(r))
-    await new Promise<void>((r) => queueMicrotask(r))
-
-    // Trigger rAF and transitionend
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const span = el.querySelector('span')
-    if (span) {
-      span.dispatchEvent(new Event('transitionend'))
-    }
-    expect(afterEnterCalled).toBe(true)
-  })
-
-  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',
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', { class: 'leave-item' }, String(item.id)),
-        onBeforeLeave: () => {
-          beforeLeaveCalled = true
-        },
-        onAfterLeave: () => {
-          /* after leave tracked */
-        },
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-
-    // Remove item
-    items.set([])
-    expect(beforeLeaveCalled).toBe(true)
-
-    // Trigger leave animation completion
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const span = el.querySelector('span.leave-item')
-    if (span) {
-      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'))
-    }
-  })
-})
-
-// ─── Hydration debug ────────────────────────────────────────────────────────
-
-describe('hydration warnings', () => {
-  test('enableHydrationWarnings and disableHydrationWarnings', async () => {
-    // Should not throw
-    enableHydrationWarnings()
-    disableHydrationWarnings()
-    enableHydrationWarnings() // re-enable for other tests
-  })
-})
-
-// ─── Additional hydrate.ts branch coverage ───────────────────────────────────
-
-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>'
-    // 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)
-    cleanup()
-  })
-
-  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>'
-    const items = signal([
-      { id: 1, label: 'item1' },
-      { id: 2, label: 'item2' },
-    ])
-    const cleanup = hydrateRoot(
-      el,
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h('li', null, r.label),
-        }),
-      ),
-    )
-    cleanup()
-  })
-
-  test('hydrates reactive accessor returning null with no domNode', async () => {
-    const el = container()
-    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')
-    cleanup()
-  })
-
-  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))
-    cleanup()
-  })
-
-  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))
-    cleanup()
-  })
-
-  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')
-    cleanup()
-  })
-
-  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' }])
-    const cleanup = hydrateRoot(
-      el,
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h('li', null, r.label),
-        }),
-      ),
-    )
-    cleanup()
-  })
-
-  test('For with no SSR markers and no domNode', async () => {
-    const el = container()
-    el.innerHTML = '<div></div>'
-    const items = signal([{ id: 1, label: 'a' }])
-    const cleanup = hydrateRoot(
-      el,
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h('li', null, r.label),
-        }),
-      ),
-    )
-    cleanup()
-  })
-
-  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>'
-    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')),
-    )
-    cleanup()
-  })
-})
-
-// ─── mount.ts — error handling branches ──────────────────────────────────────
-
-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)
-    cleanup()
-  })
-
-  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')
-      })
-      return h(Throws, null)
-    })
-    // Should not throw — error is caught in mountComponent's subtree try/catch
-    mount(h(BadRender, null), el)
-  })
-
-  test('onMount hook that throws is caught', async () => {
-    const el = container()
-    const Comp = defineComponent(() => {
-      onMount(() => {
-        throw new Error('onMount error')
-      })
-      return h('div', null, 'content')
-    })
-    // Should not throw
-    mount(h(Comp, null), el)
-    expect(el.querySelector('div')?.textContent).toBe('content')
-  })
-
-  test('onUnmount hook that throws is caught', async () => {
-    const el = container()
-    const Comp = defineComponent(() => {
-      onUnmount(() => {
-        throw new Error('onUnmount error')
-      })
-      return h('div', null, 'content')
-    })
-    const unmount = mount(h(Comp, null), el)
-    // Should not throw
-    unmount()
-  })
-})
-
-// ─── TransitionGroup — unmount cleanup ───────────────────────────────────────
-
-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',
-        items,
-        keyFn: (item: { id: number }) => 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)
-    unmount()
-    expect(el.innerHTML).toBe('')
-  })
-})
-
-// ─── TransitionGroup — leak regression tests ─────────────────────────────────
-// Regression for the two fixes:
-// 1. No safety timeout on applyLeave meant an item whose transition never
-//    fired stayed in the `entries` Map forever (`entries.delete(key)` was
-//    gated on the `done` callback firing).
-// 2. Unmount during in-flight transition left the 5s safety timer running,
-//    firing `onAfterEnter` / `onAfterLeave` on detached elements.
-
-describe('TransitionGroup — leak regressions', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  test('onAfterLeave fires via 5s safety timeout when transitionend never fires', async () => {
-    const el = container()
-    const items = signal([{ id: 1 }, { id: 2 }])
-    const onAfterLeave = vi.fn()
-    mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        name: 'fade',
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
-        onAfterLeave,
-      }),
-      el,
-    )
-    await vi.advanceTimersByTimeAsync(20)
-    items.set([{ id: 1 }])
-    await vi.advanceTimersByTimeAsync(20)
-    // transitionend never fires — before the fix this would leak forever.
-    expect(onAfterLeave).not.toHaveBeenCalled()
-    await vi.advanceTimersByTimeAsync(5100)
-    expect(onAfterLeave).toHaveBeenCalledTimes(1)
-  })
-
-  test('onAfterEnter does NOT fire after container unmount during in-flight enter', async () => {
-    const el = container()
-    const items = signal<{ id: number }[]>([])
-    const onAfterEnter = vi.fn()
-    const dispose = mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        name: 'fade',
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
-        onAfterEnter,
-      }),
-      el,
-    )
-    await vi.advanceTimersByTimeAsync(20)
-    items.set([{ id: 1 }])
-    await vi.advanceTimersByTimeAsync(20)
-    // Mid-transition — unmount. The 5s safety timer must NOT fire the
-    // callback on a detached element.
-    dispose()
-    await vi.advanceTimersByTimeAsync(6000)
-    expect(onAfterEnter).not.toHaveBeenCalled()
-  })
-
-  test('onAfterLeave does NOT fire after container unmount during in-flight leave', async () => {
-    const el = container()
-    const items = signal([{ id: 1 }])
-    const onAfterLeave = vi.fn()
-    const dispose = mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        name: 'fade',
-        items,
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
-        onAfterLeave,
-      }),
-      el,
-    )
-    await vi.advanceTimersByTimeAsync(20)
-    items.set([])
-    await vi.advanceTimersByTimeAsync(20)
-    dispose()
-    await vi.advanceTimersByTimeAsync(6000)
-    expect(onAfterLeave).not.toHaveBeenCalled()
-  })
-})
-
-// ─── Error paths (no ErrorBoundary) ──────────────────────────────────────────
-
-describe('mount — error paths', () => {
-  test('component that throws during setup fires console.error', () => {
-    const el = container()
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    const Broken: ComponentFn = () => {
-      throw new Error('setup boom')
-    }
-    mount(h(Broken, null), el)
-
-    expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining('threw during setup'),
-      expect.any(Error),
-    )
-    spy.mockRestore()
-  })
-
-  test('component that throws during render fires console.error', () => {
-    const el = container()
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    const BrokenChild: ComponentFn = () => {
-      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))
-    spy.mockRestore()
-  })
-})
-
-// ─── SVG namespace ──────────────────────────────────────────────────────────
-
-describe('mount — SVG namespace', () => {
-  const SVG_NS = 'http://www.w3.org/2000/svg'
-
-  test('svg element gets SVG namespace', () => {
-    const el = container()
-    mount(h('svg', null), el)
-    const svg = el.firstElementChild!
-    expect(svg.namespaceURI).toBe(SVG_NS)
-  })
-
-  test('nested element inside svg inherits SVG namespace', () => {
-    const el = container()
-    // Use null props to avoid happy-dom SVG property setter issues
-    mount(h('svg', null, h('circle', null)), el)
-    const svg = el.firstElementChild!
-    const circle = svg.firstElementChild!
-    expect(svg.namespaceURI).toBe(SVG_NS)
-    expect(circle.namespaceURI).toBe(SVG_NS)
-    expect(circle.tagName.toLowerCase()).toBe('circle')
-  })
-
-  test('deeply nested SVG elements inherit namespace', () => {
-    const el = container()
-    mount(
-      h('svg', null, h('g', null, h('rect', null))),
-      el,
-    )
-    const svg = el.firstElementChild!
-    const g = svg.firstElementChild!
-    const rect = g.firstElementChild!
-    expect(g.namespaceURI).toBe(SVG_NS)
-    expect(rect.namespaceURI).toBe(SVG_NS)
-  })
-
-  test('SVG marker mounts cleanly with read-only animated-length attributes', () => {
-    // Regression test for the bug fixed via the SVG namespace
-    // special case in setStaticProp: SVGMarkerElement properties
-    // like markerWidth, markerHeight, refX, refY are read-only
-    // SVGAnimatedLength getters. Before the fix, the runtime tried
-    // `el[key] = value` and crashed with `Cannot set property
-    // markerWidth of [object Object] which has only a getter`.
-    // Same for SVGRectElement.x/y/width/height and many others.
-    //
-    // The fix: SVG and MathML elements always go through
-    // setAttribute() instead of property assignment. This test
-    // mounts a marker with all the offending attributes and asserts
-    // they were applied via setAttribute.
-    const el = container()
-    mount(
-      h(
-        'svg',
-        null,
-        h(
-          'defs',
-          null,
-          h(
-            'marker',
-            {
-              id: 'arrowhead',
-              markerWidth: '10',
-              markerHeight: '7',
-              refX: '10',
-              refY: '3.5',
-              orient: 'auto',
-            },
-            h('polygon', { points: '0 0, 10 3.5, 0 7', fill: '#999' }),
-          ),
-        ),
-      ),
-      el,
-    )
-
-    const marker = el.querySelector('marker#arrowhead')
-    expect(marker).not.toBeNull()
-    expect(marker?.getAttribute('markerWidth')).toBe('10')
-    expect(marker?.getAttribute('markerHeight')).toBe('7')
-    expect(marker?.getAttribute('refX')).toBe('10')
-    expect(marker?.getAttribute('refY')).toBe('3.5')
-    expect(marker?.getAttribute('orient')).toBe('auto')
-  })
-
-  test('SVG rect mounts cleanly with read-only x/y/width/height attributes', () => {
-    // Same regression class as the marker test above. SVGRectElement
-    // exposes x, y, width, height as read-only SVGAnimatedLength.
-    const el = container()
-    mount(
-      h(
-        'svg',
-        null,
-        h('rect', { x: '5', y: '10', width: '100', height: '50', fill: 'red' }),
-      ),
-      el,
-    )
-
-    const rect = el.querySelector('rect')
-    expect(rect).not.toBeNull()
-    expect(rect?.getAttribute('x')).toBe('5')
-    expect(rect?.getAttribute('y')).toBe('10')
-    expect(rect?.getAttribute('width')).toBe('100')
-    expect(rect?.getAttribute('height')).toBe('50')
-    expect(rect?.getAttribute('fill')).toBe('red')
-  })
-
-  test('elements outside svg do not get SVG namespace', () => {
-    const el = container()
-    mount(
-      h(Fragment, null, h('svg', null, h('circle', null)), h('div', null, 'text')),
-      el,
-    )
-    const svg = el.querySelector('svg')!
-    const circle = svg.firstElementChild!
-    const div = el.querySelector('div')!
-    expect(svg.namespaceURI).toBe(SVG_NS)
-    expect(circle.namespaceURI).toBe(SVG_NS)
-    expect(div.namespaceURI).not.toBe(SVG_NS)
-  })
-
-  test('svg with multiple children all get SVG namespace', () => {
-    const el = container()
-    mount(
-      h('svg', null,
-        h('circle', null),
-        h('rect', null),
-        h('path', null),
-      ),
-      el,
-    )
-    const svg = el.firstElementChild!
-    for (const child of Array.from(svg.children)) {
-      expect(child.namespaceURI).toBe(SVG_NS)
-    }
-  })
-})