@pyreon/kinetic 0.11.1 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -24,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -43,11 +44,11 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/reactivity": "^0.11.1"
+    "@pyreon/core": "^0.11.3",
+    "@pyreon/reactivity": "^0.11.3"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.1"
+    "@pyreon/typescript": "^0.11.3"
   }
 }

package/src/Collapse.tsx

@@ -0,0 +1,172 @@
+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 = ({
+  show,
+  transition = "height 300ms ease",
+  appear = false,
+  timeout = 5000,
+  onEnter,
+  onAfterEnter,
+  onLeave,
+  onAfterLeave,
+  children,
+}: CollapseProps): VNode | null => {
+  const reducedMotion = useReducedMotion()
+  let wrapperRef: { current: HTMLDivElement | null } = createRef<HTMLDivElement>()
+  const contentRef = createRef<HTMLDivElement>()
+
+  const callbacks = {
+    onEnter,
+    onAfterEnter,
+    onLeave,
+    onAfterLeave,
+  }
+
+  const initialShow = 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(
+    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}>{children}</div>
+      </Show>
+    </div>
+  )
+}
+
+export default Collapse

package/src/Stagger.tsx

@@ -0,0 +1,52 @@
+import type { VNode } from "@pyreon/core"
+import Transition from "./Transition"
+import type { CSSProperties, StaggerProps } from "./types"
+import { cloneVNode } from "./utils"
+
+const isVNode = (child: unknown): child is VNode =>
+  child != null && typeof child === "object" && "type" in (child as object)
+
+const Stagger = ({
+  show,
+  interval = 50,
+  reverseLeave = false,
+  appear = false,
+  timeout = 5000,
+  children,
+  onAfterLeave,
+  ...transitionProps
+}: StaggerProps): VNode | null => {
+  const childArray = (Array.isArray(children) ? children : [children]).filter(isVNode)
+  const count = childArray.length
+
+  return (
+    <>
+      {childArray.map((child, index) => {
+        const staggerIndex = !show() && reverseLeave ? count - 1 - index : index
+        const delay = staggerIndex * interval
+
+        return (
+          <Transition
+            key={(child as VNode & { key?: string | number }).key ?? index}
+            show={show}
+            appear={appear}
+            timeout={timeout + delay}
+            {...transitionProps}
+            onAfterLeave={index === (reverseLeave ? 0 : count - 1) ? 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

@@ -0,0 +1,214 @@
+import type { VNode } from "@pyreon/core"
+import { createRef, 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 } from "./utils"
+
+const applyEnter = (
+  el: HTMLElement,
+  {
+    enter,
+    enterFrom,
+    enterTo,
+    enterStyle,
+    enterToStyle,
+    enterTransition,
+  }: ClassTransitionProps & StyleTransitionProps,
+) => {
+  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 = ({
+  show,
+  appear = false,
+  unmount = true,
+  timeout = 5000,
+  enter,
+  enterFrom,
+  enterTo,
+  leave,
+  leaveFrom,
+  leaveTo,
+  enterStyle,
+  enterToStyle,
+  enterTransition,
+  leaveStyle,
+  leaveToStyle,
+  leaveTransition,
+  onEnter,
+  onAfterEnter,
+  onLeave,
+  onAfterLeave,
+  children,
+}: TransitionProps): VNode | null => {
+  const reducedMotion = useReducedMotion()
+  const {
+    stage,
+    ref: stateRef,
+    shouldMount,
+    complete,
+  } = useTransitionState({
+    show,
+    appear,
+  })
+
+  const elementRef = createRef<HTMLElement>()
+  const mergedRef = mergeRefs(
+    elementRef,
+    stateRef,
+    (children.props as Record<string, unknown>)?.ref as
+      | ((el: HTMLElement | null) => void)
+      | undefined,
+  )
+
+  const callbacks = {
+    onEnter,
+    onAfterEnter,
+    onLeave,
+    onAfterLeave,
+  }
+
+  const transitionConfig = {
+    enter,
+    enterFrom,
+    enterTo,
+    leave,
+    leaveFrom,
+    leaveTo,
+    enterStyle,
+    enterToStyle,
+    enterTransition,
+    leaveStyle,
+    leaveToStyle,
+    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, enter)
+        el.style.transition = ""
+      }
+    },
+    { immediate: true },
+  )
+
+  return (
+    <Show
+      when={shouldMount}
+      fallback={
+        unmount
+          ? null
+          : cloneVNode(children, {
+              ref: mergedRef,
+              style: mergeStyles(
+                (children.props as Record<string, unknown>)?.style as
+                  | Record<string, string | number | undefined>
+                  | undefined,
+                { display: "none" },
+              ),
+            })
+      }
+    >
+      {cloneVNode(children, { ref: mergedRef })}
+    </Show>
+  )
+}
+
+export default Transition

package/src/TransitionGroup.tsx

@@ -0,0 +1,108 @@
+import type { VNode } 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: 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
+}
+
+const TransitionGroup = ({
+  children,
+  appear = false,
+  timeout,
+  onAfterLeave,
+  ...transitionProps
+}: TransitionGroupProps): VNode | null => {
+  const prevMap = new Map<string | number, VNode>()
+  const leavingMap = new Map<string | number, VNode>()
+  const forceUpdateSignal = signal(0)
+
+  // Build current keyed children map
+  const currentKeyed = getKeyedChildren(children)
+  const currentMap = new Map<string | number, VNode>()
+  for (const { key, element } of currentKeyed) {
+    currentMap.set(key, element)
+  }
+
+  // Track initial keys to know which children were present on first render
+  const initialKeys: Set<string | number> = new Set(currentMap.keys())
+
+  // Detect leaving children (were in prev but not in current)
+  for (const [key, child] of prevMap) {
+    if (!currentMap.has(key)) {
+      leavingMap.set(key, child)
+    }
+  }
+
+  // If a leaving child reappears, stop leaving
+  for (const key of currentMap.keys()) {
+    leavingMap.delete(key)
+  }
+
+  // Update prev
+  prevMap.clear()
+  for (const [key, element] of currentMap) {
+    prevMap.set(key, element)
+  }
+
+  const handleAfterLeave = (key: string | number) => {
+    leavingMap.delete(key)
+    onAfterLeave?.()
+    forceUpdateSignal.update((c) => c + 1)
+  }
+
+  // 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 }) => {
+        // New children (not in initial render) must appear with animation
+        const isInitial = initialKeys.has(key)
+        const isShowing = currentMap.has(key)
+
+        return (
+          <Transition
+            key={key}
+            show={() => isShowing}
+            appear={isInitial ? appear : true}
+            timeout={timeout}
+            {...transitionProps}
+            onAfterLeave={() => handleAfterLeave(key)}
+          >
+            {element}
+          </Transition>
+        )
+      })}
+    </>
+  )
+}
+
+export default TransitionGroup