@pyreon/kinetic 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "CSS-transition-based animation components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -41,18 +41,18 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.13.0",
-    "@pyreon/reactivity": "^0.13.0",
-    "@pyreon/runtime-dom": "^0.13.0",
-    "@pyreon/test-utils": "^0.13.0",
-    "@pyreon/typescript": "^0.13.0",
+    "@pyreon/core": "^0.14.0",
+    "@pyreon/reactivity": "^0.14.0",
+    "@pyreon/runtime-dom": "^0.14.0",
+    "@pyreon/test-utils": "^0.13.2",
+    "@pyreon/typescript": "^0.14.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.13.0",
-    "@pyreon/reactivity": "^0.13.0",
-    "@pyreon/runtime-dom": "^0.13.0"
+    "@pyreon/core": "^0.14.0",
+    "@pyreon/reactivity": "^0.14.0",
+    "@pyreon/runtime-dom": "^0.14.0"
   },
   "engines": {
     "node": ">= 22"

package/src/__tests__/Collapse.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import Collapse from '../Collapse'
 import CollapseRenderer from '../kinetic/CollapseRenderer'
@@ -95,7 +96,7 @@ describe('Collapse', () => {
 
   it('returns a VNode', () => {
     const show = signal(true)
-    const child = { type: 'div', props: {}, children: ['Hello'], key: undefined }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = Collapse({ show, children: child } as any)
     expect(vnode).not.toBeNull()
   })
@@ -107,7 +108,7 @@ describe('Collapse', () => {
     setupCollapse({
       show,
       onEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -121,7 +122,7 @@ describe('Collapse', () => {
     const { wrapperEl } = setupCollapse({
       show,
       onAfterEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -138,7 +139,7 @@ describe('Collapse', () => {
     setupCollapse({
       show,
       onLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -152,7 +153,7 @@ describe('Collapse', () => {
     const { wrapperEl } = setupCollapse({
       show,
       onAfterLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -167,7 +168,7 @@ describe('Collapse', () => {
 
     const { wrapperEl } = setupCollapse({
       show,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -181,7 +182,7 @@ describe('Collapse', () => {
 
     const { wrapperEl } = setupCollapse({
       show,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -197,7 +198,7 @@ describe('Collapse', () => {
 
     const { wrapperEl } = setupCollapse({
       show,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -212,7 +213,7 @@ describe('Collapse', () => {
     const { wrapperEl } = setupCollapse({
       show,
       transition: 'height 500ms ease-in-out',
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -228,7 +229,7 @@ describe('Collapse', () => {
       show,
       appear: true,
       onEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     // appear defers via queueMicrotask so all refs are wired first
@@ -246,7 +247,7 @@ describe('Collapse', () => {
       show,
       timeout: 800,
       onAfterLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -266,7 +267,7 @@ describe('Collapse', () => {
       show,
       onEnter,
       onLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     // Start leaving
@@ -288,7 +289,7 @@ describe('Collapse', () => {
       show,
       onEnter,
       onLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     // Start entering
@@ -307,7 +308,7 @@ describe('Collapse', () => {
     const { wrapperEl } = setupCollapse({
       show,
       onEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -329,7 +330,7 @@ describe('Collapse', () => {
     const { wrapperEl } = setupCollapse({
       show,
       onLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -350,7 +351,7 @@ describe('Collapse', () => {
       show,
       appear: true,
       onAfterEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     await Promise.resolve()
@@ -365,7 +366,7 @@ describe('Collapse', () => {
 
     const { wrapperEl } = setupCollapse({
       show,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)
@@ -443,7 +444,7 @@ const setupCollapseRenderer = (props: {
   })
 
   const config = props.config ?? makeCollapseConfig()
-  const child: VNode = { type: 'p', props: {}, children: ['Content'], key: null }
+  const child = h('p', null, 'Content') as VNode
 
   const vnode = CollapseRenderer({
     config,
@@ -473,7 +474,7 @@ describe('CollapseRenderer', () => {
   it('returns a VNode with the config.tag', () => {
     const show = signal(true)
     const config = makeCollapseConfig({ tag: 'section' })
-    const child: VNode = { type: 'p', props: {}, children: ['Content'], key: null }
+    const child = h('p', null, 'Content') as VNode
 
     const vnode = CollapseRenderer({
       config,
@@ -748,7 +749,7 @@ describe('Collapse — reduced motion', () => {
       show,
       onEnter,
       onAfterEnter,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(true)
@@ -768,7 +769,7 @@ describe('Collapse — reduced motion', () => {
       show,
       onLeave,
       onAfterLeave,
-      children: { type: 'div', props: {}, children: ['Hello'], key: undefined },
+      children: h('div', null, 'Hello') as VNode,
     })
 
     show.set(false)

package/src/__tests__/GroupRenderer.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import GroupRenderer from '../kinetic/GroupRenderer'
 import type { KineticConfig } from '../kinetic/types'
 
@@ -47,12 +48,13 @@ const unwrap = (val: any): any => {
   return result
 }
 
-const makeKeyedChild = (key: string | number, text: string): VNode => ({
-  type: 'span',
-  props: { 'data-testid': `child-${key}` },
-  children: [text],
-  key,
-})
+// Real h() instead of a hand-built `{ type, props, children, key }`
+// literal — same VNode shape as production, so any test running the
+// returned node through the runtime sees real h()-normalised output.
+const makeKeyedChild = (key: string | number, text: string): VNode => {
+  const vnode = h('span', { 'data-testid': `child-${key}` }, text) as VNode
+  return { ...vnode, key }
+}
 
 describe('GroupRenderer', () => {
   it('returns a VNode wrapping children in config.tag', () => {
@@ -285,7 +287,8 @@ describe('GroupRenderer', () => {
   it('ignores children without keys', () => {
     const config = makeConfig()
     const keyedChild = makeKeyedChild('a', 'Alpha')
-    const unkeyedChild: VNode = { type: 'span', props: {}, children: ['No key'], key: null }
+    // Real h() output instead of a mock literal — same shape, real path.
+    const unkeyedChild: VNode = h('span', null, 'No key') as VNode
 
     const vnode = unwrap(
       GroupRenderer({

package/src/__tests__/StaggerRenderer.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import StaggerRenderer from '../kinetic/StaggerRenderer'
 import type { KineticConfig } from '../kinetic/types'
 
@@ -40,12 +41,12 @@ const makeConfig = (overrides: Partial<KineticConfig> = {}): KineticConfig => ({
   ...overrides,
 })
 
-const makeChild = (key: string | number, text: string): VNode => ({
-  type: 'span',
-  props: { 'data-testid': `child-${key}` },
-  children: [text],
-  key,
-})
+// Real h() instead of a hand-built `{ type, props, children, key }`
+// literal — same VNode shape as production.
+const makeChild = (key: string | number, text: string): VNode => {
+  const vnode = h('span', { 'data-testid': `child-${key}` }, text) as VNode
+  return { ...vnode, key }
+}
 
 /**
  * Extract the cloned child VNode from a TransitionItem VNode.
@@ -476,12 +477,8 @@ describe('StaggerRenderer', () => {
 
   it('preserves existing style on child when injecting stagger styles', () => {
     const config = makeConfig()
-    const childWithStyle: VNode = {
-      type: 'span',
-      props: { style: { color: 'red', fontWeight: 'bold' } },
-      children: ['Styled'],
-      key: 'styled',
-    }
+    const realVnode = h('span', { style: { color: 'red', fontWeight: 'bold' } }, 'Styled') as VNode
+    const childWithStyle: VNode = { ...realVnode, key: 'styled' }
 
     const vnode = StaggerRenderer({
       config,

package/src/__tests__/Transition.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 
 let _reducedMotion = false
@@ -88,12 +89,9 @@ const wireRef = (vnode: VNode | null, el: HTMLElement) => {
  */
 const setupTransition = (props: Record<string, unknown>) => {
   const el = document.createElement('div')
-  const child: VNode = {
-    type: 'div',
-    props: { 'data-testid': 'child' },
-    children: ['Hello'],
-    key: null,
-  }
+  // Real h() instead of a mock literal — same VNode shape as
+  // production, so the runtime sees real h()-normalised output.
+  const child = h('div', { 'data-testid': 'child' }, 'Hello') as VNode
 
   const vnode = Transition({
     ...props,
@@ -108,14 +106,14 @@ const setupTransition = (props: Record<string, unknown>) => {
 describe('Transition', () => {
   it('returns a VNode when show=true', () => {
     const show = signal(true)
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = Transition({ show, children: child })
     expect(vnode).not.toBeNull()
   })
 
   it('returns a VNode with Show component', () => {
     const show = signal(true)
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = Transition({ show, children: child })
     expect(vnode).not.toBeNull()
     // The outermost VNode should be a Show component

package/src/__tests__/TransitionItem.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 
 let _reducedMotion = false
@@ -88,12 +89,8 @@ const wireRef = (vnode: VNode | null, el: HTMLElement) => {
  */
 const setupTransitionItem = (props: Record<string, unknown>) => {
   const el = document.createElement('div')
-  const child: VNode = {
-    type: 'div',
-    props: { 'data-testid': 'child' },
-    children: ['Hello'],
-    key: null,
-  }
+  // Real h() instead of a mock literal — same VNode shape as production.
+  const child = h('div', { 'data-testid': 'child' }, 'Hello') as VNode
 
   const vnode = TransitionItem({
     ...props,
@@ -108,14 +105,14 @@ const setupTransitionItem = (props: Record<string, unknown>) => {
 describe('TransitionItem', () => {
   it('returns a VNode when show returns true', () => {
     const show = () => true
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = TransitionItem({ show, children: child })
     expect(vnode).not.toBeNull()
   })
 
   it('wraps child in a Show component', () => {
     const show = () => true
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = TransitionItem({ show, children: child })
     expect(vnode).not.toBeNull()
     expect(typeof vnode?.type).toBe('function')
@@ -123,7 +120,7 @@ describe('TransitionItem', () => {
 
   it('clones child VNode with merged ref', () => {
     const show = () => true
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = TransitionItem({ show, children: child })
 
     // The Show component's children (or fallback) should have a ref prop
@@ -358,7 +355,7 @@ describe('TransitionItem', () => {
 
   it('unmount=false keeps element with display:none when hidden', () => {
     const show = () => false
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     expect(vnode).not.toBeNull()
@@ -374,7 +371,7 @@ describe('TransitionItem', () => {
 
   it('unmount=false fallback has a merged ref', () => {
     const show = () => false
-    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
+    const child = h('div', null, 'Hello') as VNode
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     const showProps = vnode?.props as Record<string, unknown>
@@ -388,12 +385,7 @@ describe('TransitionItem', () => {
 
   it('unmount=false merges existing child style with display:none', () => {
     const show = () => false
-    const child: VNode = {
-      type: 'div',
-      props: { style: { color: 'red', opacity: 1 } },
-      children: ['Hello'],
-      key: null,
-    }
+    const child = h('div', { style: { color: 'red', opacity: 1 } }, 'Hello') as VNode
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     const showProps = vnode?.props as Record<string, unknown>

package/src/__tests__/kinetic.test.tsx

@@ -1,4 +1,5 @@
 import type { VNode, VNodeChild } from '@pyreon/core'
+import { h } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 
 let _reducedMotion = false
@@ -353,7 +354,11 @@ describe('kinetic() — collapse mode', () => {
         show,
         onEnter,
         onAfterEnter,
-        children: { type: 'p', props: {}, children: ['Content'], key: null },
+        // Real h() instead of a mock literal — same VNode shape as
+        // production, so the test exercises whatever flattening /
+        // normalisation h() applies (instead of asserting the
+        // hand-built shape always matches).
+        children: h('p', null, 'Content'),
       }),
     )