@pyreon/elements 0.14.0 → 0.16.0

package/src/__tests__/Overlay.test.ts

@@ -37,7 +37,14 @@ vi.mock('@pyreon/reactivity', () => {
     return s
   }
 
-  return { signal }
+  // No-op: `@pyreon/core/context.ts` calls `setSnapshotCapture(...)` at
+  // module load to install the reactive-effect context-snapshot DI hook.
+  // Mocked tests don't drive real reactive scoping, so accept the call
+  // and discard. Required since `@pyreon/core` imports `setSnapshotCapture`
+  // from `@pyreon/reactivity` — without this stub the mock factory throws
+  // "No 'setSnapshotCapture' export is defined on the '@pyreon/reactivity' mock."
+  const setSnapshotCapture = () => {}
+  return { signal, setSnapshotCapture }
 })
 
 // onMount / onUnmount are no-ops outside a renderer

package/src/__tests__/Portal.test.ts

@@ -1,68 +1,142 @@
-import type { VNode } from '@pyreon/core'
-import { Portal as CorePortal, h } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
 import { describe, expect, it } from 'vitest'
 import { Portal } from '../Portal'
 
-const asVNode = (v: unknown) => v as VNode
-
 describe('Portal', () => {
-  describe('rendering', () => {
-    it('returns a VNode whose type is CorePortal', () => {
-      const child = h('div', null, 'modal content')
-      const result = asVNode(Portal({ children: child }))
-      expect(result.type).toBe(CorePortal)
-    })
+  describe('wrapper element creation', () => {
+    it('creates a per-instance wrapper appended to document.body by default', () => {
+      const before = document.body.children.length
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(h(Portal, { children: h('span', { id: 'pchild' }, 'modal') }), root)
+
+      // Wrapper appended directly to document.body (not inside `root`).
+      expect(document.body.children.length).toBe(before + 2) // root + portal wrapper
+      const wrapper = document.body.querySelector('#pchild')!.parentElement!
+      expect(wrapper).not.toBe(document.body)
+      expect(wrapper.tagName).toBe('DIV')
+      expect(wrapper.parentElement).toBe(document.body)
 
-    it('defaults target to document.body when DOMLocation is not provided', () => {
-      const child = h('div', null, 'content')
-      const result = asVNode(Portal({ children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.target).toBe(document.body)
+      unmount()
+      root.remove()
     })
 
-    it('uses DOMLocation as target when provided', () => {
-      const customTarget = document.createElement('div')
-      const child = h('span', null, 'inside')
-      const result = asVNode(Portal({ DOMLocation: customTarget, children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.target).toBe(customTarget)
+    it('uses the supplied tag for the wrapper element', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(
+        h(Portal, { tag: 'section', children: h('span', { id: 'tagchild' }, 'x') }),
+        root,
+      )
+
+      const wrapper = document.body.querySelector('#tagchild')!.parentElement!
+      expect(wrapper.tagName).toBe('SECTION')
+
+      unmount()
+      root.remove()
     })
 
-    it('passes children through to the CorePortal VNode', () => {
-      const child = h('div', { class: 'modal' }, 'Modal content')
-      const result = asVNode(Portal({ children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe(child)
+    it('appends the wrapper to DOMLocation when provided', () => {
+      const root = document.createElement('div')
+      const customTarget = document.createElement('article')
+      customTarget.id = 'custom-target'
+      document.body.appendChild(root)
+      document.body.appendChild(customTarget)
+
+      const unmount = mount(
+        h(Portal, { DOMLocation: customTarget, children: h('span', { id: 'cchild' }, 'inside') }),
+        root,
+      )
+
+      const wrapper = customTarget.querySelector('#cchild')!.parentElement!
+      expect(wrapper.parentElement).toBe(customTarget)
+
+      unmount()
+      root.remove()
+      customTarget.remove()
     })
 
-    it('passes string children', () => {
-      const result = asVNode(Portal({ children: 'text content' }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe('text content')
+    it('renders children inside the wrapper', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(
+        h(Portal, { children: h('span', { id: 'inside-wrapper', class: 'modal' }, 'Modal') }),
+        root,
+      )
+
+      const child = document.body.querySelector('#inside-wrapper')!
+      expect(child.textContent).toBe('Modal')
+      const wrapper = child.parentElement!
+      expect(wrapper.parentElement).toBe(document.body)
+
+      unmount()
+      root.remove()
     })
 
-    it('passes number children', () => {
-      const result = asVNode(Portal({ children: 42 }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe(42)
+    it('removes the wrapper from the DOM on unmount', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const before = document.body.children.length
+      const unmount = mount(
+        h(Portal, { children: h('span', { id: 'cleanup-child' }, 'x') }),
+        root,
+      )
+      expect(document.body.children.length).toBe(before + 1) // wrapper added
+      const wrapper = document.body.querySelector('#cleanup-child')!.parentElement!
+      expect(wrapper.isConnected).toBe(true)
+
+      unmount()
+      expect(wrapper.isConnected).toBe(false)
+      expect(document.body.contains(wrapper)).toBe(false)
+
+      root.remove()
     })
 
-    it('passes nested VNode children', () => {
-      const nested = h('div', null, h('span', null, 'level 1'), h('span', null, 'level 2'))
-      const result = asVNode(Portal({ children: nested }))
-      const props = result.props as Record<string, unknown>
-      const childVNode = asVNode(props.children)
-      expect(childVNode.type).toBe('div')
-      expect(childVNode.children).toHaveLength(2)
+    it('removes the wrapper from a custom DOMLocation on unmount', () => {
+      const root = document.createElement('div')
+      const customTarget = document.createElement('div')
+      document.body.appendChild(root)
+      document.body.appendChild(customTarget)
+
+      const unmount = mount(
+        h(Portal, { DOMLocation: customTarget, children: h('span', { id: 'cu' }, 'x') }),
+        root,
+      )
+      expect(customTarget.children.length).toBe(1)
+
+      unmount()
+      expect(customTarget.children.length).toBe(0)
+
+      root.remove()
+      customTarget.remove()
     })
-  })
 
-  describe('tag prop', () => {
-    it('accepts tag prop without affecting output type', () => {
-      const child = h('div', null, 'content')
-      const result = asVNode(Portal({ tag: 'section', children: child }))
-      // tag is accepted but not used — output is still a Portal VNode
-      expect(result.type).toBe(CorePortal)
+    it('isolates per-instance wrappers when multiple Portals share a DOMLocation', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const u1 = mount(h(Portal, { children: h('span', { id: 'p1' }, 'A') }), root)
+      const u2 = mount(h(Portal, { children: h('span', { id: 'p2' }, 'B') }), root)
+
+      const w1 = document.body.querySelector('#p1')!.parentElement!
+      const w2 = document.body.querySelector('#p2')!.parentElement!
+      expect(w1).not.toBe(w2)
+      expect(w1.parentElement).toBe(document.body)
+      expect(w2.parentElement).toBe(document.body)
+
+      u1()
+      // unmounting one Portal removes only its wrapper, not the sibling's
+      expect(w1.isConnected).toBe(false)
+      expect(w2.isConnected).toBe(true)
+
+      u2()
+      expect(w2.isConnected).toBe(false)
+      root.remove()
     })
   })
 

package/src/__tests__/Wrapper-innerhtml.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * Regression: Wrapper used to silently drop `dangerouslySetInnerHTML`.
+ *
+ * Bug shape: `OWN_KEYS` listed `'dangerouslySetInnerHTML'`, so `splitProps`
+ * moved it into `own`. The Styled JSX call only spread `...commonProps`
+ * (built from `rest`) and never re-attached `own.dangerouslySetInnerHTML`.
+ * Both runtimes (`runtime-server` and `runtime-dom`) support the prop —
+ * the data was lost between Wrapper and the renderer.
+ *
+ * Two test layers:
+ *
+ * 1. **Mock-vnode tests** (this file's first describe block) — fast
+ *    structural assertions against the vnode tree Wrapper returns. Catches
+ *    the prop drop at the API surface where it originally happened.
+ *
+ * 2. **Real-h() mount tests** (second describe block) — uses real `h()` +
+ *    `mount()` to exercise the full Element → Wrapper → Styled → DOM
+ *    pipeline. Catches the prop drop wherever it might occur along the
+ *    chain (Wrapper, Element, rocketstyle attrs HOC, runtime-dom prop
+ *    application). This is the "safety net" pattern from
+ *    .claude/rules/test-environment-parity.md — mock-vnode tests bypass
+ *    the HOC + mount pipeline and CAN miss bugs that surface only when
+ *    the real `h()` + mount path runs, exactly like PR #197's silent
+ *    metadata drop. Always have both.
+ */
+import { h, type VNode } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('~/utils', () => ({
+  IS_DEVELOPMENT: false,
+}))
+
+import Wrapper from '../helpers/Wrapper/component'
+import { Element } from '../Element'
+
+const asVNode = (v: unknown) => v as VNode
+
+describe('Wrapper — dangerouslySetInnerHTML forwarding (mock-vnode)', () => {
+  it('forwards dangerouslySetInnerHTML to the rendered Styled vnode (non-needsFix path)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // Bug-shape assertion: the prop must reach the rendered vnode.
+    // Pre-fix this is `undefined` → SVG is silently dropped.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+
+  it('drops children when dangerouslySetInnerHTML is present (mutually exclusive)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+        // children would conflict — innerHTML wins.
+        children: 'should be dropped',
+      }),
+    )
+
+    // children slot must not coexist with innerHTML — runtime-server's
+    // and runtime-dom's prop pipeline both treat them as inner-content
+    // sources, and emitting both would result in either a malformed
+    // tree or innerHTML being overwritten by the children mount.
+    expect(result.children).toEqual([])
+  })
+
+  it('forwards dangerouslySetInnerHTML on the needsFix path (button/fieldset/legend)', () => {
+    // button/fieldset/legend take the two-layer flex fix path. innerHTML
+    // belongs on the inner styled node (where the actual content goes),
+    // NOT on the outer wrapper.
+    const html = { __html: '<span>label</span>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'button',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // The `needsFix` branch should NOT trigger when innerHTML is set
+    // (innerHTML replaces all children, including the inner flex-fix
+    // layer). The simplest correct behavior: bypass needsFix when
+    // innerHTML is present and forward the prop on the single Styled.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+})
+
+// Real-h() mount tests — parallel coverage that runs the full pipeline.
+// Element uses Wrapper internally; mounting Element with
+// `dangerouslySetInnerHTML` exercises every layer the bug could surface
+// at: Element's split → Wrapper → Styled → runtime-dom's prop application.
+// happy-dom is the test environment; `dangerouslySetInnerHTML` translates
+// to `el.innerHTML = ...` which happy-dom handles natively.
+describe('Wrapper — dangerouslySetInnerHTML forwarding (real h() + mount)', () => {
+  it('Element with dangerouslySetInnerHTML actually injects HTML into the DOM (non-needsFix tag)', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'div',
+        'data-testid': 'innerhtml-host',
+        dangerouslySetInnerHTML: { __html: '<svg data-marker="real-h-svg">x</svg>' },
+      }),
+      root,
+    )
+
+    // The structural assertion: SVG element exists in the rendered DOM.
+    // Pre-fix Wrapper dropped the prop → no SVG → null query result.
+    const svg = root.querySelector('[data-marker="real-h-svg"]')
+    expect(svg).not.toBeNull()
+    expect(svg?.tagName.toLowerCase()).toBe('svg')
+
+    unmount()
+    root.remove()
+  })
+
+  it('Element with dangerouslySetInnerHTML on a needsFix tag (button) still injects HTML', () => {
+    // button is a needsFix tag (two-layer flex fix). The Wrapper branch
+    // must bypass the two-layer fix when innerHTML is present, OR forward
+    // innerHTML to the right layer. Either way the rendered DOM must
+    // contain the user-supplied HTML.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'button',
+        'data-testid': 'innerhtml-button',
+        dangerouslySetInnerHTML: { __html: '<span data-marker="real-h-button-label">click me</span>' },
+      }),
+      root,
+    )
+
+    const span = root.querySelector('[data-marker="real-h-button-label"]')
+    expect(span).not.toBeNull()
+    expect(span?.textContent).toBe('click me')
+
+    unmount()
+    root.remove()
+  })
+
+  it('children passed alongside dangerouslySetInnerHTML are dropped (innerHTML wins)', () => {
+    // Bug shape: if Wrapper's `own.children` leaks into the rendered vnode
+    // alongside `dangerouslySetInnerHTML`, runtime-dom would either mount
+    // children INTO the innerHTML-populated element (overwriting), or land
+    // both side-by-side. The contract is that innerHTML wins and children
+    // are dropped. Verifying at the DOM level catches both failure shapes.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(
+        Element,
+        {
+          tag: 'div',
+          'data-testid': 'innerhtml-with-children',
+          dangerouslySetInnerHTML: { __html: '<i data-marker="real-h-winner">html wins</i>' },
+        },
+        'this child text should NOT appear',
+      ),
+      root,
+    )
+
+    const host = root.querySelector('[data-testid="innerhtml-with-children"]')!
+    expect(host.querySelector('[data-marker="real-h-winner"]')).not.toBeNull()
+    // The child string must not appear anywhere in the rendered host.
+    expect(host.textContent).not.toContain('this child text should NOT appear')
+    expect(host.textContent).toContain('html wins')
+
+    unmount()
+    root.remove()
+  })
+})

package/src/__tests__/Wrapper.test.tsx

@@ -149,4 +149,48 @@ describe('Wrapper component', () => {
       expect((result.props.$element as any).parentFix).toBeUndefined()
     })
   })
+
+  // Void HTML elements (hr, input, img, br, …) cannot have children. Element
+  // already skips passing children to Wrapper for void tags, but the JSX
+  // `{own.children}` slot still serialized `undefined` into the vnode and
+  // tripped runtime-dom's void-element warning. Wrapper now drops the slot
+  // entirely for void tags.
+  describe('void HTML elements drop the children slot', () => {
+    const VOID_TAGS = ['hr', 'input', 'img', 'br', 'area', 'base', 'col', 'embed', 'link', 'source', 'track', 'wbr'] as const
+
+    for (const tag of VOID_TAGS) {
+      it(`omits children for <${tag}>`, () => {
+        // Cast to any — the Wrapper Props.tag type narrows out void
+        // elements, but the runtime guard still has to cover the case
+        // where a void tag reaches Wrapper (e.g. via rocketstyle attrs
+        // composing `tag: 'hr'` from a callback whose return type is wider).
+        const result = asVNode(Wrapper({ tag } as any))
+        expect(result.type).toBe(Styled)
+        expect(result.props.children).toBeUndefined()
+        expect(result.children).toEqual([])
+      })
+    }
+
+    it('still renders children for non-void tags', () => {
+      const result = asVNode(Wrapper({ tag: 'div', children: 'kept' }))
+      expect(result.props.children).toBe('kept')
+    })
+
+    it('omits children even when caller accidentally passes them to a void tag', () => {
+      const result = asVNode(Wrapper({ tag: 'hr', children: 'should-not-leak' }))
+      expect(result.props.children).toBeUndefined()
+    })
+
+    it('dangerouslySetInnerHTML on a normally-void tag bypasses the void path', () => {
+      const result = asVNode(
+        Wrapper({
+          tag: 'hr',
+          dangerouslySetInnerHTML: { __html: '<b>x</b>' },
+        } as any),
+      )
+      // dangerouslySetInnerHTML opts out of the void-element guard
+      // because the tag becomes a custom element / shadow host case.
+      expect(result.type).toBe(Styled)
+    })
+  })
 })

package/src/__tests__/elements.browser.test.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @pyreon/core */
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { signal } from '@pyreon/reactivity'
 import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
 import { Element } from '../Element'
@@ -52,8 +52,81 @@ describe('@pyreon/elements browser smoke', () => {
     expect(document.querySelector('[data-portal-id="p"]')).toBeNull()
   })
 
-  it('runs in a real browser — `typeof process` is undefined, `import.meta.env.DEV` is true', () => {
-    expect(typeof process).toBe('undefined')
-    expect(import.meta.env.DEV).toBe(true)
+  it('runs in a real browser — Vitest defines `process.env.NODE_ENV !== "production"`', () => {
+    // Sanity check the test env: dev gates use bundler-agnostic
+    // `process.env.NODE_ENV !== 'production'`. Every modern bundler
+    // (incl. Vitest's Vite) replaces this at build time. In a real-browser
+    // test run the literal lands as `"development" !== "production"` →
+    // `true`, so dev warnings fire as expected.
+    expect(process.env.NODE_ENV).not.toBe('production')
+  })
+
+  // Void HTML elements via Element must not trip runtime-dom's
+  // "<X> is a void element and cannot have children" warning.
+  // Wrapper used to leak an `undefined` child into the vnode for void tags.
+  describe('void HTML element tags', () => {
+    const voidTags: Array<'hr' | 'br' | 'input' | 'img'> = ['hr', 'br', 'input', 'img']
+
+    for (const tag of voidTags) {
+      it(`<${tag}> mounts without "void element" console.warn`, () => {
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+        const { container, unmount } = mountInBrowser(<Element tag={tag} data-id={tag} />)
+        const el = container.querySelector(`[data-id="${tag}"]`)
+        expect(el?.tagName.toLowerCase()).toBe(tag)
+        const voidWarnings = warnSpy.mock.calls.filter((args) =>
+          typeof args[0] === 'string' && args[0].includes('void element'),
+        )
+        expect(voidWarnings).toEqual([])
+        warnSpy.mockRestore()
+        unmount()
+      })
+    }
+  })
+
+  // Regression: Wrapper used to silently drop dangerouslySetInnerHTML.
+  // The unit test asserts Wrapper forwards the prop on the rendered
+  // vnode; this real-Chromium test asserts the SVG actually appears in
+  // the DOM after mount — the user-visible bug shape was "renders empty
+  // <div></div> instead of inlined SVG".
+  describe('dangerouslySetInnerHTML — real-Chromium DOM proof', () => {
+    it('inlines an SVG via Element + dangerouslySetInnerHTML', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="div"
+          data-id="logo"
+          dangerouslySetInnerHTML={{
+            __html: '<svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg>',
+          }}
+        />,
+      )
+      const root = container.querySelector('[data-id="logo"]')
+      expect(root).toBeTruthy()
+      // The SVG must actually be in the DOM, not lost between Wrapper and
+      // the renderer. Pre-fix this assertion failed: container had
+      // <div data-id="logo"></div> with no children.
+      const svg = root?.querySelector('svg')
+      expect(svg).toBeTruthy()
+      expect(svg?.tagName.toLowerCase()).toBe('svg')
+      expect(svg?.querySelector('rect')).toBeTruthy()
+      unmount()
+    })
+
+    it('inlines markup on a button (needsFix path)', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="button"
+          data-id="btn"
+          dangerouslySetInnerHTML={{ __html: '<strong>Save</strong>' }}
+        />,
+      )
+      const btn = container.querySelector('[data-id="btn"]')
+      expect(btn).toBeTruthy()
+      // The bold text must reach the DOM. The needsFix gate's existing
+      // `!own.dangerouslySetInnerHTML` clause skips the two-layer fix,
+      // so this falls into the !needsFix branch and the fix's
+      // `if (innerHTML)` path takes over.
+      expect(btn?.querySelector('strong')?.textContent).toBe('Save')
+      unmount()
+    })
   })
 })

package/src/__tests__/internElementBundle.test.ts

@@ -0,0 +1,102 @@
+/**
+ * Unit tests for internElementBundle() — the module-scope LRU cache that
+ * gives same-shape Element layouts a stable object identity. Locks in the
+ * bail conditions (functions, non-string objects) and the LRU semantics
+ * so a future refactor can't silently break the styler classCache hit.
+ */
+import { describe, expect, it } from 'vitest'
+import { internElementBundle } from '../helpers/internElementBundle'
+
+describe('internElementBundle', () => {
+  it('returns the same identity for the same primitive prop tuple', () => {
+    const a = internElementBundle({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+      equalCols: false,
+      extraStyles: undefined,
+    })
+    const b = internElementBundle({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+      equalCols: false,
+      extraStyles: undefined,
+    })
+    expect(a).toBe(b)
+  })
+
+  it('returns different identity when any primitive value differs', () => {
+    const a = internElementBundle({ block: false, direction: 'inline' })
+    const b = internElementBundle({ block: true, direction: 'inline' })
+    const c = internElementBundle({ block: false, direction: 'rows' })
+    expect(a).not.toBe(b)
+    expect(a).not.toBe(c)
+    expect(b).not.toBe(c)
+  })
+
+  it('handles different bundle shapes independently (parentFix vs childFix)', () => {
+    const parent = internElementBundle({
+      parentFix: true,
+      block: false,
+      extraStyles: undefined,
+    })
+    const child = internElementBundle({
+      childFix: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+      equalCols: false,
+    })
+    expect(parent).not.toBe(child)
+    // Same shape repeats are interned
+    const parent2 = internElementBundle({
+      parentFix: true,
+      block: false,
+      extraStyles: undefined,
+    })
+    expect(parent).toBe(parent2)
+  })
+
+  it('bails (returns the input untouched) when a value is a function', () => {
+    const fn = () => 'red'
+    const a = internElementBundle({ block: false, extraStyles: fn })
+    const b = internElementBundle({ block: false, extraStyles: fn })
+    // Both calls bail — neither is cached, so identities differ.
+    expect(a).not.toBe(b)
+    // The returned object IS the input (untouched).
+    expect(a).toEqual({ block: false, extraStyles: fn })
+  })
+
+  it('bails when a value is a non-null object (CSSResult / nested object)', () => {
+    const cssResult = { strings: ['color: red'], values: [] }
+    const a = internElementBundle({ block: false, extraStyles: cssResult })
+    const b = internElementBundle({ block: false, extraStyles: cssResult })
+    expect(a).not.toBe(b)
+  })
+
+  it('treats string extraStyles as cacheable (the common pre-resolved CSS case)', () => {
+    const a = internElementBundle({ block: false, extraStyles: 'color: red' })
+    const b = internElementBundle({ block: false, extraStyles: 'color: red' })
+    expect(a).toBe(b)
+    const c = internElementBundle({ block: false, extraStyles: 'color: blue' })
+    expect(a).not.toBe(c)
+  })
+
+  it('null and undefined are distinct cache keys (JSON serializes them differently)', () => {
+    const aNull = internElementBundle({ extraStyles: null })
+    const aUndef = internElementBundle({ extraStyles: undefined })
+    expect(aNull).not.toBe(aUndef)
+  })
+
+  it('LRU touch on hit moves entry to most-recent position', () => {
+    // Hit the same bundle twice — second call should still return the same
+    // identity (LRU touch keeps it alive).
+    const key = `lru-touch-${Math.random()}`
+    const first = internElementBundle({ direction: key })
+    const second = internElementBundle({ direction: key })
+    expect(first).toBe(second)
+  })
+})

package/src/__tests__/native-markers.test.ts

@@ -0,0 +1,13 @@
+import { isNativeCompat } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import Overlay from '../Overlay/component'
+import OverlayContextProvider from '../Overlay/context'
+
+describe('native-compat markers — @pyreon/elements', () => {
+  it('Overlay is marked native', () => {
+    expect(isNativeCompat(Overlay)).toBe(true)
+  })
+  it('Overlay context Provider is marked native', () => {
+    expect(isNativeCompat(OverlayContextProvider)).toBe(true)
+  })
+})

package/src/__tests__/useOverlay.test.ts

@@ -34,7 +34,13 @@ vi.mock('@pyreon/reactivity', () => {
     return s
   }
 
-  return { signal }
+  // See sibling Overlay.test.ts mock: `@pyreon/core` imports
+  // `setSnapshotCapture` and calls it at module load to install the
+  // reactive-effect context-snapshot DI hook. The mock provides a no-op
+  // so the `@pyreon/core` import doesn't throw "No 'setSnapshotCapture'
+  // export is defined on the '@pyreon/reactivity' mock."
+  const setSnapshotCapture = () => {}
+  return { signal, setSnapshotCapture }
 })
 
 vi.mock('@pyreon/core', async (importOriginal) => {