@pyreon/kinetic 0.24.4 → 0.24.6

package/src/kinetic/StaggerRenderer.tsx

@@ -1,94 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import type { CSSProperties, TransitionCallbacks } from '../types'
-import { cloneVNode, resolveChildren } from '../utils'
-import TransitionItem from './TransitionItem'
-import type { KineticConfig } from './types'
-
-type StaggerRendererProps = {
-  config: KineticConfig
-  htmlProps: Record<string, unknown>
-  show: () => boolean
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  interval?: number | undefined
-  reverseLeave?: boolean | undefined
-  callbacks: Partial<TransitionCallbacks>
-  children: VNode[]
-}
-
-const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === 'object' && 'type' in (child as object)
-
-/**
- * Renders children with staggered enter/exit animation.
- * config.tag wraps the staggered children as a container element.
- * Each child is individually animated via TransitionItem.
- */
-const StaggerRenderer = ({
-  config,
-  htmlProps,
-  show,
-  appear,
-  timeout,
-  interval,
-  reverseLeave,
-  callbacks,
-  children,
-}: StaggerRendererProps): VNode | null => {
-  const effectiveAppear = appear ?? config.appear ?? false
-  const effectiveTimeout = timeout ?? config.timeout ?? 5000
-  const effectiveInterval = interval ?? config.interval ?? 50
-  const effectiveReverseLeave = reverseLeave ?? config.reverseLeave ?? false
-
-  // Unwrap compiler-emitted accessor wrap — see `resolveChildren` jsdoc.
-  const resolved = resolveChildren(children)
-  const childArray = (Array.isArray(resolved) ? resolved : [resolved]).filter(isVNode)
-  const count = childArray.length
-
-  const staggeredChildren = childArray.map((child, index) => {
-    const staggerIndex = !show() && effectiveReverseLeave ? count - 1 - index : index
-    const delay = staggerIndex * effectiveInterval
-
-    return (
-      <TransitionItem
-        key={(child as VNode & { key?: string | number }).key ?? index}
-        show={show}
-        appear={effectiveAppear}
-        timeout={effectiveTimeout + delay}
-        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={
-          index === (effectiveReverseLeave ? 0 : count - 1) ? callbacks.onAfterLeave : undefined
-        }
-      >
-        {cloneVNode(child, {
-          style: {
-            ...((child.props as Record<string, unknown>)?.style as CSSProperties | undefined),
-            '--stagger-index': staggerIndex,
-            '--stagger-interval': `${effectiveInterval}ms`,
-            transitionDelay: `${delay}ms`,
-          } as CSSProperties,
-        })}
-      </TransitionItem>
-    )
-  })
-
-  // Pass htmlProps by reference — `{ ...htmlProps }` value-copies, firing
-  // any reactive getter the kinetic split preserved (frozen attr forever).
-  // runtime-dom's applyProps detects the getter descriptor on the live
-  // object and wraps it in renderEffect.
-  return h(config.tag, htmlProps, ...staggeredChildren)
-}
-
-export default StaggerRenderer

package/src/kinetic/TransitionItem.tsx

