@pyreon/kinetic 0.24.5 → 0.24.6

package/src/__tests__/useTransitionState.test.ts

@@ -1,132 +0,0 @@
-import { signal } from '@pyreon/reactivity'
-import useTransitionState from '../useTransitionState'
-
-describe('useTransitionState', () => {
-  it('initial state is hidden when show=false', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-    expect(result.stage()).toBe('hidden')
-    expect(result.shouldMount()).toBe(false)
-  })
-
-  it('initial state is entered when show=true and appear=false', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show })
-    expect(result.stage()).toBe('entered')
-    expect(result.shouldMount()).toBe(true)
-  })
-
-  it('transitions to entering when show changes false->true', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-
-    expect(result.stage()).toBe('hidden')
-
-    show.set(true)
-    expect(result.stage()).toBe('entering')
-    expect(result.shouldMount()).toBe(true)
-  })
-
-  it('complete() transitions entering->entered', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-
-    show.set(true)
-    expect(result.stage()).toBe('entering')
-
-    result.complete()
-    expect(result.stage()).toBe('entered')
-  })
-
-  it('transitions to leaving when show changes true->false', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show })
-
-    expect(result.stage()).toBe('entered')
-
-    show.set(false)
-    expect(result.stage()).toBe('leaving')
-    expect(result.shouldMount()).toBe(true)
-  })
-
-  it('complete() transitions leaving->hidden', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show })
-
-    show.set(false)
-    expect(result.stage()).toBe('leaving')
-
-    result.complete()
-    expect(result.stage()).toBe('hidden')
-    expect(result.shouldMount()).toBe(false)
-  })
-
-  it('appear=true enters after ref is connected', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show, appear: true })
-    // Before ref is wired, element should be mounted but stage is 'entered'
-    expect(result.stage()).toBe('entered')
-    expect(result.shouldMount()).toBe(true)
-
-    // Simulate ref connection (as the renderer would do)
-    const el = document.createElement('div')
-    if (typeof result.ref === 'function') {
-      result.ref(el)
-    }
-    // Now the appear animation should trigger
-    expect(result.stage()).toBe('entering')
-  })
-
-  it('complete() is a no-op in entered state', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show })
-
-    expect(result.stage()).toBe('entered')
-
-    result.complete()
-    expect(result.stage()).toBe('entered')
-  })
-
-  it('complete() is a no-op in hidden state', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-
-    expect(result.stage()).toBe('hidden')
-
-    result.complete()
-    expect(result.stage()).toBe('hidden')
-  })
-
-  it('handles rapid toggling true->false->true', () => {
-    const show = signal(true)
-    const result = useTransitionState({ show })
-
-    // Start leave
-    show.set(false)
-    expect(result.stage()).toBe('leaving')
-
-    // Interrupt with enter before leave completes
-    show.set(true)
-    expect(result.stage()).toBe('entering')
-  })
-
-  it('handles rapid toggling false->true->false (entering to leaving)', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-
-    // Start enter
-    show.set(true)
-    expect(result.stage()).toBe('entering')
-
-    // Interrupt with leave before enter completes
-    show.set(false)
-    expect(result.stage()).toBe('leaving')
-  })
-
-  it('provides a ref (callback or object)', () => {
-    const show = signal(false)
-    const result = useTransitionState({ show })
-    expect(result.ref).toBeDefined()
-    expect(typeof result.ref === 'function' || 'current' in result.ref).toBe(true)
-  })
-})

package/src/__tests__/utils.test.ts

@@ -1,139 +0,0 @@
-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')
-  })
-
-  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 undefined when both are undefined', () => {
-    expect(mergeClassNames(undefined, undefined)).toBeUndefined()
-  })
-
-  it('returns undefined when both are empty strings', () => {
-    expect(mergeClassNames('', '')).toBeUndefined()
-  })
-
-  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' })
-  })
-
-  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
-    expect(mergeStyles(undefined, b)).toBe(b)
-  })
-
-  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)
-  })
-
-  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, '')
-    expect(el.classList.length).toBe(0)
-  })
-
-  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)
-  })
-
-  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)
-  })
-
-  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)
-  })
-})
-
-describe('nextFrame', () => {
-  it('calls callback after double rAF', () => {
-    const callbacks: (() => void)[] = []
-    const originalRaf = globalThis.requestAnimationFrame
-    globalThis.requestAnimationFrame = ((cb: () => void) => {
-      callbacks.push(cb)
-      return callbacks.length
-    }) as typeof requestAnimationFrame
-
-    const fn = vi.fn()
-    nextFrame(fn)
-
-    // First rAF queued
-    expect(callbacks.length).toBe(1)
-    expect(fn).not.toHaveBeenCalled()
-
-    // Execute first rAF — queues second
-    callbacks[0]?.()
-    expect(callbacks.length).toBe(2)
-    expect(fn).not.toHaveBeenCalled()
-
-    // Execute second rAF — callback fires
-    callbacks[1]?.()
-    expect(fn).toHaveBeenCalledTimes(1)
-
-    globalThis.requestAnimationFrame = originalRaf
-  })
-})

