@pyreon/elements 0.13.1 → 0.15.0

package/src/__tests__/Element.test.ts

@@ -20,59 +20,102 @@ const getContentSlots = (result: VNode): VNode[] => {
   ) as VNode[]
 }
 
+/**
+ * Element's simple-Element fast path inlines the Wrapper helper directly into
+ * a single Styled invocation — saves a component hop, splitProps call, and
+ * mountChild per Element. After the inline, layout props live on
+ * `props.$element.{direction,alignX,…}` and the HTML tag moves from `tag` to
+ * `as`. Compound (with-beforeContent/afterContent) renders and the rare
+ * needsFix tags (button/fieldset/legend) still go through the original
+ * `Wrapper` component.
+ *
+ * `getLayoutProps()` reads from whichever shape the result happens to be in
+ * so the test assertions don't need to know which path Element took.
+ */
+const getLayoutProps = (result: VNode): Record<string, unknown> => {
+  const p = result.props as Record<string, unknown>
+  // Inlined path: layout lives in $element bag, tag in `as`
+  if (p.$element && typeof p.$element === 'object') {
+    const el = p.$element as Record<string, unknown>
+    return {
+      tag: p.as,
+      direction: el.direction,
+      alignX: el.alignX,
+      alignY: el.alignY,
+      block: el.block,
+      equalCols: el.equalCols,
+      extendCss: el.extraStyles,
+      // isInline is no longer a separate prop in the inlined path —
+      // SUB_TAG/childFix decisions happen at compose-time.
+      isInline: undefined,
+    }
+  }
+  // Wrapper-helper path: flat props
+  return {
+    tag: p.tag,
+    direction: p.direction,
+    alignX: p.alignX,
+    alignY: p.alignY,
+    block: p.block,
+    equalCols: p.equalCols,
+    extendCss: p.extendCss,
+    isInline: p.isInline,
+  }
+}
+
 describe('Element', () => {
   describe('basic rendering', () => {
     it('returns a VNode whose type is the Wrapper component (a function)', () => {
       const result = asVNode(Element({ children: 'hello' }))
       expect(typeof result.type).toBe('function')
-      expect(result.type).toBe(Wrapper)
+      expect(typeof result.type).toBe("function")
     })
 
     it('passes tag as the tag prop to Wrapper', () => {
       const result = asVNode(Element({ tag: 'section', children: 'content' }))
-      expect(result.props.tag).toBe('section')
+      expect(getLayoutProps(result).tag).toBe('section')
     })
 
     it('defaults tag to undefined when not specified', () => {
       const result = asVNode(Element({ children: 'hello' }))
-      expect(result.props.tag).toBeUndefined()
+      expect(getLayoutProps(result).tag).toBeUndefined()
     })
 
     it('renders with no children', () => {
       const result = asVNode(Element({}))
-      expect(result.type).toBe(Wrapper)
+      expect(typeof result.type).toBe("function")
     })
   })
 
   describe('simple element (no beforeContent/afterContent)', () => {
     it('uses contentDirection as wrapper direction (defaults to rows)', () => {
       const result = asVNode(Element({ children: 'test' }))
-      expect(result.props.direction).toBe('rows')
+      expect(getLayoutProps(result).direction).toBe('rows')
     })
 
     it('uses contentAlignX as wrapper alignX (defaults to left)', () => {
       const result = asVNode(Element({ children: 'test' }))
-      expect(result.props.alignX).toBe('left')
+      expect(getLayoutProps(result).alignX).toBe('left')
     })
 
     it('uses contentAlignY as wrapper alignY (defaults to center)', () => {
       const result = asVNode(Element({ children: 'test' }))
-      expect(result.props.alignY).toBe('center')
+      expect(getLayoutProps(result).alignY).toBe('center')
     })
 
     it('overrides direction with contentDirection when simple', () => {
       const result = asVNode(Element({ contentDirection: 'inline', children: 'test' }))
-      expect(result.props.direction).toBe('inline')
+      expect(getLayoutProps(result).direction).toBe('inline')
     })
 
     it('overrides alignX with contentAlignX when simple', () => {
       const result = asVNode(Element({ contentAlignX: 'center', children: 'test' }))
-      expect(result.props.alignX).toBe('center')
+      expect(getLayoutProps(result).alignX).toBe('center')
     })
 
     it('overrides alignY with contentAlignY when simple', () => {
       const result = asVNode(Element({ contentAlignY: 'top', children: 'test' }))
-      expect(result.props.alignY).toBe('top')
+      expect(getLayoutProps(result).alignY).toBe('top')
     })
 
     it('renders children directly via render() without Content wrappers', () => {
@@ -81,17 +124,17 @@ describe('Element', () => {
       expect(slots).toHaveLength(0)
     })
 
-    it('renders string children in props.children array', () => {
+    it('renders string children directly as props.children', () => {
       const result = asVNode(Element({ children: 'hello' }))
-      const children = result.props.children as unknown[]
-      // Simple element renders: [falsy beforeContent, render(CHILDREN), falsy afterContent]
-      expect(children).toBeDefined()
-      expect(Array.isArray(children)).toBe(true)
+      // Simple element fast path — passes children as a single value, not a
+      // 3-slot array wrapping falsy beforeContent/afterContent. This avoids
+      // 2 extra mountChild calls per Element in the common case.
+      expect(result.props.children).toBe('hello')
     })
 
     it('passes block prop to Wrapper', () => {
       const result = asVNode(Element({ block: true, children: 'test' }))
-      expect(result.props.block).toBe(true)
+      expect(getLayoutProps(result).block).toBe(true)
     })
   })
 
@@ -104,7 +147,7 @@ describe('Element', () => {
           afterContent: h('span', null, 'A'),
         }),
       )
-      expect(result.props.direction).toBe('inline')
+      expect(getLayoutProps(result).direction).toBe('inline')
     })
 
     it('uses explicit direction when provided', () => {
@@ -116,7 +159,7 @@ describe('Element', () => {
           afterContent: h('span', null, 'A'),
         }),
       )
-      expect(result.props.direction).toBe('rows')
+      expect(getLayoutProps(result).direction).toBe('rows')
     })
 
     it('uses default alignX (left) and alignY (center)', () => {
@@ -127,8 +170,8 @@ describe('Element', () => {
           afterContent: 'A',
         }),
       )
-      expect(result.props.alignX).toBe('left')
-      expect(result.props.alignY).toBe('center')
+      expect(getLayoutProps(result).alignX).toBe('left')
+      expect(getLayoutProps(result).alignY).toBe('center')
     })
 
     it('uses explicit alignX and alignY', () => {
@@ -141,8 +184,8 @@ describe('Element', () => {
           afterContent: 'A',
         }),
       )
-      expect(result.props.alignX).toBe('center')
-      expect(result.props.alignY).toBe('top')
+      expect(getLayoutProps(result).alignX).toBe('center')
+      expect(getLayoutProps(result).alignY).toBe('top')
     })
 
     it('renders three Content children when both before and after exist', () => {
@@ -474,8 +517,8 @@ describe('Element', () => {
     it('renders img with no children', () => {
       // @ts-expect-error — testing element-specific attr forwarding
       const result = asVNode(Element({ tag: 'img', src: '/pic.png' }))
-      expect(result.type).toBe(Wrapper)
-      expect(result.props.tag).toBe('img')
+      expect(typeof result.type).toBe("function")
+      expect(getLayoutProps(result).tag).toBe('img')
       expect(result.props.src).toBe('/pic.png')
       expect(result.props.children).toBeUndefined()
     })
@@ -483,52 +526,58 @@ describe('Element', () => {
     it('renders input with no children', () => {
       // @ts-expect-error — testing element-specific attr forwarding
       const result = asVNode(Element({ tag: 'input', type: 'text' }))
-      expect(result.type).toBe(Wrapper)
-      expect(result.props.tag).toBe('input')
+      expect(typeof result.type).toBe("function")
+      expect(getLayoutProps(result).tag).toBe('input')
       expect(result.props.type).toBe('text')
       expect(result.props.children).toBeUndefined()
     })
 
     it('renders with dangerouslySetInnerHTML (treated as empty)', () => {
       const result = asVNode(Element({ dangerouslySetInnerHTML: { __html: '<b>hi</b>' } }))
-      expect(result.type).toBe(Wrapper)
+      expect(typeof result.type).toBe("function")
       expect(result.props.dangerouslySetInnerHTML).toEqual({ __html: '<b>hi</b>' })
       expect(result.props.children).toBeUndefined()
     })
 
     it('renders br with no children', () => {
       const result = asVNode(Element({ tag: 'br' }))
-      expect(result.type).toBe(Wrapper)
+      expect(typeof result.type).toBe("function")
       expect(result.props.children).toBeUndefined()
     })
 
     it('renders hr with no children', () => {
       const result = asVNode(Element({ tag: 'hr' }))
-      expect(result.type).toBe(Wrapper)
+      expect(typeof result.type).toBe("function")
       expect(result.props.children).toBeUndefined()
     })
   })
 
-  describe('isInline flag for Wrapper', () => {
-    it('passes isInline=true for inline tags like span', () => {
+  describe('inline-vs-block tag rendering', () => {
+    // The simple-element fast path inlines Wrapper into Styled and forwards
+    // `tag` as the `as` prop. The pre-fast-path `isInline` flag was an
+    // internal Wrapper plumbing detail that determined the inner SUB_TAG
+    // for the rare needsFix (button/fieldset/legend) path — invisible on
+    // span/a/section, which never need that fix. After the fast path the
+    // flag is gone in the simple path; the rendered tag is the contract.
+    it('renders inline tags like span as <span>', () => {
       const result = asVNode(Element({ tag: 'span', children: 'text' }))
-      expect(result.props.isInline).toBe(true)
+      expect(getLayoutProps(result).tag).toBe('span')
     })
 
-    it('passes isInline=true for anchor tag', () => {
+    it('renders anchor tag as <a>', () => {
       // @ts-expect-error — testing element-specific attr forwarding
       const result = asVNode(Element({ tag: 'a', href: '#', children: 'link' }))
-      expect(result.props.isInline).toBe(true)
+      expect(getLayoutProps(result).tag).toBe('a')
     })
 
-    it('passes isInline=false for block tags like section', () => {
+    it('renders block tags like section as <section>', () => {
       const result = asVNode(Element({ tag: 'section', children: 'text' }))
-      expect(result.props.isInline).toBe(false)
+      expect(getLayoutProps(result).tag).toBe('section')
     })
 
-    it('passes isInline=false when tag is undefined (default)', () => {
+    it('leaves tag undefined when not specified (default div)', () => {
       const result = asVNode(Element({ children: 'text' }))
-      expect(result.props.isInline).toBe(false)
+      expect(getLayoutProps(result).tag).toBeUndefined()
     })
   })
 
@@ -536,21 +585,21 @@ describe('Element', () => {
     it('passes css prop as extendCss to Wrapper', () => {
       const customCss = 'color: red;'
       const result = asVNode(Element({ css: customCss, children: 'test' }))
-      expect(result.props.extendCss).toBe(customCss)
+      expect(getLayoutProps(result).extendCss).toBe(customCss)
     })
 
     it('does not pass extendCss when css not provided', () => {
       const result = asVNode(Element({ children: 'test' }))
-      expect(result.props.extendCss).toBeUndefined()
+      expect(getLayoutProps(result).extendCss).toBeUndefined()
     })
   })
 
   describe('content fallback chain', () => {
     it('prefers children over content', () => {
       const result = asVNode(Element({ children: 'child', content: 'alt' }))
-      const children = result.props.children as unknown[]
-      expect(children).toBeDefined()
-      expect(Array.isArray(children)).toBe(true)
+      // Simple-element fast path returns children directly. The fallback
+      // chain (children → content → label) is exercised inside getChildren().
+      expect(result.props.children).toBe('child')
     })
 
     it('falls back to content when no children', () => {
@@ -576,13 +625,13 @@ describe('Element', () => {
   describe('button tag (flex fix needed)', () => {
     it('passes tag as button to Wrapper', () => {
       const result = asVNode(Element({ tag: 'button', children: 'click' }))
-      expect(result.type).toBe(Wrapper)
-      expect(result.props.tag).toBe('button')
+      expect(typeof result.type).toBe("function")
+      expect(getLayoutProps(result).tag).toBe('button')
     })
 
     it('passes isInline=true for button (inline element)', () => {
       const result = asVNode(Element({ tag: 'button', children: 'click' }))
-      expect(result.props.isInline).toBe(true)
+      expect(getLayoutProps(result).isInline).toBe(true)
     })
   })
 

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__/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,34 @@ 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()
+      })
+    }
   })
 })

package/src/__tests__/equalBeforeAfter.test.ts

@@ -27,13 +27,13 @@ describe('Element equalBeforeAfter', () => {
         children: 'Main',
       }),
     )
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
     expect(typeof result.props.ref).toBe('function')
   })
 
   it('does not crash without before/after content', () => {
     const result = asVNode(Element({ equalBeforeAfter: true, children: 'Main only' }))
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
   })
 
   it('does not crash with only beforeContent', () => {
@@ -44,7 +44,7 @@ describe('Element equalBeforeAfter', () => {
         children: 'Main',
       }),
     )
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
   })
 
   it('does not crash with only afterContent', () => {
@@ -55,7 +55,7 @@ describe('Element equalBeforeAfter', () => {
         children: 'Main',
       }),
     )
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
   })
 
   it('renders three slot children when both before and after exist', () => {

package/src/__tests__/integration.test.tsx

@@ -1,6 +1,37 @@
 import type { VNode } from '@pyreon/core'
 import { describe, expect, it, vi } from 'vitest'
 
+// Element's simple-Element fast path inlines the Wrapper helper directly into
+// a Styled invocation, so layout props move from `result.props.{tag, direction, …}`
+// to `result.props.{as, $element.direction, …}`. This helper reads from
+// whichever shape the result is in so assertions don't depend on which path.
+const getLayoutProps = (result: VNode): Record<string, unknown> => {
+  const p = result.props as Record<string, unknown>
+  if (p.$element && typeof p.$element === 'object') {
+    const el = p.$element as Record<string, unknown>
+    return {
+      tag: p.as,
+      direction: el.direction,
+      alignX: el.alignX,
+      alignY: el.alignY,
+      block: el.block,
+      equalCols: el.equalCols,
+      extendCss: el.extraStyles,
+      isInline: undefined,
+    }
+  }
+  return {
+    tag: p.tag,
+    direction: p.direction,
+    alignX: p.alignX,
+    alignY: p.alignY,
+    block: p.block,
+    equalCols: p.equalCols,
+    extendCss: p.extendCss,
+    isInline: p.isInline,
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Mocks — match patterns from existing element tests
 // ---------------------------------------------------------------------------
@@ -36,7 +67,7 @@ const getContentSlots = (result: VNode): VNode[] => {
 describe('Element integration', () => {
   it('renders with content prop producing Wrapper VNode', () => {
     const result = asVNode(Element({ content: 'hello world', children: undefined }))
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
     const children = result.props.children
     expect(children).toBeDefined()
   })
@@ -50,7 +81,7 @@ describe('Element integration', () => {
         children: undefined,
       }),
     )
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
     const slots = getContentSlots(result)
     // With before/after content, there should be Content wrapper VNodes
     expect(slots.length).toBeGreaterThanOrEqual(2)
@@ -67,7 +98,7 @@ describe('Element integration', () => {
 
     // When beforeContent/afterContent are absent, direction falls through
     // to wrapper level and contentDirection/contentAlignX take effect
-    expect(result.type).toBe(Wrapper)
+    expect(typeof result.type).toBe("function")
     // The wrapper receives alignment props
     expect(result.props).toBeDefined()
   })
@@ -81,7 +112,7 @@ describe('Element integration', () => {
       }),
     )
     // Simple element (no before/after) uses contentDirection as wrapper direction
-    expect(result.props.direction).toBe('inline')
-    expect(result.props.alignX).toBe('center')
+    expect(getLayoutProps(result).direction).toBe('inline')
+    expect(getLayoutProps(result).alignX).toBe('center')
   })
 })

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)
+  })
+})