@pyreon/kinetic 0.24.4 → 0.24.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "description": "CSS-transition-based animation components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -13,8 +13,7 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE",
-    "src"
+    "LICENSE"
   ],
   "type": "module",
   "sideEffects": false,
@@ -22,7 +21,6 @@
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "bun": "./src/index.ts",
       "import": "./lib/index.js",
       "types": "./lib/index.d.ts"
     }
@@ -42,12 +40,12 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.24.4",
-    "@pyreon/reactivity": "^0.24.4",
-    "@pyreon/runtime-dom": "^0.24.4",
-    "@pyreon/runtime-server": "^0.24.4",
+    "@pyreon/core": "^0.24.6",
+    "@pyreon/reactivity": "^0.24.6",
+    "@pyreon/runtime-dom": "^0.24.6",
+    "@pyreon/runtime-server": "^0.24.6",
     "@pyreon/test-utils": "^0.13.11",
-    "@pyreon/typescript": "^0.24.4",
+    "@pyreon/typescript": "^0.24.6",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -55,8 +53,8 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.4",
-    "@pyreon/reactivity": "^0.24.4",
-    "@pyreon/runtime-dom": "^0.24.4"
+    "@pyreon/core": "^0.24.6",
+    "@pyreon/reactivity": "^0.24.6",
+    "@pyreon/runtime-dom": "^0.24.6"
   }
 }

package/src/Collapse.tsx