package/src/index.ts

@@ -1,15 +0,0 @@
-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'

package/src/jsx-augment.d.ts

@@ -1,12 +0,0 @@
-// Augment JSX namespace so that `key` is accepted on component elements,
-// not just intrinsic HTML elements. Pyreon's jsx() runtime already handles
-// key as the third argument — this just satisfies TypeScript.
-declare global {
-  namespace JSX {
-    interface IntrinsicAttributes {
-      key?: string | number
-    }
-  }
-}
-
-export {}

package/src/kinetic/CollapseRenderer.tsx

@@ -1,216 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { createRef, h, mergeProps, 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
-  htmlProps: Record<string, unknown>
-  show: () => boolean
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  transition?: string | undefined
-  callbacks: Partial<TransitionCallbacks>
-  children: VNode | VNode[]
-}
-
-/**
- * Renders a height-animated collapse. The config.tag becomes the outer
- * wrapper (overflow:hidden + animated height). An inner div measures
- * scrollHeight for the target value.
- */
-const CollapseRenderer = ({
-  config,
-  htmlProps,
-  show,
-  appear,
-  timeout,
-  transition,
-  callbacks,
-  children,
-}: CollapseRendererProps): VNode | null => {
-  const reducedMotion = useReducedMotion()
-  let wrapperRef: { current: HTMLElement | null } = createRef<HTMLElement>()
-  const contentRef = createRef<HTMLDivElement>()
-
-  const effectiveAppear = appear ?? config.appear ?? false
-  const effectiveTimeout = timeout ?? config.timeout ?? 5000
-  const effectiveTransition = transition ?? config.transition ?? 'height 300ms ease'
-
-  const initialShow = show()
-  const needsAppear = effectiveAppear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
-  let isInitialMount = true
-  let appearTriggered = false
-
-  // Intercept ref assignment to trigger appear after all refs are wired
-  if (needsAppear) {
-    const orig = wrapperRef
-    const proxy = { current: null as HTMLElement | null }
-    Object.defineProperty(proxy, 'current', {
-      get() {
-        return orig.current
-      },
-      set(node: HTMLElement | null) {
-        orig.current = node
-        if (node && !appearTriggered) {
-          appearTriggered = true
-          queueMicrotask(() => stage.set('entering'))
-        }
-      },
-    })
-    wrapperRef = proxy
-  }
-
-  // State machine transitions
-  watch(
-    show,
-    (showVal) => {
-      if (isInitialMount) {
-        isInitialMount = false
-        // appear case is handled by ref proxy above
-        return
-      }
-
-      const currentStage = runUntracked(() => stage())
-      if (showVal && (currentStage === 'hidden' || currentStage === 'leaving')) {
-        stage.set('entering')
-      } else if (!showVal && (currentStage === 'entered' || currentStage === 'entering')) {
-        stage.set('leaving')
-      }
-    },
-    { immediate: true },
-  )
-
-  // Animate height
-  watch(
-    () => stage(),
-    (currentStage) => {
-      const wrapper = wrapperRef.current
-      const content = contentRef.current
-      if (!wrapper || !content) return
-
-      if (reducedMotion()) {
-        if (currentStage === 'entering') {
-          callbacks.onEnter?.()
-          wrapper.style.height = 'auto'
-          wrapper.style.overflow = ''
-          callbacks.onAfterEnter?.()
-          stage.set('entered')
-        } else if (currentStage === 'leaving') {
-          callbacks.onLeave?.()
-          wrapper.style.height = '0px'
-          wrapper.style.overflow = 'hidden'
-          callbacks.onAfterLeave?.()
-          stage.set('hidden')
-        }
-        return
-      }
-
-      if (currentStage === 'entering') {
-        callbacks.onEnter?.()
-        const height = content.scrollHeight
-        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') {
-        callbacks.onLeave?.()
-        const height = content.scrollHeight
-        wrapper.style.transition = 'none'
-        wrapper.style.height = `${height}px`
-        wrapper.style.overflow = 'hidden'
-        // Force reflow
-        void wrapper.offsetHeight
-        wrapper.style.transition = effectiveTransition
-        wrapper.style.height = '0px'
-      }
-    },
-    { immediate: true },
-  )
-
-  useAnimationEnd({
-    ref: wrapperRef,
-    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
-    timeout: effectiveTimeout,
-    onEnd: () => {
-      const wrapper = wrapperRef.current
-      if (stage() === 'entering') {
-        if (wrapper) {
-          wrapper.style.height = 'auto'
-          wrapper.style.overflow = ''
-          wrapper.style.transition = ''
-        }
-        callbacks.onAfterEnter?.()
-        stage.set('entered')
-      } else if (stage() === 'leaving') {
-        callbacks.onAfterLeave?.()
-        stage.set('hidden')
-      }
-    },
-  })
-
-  const shouldRender = () => stage() !== 'hidden'
-
-  const wrapperStyle: CSSProperties = {
-    ...((htmlProps.style as CSSProperties) ?? {}),
-    ...(stage() !== 'entered' ? { overflow: 'hidden' } : {}),
-    ...(stage() === 'hidden' ? { height: '0px' } : stage() === 'entered' ? { height: 'auto' } : {}),
-  }
-
-  // Initially-visible Collapses keep the original Show-gated inner content,
-  // preserving the runtime-unmount semantic that frees the inner subtree
-  // when the collapse is closed long-term. The SSR bug fires only when
-  // `show: () => false` at setup — the outer wrapper renders (with
-  // `height: 0; overflow: hidden`) but its children are stripped by the
-  // inner `<Show when={false}>` → empty wrapper in the prerendered HTML.
-  // Bad for SEO / social scrapers / accessibility / no-JS.
-  //
-  // Mirrors the fix shape applied to `<Transition>` (PR #717), the
-  // `TransitionRenderer` and `TransitionItem` (this PR). Ecosystem norm:
-  // content is structural, animation is visual.
-  //
-  // For initially-hidden Collapses, the inner content always renders —
-  // the outer wrapper's `height: 0px; overflow: hidden` already provides
-  // the visual hiding (genuinely layout-safe — no flex slot collapse;
-  // the outer wrapper participates in flex as a 0-height box, which is
-  // the standard CSS collapse behavior). When `show` flips true, the
-  // existing `watch(stage)` measures `content.scrollHeight` and animates
-  // height from 0 → that value — no change to the animation path.
-  //
-  // Trade-off: for initially-hidden Collapses, the inner subtree is
-  // ALWAYS mounted (never unmounted after a later close). Initially-
-  // visible Collapses keep the unmount behavior. Matches the trade-off
-  // documented across the other three kinetic renderers.
-  const wasInitiallyShown = show()
-  const innerContent = wasInitiallyShown ? (
-    <Show when={shouldRender}>
-      <div ref={contentRef}>{children}</div>
-    </Show>
-  ) : (
-    <div ref={contentRef}>{children}</div>
-  )
-
-  // mergeProps (descriptor-preserving) instead of `{ ...htmlProps }` —
-  // every non-style HTML attr keeps its reactive getter; ref + the
-  // collapse-controlled style come last so they win (mergeProps is
-  // last-source-wins). The one-time `htmlProps.style` read above that
-  // seeds wrapperStyle is intentional: collapse OWNS the style prop
-  // (height/overflow are animation-driven), so a static merge of the
-  // user's initial style with the collapse overrides is correct here.
-  return h(
-    config.tag,
-    mergeProps(htmlProps, { ref: wrapperRef, style: wrapperStyle }),
-    innerContent,
-  )
-}
-
-export default CollapseRenderer