@@ -1,250 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { createRef, cx, Show } from '@pyreon/core'
-import { watch } from '@pyreon/reactivity'
-import type { ClassTransitionProps, StyleTransitionProps, TransitionCallbacks } from '../types'
-import useAnimationEnd from '../useAnimationEnd'
-import { useReducedMotion } from '../useReducedMotion'
-import useTransitionState from '../useTransitionState'
-import {
-  addClasses,
-  cloneVNode,
-  mergeRefs,
-  mergeStyles,
-  nextFrame,
-  removeClasses,
-  resolveChildren,
-} from '../utils'
-
-type TransitionItemProps = ClassTransitionProps &
-  StyleTransitionProps &
-  TransitionCallbacks & {
-    show: () => boolean
-    appear?: boolean | undefined
-    unmount?: boolean | undefined
-    timeout?: number | undefined
-    delay?: number | undefined
-    children: VNode
-  }
-
-const applyEnter = (el: HTMLElement, config: ClassTransitionProps & StyleTransitionProps) => {
-  // Symmetric to applyLeave: clear residual leave-cycle classes — including
-  // the `leaveTo`/`enterFrom` class the SSR/initially-hidden render path
-  // inlines (see the `wasInitiallyShown` branch below). Without this, the
-  // SSR-baked hidden class would compete with `enterTo`'s CSS rules.
-  removeClasses(el, config.leave)
-  removeClasses(el, config.leaveFrom)
-  removeClasses(el, config.leaveTo)
-
-  addClasses(el, config.enter)
-  addClasses(el, config.enterFrom)
-  if (config.enterStyle) Object.assign(el.style, config.enterStyle)
-  if (config.enterTransition) el.style.transition = config.enterTransition
-
-  return nextFrame(() => {
-    removeClasses(el, config.enterFrom)
-    addClasses(el, config.enterTo)
-    if (config.enterToStyle) Object.assign(el.style, config.enterToStyle)
-  })
-}
-
-const applyLeave = (el: HTMLElement, config: ClassTransitionProps & StyleTransitionProps) => {
-  removeClasses(el, config.enter)
-  removeClasses(el, config.enterTo)
-
-  addClasses(el, config.leave)
-  addClasses(el, config.leaveFrom)
-  if (config.leaveStyle) Object.assign(el.style, config.leaveStyle)
-  if (config.leaveTransition) el.style.transition = config.leaveTransition
-
-  return nextFrame(() => {
-    removeClasses(el, config.leaveFrom)
-    addClasses(el, config.leaveTo)
-    if (config.leaveToStyle) Object.assign(el.style, config.leaveToStyle)
-  })
-}
-
-const applyReducedMotion = (
-  stage: string,
-  callbacks: Partial<TransitionCallbacks>,
-  complete: () => void,
-) => {
-  if (stage === 'entering') {
-    callbacks.onEnter?.()
-    callbacks.onAfterEnter?.()
-    complete()
-  } else if (stage === 'leaving') {
-    callbacks.onLeave?.()
-    callbacks.onAfterLeave?.()
-    complete()
-  }
-}
-
-/**
- * Internal per-child transition component. Used by StaggerRenderer and
- * GroupRenderer to give each child its own animation state.
- *
- * Uses cloneVNode to inject ref onto the child — the child must accept ref.
- */
-const TransitionItem = (props: TransitionItemProps): VNode | null => {
-  // The Pyreon compiler wraps `{cloneVNode(child, {...})}` JSX child
-  // expressions in StaggerRenderer/GroupRenderer as `() => cloneVNode(...)`
-  // (prop-inlining for reactivity — see `resolveChildren` jsdoc). At this
-  // boundary `props.children` therefore arrives as a FUNCTION instead of a
-  // VNode. cloneVNode-on-a-function silently produces `{type: undefined,
-  // props: {ref: ...}}` (spreading a function yields no own properties
-  // because functions have none enumerable), which mountElement renders
-  // as a literal `<undefined>` tag in the DOM — the SSG'd `<h1>Hello</h1>`
-  // becomes an empty `<undefined></undefined>` post-hydrate (reproducer:
-  // bokisch.com Intro section). Resolve eagerly so the entire body below
-  // can treat `child` as a static VNode.
-  const child = resolveChildren(props.children) as VNode
-  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,
-  })
-
-  const elementRef = createRef<HTMLElement>()
-  const mergedRef = mergeRefs(
-    elementRef,
-    stateRef,
-    (child?.props as Record<string, unknown>)?.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 items keep the original Show-gated mount, preserving
-  // the documented runtime-unmount semantic for visible→hidden. The SSR
-  // bug (children dropped from prerendered HTML) only fires for the
-  // initially-HIDDEN case below, where `<Show when={false}>` renders `null`
-  // on the server. For Stagger/Group usage at SSR (when the parent's
-  // `show: () => false`), each per-item TransitionItem hit this and
-  // dropped its child — full list missing from prerendered HTML.
-  //
-  // Mirrors the fix in `<Transition>` (PR #717) and `TransitionRenderer`
-  // (same PR as this). Ecosystem norm: content is structural, animation
-  // is visual.
-  const wasInitiallyShown = props.show()
-  if (wasInitiallyShown) {
-    return (
-      <Show
-        when={shouldMount}
-        fallback={
-          unmount
-            ? null
-            : cloneVNode(child, {
-                ref: mergedRef,
-                style: mergeStyles(
-                  (child?.props as Record<string, unknown>)?.style as
-                    | Record<string, string | number | undefined>
-                    | undefined,
-                  { display: 'none' },
-                ),
-              })
-        }
-      >
-        {cloneVNode(child, { ref: mergedRef })}
-      </Show>
-    )
-  }
-
-  // Initially-hidden path — always emit the child with hidden-state class +
-  // style inlined. `leaveTo`/`leaveToStyle` (explicit hidden-end state)
-  // wins; falls back to `enterFrom`/`enterStyle` (pre-enter state — covers
-  // both class-based scroll-reveal AND the preset path, where
-  // `@pyreon/kinetic-presets` factories populate `enterStyle` as the
-  // hidden state but may not set `leaveToStyle`).
-  //
-  // Trade-off: for an initially-hidden item, `unmount: true` no longer
-  // triggers a true DOM removal after a later leave animation completes.
-  // Initially-visible items keep the unmount semantic.
-  const hiddenClass = props.leaveTo ?? props.enterFrom
-  const hiddenStyle = props.leaveToStyle ?? props.enterStyle
-  const childProps = (child?.props ?? {}) as Record<string, unknown>
-  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,
-  )
-
-  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 TransitionItem