@@ -1,166 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { createRef, Show } from '@pyreon/core'
-import { runUntracked, signal, watch } from '@pyreon/reactivity'
-import type { CollapseProps, TransitionStage } from './types'
-import useAnimationEnd from './useAnimationEnd'
-import { useReducedMotion } from './useReducedMotion'
-
-const Collapse = (props: CollapseProps): VNode | null => {
-  const transition = props.transition ?? 'height 300ms ease'
-  const appear = props.appear ?? false
-  const timeout = props.timeout ?? 5000
-
-  const reducedMotion = useReducedMotion()
-  let wrapperRef: { current: HTMLDivElement | null } = createRef<HTMLDivElement>()
-  const contentRef = createRef<HTMLDivElement>()
-
-  const callbacks = {
-    onEnter: props.onEnter,
-    onAfterEnter: props.onAfterEnter,
-    onLeave: props.onLeave,
-    onAfterLeave: props.onAfterLeave,
-  }
-
-  const initialShow = props.show()
-  // When appear=true and show starts true, mount but defer animation until ref is wired
-  const needsAppear = appear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
-  let isInitialMount = true
-  let appearTriggered = false
-
-  // Intercept ref assignment to detect when element connects and trigger appear.
-  // Uses queueMicrotask so all sibling refs are wired before the animation starts.
-  if (needsAppear) {
-    const orig = wrapperRef
-    const proxy = { current: null as HTMLDivElement | null }
-    Object.defineProperty(proxy, 'current', {
-      get() {
-        return orig.current
-      },
-      set(node: HTMLDivElement | null) {
-        orig.current = node
-        if (node && !appearTriggered) {
-          appearTriggered = true
-          queueMicrotask(() => stage.set('entering'))
-        }
-      },
-    })
-    wrapperRef = proxy
-  }
-
-  // State machine transitions
-  watch(
-    props.show,
-    (showVal) => {
-      if (isInitialMount) {
-        isInitialMount = false
-        // appear case is handled by wrapperRefCallback 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 so the browser registers height: 0
-        void wrapper.offsetHeight
-        wrapper.style.transition = transition
-        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 = transition
-        wrapper.style.height = '0px'
-      }
-    },
-    { immediate: true },
-  )
-
-  // Listen for animation end
-  useAnimationEnd({
-    ref: wrapperRef,
-    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
-    timeout,
-    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'
-
-  return (
-    <div
-      ref={wrapperRef}
-      style={{
-        ...(stage() !== 'entered' ? { overflow: 'hidden' } : {}),
-        ...(stage() === 'hidden'
-          ? { height: '0px' }
-          : stage() === 'entered'
-            ? { height: 'auto' }
-            : {}),
-      }}
-    >
-      <Show when={shouldRender}>
-        <div ref={contentRef}>{props.children}</div>
-      </Show>
-    </div>
-  )
-}
-
-export default Collapse

package/src/Stagger.tsx

@@ -1,63 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { splitProps } from '@pyreon/core'
-import Transition from './Transition'
-import type { CSSProperties, StaggerProps } from './types'
-import { cloneVNode, resolveChildren } from './utils'
-
-const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === 'object' && 'type' in (child as object)
-
-const Stagger = (props: StaggerProps): VNode | null => {
-  const [own, transitionProps] = splitProps(props, [
-    'show',
-    'interval',
-    'reverseLeave',
-    'appear',
-    'timeout',
-    'children',
-    'onAfterLeave',
-  ])
-  const interval = own.interval ?? 50
-  const reverseLeave = own.reverseLeave ?? false
-  const appear = own.appear ?? false
-  const timeout = own.timeout ?? 5000
-
-  // Unwrap the compiler's `() => x` accessor wrap — see `resolveChildren`
-  // jsdoc. PR #731 fixed this on `StaggerRenderer` (the internal kinetic-
-  // mode renderer); this is the parallel fix for the top-level `<Stagger>`
-  // component, which has the same iteration shape and the same bug.
-  const resolved = resolveChildren(own.children)
-  const childArray = (Array.isArray(resolved) ? resolved : [resolved]).filter(isVNode)
-  const count = childArray.length
-
-  return (
-    <>
-      {childArray.map((child, index) => {
-        const staggerIndex = !own.show() && reverseLeave ? count - 1 - index : index
-        const delay = staggerIndex * interval
-
-        return (
-          <Transition
-            key={(child as VNode & { key?: string | number }).key ?? index}
-            show={own.show}
-            appear={appear}
-            timeout={timeout + delay}
-            {...transitionProps}
-            onAfterLeave={index === (reverseLeave ? 0 : count - 1) ? own.onAfterLeave : undefined}
-          >
-            {cloneVNode(child, {
-              style: {
-                ...((child.props as Record<string, unknown>)?.style as CSSProperties | undefined),
-                '--stagger-index': staggerIndex,
-                '--stagger-interval': `${interval}ms`,
-                transitionDelay: `${delay}ms`,
-              } as CSSProperties,
-            })}
-          </Transition>
-        )
-      })}
-    </>
-  )
-}
-
-export default Stagger

package/src/Transition.tsx

@@ -1,280 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { createRef, cx, Show } from '@pyreon/core'
-import { watch } from '@pyreon/reactivity'
-import type { ClassTransitionProps, StyleTransitionProps, TransitionProps } from './types'
-import useAnimationEnd from './useAnimationEnd'
-import { useReducedMotion } from './useReducedMotion'
-import useTransitionState from './useTransitionState'
-import {
-  addClasses,
-  cloneVNode,
-  mergeRefs,
-  mergeStyles,
-  nextFrame,
-  removeClasses,
-  resolveChildren,
-} from './utils'
-
-const applyEnter = (
-  el: HTMLElement,
-  {
-    enter,
-    enterFrom,
-    enterTo,
-    enterStyle,
-    enterToStyle,
-    enterTransition,
-    leave,
-    leaveFrom,
-    leaveTo,
-  }: ClassTransitionProps & StyleTransitionProps,
-) => {
-  // Symmetric to applyLeave's `removeClasses(enter)` / `removeClasses(enterTo)`:
-  // clear any residual leave-cycle classes — including the `leaveTo` /
-  // `enterFrom` class the SSR / initial-hidden render path inlines for
-  // ecosystem-correct structural content (see the `wasInitiallyShown`
-  // branch below). Without this, the SSR-baked hidden-state class would
-  // compete with `enterTo`'s CSS rules and the enter animation would
-  // visually fight itself.
-  removeClasses(el, leave)
-  removeClasses(el, leaveFrom)
-  removeClasses(el, leaveTo)
-
-  addClasses(el, enter)
-  addClasses(el, enterFrom)
-  if (enterStyle) Object.assign(el.style, enterStyle)
-  if (enterTransition) el.style.transition = enterTransition
-
-  return nextFrame(() => {
-    removeClasses(el, enterFrom)
-    addClasses(el, enterTo)
-    if (enterToStyle) Object.assign(el.style, enterToStyle)
-  })
-}
-
-const applyLeave = (
-  el: HTMLElement,
-  {
-    enter,
-    enterTo,
-    leave,
-    leaveFrom,
-    leaveTo,
-    leaveStyle,
-    leaveToStyle,
-    leaveTransition,
-  }: ClassTransitionProps & StyleTransitionProps,
-) => {
-  removeClasses(el, enter)
-  removeClasses(el, enterTo)
-
-  addClasses(el, leave)
-  addClasses(el, leaveFrom)
-  if (leaveStyle) Object.assign(el.style, leaveStyle)
-  if (leaveTransition) el.style.transition = leaveTransition
-
-  return nextFrame(() => {
-    removeClasses(el, leaveFrom)
-    addClasses(el, leaveTo)
-    if (leaveToStyle) Object.assign(el.style, leaveToStyle)
-  })
-}
-
-const applyReducedMotion = (
-  stage: string,
-  callbacks: {
-    onEnter?: (() => void) | undefined
-    onAfterEnter?: (() => void) | undefined
-    onLeave?: (() => void) | undefined
-    onAfterLeave?: (() => void) | undefined
-  },
-  complete: () => void,
-) => {
-  if (stage === 'entering') {
-    callbacks.onEnter?.()
-    callbacks.onAfterEnter?.()
-    complete()
-  } else if (stage === 'leaving') {
-    callbacks.onLeave?.()
-    callbacks.onAfterLeave?.()
-    complete()
-  }
-}
-
-const Transition = (props: TransitionProps): VNode | null => {
-  const appear = props.appear ?? false
-  const unmount = props.unmount ?? true
-  const timeout = props.timeout ?? 5000
-
-  const reducedMotion = useReducedMotion()
-  const {
-    stage,
-    ref: stateRef,
-    shouldMount,
-    complete,
-  } = useTransitionState({
-    show: props.show,
-    appear,
-  })
-
-  // Unwrap the compiler's `() => x` accessor wrap — see `resolveChildren`
-  // jsdoc. Parallel to `TransitionItem`'s fix (PR #731). Without this,
-  // `props.children.props` reads `function.props` (undefined), the merged
-  // ref is missing the child's own ref, and the downstream `cloneVNode`
-  // calls produce `{type: undefined}` → `<undefined>` DOM tags.
-  const child = resolveChildren(props.children) as VNode
-  const elementRef = createRef<HTMLElement>()
-  const childProps = (child?.props ?? {}) as Record<string, unknown>
-  const mergedRef = mergeRefs(
-    elementRef,
-    stateRef,
-    childProps.ref as ((el: HTMLElement | null) => void) | undefined,
-  )
-
-  const callbacks = {
-    onEnter: props.onEnter,
-    onAfterEnter: props.onAfterEnter,
-    onLeave: props.onLeave,
-    onAfterLeave: props.onAfterLeave,
-  }
-
-  const transitionConfig = {
-    enter: props.enter,
-    enterFrom: props.enterFrom,
-    enterTo: props.enterTo,
-    leave: props.leave,
-    leaveFrom: props.leaveFrom,
-    leaveTo: props.leaveTo,
-    enterStyle: props.enterStyle,
-    enterToStyle: props.enterToStyle,
-    enterTransition: props.enterTransition,
-    leaveStyle: props.leaveStyle,
-    leaveToStyle: props.leaveToStyle,
-    leaveTransition: props.leaveTransition,
-  }
-
-  useAnimationEnd({
-    ref: elementRef,
-    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
-    timeout,
-    onEnd: () => {
-      if (stage() === 'entering') {
-        callbacks.onAfterEnter?.()
-      } else if (stage() === 'leaving') {
-        callbacks.onAfterLeave?.()
-      }
-      complete()
-    },
-  })
-
-  watch(
-    () => stage(),
-    (currentStage) => {
-      const el = elementRef.current
-      if (!el) return
-
-      if (reducedMotion()) {
-        applyReducedMotion(currentStage, callbacks, complete)
-        return
-      }
-
-      if (currentStage === 'entering') {
-        callbacks.onEnter?.()
-        const frameId = applyEnter(el, transitionConfig)
-        return () => cancelAnimationFrame(frameId)
-      }
-
-      if (currentStage === 'leaving') {
-        callbacks.onLeave?.()
-        const frameId = applyLeave(el, transitionConfig)
-        return () => cancelAnimationFrame(frameId)
-      }
-
-      if (currentStage === 'entered') {
-        removeClasses(el, props.enter)
-        el.style.transition = ''
-      }
-    },
-    { immediate: true },
-  )
-
-  // Initially-visible Transitions keep the original Show-gated mount,
-  // which preserves the documented runtime-unmount semantic for the
-  // visible → hidden transition (modal close, dropdown collapse, etc.).
-  // The SSR bug (children dropped from prerendered HTML) only fires for
-  // the initially-HIDDEN case below, because `<Show when={false}>`
-  // renders `null` on the server.
-  const wasInitiallyShown = props.show()
-  if (wasInitiallyShown) {
-    return (
-      <Show
-        when={shouldMount}
-        fallback={
-          unmount
-            ? null
-            : cloneVNode(child, {
-                ref: mergedRef,
-                style: mergeStyles(
-                  childProps.style as Record<string, string | number | undefined> | undefined,
-                  { display: 'none' },
-                ),
-              })
-        }
-      >
-        {cloneVNode(child, { ref: mergedRef })}
-      </Show>
-    )
-  }
-
-  // Initially-hidden path — ecosystem-correct (Framer Motion / react-
-  // transition-group / react-spring all render children in SSR regardless
-  // of animation state; visual hiding is class/style only). Always emits
-  // children so SSG / SEO / social scrapers / no-JS users see the
-  // structural content. The hidden visual is supplied by `leaveTo`
-  // (explicit hidden-end state) or `enterFrom` (pre-enter state — covers
-  // the scroll-reveal pattern that only configures the enter side).
-  //
-  // Trade-off: for an initially-hidden Transition, `unmount: true` no
-  // longer triggers a true DOM removal after a later leave animation
-  // completes — the element stays in DOM with the leave-to class
-  // applied. Initially-visible Transitions keep the unmount semantic
-  // (the branch above). This matches Framer Motion / react-transition-
-  // group conventions and is the price of SSR correctness; the rare
-  // user who needs true unmount on a started-hidden element can drive
-  // mount/unmount themselves outside `<Transition>`.
-  //
-  // The `watch(stage)` effect above drives the enter animation when
-  // `show` flips true; `applyEnter` (above) clears these residual
-  // hidden-state classes so they don't fight `enterTo`.
-  // Picker mirrors what #719 introduced for the kinetic(tag).<mode>
-  // renderers (TransitionRenderer / TransitionItem / CollapseRenderer):
-  // prefer leave-end state, fall back to pre-enter state. The
-  // `enterStyle` fallback covers the preset path — `@pyreon/kinetic-presets`
-  // factories (fadeUp, blurInUp, slideLeft, …) populate `enterStyle` as
-  // the hidden state but may not set `leaveToStyle`. Without this
-  // fallback, preset users SSR-render VISIBLE → flash-on-hydration.
-  // (PR #717 shipped this branch with `leaveToStyle` alone; the class
-  // picker already had the `enterFrom` fallback. This commit aligns the
-  // style picker so both halves match.)
-  const hiddenClass = props.leaveTo ?? props.enterFrom
-  const hiddenStyle = props.leaveToStyle ?? props.enterStyle
-  const childClass = childProps.class
-  const mergedClass = hiddenClass
-    ? cx([childClass as Parameters<typeof cx>[0], hiddenClass])
-    : undefined
-  const mergedStyle = mergeStyles(
-    childProps.style as Record<string, string | number | undefined> | undefined,
-    hiddenStyle,
-  )
-
-  // Build extra-props carefully — undefined values must NOT be passed to
-  // cloneVNode because `{...vnode.props, ...extraProps}` spreads them and
-  // overrides any user-set `class`/`style` on the child vnode with undefined.
-  const extra: Record<string, unknown> = { ref: mergedRef }
-  if (mergedClass !== undefined) extra.class = mergedClass
-  if (mergedStyle !== undefined) extra.style = mergedStyle
-
-  return cloneVNode(child, extra)
-}
-
-export default Transition

package/src/TransitionGroup.tsx

@@ -1,139 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { splitProps } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import Transition from './Transition'
-import type { ClassTransitionProps, StyleTransitionProps, TransitionCallbacks } from './types'
-
-export type TransitionGroupProps = ClassTransitionProps &
-  StyleTransitionProps &
-  TransitionCallbacks & {
-    appear?: boolean | undefined
-    timeout?: number | undefined
-    /**
-     * Children can be a static array OR a reactive accessor `() => VNode[]`.
-     * When passed as an accessor, TransitionGroup 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 animations.
- *
- * In Pyreon, components run once. For TransitionGroup to detect children
- * changes, pass children as a reactive accessor: `() => VNode[]`.
- * The component uses a reactive accessor internally to diff previous vs
- * current children and animate entries/exits.
- */
-const TransitionGroup = (props: TransitionGroupProps): VNode | null => {
-  const [own, transitionProps] = splitProps(props, [
-    'children',
-    'appear',
-    'timeout',
-    'onAfterLeave',
-  ])
-  const appear = own.appear ?? false
-  const prevMap = new Map<string | number, VNode>()
-  const leavingMap = new Map<string | number, VNode>()
-  const forceUpdate = signal(0)
-
-  // Normalize children to an accessor for uniform handling
-  const getChildren =
-    typeof own.children === 'function'
-      ? (own.children as () => VNode[])
-      : () => own.children as VNode[]
-
-  // 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)
-    own.onAfterLeave?.()
-    forceUpdate.update((c) => c + 1)
-  }
-
-  // Reactive accessor — re-evaluates when children() or forceUpdate changes.
-  // The runtime mounts this via mountReactive + effect, creating a
-  // reactive scope that tracks signal reads.
-  return (() => {
-    // Read forceUpdate to re-evaluate when leaving children finish
-    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 (were in prev but not in current)
-    for (const [key, child] of prevMap) {
-      if (!currentMap.has(key) && !leavingMap.has(key)) {
-        leavingMap.set(key, child)
-      }
-    }
-
-    // If a leaving child reappears, cancel the leave
-    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, preserving insertion order
-    const allEntries: KeyedChild[] = [...currentKeyed]
-    for (const [key, element] of leavingMap) {
-      allEntries.push({ key, element })
-    }
-
-    return (
-      <>
-        {allEntries.map(({ key, element }) => {
-          const isInitial = initialKeys.has(key)
-          const isShowing = currentMap.has(key)
-
-          return (
-            <Transition
-              key={key}
-              show={() => isShowing}
-              appear={isInitial ? appear : true}
-              timeout={own.timeout}
-              {...transitionProps}
-              onAfterLeave={() => handleAfterLeave(key)}
-            >
-              {element}
-            </Transition>
-          )
-        })}
-      </>
-    )
-  }) as unknown as VNode
-}
-
-export default TransitionGroup