@pyreon/kinetic 0.11.4 → 0.11.6

package/src/__tests__/utils.test.ts

@@ -1,116 +1,116 @@
-import { describe, expect, it } from "vitest"
-import type { CSSProperties } from "../types"
-import { addClasses, mergeClassNames, mergeStyles, nextFrame, removeClasses } from "../utils"
+import { describe, expect, it } from 'vitest'
+import type { CSSProperties } from '../types'
+import { addClasses, mergeClassNames, mergeStyles, nextFrame, removeClasses } from '../utils'
 
-describe("mergeClassNames", () => {
-  it("merges two class strings", () => {
-    expect(mergeClassNames("a", "b")).toBe("a b")
+describe('mergeClassNames', () => {
+  it('merges two class strings', () => {
+    expect(mergeClassNames('a', 'b')).toBe('a b')
   })
 
-  it("returns existing when additional is undefined", () => {
-    expect(mergeClassNames("a", undefined)).toBe("a")
+  it('returns existing when additional is undefined', () => {
+    expect(mergeClassNames('a', undefined)).toBe('a')
   })
 
-  it("returns additional when existing is undefined", () => {
-    expect(mergeClassNames(undefined, "b")).toBe("b")
+  it('returns additional when existing is undefined', () => {
+    expect(mergeClassNames(undefined, 'b')).toBe('b')
   })
 
-  it("returns undefined when both are undefined", () => {
+  it('returns undefined when both are undefined', () => {
     expect(mergeClassNames(undefined, undefined)).toBeUndefined()
   })
 
-  it("returns undefined when both are empty strings", () => {
-    expect(mergeClassNames("", "")).toBeUndefined()
+  it('returns undefined when both are empty strings', () => {
+    expect(mergeClassNames('', '')).toBeUndefined()
   })
 
-  it("filters out empty strings", () => {
-    expect(mergeClassNames("a", "")).toBe("a")
+  it('filters out empty strings', () => {
+    expect(mergeClassNames('a', '')).toBe('a')
   })
 })
 
-describe("mergeStyles", () => {
-  it("merges two style objects with b taking precedence", () => {
-    const a = { color: "red", fontSize: "12px" } as CSSProperties
-    const b = { color: "blue" } as CSSProperties
-    expect(mergeStyles(a, b)).toEqual({ color: "blue", fontSize: "12px" })
+describe('mergeStyles', () => {
+  it('merges two style objects with b taking precedence', () => {
+    const a = { color: 'red', fontSize: '12px' } as CSSProperties
+    const b = { color: 'blue' } as CSSProperties
+    expect(mergeStyles(a, b)).toEqual({ color: 'blue', fontSize: '12px' })
   })
 
-  it("returns undefined when both are undefined", () => {
+  it('returns undefined when both are undefined', () => {
     expect(mergeStyles(undefined, undefined)).toBeUndefined()
   })
 
-  it("returns b when a is undefined", () => {
-    const b = { color: "blue" } as CSSProperties
+  it('returns b when a is undefined', () => {
+    const b = { color: 'blue' } as CSSProperties
     expect(mergeStyles(undefined, b)).toBe(b)
   })
 
-  it("returns a when b is undefined", () => {
-    const a = { color: "red" } as CSSProperties
+  it('returns a when b is undefined', () => {
+    const a = { color: 'red' } as CSSProperties
     expect(mergeStyles(a, undefined)).toBe(a)
   })
 })
 
-describe("addClasses", () => {
-  it("adds space-separated classes to an element", () => {
-    const el = document.createElement("div")
-    addClasses(el, "foo bar")
-    expect(el.classList.contains("foo")).toBe(true)
-    expect(el.classList.contains("bar")).toBe(true)
+describe('addClasses', () => {
+  it('adds space-separated classes to an element', () => {
+    const el = document.createElement('div')
+    addClasses(el, 'foo bar')
+    expect(el.classList.contains('foo')).toBe(true)
+    expect(el.classList.contains('bar')).toBe(true)
   })
 
-  it("does nothing when classes is undefined", () => {
-    const el = document.createElement("div")
+  it('does nothing when classes is undefined', () => {
+    const el = document.createElement('div')
     addClasses(el, undefined)
     expect(el.classList.length).toBe(0)
   })
 
-  it("does nothing when classes is empty string", () => {
-    const el = document.createElement("div")
-    addClasses(el, "")
+  it('does nothing when classes is empty string', () => {
+    const el = document.createElement('div')
+    addClasses(el, '')
     expect(el.classList.length).toBe(0)
   })
 
-  it("does nothing when classes is whitespace-only", () => {
-    const el = document.createElement("div")
-    addClasses(el, "   ")
+  it('does nothing when classes is whitespace-only', () => {
+    const el = document.createElement('div')
+    addClasses(el, '   ')
     expect(el.classList.length).toBe(0)
   })
 })
 
-describe("removeClasses", () => {
-  it("removes space-separated classes from an element", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo", "bar", "baz")
-    removeClasses(el, "foo bar")
-    expect(el.classList.contains("foo")).toBe(false)
-    expect(el.classList.contains("bar")).toBe(false)
-    expect(el.classList.contains("baz")).toBe(true)
+describe('removeClasses', () => {
+  it('removes space-separated classes from an element', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo', 'bar', 'baz')
+    removeClasses(el, 'foo bar')
+    expect(el.classList.contains('foo')).toBe(false)
+    expect(el.classList.contains('bar')).toBe(false)
+    expect(el.classList.contains('baz')).toBe(true)
   })
 
-  it("does nothing when classes is undefined", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
+  it('does nothing when classes is undefined', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
     removeClasses(el, undefined)
-    expect(el.classList.contains("foo")).toBe(true)
+    expect(el.classList.contains('foo')).toBe(true)
   })
 
-  it("does nothing when classes is empty string", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
-    removeClasses(el, "")
-    expect(el.classList.contains("foo")).toBe(true)
+  it('does nothing when classes is empty string', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
+    removeClasses(el, '')
+    expect(el.classList.contains('foo')).toBe(true)
   })
 
-  it("does nothing when classes is whitespace-only", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
-    removeClasses(el, "   ")
-    expect(el.classList.contains("foo")).toBe(true)
+  it('does nothing when classes is whitespace-only', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
+    removeClasses(el, '   ')
+    expect(el.classList.contains('foo')).toBe(true)
   })
 })
 
-describe("nextFrame", () => {
-  it("calls callback after double rAF", () => {
+describe('nextFrame', () => {
+  it('calls callback after double rAF', () => {
     const callbacks: (() => void)[] = []
     const originalRaf = globalThis.requestAnimationFrame
     globalThis.requestAnimationFrame = ((cb: () => void) => {

package/src/index.ts

@@ -1,23 +1,15 @@
-export { default as kinetic } from "./kinetic"
-export type { KineticComponent } from "./kinetic/types"
-export type { Preset } from "./presets"
-export {
-  fade,
-  presets,
-  scaleIn,
-  slideDown,
-  slideLeft,
-  slideRight,
-  slideUp,
-} from "./presets"
+export { default as kinetic } from './kinetic'
+export type { KineticComponent } from './kinetic/types'
+export type { Preset } from './presets'
+export { fade, presets, scaleIn, slideDown, slideLeft, slideRight, slideUp } from './presets'
 export type {
   ClassTransitionProps,
   StyleTransitionProps,
   TransitionCallbacks,
   TransitionStage,
   TransitionStateResult,
-} from "./types"
-export type { UseAnimationEnd } from "./useAnimationEnd"
-export { default as useAnimationEnd } from "./useAnimationEnd"
-export type { UseTransitionState } from "./useTransitionState"
-export { default as useTransitionState } from "./useTransitionState"
+} from './types'
+export type { UseAnimationEnd } from './useAnimationEnd'
+export { default as useAnimationEnd } from './useAnimationEnd'
+export type { UseTransitionState } from './useTransitionState'
+export { default as useTransitionState } from './useTransitionState'

package/src/kinetic/CollapseRenderer.tsx

@@ -1,10 +1,10 @@
-import type { VNode } from "@pyreon/core"
-import { createRef, h, Show } from "@pyreon/core"
-import { runUntracked, signal, watch } from "@pyreon/reactivity"
-import type { CSSProperties, TransitionCallbacks, TransitionStage } from "../types"
-import useAnimationEnd from "../useAnimationEnd"
-import { useReducedMotion } from "../useReducedMotion"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { createRef, h, Show } from '@pyreon/core'
+import { runUntracked, signal, watch } from '@pyreon/reactivity'
+import type { CSSProperties, TransitionCallbacks, TransitionStage } from '../types'
+import useAnimationEnd from '../useAnimationEnd'
+import { useReducedMotion } from '../useReducedMotion'
+import type { KineticConfig } from './types'
 
 type CollapseRendererProps = {
   config: KineticConfig
@@ -38,11 +38,11 @@ const CollapseRenderer = ({
 
   const effectiveAppear = appear ?? config.appear ?? false
   const effectiveTimeout = timeout ?? config.timeout ?? 5000
-  const effectiveTransition = transition ?? config.transition ?? "height 300ms ease"
+  const effectiveTransition = transition ?? config.transition ?? 'height 300ms ease'
 
   const initialShow = show()
   const needsAppear = effectiveAppear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? "entered" : "hidden")
+  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
   let isInitialMount = true
   let appearTriggered = false
 
@@ -50,7 +50,7 @@ const CollapseRenderer = ({
   if (needsAppear) {
     const orig = wrapperRef
     const proxy = { current: null as HTMLElement | null }
-    Object.defineProperty(proxy, "current", {
+    Object.defineProperty(proxy, 'current', {
       get() {
         return orig.current
       },
@@ -58,7 +58,7 @@ const CollapseRenderer = ({
         orig.current = node
         if (node && !appearTriggered) {
           appearTriggered = true
-          queueMicrotask(() => stage.set("entering"))
+          queueMicrotask(() => stage.set('entering'))
         }
       },
     })
@@ -76,10 +76,10 @@ const CollapseRenderer = ({
       }
 
       const currentStage = runUntracked(() => stage())
-      if (showVal && (currentStage === "hidden" || currentStage === "leaving")) {
-        stage.set("entering")
-      } else if (!showVal && (currentStage === "entered" || currentStage === "entering")) {
-        stage.set("leaving")
+      if (showVal && (currentStage === 'hidden' || currentStage === 'leaving')) {
+        stage.set('entering')
+      } else if (!showVal && (currentStage === 'entered' || currentStage === 'entering')) {
+        stage.set('leaving')
       }
     },
     { immediate: true },
@@ -94,44 +94,44 @@ const CollapseRenderer = ({
       if (!wrapper || !content) return
 
       if (reducedMotion()) {
-        if (currentStage === "entering") {
+        if (currentStage === 'entering') {
           callbacks.onEnter?.()
-          wrapper.style.height = "auto"
-          wrapper.style.overflow = ""
+          wrapper.style.height = 'auto'
+          wrapper.style.overflow = ''
           callbacks.onAfterEnter?.()
-          stage.set("entered")
-        } else if (currentStage === "leaving") {
+          stage.set('entered')
+        } else if (currentStage === 'leaving') {
           callbacks.onLeave?.()
-          wrapper.style.height = "0px"
-          wrapper.style.overflow = "hidden"
+          wrapper.style.height = '0px'
+          wrapper.style.overflow = 'hidden'
           callbacks.onAfterLeave?.()
-          stage.set("hidden")
+          stage.set('hidden')
         }
         return
       }
 
-      if (currentStage === "entering") {
+      if (currentStage === 'entering') {
         callbacks.onEnter?.()
         const height = content.scrollHeight
-        wrapper.style.transition = "none"
-        wrapper.style.height = "0px"
-        wrapper.style.overflow = "hidden"
+        wrapper.style.transition = 'none'
+        wrapper.style.height = '0px'
+        wrapper.style.overflow = 'hidden'
         // Force reflow
         void wrapper.offsetHeight
         wrapper.style.transition = effectiveTransition
         wrapper.style.height = `${height}px`
       }
 
-      if (currentStage === "leaving") {
+      if (currentStage === 'leaving') {
         callbacks.onLeave?.()
         const height = content.scrollHeight
-        wrapper.style.transition = "none"
+        wrapper.style.transition = 'none'
         wrapper.style.height = `${height}px`
-        wrapper.style.overflow = "hidden"
+        wrapper.style.overflow = 'hidden'
         // Force reflow
         void wrapper.offsetHeight
         wrapper.style.transition = effectiveTransition
-        wrapper.style.height = "0px"
+        wrapper.style.height = '0px'
       }
     },
     { immediate: true },
@@ -139,31 +139,31 @@ const CollapseRenderer = ({
 
   useAnimationEnd({
     ref: wrapperRef,
-    active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
     timeout: effectiveTimeout,
     onEnd: () => {
       const wrapper = wrapperRef.current
-      if (stage() === "entering") {
+      if (stage() === 'entering') {
         if (wrapper) {
-          wrapper.style.height = "auto"
-          wrapper.style.overflow = ""
-          wrapper.style.transition = ""
+          wrapper.style.height = 'auto'
+          wrapper.style.overflow = ''
+          wrapper.style.transition = ''
         }
         callbacks.onAfterEnter?.()
-        stage.set("entered")
-      } else if (stage() === "leaving") {
+        stage.set('entered')
+      } else if (stage() === 'leaving') {
         callbacks.onAfterLeave?.()
-        stage.set("hidden")
+        stage.set('hidden')
       }
     },
   })
 
-  const shouldRender = () => stage() !== "hidden"
+  const shouldRender = () => stage() !== 'hidden'
 
   const wrapperStyle: CSSProperties = {
     ...((htmlProps.style as CSSProperties) ?? {}),
-    ...(stage() !== "entered" ? { overflow: "hidden" } : {}),
-    ...(stage() === "hidden" ? { height: "0px" } : stage() === "entered" ? { height: "auto" } : {}),
+    ...(stage() !== 'entered' ? { overflow: 'hidden' } : {}),
+    ...(stage() === 'hidden' ? { height: '0px' } : stage() === 'entered' ? { height: 'auto' } : {}),
   }
 
   return h(

package/src/kinetic/GroupRenderer.tsx

@@ -1,9 +1,9 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import type { TransitionCallbacks } from "../types"
-import TransitionItem from "./TransitionItem"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import type { TransitionCallbacks } from '../types'
+import TransitionItem from './TransitionItem'
+import type { KineticConfig } from './types'
 
 type GroupRendererProps = {
   config: KineticConfig
@@ -11,13 +11,18 @@ type GroupRendererProps = {
   appear?: boolean | undefined
   timeout?: number | undefined
   callbacks: Partial<TransitionCallbacks>
-  children: VNode[]
+  /**
+   * Children can be a static array OR a reactive accessor `() => VNode[]`.
+   * When passed as an accessor, GroupRenderer tracks changes and
+   * animates entering/leaving children automatically.
+   */
+  children: VNode[] | (() => VNode[])
 }
 
 type KeyedChild = { key: string | number; element: VNode }
 
 const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === "object" && "type" in (child as object)
+  child != null && typeof child === 'object' && 'type' in (child as object)
 
 const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
   const result: KeyedChild[] = []
@@ -37,6 +42,9 @@ const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
  * Children that appear (new key) animate in. Children that disappear
  * (removed key) stay in DOM during leave animation, then unmount.
  * config.tag wraps all children as a container element.
+ *
+ * In Pyreon, components run once. Pass children as a reactive accessor
+ * `() => VNode[]` for the group to detect changes and animate entries/exits.
  */
 const GroupRenderer = ({
   config,
@@ -51,74 +59,89 @@ const GroupRenderer = ({
 
   const prevMap = new Map<string | number, VNode>()
   const leavingMap = new Map<string | number, VNode>()
-  const forceUpdateSignal = signal(0)
+  const forceUpdate = signal(0)
 
-  const currentKeyed = getKeyedChildren(children)
-  const currentMap = new Map<string | number, VNode>()
-  for (const { key, element } of currentKeyed) {
-    currentMap.set(key, element)
-  }
-
-  const initialKeys: Set<string | number> = new Set(currentMap.keys())
-
-  // Detect leaving children
-  for (const [key, child] of prevMap) {
-    if (!currentMap.has(key)) {
-      leavingMap.set(key, child)
-    }
-  }
+  // Normalize children to an accessor
+  const getChildren = typeof children === 'function' ? (children as () => VNode[]) : () => children
 
-  // If a leaving child reappears, stop leaving
-  for (const key of currentMap.keys()) {
-    leavingMap.delete(key)
-  }
-
-  prevMap.clear()
-  for (const [key, element] of currentMap) {
+  // Track initial keys for appear animation logic
+  const initialKeyed = getKeyedChildren(getChildren())
+  const initialKeys = new Set(initialKeyed.map((c) => c.key))
+  for (const { key, element } of initialKeyed) {
     prevMap.set(key, element)
   }
 
   const handleAfterLeave = (key: string | number) => {
     leavingMap.delete(key)
     callbacks.onAfterLeave?.()
-    forceUpdateSignal.update((c) => c + 1)
+    forceUpdate.update((c) => c + 1)
   }
 
-  // Merge current + leaving
-  const allEntries: KeyedChild[] = [...currentKeyed]
-  for (const [key, element] of leavingMap) {
-    allEntries.push({ key, element })
-  }
+  // Reactive accessor — re-evaluates when children() or forceUpdate changes
+  return (() => {
+    forceUpdate()
+
+    const currentChildren = getChildren()
+    const currentKeyed = getKeyedChildren(currentChildren)
+    const currentMap = new Map<string | number, VNode>()
+    for (const { key, element } of currentKeyed) {
+      currentMap.set(key, element)
+    }
+
+    // Detect leaving children
+    for (const [key, child] of prevMap) {
+      if (!currentMap.has(key) && !leavingMap.has(key)) {
+        leavingMap.set(key, child)
+      }
+    }
+
+    // Cancel leave if child reappears
+    for (const key of currentMap.keys()) {
+      leavingMap.delete(key)
+    }
+
+    // Update prev for next diff
+    prevMap.clear()
+    for (const [key, element] of currentMap) {
+      prevMap.set(key, element)
+    }
+
+    // Merge current + leaving
+    const allEntries: KeyedChild[] = [...currentKeyed]
+    for (const [key, element] of leavingMap) {
+      allEntries.push({ key, element })
+    }
 
-  const groupedChildren = allEntries.map(({ key, element }) => {
-    const isInitial = initialKeys.has(key)
-    const isShowing = currentMap.has(key)
-
-    return (
-      <TransitionItem
-        show={() => isShowing}
-        appear={isInitial ? effectiveAppear : true}
-        timeout={effectiveTimeout}
-        enterStyle={config.enterStyle}
-        enterToStyle={config.enterToStyle}
-        enterTransition={config.enterTransition}
-        leaveStyle={config.leaveStyle}
-        leaveToStyle={config.leaveToStyle}
-        leaveTransition={config.leaveTransition}
-        enter={config.enter}
-        enterFrom={config.enterFrom}
-        enterTo={config.enterTo}
-        leave={config.leave}
-        leaveFrom={config.leaveFrom}
-        leaveTo={config.leaveTo}
-        onAfterLeave={() => handleAfterLeave(key)}
-      >
-        {element}
-      </TransitionItem>
-    )
-  })
-
-  return h(config.tag, { ...htmlProps }, ...groupedChildren)
+    const groupedChildren = allEntries.map(({ key, element }) => {
+      const isInitial = initialKeys.has(key)
+      const isShowing = currentMap.has(key)
+
+      return (
+        <TransitionItem
+          show={() => isShowing}
+          appear={isInitial ? effectiveAppear : true}
+          timeout={effectiveTimeout}
+          enterStyle={config.enterStyle}
+          enterToStyle={config.enterToStyle}
+          enterTransition={config.enterTransition}
+          leaveStyle={config.leaveStyle}
+          leaveToStyle={config.leaveToStyle}
+          leaveTransition={config.leaveTransition}
+          enter={config.enter}
+          enterFrom={config.enterFrom}
+          enterTo={config.enterTo}
+          leave={config.leave}
+          leaveFrom={config.leaveFrom}
+          leaveTo={config.leaveTo}
+          onAfterLeave={() => handleAfterLeave(key)}
+        >
+          {element}
+        </TransitionItem>
+      )
+    })
+
+    return h(config.tag, { ...htmlProps }, ...groupedChildren)
+  }) as unknown as VNode
 }
 
 export default GroupRenderer

package/src/kinetic/StaggerRenderer.tsx

@@ -1,9 +1,9 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import type { CSSProperties, TransitionCallbacks } from "../types"
-import { cloneVNode } from "../utils"
-import TransitionItem from "./TransitionItem"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import type { CSSProperties, TransitionCallbacks } from '../types'
+import { cloneVNode } from '../utils'
+import TransitionItem from './TransitionItem'
+import type { KineticConfig } from './types'
 
 type StaggerRendererProps = {
   config: KineticConfig
@@ -18,7 +18,7 @@ type StaggerRendererProps = {
 }
 
 const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === "object" && "type" in (child as object)
+  child != null && typeof child === 'object' && 'type' in (child as object)
 
 /**
  * Renders children with staggered enter/exit animation.
@@ -73,8 +73,8 @@ const StaggerRenderer = ({
         {cloneVNode(child, {
           style: {
             ...((child.props as Record<string, unknown>)?.style as CSSProperties | undefined),
-            "--stagger-index": staggerIndex,
-            "--stagger-interval": `${effectiveInterval}ms`,
+            '--stagger-index': staggerIndex,
+            '--stagger-interval': `${effectiveInterval}ms`,
             transitionDelay: `${delay}ms`,
           } as CSSProperties,
         })}