package/src/kinetic/GroupRenderer.tsx

@@ -1,149 +0,0 @@
-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
-  htmlProps: Record<string, unknown>
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  callbacks: Partial<TransitionCallbacks>
-  /**
-   * 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)
-
-const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
-  const result: KeyedChild[] = []
-  for (const child of children) {
-    if (isVNode(child)) {
-      const key = (child as VNode & { key?: string | number }).key
-      if (key != null) {
-        result.push({ key, element: child })
-      }
-    }
-  }
-  return result
-}
-
-/**
- * Renders children with key-based enter/exit animation (no `show` prop).
- * 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,
-  htmlProps,
-  appear,
-  timeout,
-  callbacks,
-  children,
-}: GroupRendererProps): VNode | null => {
-  const effectiveAppear = appear ?? config.appear ?? false
-  const effectiveTimeout = timeout ?? config.timeout ?? 5000
-
-  const prevMap = new Map<string | number, VNode>()
-  const leavingMap = new Map<string | number, VNode>()
-  const forceUpdate = signal(0)
-
-  // Normalize children to an accessor
-  const getChildren = typeof children === 'function' ? (children as () => VNode[]) : () => children
-
-  // 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?.()
-    forceUpdate.update((c) => c + 1)
-  }
-
-  // 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>
-      )
-    })
-
-    // By reference — `{ ...htmlProps }` would value-copy and freeze any
-    // reactive HTML attr the kinetic split preserved as a getter.
-    return h(config.tag, htmlProps, ...groupedChildren)
-  }) as unknown as VNode
-}
-
-export default GroupRenderer