package/src/kinetic/TransitionRenderer.tsx

@@ -1,230 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { createRef, cx, h, mergeProps, Show } from '@pyreon/core'
-import { watch } from '@pyreon/reactivity'
-import type { CSSProperties, TransitionCallbacks } from '../types'
-import useAnimationEnd from '../useAnimationEnd'
-import { useReducedMotion } from '../useReducedMotion'
-import useTransitionState from '../useTransitionState'
-import { addClasses, mergeRefs, nextFrame, removeClasses } from '../utils'
-import type { KineticConfig } from './types'
-
-type TransitionRendererProps = {
-  config: KineticConfig
-  htmlProps: Record<string, unknown>
-  show: () => boolean
-  appear?: boolean | undefined
-  unmount?: boolean | undefined
-  timeout?: number | undefined
-  callbacks: Partial<TransitionCallbacks>
-  children: VNode | VNode[]
-}
-
-const applyEnter = (el: HTMLElement, config: KineticConfig) => {
-  // Symmetric to applyLeave's `removeClasses(enter)` / `removeClasses(enterTo)`:
-  // clear residual leave-cycle classes — including the `leaveTo` / `enterFrom`
-  // class the SSR / initially-hidden render path inlines for structural
-  // content (see the `wasInitiallyShown` branch below). Without this, the
-  // SSR-baked hidden-state class would compete with `enterTo`'s CSS rules.
-  removeClasses(el, config.leave)
-  removeClasses(el, config.leaveFrom)
-  removeClasses(el, config.leaveTo)
-
-  addClasses(el, config.enter)
-  addClasses(el, config.enterFrom)
-  if (config.enterStyle) Object.assign(el.style, config.enterStyle)
-  if (config.enterTransition) el.style.transition = config.enterTransition
-
-  return nextFrame(() => {
-    removeClasses(el, config.enterFrom)
-    addClasses(el, config.enterTo)
-    if (config.enterToStyle) Object.assign(el.style, config.enterToStyle)
-  })
-}
-
-const applyLeave = (el: HTMLElement, config: KineticConfig) => {
-  removeClasses(el, config.enter)
-  removeClasses(el, config.enterTo)
-
-  addClasses(el, config.leave)
-  addClasses(el, config.leaveFrom)
-  if (config.leaveStyle) Object.assign(el.style, config.leaveStyle)
-  if (config.leaveTransition) el.style.transition = config.leaveTransition
-
-  return nextFrame(() => {
-    removeClasses(el, config.leaveFrom)
-    addClasses(el, config.leaveTo)
-    if (config.leaveToStyle) Object.assign(el.style, config.leaveToStyle)
-  })
-}
-
-const applyReducedMotion = (
-  stage: string,
-  cbs: Partial<TransitionCallbacks>,
-  complete: () => void,
-) => {
-  if (stage === 'entering') {
-    cbs.onEnter?.()
-    cbs.onAfterEnter?.()
-    complete()
-  } else if (stage === 'leaving') {
-    cbs.onLeave?.()
-    cbs.onAfterLeave?.()
-    complete()
-  }
-}
-
-/**
- * Renders a single element with CSS transition enter/exit animation.
- * Uses h(config.tag) — no cloneElement needed.
- */
-const TransitionRenderer = (props: TransitionRendererProps): VNode | null => {
-  const reducedMotion = useReducedMotion()
-  const {
-    stage,
-    ref: stateRef,
-    shouldMount,
-    complete,
-  } = useTransitionState({
-    show: props.show,
-    appear: props.appear ?? props.config.appear ?? false,
-  })
-
-  const elementRef = createRef<HTMLElement>()
-  const mergedRef = mergeRefs(elementRef, stateRef)
-
-  const effectiveUnmount = props.unmount ?? props.config.unmount ?? true
-  const effectiveTimeout = props.timeout ?? props.config.timeout ?? 5000
-
-  useAnimationEnd({
-    ref: elementRef,
-    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
-    timeout: effectiveTimeout,
-    onEnd: () => {
-      if (stage() === 'entering') {
-        props.callbacks.onAfterEnter?.()
-      } else if (stage() === 'leaving') {
-        props.callbacks.onAfterLeave?.()
-      }
-      complete()
-    },
-  })
-
-  watch(
-    () => stage(),
-    (currentStage) => {
-      const el = elementRef.current
-      if (!el) return
-
-      if (reducedMotion()) {
-        applyReducedMotion(currentStage, props.callbacks, complete)
-        return
-      }
-
-      if (currentStage === 'entering') {
-        props.callbacks.onEnter?.()
-        const frameId = applyEnter(el, props.config)
-        return () => cancelAnimationFrame(frameId)
-      }
-
-      if (currentStage === 'leaving') {
-        props.callbacks.onLeave?.()
-        const frameId = applyLeave(el, props.config)
-        return () => cancelAnimationFrame(frameId)
-      }
-
-      if (currentStage === 'entered') {
-        removeClasses(el, props.config.enter)
-        el.style.transition = ''
-      }
-    },
-    { immediate: true },
-  )
-
-  // Initially-visible kinetic-mode Transitions keep the original Show-gated
-  // mount, preserving the documented runtime-unmount semantic for the
-  // visible→hidden transition. The SSR bug (children dropped from prerendered
-  // HTML) only fires for the initially-HIDDEN case below, where
-  // `<Show when={false}>` renders `null` on the server — leaving SSG sites
-  // using kinetic-mode transitions (e.g. `kinetic('div').preset(fadeUp)` with
-  // `show: () => false` at SSR, the scroll-reveal pattern via
-  // `useIntersection`) without structural content for SEO / social scrapers
-  // / accessibility tools / no-JS users.
-  //
-  // Mirrors the same fix shape applied to the top-level `<Transition>` in
-  // PR #717. Ecosystem norm (Framer Motion / react-transition-group / react-
-  // spring): content is structural, animation is visual.
-  const wasInitiallyShown = props.show()
-  if (wasInitiallyShown) {
-    return (
-      <Show
-        when={shouldMount}
-        fallback={
-          effectiveUnmount
-            ? null
-            : h(
-                props.config.tag,
-                // mergeProps keeps every reactive HTML-attr getter; ref + the
-                // hidden-state `display:none` style come last and win. The
-                // one-time `props.htmlProps.style` read seeds the hidden
-                // style — display:none must compose over the user's style.
-                mergeProps(props.htmlProps, {
-                  ref: mergedRef,
-                  style: {
-                    ...((props.htmlProps.style as CSSProperties) ?? {}),
-                    display: 'none',
-                  },
-                }),
-                props.children,
-              )
-        }
-      >
-        {h(
-          props.config.tag,
-          // Descriptor-preserving merge — reactive HTML attrs keep their
-          // getters; ref wins last. `{ ...props.htmlProps }` would freeze them.
-          mergeProps(props.htmlProps, { ref: mergedRef }),
-          props.children,
-        )}
-      </Show>
-    )
-  }
-
-  // Initially-hidden path — ecosystem-correct: always emit children with
-  // hidden-state class/style inlined so SSG / SEO / social scrapers / no-JS
-  // users see structural content. `leaveTo` (explicit hidden-end state)
-  // wins; falls back to `enterFrom` (pre-enter state) for scroll-reveal
-  // patterns that only configure the enter side. The existing
-  // `watch(stage)` effect drives the enter animation when `show` flips
-  // true; the symmetric `applyEnter` above clears these residual classes.
-  //
-  // Trade-off: for initially-hidden kinetic-mode Transitions, `unmount: true`
-  // no longer triggers a true DOM removal after a later leave animation
-  // completes — element stays in DOM with the leave-to class applied.
-  // Initially-visible Transitions (the branch above) keep the unmount
-  // semantic. Matches Framer Motion / react-transition-group conventions
-  // and is the price of SSR correctness.
-  // Mirrors the class picker: prefer `leaveTo`/`leaveToStyle` (explicit
-  // leave-end / hidden state) and fall back to `enterFrom`/`enterStyle`
-  // (pre-enter state). The fallback covers the preset path —
-  // `@pyreon/kinetic-presets` factories (fadeUp, slideLeft, blurInUp, …)
-  // populate `enterStyle` as the hidden state and may not set
-  // `leaveToStyle` at all; without this fallback, presets would SSR-render
-  // VISIBLE → flash-on-hydration.
-  const hiddenClass = props.config.leaveTo ?? props.config.enterFrom
-  const hiddenStyle = props.config.leaveToStyle ?? props.config.enterStyle
-  const childClass = props.htmlProps.class
-  const mergedClass = hiddenClass
-    ? cx([childClass as Parameters<typeof cx>[0], hiddenClass])
-    : undefined
-  const mergedStyle = hiddenStyle
-    ? { ...((props.htmlProps.style as CSSProperties) ?? {}), ...hiddenStyle }
-    : undefined
-
-  const extra: Record<string, unknown> = { ref: mergedRef }
-  if (mergedClass !== undefined) extra.class = mergedClass
-  if (mergedStyle !== undefined) extra.style = mergedStyle
-
-  return h(props.config.tag, mergeProps(props.htmlProps, extra), props.children)
-}
-
-export default TransitionRenderer