@pyreon/runtime-dom 0.1.0

package/src/tests/coverage.test.ts

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