@tamagui/animations-css 2.0.0-rc.4 → 2.0.0-rc.40

package/src/createAnimations.tsx

@@ -3,6 +3,7 @@ import {
   getAnimatedProperties,
   hasAnimation as hasNormalizedAnimation,
   getEffectiveAnimation,
+  getAnimationConfigsForKeys,
 } from '@tamagui/animation-helpers'
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { ResetPresence, usePresence } from '@tamagui/use-presence'
@@ -10,6 +11,9 @@ import type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'
 import { transformsToString } from '@tamagui/web'
 import React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'
 
+const EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/
+const EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/
+
 /**
  * Helper function to extract duration from CSS animation string
  * Examples: "ease-in 200ms" -> 200, "cubic-bezier(0.215, 0.610, 0.355, 1.000) 400ms" -> 400
@@ -17,13 +21,13 @@ import React, { useState } from 'react' // import { animate } from '@tamagui/cub
  */
 function extractDuration(animation: string): number {
   // Try to match milliseconds first
-  const msMatch = animation.match(/(\d+(?:\.\d+)?)\s*ms/)
+  const msMatch = animation.match(EXTRACT_MS_REGEX)
   if (msMatch) {
     return Number.parseInt(msMatch[1], 10)
   }
 
   // Try to match seconds and convert to milliseconds
-  const sMatch = animation.match(/(\d+(?:\.\d+)?)\s*s/)
+  const sMatch = animation.match(EXTRACT_S_REGEX)
   if (sMatch) {
     return Math.round(Number.parseFloat(sMatch[1]) * 1000)
   }
@@ -32,6 +36,124 @@ function extractDuration(animation: string): number {
   return 300
 }
 
+const MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/
+const S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/
+
+/**
+ * Apply duration override to a CSS animation string
+ * Replaces the existing duration with the override value
+ */
+function applyDurationOverride(animation: string, durationMs: number): string {
+  // Replace ms duration
+  const msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`)
+  if (msReplaced !== animation) {
+    return msReplaced
+  }
+
+  // Replace seconds duration
+  const sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`)
+  if (sReplaced !== animation) {
+    return sReplaced
+  }
+
+  // No duration found, prepend the duration
+  return `${durationMs}ms ${animation}`
+}
+
+// transform keys that need special handling
+const TRANSFORM_KEYS = [
+  'x',
+  'y',
+  'scale',
+  'scaleX',
+  'scaleY',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'skewX',
+  'skewY',
+] as const
+
+/**
+ * Build a CSS transform string from a style object containing transform properties
+ */
+function buildTransformString(style: Record<string, unknown> | undefined): string {
+  if (!style) return ''
+
+  const parts: string[] = []
+
+  if (style.x !== undefined || style.y !== undefined) {
+    const x = style.x ?? 0
+    const y = style.y ?? 0
+    parts.push(`translate(${x}px, ${y}px)`)
+  }
+  if (style.scale !== undefined) {
+    parts.push(`scale(${style.scale})`)
+  }
+  if (style.scaleX !== undefined) {
+    parts.push(`scaleX(${style.scaleX})`)
+  }
+  if (style.scaleY !== undefined) {
+    parts.push(`scaleY(${style.scaleY})`)
+  }
+  if (style.rotate !== undefined) {
+    const val = style.rotate
+    const unit = typeof val === 'string' && val.includes('deg') ? '' : 'deg'
+    parts.push(`rotate(${val}${unit})`)
+  }
+  if (style.rotateX !== undefined) {
+    parts.push(`rotateX(${style.rotateX}deg)`)
+  }
+  if (style.rotateY !== undefined) {
+    parts.push(`rotateY(${style.rotateY}deg)`)
+  }
+  if (style.rotateZ !== undefined) {
+    parts.push(`rotateZ(${style.rotateZ}deg)`)
+  }
+  if (style.skewX !== undefined) {
+    parts.push(`skewX(${style.skewX}deg)`)
+  }
+  if (style.skewY !== undefined) {
+    parts.push(`skewY(${style.skewY}deg)`)
+  }
+
+  return parts.join(' ')
+}
+
+/**
+ * Apply a style object to a DOM node, handling transform keys specially
+ */
+function applyStylesToNode(
+  node: HTMLElement,
+  style: Record<string, unknown> | undefined
+): void {
+  if (!style) return
+
+  // collect transform values
+  const transformStr = buildTransformString(style)
+  if (transformStr) {
+    node.style.transform = transformStr
+  }
+
+  // apply non-transform properties
+  for (const [key, value] of Object.entries(style)) {
+    if (TRANSFORM_KEYS.includes(key as any)) continue
+    if (value === undefined) continue
+
+    if (key === 'opacity') {
+      node.style.opacity = String(value)
+    } else if (key === 'backgroundColor') {
+      node.style.backgroundColor = String(value)
+    } else if (key === 'color') {
+      node.style.color = String(value)
+    } else {
+      // generic fallback
+      node.style[key as any] = typeof value === 'number' ? `${value}px` : String(value)
+    }
+  }
+}
+
 export function createAnimations<A extends object>(animations: A): AnimationDriver<A> {
   const reactionListeners = new WeakMap<any, Set<Function>>()
 
@@ -39,21 +161,12 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
     animations,
     usePresence,
     ResetPresence,
-    supportsCSS: true,
     inputStyle: 'css',
     outputStyle: 'css',
-    classNameAnimation: true,
 
     useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {
       const [val, setVal] = React.useState(initial)
-      const [onFinish, setOnFinish] = useState<Function | undefined>()
-
-      useIsomorphicLayoutEffect(() => {
-        if (onFinish) {
-          onFinish?.()
-          setOnFinish(undefined)
-        }
-      }, [onFinish])
+      const finishTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
 
       return {
         getInstance() {
@@ -64,14 +177,40 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
         },
         setValue(next, config, onFinish) {
           setVal(next)
-          setOnFinish(onFinish)
+
+          // clear any pending finish callback from a previous setValue
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current)
+            finishTimerRef.current = null
+          }
+
+          if (onFinish) {
+            if (
+              !config ||
+              config.type === 'direct' ||
+              (config.type === 'timing' && config.duration === 0)
+            ) {
+              onFinish()
+            } else {
+              // estimate duration: use explicit duration, or fall back to
+              // default CSS transition duration for spring-type configs
+              const duration = config.type === 'timing' ? config.duration : 300
+              finishTimerRef.current = setTimeout(onFinish, duration)
+            }
+          }
+
           // call reaction listeners with the new value
           const listeners = reactionListeners.get(setVal)
           if (listeners) {
             listeners.forEach((listener) => listener(next))
           }
         },
-        stop() {},
+        stop() {
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current)
+            finishTimerRef.current = null
+          }
+        },
       }
     },
 
@@ -95,7 +234,20 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
       return getStyle(val.getValue())
     },
 
-    useAnimations: ({ props, presence, style, componentState, stateRef }) => {
+    useAnimatedNumbersStyle(vals, getStyle) {
+      return getStyle(...vals.map((v) => v.getValue()))
+    },
+
+    // @ts-ignore - styleState is added by createComponent
+    useAnimations: ({
+      props,
+      presence,
+      style,
+      componentState,
+      stateRef,
+      styleState,
+    }: any) => {
+      const isHydrating = componentState.unmounted === true
       const isEntering = !!componentState.unmounted
       const isExiting = presence?.[0] === false
       const sendExitComplete = presence?.[1]
@@ -108,8 +260,37 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
         wasEnteringRef.current = isEntering
       })
 
+      // exit cycle guards to prevent stale/duplicate completion
+      const exitCycleIdRef = React.useRef(0)
+      const exitCompletedRef = React.useRef(false)
+      const wasExitingRef = React.useRef(false)
+      const exitInterruptedRef = React.useRef(false)
+
+      // detect transition into/out of exiting state
+      const justStartedExiting = isExiting && !wasExitingRef.current
+      const justStoppedExiting = !isExiting && wasExitingRef.current
+
+      // start new exit cycle only on transition INTO exiting
+      if (justStartedExiting) {
+        exitCycleIdRef.current++
+        exitCompletedRef.current = false
+      }
+      // track interruptions so we know to force-restart transitions
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++
+        exitInterruptedRef.current = true
+      }
+
+      // track previous exiting state
+      React.useEffect(() => {
+        wasExitingRef.current = isExiting
+      })
+
+      // use effectiveTransition computed by createComponent (single source of truth)
+      const effectiveTransition = styleState?.effectiveTransition ?? props.transition
+
       // Normalize the transition prop to a consistent format
-      const normalized = normalizeTransition(props.transition)
+      const normalized = normalizeTransition(effectiveTransition)
 
       // Determine animation state and get effective animation
       // Use 'enter' if we're entering OR if we just finished entering (transition is happening)
@@ -155,6 +336,137 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
         if (!sendExitComplete || !isExiting || !host) return
         const node = host as HTMLElement
 
+        // capture current cycle id for this effect
+        const cycleId = exitCycleIdRef.current
+
+        // helper to complete exit with guards
+        const completeExit = () => {
+          if (cycleId !== exitCycleIdRef.current) return
+          if (exitCompletedRef.current) return
+          exitCompletedRef.current = true
+          sendExitComplete()
+        }
+
+        // if no properties to animate (animateOnly=[]), complete immediately
+        if (keys.length === 0) {
+          completeExit()
+          return
+        }
+
+        // Force transition restart for interrupted exits
+        // When an exit is interrupted and restarted, the element may already be at
+        // the exit style, so no CSS transition fires. We need to:
+        // 1. Reset to non-exit state
+        // 2. Force reflow
+        // 3. Re-apply exit state to trigger transition
+        let rafId: number | undefined
+        const wasInterrupted = exitInterruptedRef.current
+        // flag to ignore transitioncancel during reset (we intentionally cancel the old transition)
+        let ignoreCancelEvents = wasInterrupted
+        // get enter/exit styles for potential restart
+        const enterStyle = props.enterStyle as Record<string, unknown> | undefined
+        const exitStyle = props.exitStyle as Record<string, unknown> | undefined
+
+        // Build the exit transition string - needed for both normal and interrupted exits
+        const delayStr = normalized.delay ? ` ${normalized.delay}ms` : ''
+        const durationOverride = normalized.config?.duration
+        const exitTransitionString = keys
+          .map((key) => {
+            const propAnimation = normalized.properties[key]
+            let animationValue: string | null = null
+            if (typeof propAnimation === 'string') {
+              animationValue = animations[propAnimation]
+            } else if (
+              propAnimation &&
+              typeof propAnimation === 'object' &&
+              propAnimation.type
+            ) {
+              animationValue = animations[propAnimation.type]
+            } else if (defaultAnimation) {
+              animationValue = defaultAnimation
+            }
+            if (animationValue && durationOverride) {
+              animationValue = applyDurationOverride(animationValue, durationOverride)
+            }
+            return animationValue ? `${key} ${animationValue}${delayStr}` : null
+          })
+          .filter(Boolean)
+          .join(', ')
+
+        if (wasInterrupted) {
+          exitInterruptedRef.current = false
+          // disable transition, reset to enter state
+          node.style.transition = 'none'
+
+          // reset: apply active/open state for each exit property (not enterStyle,
+          // which may equal exitStyle — see comment in the normal exit path below)
+          if (exitStyle) {
+            const resetStyle: Record<string, unknown> = {}
+            for (const key of Object.keys(exitStyle)) {
+              if (key === 'opacity') {
+                resetStyle[key] = 1
+              } else if (TRANSFORM_KEYS.includes(key as any)) {
+                resetStyle[key] =
+                  key === 'scale' || key === 'scaleX' || key === 'scaleY' ? 1 : 0
+              } else if (enterStyle?.[key] !== undefined) {
+                resetStyle[key] = enterStyle[key]
+              }
+            }
+            applyStylesToNode(node, resetStyle)
+          } else {
+            // fallback if no exitStyle defined
+            node.style.opacity = '1'
+            node.style.transform = 'none'
+          }
+
+          // force reflow
+          void node.offsetHeight
+        } else if (exitStyle) {
+          // For normal (non-interrupted) exits, we need to ensure the CSS transition is
+          // processed by the browser BEFORE the exitStyle takes effect. The issue is that
+          // React may have already applied exitStyle in the same render batch. To fix this:
+          // 1. Disable transition and reset to non-exit state
+          // 2. Force reflow so browser processes the reset
+          // 3. Use RAF to ensure we're in a new frame
+          // 4. Re-enable transition and apply exitStyle
+          // This mirrors the interrupted exit handling approach (which also uses RAF).
+          ignoreCancelEvents = true
+          node.style.transition = 'none'
+
+          // Reset to the active/open state (not enterStyle, which may equal exitStyle).
+          // enterStyle is the "unmounted" initial state and can share values with exitStyle
+          // (e.g., both have opacity: 0). resetting to enterStyle would mean no value change
+          // when exitStyle is applied, so the CSS transition wouldn't fire.
+          const resetStyle: Record<string, unknown> = {}
+          for (const key of Object.keys(exitStyle)) {
+            if (key === 'opacity') {
+              resetStyle[key] = 1
+            } else if (TRANSFORM_KEYS.includes(key as any)) {
+              resetStyle[key] =
+                key === 'scale' || key === 'scaleX' || key === 'scaleY' ? 1 : 0
+            } else if (enterStyle?.[key] !== undefined) {
+              resetStyle[key] = enterStyle[key]
+            }
+          }
+          applyStylesToNode(node, resetStyle)
+
+          // Force reflow
+          void node.offsetHeight
+
+          // Use RAF to ensure transition is applied in a new frame
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return
+            // Re-enable transition
+            node.style.transition = exitTransitionString
+            // Force reflow to ensure transition is active
+            void node.offsetHeight
+            // Apply exit styles - this triggers the animation
+            applyStylesToNode(node, exitStyle)
+            // Re-enable cancel event handling
+            ignoreCancelEvents = false
+          })
+        }
+
         /**
          * Exit animation handling for Dialog/Modal components
          *
@@ -162,34 +474,115 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
          * the element can disappear from the DOM before CSS transitions finish, which causes:
          * 1. Dialogs to stick around on screen
          * 2. Event handlers to stop working
+         *
+         * Fix: Calculate the MAXIMUM duration across all animated properties, not just
+         * the default. With animateOnly and per-property configs, different properties
+         * can have different durations, and we need to wait for the LONGEST one.
          */
 
-        // Use timeout as primary, transition events as backup for reliable exit handling
-        const animationDuration = defaultAnimation
-          ? extractDuration(defaultAnimation)
-          : 200
+        // calculate max duration across all animated properties
+        let maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200
+
+        // check per-property animation durations using shared helper
+        const animationConfigs = getAnimationConfigsForKeys(
+          normalized,
+          animations as Record<string, string>,
+          keys,
+          defaultAnimation
+        )
+        for (const animationValue of animationConfigs.values()) {
+          if (animationValue) {
+            const duration = extractDuration(animationValue)
+            if (duration > maxDuration) {
+              maxDuration = duration
+            }
+          }
+        }
+
         const delay = normalized.delay ?? 0
-        const fallbackTimeout = animationDuration + delay
+        const fallbackTimeout = maxDuration + delay
 
         const timeoutId = setTimeout(() => {
-          sendExitComplete?.()
+          completeExit()
         }, fallbackTimeout)
 
-        // Listen for transition completion events as backup
-        const onFinishAnimation = () => {
+        // track number of transitioning properties to wait for all to finish
+        // (each property fires its own transitionend event)
+        const transitioningProps = new Set(keys)
+        let completedCount = 0
+
+        const onFinishAnimation = (event: TransitionEvent) => {
+          // only count transitions on THIS element, not bubbled from children
+          if (event.target !== node) return
+
+          // map CSS property names to our key names
+          // e.g., transitionend fires with propertyName 'transform' for scale/x/y
+          const eventProp = event.propertyName
+          if (transitioningProps.has(eventProp) || eventProp === 'all') {
+            completedCount++
+            // wait for all properties to finish
+            if (completedCount >= transitioningProps.size) {
+              clearTimeout(timeoutId)
+              completeExit()
+            }
+          }
+        }
+
+        // on cancel, still complete (element is exiting and animation was interrupted)
+        // the guards prevent duplicate completion if this is a stale cycle
+        const onCancelAnimation = () => {
+          // ignore cancel events during reset phase (we intentionally cancel the old transition)
+          if (ignoreCancelEvents) return
           clearTimeout(timeoutId)
-          sendExitComplete?.()
+          completeExit()
         }
 
         node.addEventListener('transitionend', onFinishAnimation)
-        node.addEventListener('transitioncancel', onFinishAnimation)
+        node.addEventListener('transitioncancel', onCancelAnimation)
+
+        // For interrupted exits, re-enable transition and re-apply exit styles
+        // This must happen AFTER listeners are set up so we catch the transitionend
+        if (wasInterrupted) {
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return
+            // re-enable transition using the pre-built string
+            node.style.transition = exitTransitionString
+            // force reflow again
+            void node.offsetHeight
+            // now apply exit styles - this triggers the transition
+            applyStylesToNode(node, exitStyle)
+            // re-enable cancel event handling now that reset is complete
+            ignoreCancelEvents = false
+          })
+        }
 
         return () => {
           clearTimeout(timeoutId)
+          if (rafId !== undefined) cancelAnimationFrame(rafId)
           node.removeEventListener('transitionend', onFinishAnimation)
-          node.removeEventListener('transitioncancel', onFinishAnimation)
+          node.removeEventListener('transitioncancel', onCancelAnimation)
+          // restore transition: the exit handling sets node.style.transition='none'
+          // directly on the DOM (bypassing React). if exit is interrupted (e.g. same-key
+          // re-entry in AnimatePresence), React won't re-apply its managed transition
+          // value because it hasn't changed in the virtual DOM. clearing the inline
+          // override lets React's value take effect again.
+          node.style.transition = ''
         }
-      }, [sendExitComplete, isExiting])
+      }, [
+        sendExitComplete,
+        isExiting,
+        stateRef,
+        keys,
+        normalized,
+        defaultAnimation,
+        props.enterStyle,
+        props.exitStyle,
+      ])
+
+      // tamagui doesnt even use animation output during hydration
+      if (isHydrating) {
+        return null
+      }
 
       // Check if we have any animation to apply
       if (!hasNormalizedAnimation(normalized)) {
@@ -204,6 +597,7 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
       // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function
       // for non layout transform properties either use animate function or find a workaround to do it with css
       const delayStr = normalized.delay ? ` ${normalized.delay}ms` : ''
+      const durationOverride = normalized.config?.duration
       style.transition = keys
         .map((key) => {
           // Check for property-specific animation, fall back to default
@@ -222,6 +616,11 @@ export function createAnimations<A extends object>(animations: A): AnimationDriv
             animationValue = defaultAnimation
           }
 
+          // Apply global duration override if specified
+          if (animationValue && durationOverride) {
+            animationValue = applyDurationOverride(animationValue, durationOverride)
+          }
+
           return animationValue ? `${key} ${animationValue}${delayStr}` : null
         })
         .filter(Boolean)

package/types/createAnimations.d.ts.map

@@ -1,11 +1,11 @@
 {
-  "mappings": "AAQA,cAAc,uBAAgD;AA0B9D,OAAO,iBAAS,iBAAiB,kBAAkB,YAAY,IAAI,gBAAgB",
+  "mappings": "AASA,cAAc,uBAAgD;AAmJ9D,OAAO,iBAAS,iBAAiB,kBAAkB,YAAY,IAAI,gBAAgB",
   "names": [],
   "sources": [
     "src/createAnimations.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
-    "import {\n  normalizeTransition,\n  getAnimatedProperties,\n  hasAnimation as hasNormalizedAnimation,\n  getEffectiveAnimation,\n} from '@tamagui/animation-helpers'\nimport { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'\nimport { transformsToString } from '@tamagui/web'\nimport React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'\n\n/**\n * Helper function to extract duration from CSS animation string\n * Examples: \"ease-in 200ms\" -> 200, \"cubic-bezier(0.215, 0.610, 0.355, 1.000) 400ms\" -> 400\n * \"ease-in 0.5s\" -> 500, \"slow 2s\" -> 2000\n */\nfunction extractDuration(animation: string): number {\n  // Try to match milliseconds first\n  const msMatch = animation.match(/(\\d+(?:\\.\\d+)?)\\s*ms/)\n  if (msMatch) {\n    return Number.parseInt(msMatch[1], 10)\n  }\n\n  // Try to match seconds and convert to milliseconds\n  const sMatch = animation.match(/(\\d+(?:\\.\\d+)?)\\s*s/)\n  if (sMatch) {\n    return Math.round(Number.parseFloat(sMatch[1]) * 1000)\n  }\n\n  // Default to 300ms if no duration found\n  return 300\n}\n\nexport function createAnimations<A extends object>(animations: A): AnimationDriver<A> {\n  const reactionListeners = new WeakMap<any, Set<Function>>()\n\n  return {\n    animations,\n    usePresence,\n    ResetPresence,\n    supportsCSS: true,\n    inputStyle: 'css',\n    outputStyle: 'css',\n    classNameAnimation: true,\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {\n      const [val, setVal] = React.useState(initial)\n      const [onFinish, setOnFinish] = useState<Function | undefined>()\n\n      useIsomorphicLayoutEffect(() => {\n        if (onFinish) {\n          onFinish?.()\n          setOnFinish(undefined)\n        }\n      }, [onFinish])\n\n      return {\n        getInstance() {\n          return setVal\n        },\n        getValue() {\n          return val\n        },\n        setValue(next, config, onFinish) {\n          setVal(next)\n          setOnFinish(onFinish)\n          // call reaction listeners with the new value\n          const listeners = reactionListeners.get(setVal)\n          if (listeners) {\n            listeners.forEach((listener) => listener(next))\n          }\n        },\n        stop() {},\n      }\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      React.useEffect(() => {\n        const instance = value.getInstance()\n        let queue = reactionListeners.get(instance)\n        if (!queue) {\n          const next = new Set<Function>()\n          reactionListeners.set(instance, next)\n          queue = next!\n        }\n        queue.add(onValue)\n        return () => {\n          queue?.delete(onValue)\n        }\n      }, [])\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimations: ({ props, presence, style, componentState, stateRef }) => {\n      const isEntering = !!componentState.unmounted\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n\n      // Track if we just finished entering (transition from entering to not entering)\n      // This is needed because the CSS transition happens on the render AFTER t_unmounted is removed\n      const wasEnteringRef = React.useRef(isEntering)\n      const justFinishedEntering = wasEnteringRef.current && !isEntering\n      React.useEffect(() => {\n        wasEnteringRef.current = isEntering\n      })\n\n      // Normalize the transition prop to a consistent format\n      const normalized = normalizeTransition(props.transition)\n\n      // Determine animation state and get effective animation\n      // Use 'enter' if we're entering OR if we just finished entering (transition is happening)\n      const animationState = isExiting\n        ? 'exit'\n        : isEntering || justFinishedEntering\n          ? 'enter'\n          : 'default'\n      const effectiveAnimationKey = getEffectiveAnimation(normalized, animationState)\n      const defaultAnimation = effectiveAnimationKey\n        ? animations[effectiveAnimationKey]\n        : null\n      const animatedProperties = getAnimatedProperties(normalized)\n\n      // Determine which properties to animate\n      // - animateOnly prop is an exclusive filter (only animate those properties)\n      // - per-property configs WITHOUT a default = only animate those specific properties\n      // - per-property configs WITH a default = per-property overrides + default for rest\n      const hasDefault =\n        normalized.default !== null ||\n        normalized.enter !== null ||\n        normalized.exit !== null\n      const hasPerPropertyConfigs = animatedProperties.length > 0\n\n      let keys: string[]\n      if (props.animateOnly) {\n        // animateOnly is explicit filter\n        keys = props.animateOnly\n      } else if (hasPerPropertyConfigs && !hasDefault) {\n        // object format without default: { opacity: '200ms' } = only animate opacity\n        keys = animatedProperties\n      } else if (hasPerPropertyConfigs && hasDefault) {\n        // array format or object with default: 'all' first, then per-property overrides\n        // CSS transition specificity: later declarations override earlier ones for the same property\n        keys = ['all', ...animatedProperties]\n      } else {\n        // simple string format: 'quick' = animate all\n        keys = ['all']\n      }\n\n      useIsomorphicLayoutEffect(() => {\n        const host = stateRef.current.host\n        if (!sendExitComplete || !isExiting || !host) return\n        const node = host as HTMLElement\n\n        /**\n         * Exit animation handling for Dialog/Modal components\n         *\n         * The Challenge: When users close dialogs (via Escape key or clicking outside),\n         * the element can disappear from the DOM before CSS transitions finish, which causes:\n         * 1. Dialogs to stick around on screen\n         * 2. Event handlers to stop working\n         */\n\n        // Use timeout as primary, transition events as backup for reliable exit handling\n        const animationDuration = defaultAnimation\n          ? extractDuration(defaultAnimation)\n          : 200\n        const delay = normalized.delay ?? 0\n        const fallbackTimeout = animationDuration + delay\n\n        const timeoutId = setTimeout(() => {\n          sendExitComplete?.()\n        }, fallbackTimeout)\n\n        // Listen for transition completion events as backup\n        const onFinishAnimation = () => {\n          clearTimeout(timeoutId)\n          sendExitComplete?.()\n        }\n\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onFinishAnimation)\n\n        return () => {\n          clearTimeout(timeoutId)\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.removeEventListener('transitioncancel', onFinishAnimation)\n        }\n      }, [sendExitComplete, isExiting])\n\n      // Check if we have any animation to apply\n      if (!hasNormalizedAnimation(normalized)) {\n        return null\n      }\n\n      if (Array.isArray(style.transform)) {\n        style.transform = transformsToString(style.transform)\n      }\n\n      // Build CSS transition string\n      // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function\n      // for non layout transform properties either use animate function or find a workaround to do it with css\n      const delayStr = normalized.delay ? ` ${normalized.delay}ms` : ''\n      style.transition = keys\n        .map((key) => {\n          // Check for property-specific animation, fall back to default\n          const propAnimation = normalized.properties[key]\n          let animationValue: string | null = null\n\n          if (typeof propAnimation === 'string') {\n            animationValue = animations[propAnimation]\n          } else if (\n            propAnimation &&\n            typeof propAnimation === 'object' &&\n            propAnimation.type\n          ) {\n            animationValue = animations[propAnimation.type]\n          } else if (defaultAnimation) {\n            animationValue = defaultAnimation\n          }\n\n          return animationValue ? `${key} ${animationValue}${delayStr}` : null\n        })\n        .filter(Boolean)\n        .join(', ')\n\n      if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n        console.info('CSS animation', {\n          props,\n          animations,\n          normalized,\n          defaultAnimation,\n          style,\n          isEntering,\n          isExiting,\n        })\n      }\n\n      return { style, className: isEntering ? 't_unmounted' : '' }\n    },\n  }\n}\n\n// layout animations\n// useIsomorphicLayoutEffect(() => {\n//   if (!host || !props.layout) {\n//     return\n//   }\n//   // @ts-ignore\n//   const boundingBox = host?.getBoundingClientRect()\n//   if (isChanged(initialPositionRef.current, boundingBox)) {\n//     const transform = invert(\n//       host,\n//       boundingBox,\n//       initialPositionRef.current\n//     )\n\n//     animate({\n//       from: transform,\n//       to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },\n//       duration: 1000,\n//       onUpdate: ({ x, y, scaleX, scaleY }) => {\n//         // @ts-ignore\n//         host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`\n//         // TODO: handle childRef inverse scale\n//         //   childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${\n//         //     1 / scaleY\n//         //   })`\n//       },\n//       // TODO: extract ease-in from string and convert/map it to a cubicBezier array\n//       cubicBezier: [0, 1.38, 1, -0.41],\n//     })\n//   }\n//   initialPositionRef.current = boundingBox\n// })\n\n// style.transition = `${keys} ${animation}${\n//   props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''\n// }`\n\n// const isChanged = (initialBox: any, finalBox: any) => {\n//   // we just mounted, so we don't have complete data yet\n//   if (!initialBox || !finalBox) return false\n\n//   // deep compare the two boxes\n//   return JSON.stringify(initialBox) !== JSON.stringify(finalBox)\n// }\n\n// const invert = (el, from, to) => {\n//   const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from\n//   const { x, y, width, height } = to\n\n//   const transform = {\n//     x: x - fromX - (fromWidth - width) / 2,\n//     y: y - fromY - (fromHeight - height) / 2,\n//     scaleX: width / fromWidth,\n//     scaleY: height / fromHeight,\n//   }\n\n//   el.style.transform = `\n"
-  ],
-  "version": 3
+    "import {\n  normalizeTransition,\n  getAnimatedProperties,\n  hasAnimation as hasNormalizedAnimation,\n  getEffectiveAnimation,\n  getAnimationConfigsForKeys,\n} from '@tamagui/animation-helpers'\nimport { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport type { AnimationDriver, UniversalAnimatedNumber } from '@tamagui/web'\nimport { transformsToString } from '@tamagui/web'\nimport React, { useState } from 'react' // import { animate } from '@tamagui/cubic-bezier-animator'\n\nconst EXTRACT_MS_REGEX = /(\\d+(?:\\.\\d+)?)\\s*ms/\nconst EXTRACT_S_REGEX = /(\\d+(?:\\.\\d+)?)\\s*s/\n\n/**\n * Helper function to extract duration from CSS animation string\n * Examples: \"ease-in 200ms\" -> 200, \"cubic-bezier(0.215, 0.610, 0.355, 1.000) 400ms\" -> 400\n * \"ease-in 0.5s\" -> 500, \"slow 2s\" -> 2000\n */\nfunction extractDuration(animation: string): number {\n  // Try to match milliseconds first\n  const msMatch = animation.match(EXTRACT_MS_REGEX)\n  if (msMatch) {\n    return Number.parseInt(msMatch[1], 10)\n  }\n\n  // Try to match seconds and convert to milliseconds\n  const sMatch = animation.match(EXTRACT_S_REGEX)\n  if (sMatch) {\n    return Math.round(Number.parseFloat(sMatch[1]) * 1000)\n  }\n\n  // Default to 300ms if no duration found\n  return 300\n}\n\nconst MS_DURATION_REGEX = /(\\d+(?:\\.\\d+)?)\\s*ms/\nconst S_DURATION_REGEX = /(\\d+(?:\\.\\d+)?)\\s*s(?!tiffness)/\n\n/**\n * Apply duration override to a CSS animation string\n * Replaces the existing duration with the override value\n */\nfunction applyDurationOverride(animation: string, durationMs: number): string {\n  // Replace ms duration\n  const msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`)\n  if (msReplaced !== animation) {\n    return msReplaced\n  }\n\n  // Replace seconds duration\n  const sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`)\n  if (sReplaced !== animation) {\n    return sReplaced\n  }\n\n  // No duration found, prepend the duration\n  return `${durationMs}ms ${animation}`\n}\n\n// transform keys that need special handling\nconst TRANSFORM_KEYS = [\n  'x',\n  'y',\n  'scale',\n  'scaleX',\n  'scaleY',\n  'rotate',\n  'rotateX',\n  'rotateY',\n  'rotateZ',\n  'skewX',\n  'skewY',\n] as const\n\n/**\n * Build a CSS transform string from a style object containing transform properties\n */\nfunction buildTransformString(style: Record<string, unknown> | undefined): string {\n  if (!style) return ''\n\n  const parts: string[] = []\n\n  if (style.x !== undefined || style.y !== undefined) {\n    const x = style.x ?? 0\n    const y = style.y ?? 0\n    parts.push(`translate(${x}px, ${y}px)`)\n  }\n  if (style.scale !== undefined) {\n    parts.push(`scale(${style.scale})`)\n  }\n  if (style.scaleX !== undefined) {\n    parts.push(`scaleX(${style.scaleX})`)\n  }\n  if (style.scaleY !== undefined) {\n    parts.push(`scaleY(${style.scaleY})`)\n  }\n  if (style.rotate !== undefined) {\n    const val = style.rotate\n    const unit = typeof val === 'string' && val.includes('deg') ? '' : 'deg'\n    parts.push(`rotate(${val}${unit})`)\n  }\n  if (style.rotateX !== undefined) {\n    parts.push(`rotateX(${style.rotateX}deg)`)\n  }\n  if (style.rotateY !== undefined) {\n    parts.push(`rotateY(${style.rotateY}deg)`)\n  }\n  if (style.rotateZ !== undefined) {\n    parts.push(`rotateZ(${style.rotateZ}deg)`)\n  }\n  if (style.skewX !== undefined) {\n    parts.push(`skewX(${style.skewX}deg)`)\n  }\n  if (style.skewY !== undefined) {\n    parts.push(`skewY(${style.skewY}deg)`)\n  }\n\n  return parts.join(' ')\n}\n\n/**\n * Apply a style object to a DOM node, handling transform keys specially\n */\nfunction applyStylesToNode(\n  node: HTMLElement,\n  style: Record<string, unknown> | undefined\n): void {\n  if (!style) return\n\n  // collect transform values\n  const transformStr = buildTransformString(style)\n  if (transformStr) {\n    node.style.transform = transformStr\n  }\n\n  // apply non-transform properties\n  for (const [key, value] of Object.entries(style)) {\n    if (TRANSFORM_KEYS.includes(key as any)) continue\n    if (value === undefined) continue\n\n    if (key === 'opacity') {\n      node.style.opacity = String(value)\n    } else if (key === 'backgroundColor') {\n      node.style.backgroundColor = String(value)\n    } else if (key === 'color') {\n      node.style.color = String(value)\n    } else {\n      // generic fallback\n      node.style[key as any] = typeof value === 'number' ? `${value}px` : String(value)\n    }\n  }\n}\n\nexport function createAnimations<A extends object>(animations: A): AnimationDriver<A> {\n  const reactionListeners = new WeakMap<any, Set<Function>>()\n\n  return {\n    animations,\n    usePresence,\n    ResetPresence,\n    inputStyle: 'css',\n    outputStyle: 'css',\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<Function> {\n      const [val, setVal] = React.useState(initial)\n      const finishTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n\n      return {\n        getInstance() {\n          return setVal\n        },\n        getValue() {\n          return val\n        },\n        setValue(next, config, onFinish) {\n          setVal(next)\n\n          // clear any pending finish callback from a previous setValue\n          if (finishTimerRef.current) {\n            clearTimeout(finishTimerRef.current)\n            finishTimerRef.current = null\n          }\n\n          if (onFinish) {\n            if (\n              !config ||\n              config.type === 'direct' ||\n              (config.type === 'timing' && config.duration === 0)\n            ) {\n              onFinish()\n            } else {\n              // estimate duration: use explicit duration, or fall back to\n              // default CSS transition duration for spring-type configs\n              const duration = config.type === 'timing' ? config.duration : 300\n              finishTimerRef.current = setTimeout(onFinish, duration)\n            }\n          }\n\n          // call reaction listeners with the new value\n          const listeners = reactionListeners.get(setVal)\n          if (listeners) {\n            listeners.forEach((listener) => listener(next))\n          }\n        },\n        stop() {\n          if (finishTimerRef.current) {\n            clearTimeout(finishTimerRef.current)\n            finishTimerRef.current = null\n          }\n        },\n      }\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      React.useEffect(() => {\n        const instance = value.getInstance()\n        let queue = reactionListeners.get(instance)\n        if (!queue) {\n          const next = new Set<Function>()\n          reactionListeners.set(instance, next)\n          queue = next!\n        }\n        queue.add(onValue)\n        return () => {\n          queue?.delete(onValue)\n        }\n      }, [])\n    },\n\n    useAnimatedNumberStyle(val, getStyle) {\n      return getStyle(val.getValue())\n    },\n\n    useAnimatedNumbersStyle(vals, getStyle) {\n      return getStyle(...vals.map((v) => v.getValue()))\n    },\n\n    // @ts-ignore - styleState is added by createComponent\n    useAnimations: ({\n      props,\n      presence,\n      style,\n      componentState,\n      stateRef,\n      styleState,\n    }: any) => {\n      const isHydrating = componentState.unmounted === true\n      const isEntering = !!componentState.unmounted\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n\n      // Track if we just finished entering (transition from entering to not entering)\n      // This is needed because the CSS transition happens on the render AFTER t_unmounted is removed\n      const wasEnteringRef = React.useRef(isEntering)\n      const justFinishedEntering = wasEnteringRef.current && !isEntering\n      React.useEffect(() => {\n        wasEnteringRef.current = isEntering\n      })\n\n      // exit cycle guards to prevent stale/duplicate completion\n      const exitCycleIdRef = React.useRef(0)\n      const exitCompletedRef = React.useRef(false)\n      const wasExitingRef = React.useRef(false)\n      const exitInterruptedRef = React.useRef(false)\n\n      // detect transition into/out of exiting state\n      const justStartedExiting = isExiting && !wasExitingRef.current\n      const justStoppedExiting = !isExiting && wasExitingRef.current\n\n      // start new exit cycle only on transition INTO exiting\n      if (justStartedExiting) {\n        exitCycleIdRef.current++\n        exitCompletedRef.current = false\n      }\n      // track interruptions so we know to force-restart transitions\n      if (justStoppedExiting) {\n        exitCycleIdRef.current++\n        exitInterruptedRef.current = true\n      }\n\n      // track previous exiting state\n      React.useEffect(() => {\n        wasExitingRef.current = isExiting\n      })\n\n      // use effectiveTransition computed by createComponent (single source of truth)\n      const effectiveTransition = styleState?.effectiveTransition ?? props.transition\n\n      // Normalize the transition prop to a consistent format\n      const normalized = normalizeTransition(effectiveTransition)\n\n      // Determine animation state and get effective animation\n      // Use 'enter' if we're entering OR if we just finished entering (transition is happening)\n      const animationState = isExiting\n        ? 'exit'\n        : isEntering || justFinishedEntering\n          ? 'enter'\n          : 'default'\n      const effectiveAnimationKey = getEffectiveAnimation(normalized, animationState)\n      const defaultAnimation = effectiveAnimationKey\n        ? animations[effectiveAnimationKey]\n        : null\n      const animatedProperties = getAnimatedProperties(normalized)\n\n      // Determine which properties to animate\n      // - animateOnly prop is an exclusive filter (only animate those properties)\n      // - per-property configs WITHOUT a default = only animate those specific properties\n      // - per-property configs WITH a default = per-property overrides + default for rest\n      const hasDefault =\n        normalized.default !== null ||\n        normalized.enter !== null ||\n        normalized.exit !== null\n      const hasPerPropertyConfigs = animatedProperties.length > 0\n\n      let keys: string[]\n      if (props.animateOnly) {\n        // animateOnly is explicit filter\n        keys = props.animateOnly\n      } else if (hasPerPropertyConfigs && !hasDefault) {\n        // object format without default: { opacity: '200ms' } = only animate opacity\n        keys = animatedProperties\n      } else if (hasPerPropertyConfigs && hasDefault) {\n        // array format or object with default: 'all' first, then per-property overrides\n        // CSS transition specificity: later declarations override earlier ones for the same property\n        keys = ['all', ...animatedProperties]\n      } else {\n        // simple string format: 'quick' = animate all\n        keys = ['all']\n      }\n\n      useIsomorphicLayoutEffect(() => {\n        const host = stateRef.current.host\n        if (!sendExitComplete || !isExiting || !host) return\n        const node = host as HTMLElement\n\n        // capture current cycle id for this effect\n        const cycleId = exitCycleIdRef.current\n\n        // helper to complete exit with guards\n        const completeExit = () => {\n          if (cycleId !== exitCycleIdRef.current) return\n          if (exitCompletedRef.current) return\n          exitCompletedRef.current = true\n          sendExitComplete()\n        }\n\n        // if no properties to animate (animateOnly=[]), complete immediately\n        if (keys.length === 0) {\n          completeExit()\n          return\n        }\n\n        // Force transition restart for interrupted exits\n        // When an exit is interrupted and restarted, the element may already be at\n        // the exit style, so no CSS transition fires. We need to:\n        // 1. Reset to non-exit state\n        // 2. Force reflow\n        // 3. Re-apply exit state to trigger transition\n        let rafId: number | undefined\n        const wasInterrupted = exitInterruptedRef.current\n        // flag to ignore transitioncancel during reset (we intentionally cancel the old transition)\n        let ignoreCancelEvents = wasInterrupted\n        // get enter/exit styles for potential restart\n        const enterStyle = props.enterStyle as Record<string, unknown> | undefined\n        const exitStyle = props.exitStyle as Record<string, unknown> | undefined\n\n        // Build the exit transition string - needed for both normal and interrupted exits\n        const delayStr = normalized.delay ? ` ${normalized.delay}ms` : ''\n        const durationOverride = normalized.config?.duration\n        const exitTransitionString = keys\n          .map((key) => {\n            const propAnimation = normalized.properties[key]\n            let animationValue: string | null = null\n            if (typeof propAnimation === 'string') {\n              animationValue = animations[propAnimation]\n            } else if (\n              propAnimation &&\n              typeof propAnimation === 'object' &&\n              propAnimation.type\n            ) {\n              animationValue = animations[propAnimation.type]\n            } else if (defaultAnimation) {\n              animationValue = defaultAnimation\n            }\n            if (animationValue && durationOverride) {\n              animationValue = applyDurationOverride(animationValue, durationOverride)\n            }\n            return animationValue ? `${key} ${animationValue}${delayStr}` : null\n          })\n          .filter(Boolean)\n          .join(', ')\n\n        if (wasInterrupted) {\n          exitInterruptedRef.current = false\n          // disable transition, reset to enter state\n          node.style.transition = 'none'\n\n          // reset: apply active/open state for each exit property (not enterStyle,\n          // which may equal exitStyle — see comment in the normal exit path below)\n          if (exitStyle) {\n            const resetStyle: Record<string, unknown> = {}\n            for (const key of Object.keys(exitStyle)) {\n              if (key === 'opacity') {\n                resetStyle[key] = 1\n              } else if (TRANSFORM_KEYS.includes(key as any)) {\n                resetStyle[key] =\n                  key === 'scale' || key === 'scaleX' || key === 'scaleY' ? 1 : 0\n              } else if (enterStyle?.[key] !== undefined) {\n                resetStyle[key] = enterStyle[key]\n              }\n            }\n            applyStylesToNode(node, resetStyle)\n          } else {\n            // fallback if no exitStyle defined\n            node.style.opacity = '1'\n            node.style.transform = 'none'\n          }\n\n          // force reflow\n          void node.offsetHeight\n        } else if (exitStyle) {\n          // For normal (non-interrupted) exits, we need to ensure the CSS transition is\n          // processed by the browser BEFORE the exitStyle takes effect. The issue is that\n          // React may have already applied exitStyle in the same render batch. To fix this:\n          // 1. Disable transition and reset to non-exit state\n          // 2. Force reflow so browser processes the reset\n          // 3. Use RAF to ensure we're in a new frame\n          // 4. Re-enable transition and apply exitStyle\n          // This mirrors the interrupted exit handling approach (which also uses RAF).\n          ignoreCancelEvents = true\n          node.style.transition = 'none'\n\n          // Reset to the active/open state (not enterStyle, which may equal exitStyle).\n          // enterStyle is the \"unmounted\" initial state and can share values with exitStyle\n          // (e.g., both have opacity: 0). resetting to enterStyle would mean no value change\n          // when exitStyle is applied, so the CSS transition wouldn't fire.\n          const resetStyle: Record<string, unknown> = {}\n          for (const key of Object.keys(exitStyle)) {\n            if (key === 'opacity') {\n              resetStyle[key] = 1\n            } else if (TRANSFORM_KEYS.includes(key as any)) {\n              resetStyle[key] =\n                key === 'scale' || key === 'scaleX' || key === 'scaleY' ? 1 : 0\n            } else if (enterStyle?.[key] !== undefined) {\n              resetStyle[key] = enterStyle[key]\n            }\n          }\n          applyStylesToNode(node, resetStyle)\n\n          // Force reflow\n          void node.offsetHeight\n\n          // Use RAF to ensure transition is applied in a new frame\n          rafId = requestAnimationFrame(() => {\n            if (cycleId !== exitCycleIdRef.current) return\n            // Re-enable transition\n            node.style.transition = exitTransitionString\n            // Force reflow to ensure transition is active\n            void node.offsetHeight\n            // Apply exit styles - this triggers the animation\n            applyStylesToNode(node, exitStyle)\n            // Re-enable cancel event handling\n            ignoreCancelEvents = false\n          })\n        }\n\n        /**\n         * Exit animation handling for Dialog/Modal components\n         *\n         * The Challenge: When users close dialogs (via Escape key or clicking outside),\n         * the element can disappear from the DOM before CSS transitions finish, which causes:\n         * 1. Dialogs to stick around on screen\n         * 2. Event handlers to stop working\n         *\n         * Fix: Calculate the MAXIMUM duration across all animated properties, not just\n         * the default. With animateOnly and per-property configs, different properties\n         * can have different durations, and we need to wait for the LONGEST one.\n         */\n\n        // calculate max duration across all animated properties\n        let maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200\n\n        // check per-property animation durations using shared helper\n        const animationConfigs = getAnimationConfigsForKeys(\n          normalized,\n          animations as Record<string, string>,\n          keys,\n          defaultAnimation\n        )\n        for (const animationValue of animationConfigs.values()) {\n          if (animationValue) {\n            const duration = extractDuration(animationValue)\n            if (duration > maxDuration) {\n              maxDuration = duration\n            }\n          }\n        }\n\n        const delay = normalized.delay ?? 0\n        const fallbackTimeout = maxDuration + delay\n\n        const timeoutId = setTimeout(() => {\n          completeExit()\n        }, fallbackTimeout)\n\n        // track number of transitioning properties to wait for all to finish\n        // (each property fires its own transitionend event)\n        const transitioningProps = new Set(keys)\n        let completedCount = 0\n\n        const onFinishAnimation = (event: TransitionEvent) => {\n          // only count transitions on THIS element, not bubbled from children\n          if (event.target !== node) return\n\n          // map CSS property names to our key names\n          // e.g., transitionend fires with propertyName 'transform' for scale/x/y\n          const eventProp = event.propertyName\n          if (transitioningProps.has(eventProp) || eventProp === 'all') {\n            completedCount++\n            // wait for all properties to finish\n            if (completedCount >= transitioningProps.size) {\n              clearTimeout(timeoutId)\n              completeExit()\n            }\n          }\n        }\n\n        // on cancel, still complete (element is exiting and animation was interrupted)\n        // the guards prevent duplicate completion if this is a stale cycle\n        const onCancelAnimation = () => {\n          // ignore cancel events during reset phase (we intentionally cancel the old transition)\n          if (ignoreCancelEvents) return\n          clearTimeout(timeoutId)\n          completeExit()\n        }\n\n        node.addEventListener('transitionend', onFinishAnimation)\n        node.addEventListener('transitioncancel', onCancelAnimation)\n\n        // For interrupted exits, re-enable transition and re-apply exit styles\n        // This must happen AFTER listeners are set up so we catch the transitionend\n        if (wasInterrupted) {\n          rafId = requestAnimationFrame(() => {\n            if (cycleId !== exitCycleIdRef.current) return\n            // re-enable transition using the pre-built string\n            node.style.transition = exitTransitionString\n            // force reflow again\n            void node.offsetHeight\n            // now apply exit styles - this triggers the transition\n            applyStylesToNode(node, exitStyle)\n            // re-enable cancel event handling now that reset is complete\n            ignoreCancelEvents = false\n          })\n        }\n\n        return () => {\n          clearTimeout(timeoutId)\n          if (rafId !== undefined) cancelAnimationFrame(rafId)\n          node.removeEventListener('transitionend', onFinishAnimation)\n          node.removeEventListener('transitioncancel', onCancelAnimation)\n          // restore transition: the exit handling sets node.style.transition='none'\n          // directly on the DOM (bypassing React). if exit is interrupted (e.g. same-key\n          // re-entry in AnimatePresence), React won't re-apply its managed transition\n          // value because it hasn't changed in the virtual DOM. clearing the inline\n          // override lets React's value take effect again.\n          node.style.transition = ''\n        }\n      }, [\n        sendExitComplete,\n        isExiting,\n        stateRef,\n        keys,\n        normalized,\n        defaultAnimation,\n        props.enterStyle,\n        props.exitStyle,\n      ])\n\n      // tamagui doesnt even use animation output during hydration\n      if (isHydrating) {\n        return null\n      }\n\n      // Check if we have any animation to apply\n      if (!hasNormalizedAnimation(normalized)) {\n        return null\n      }\n\n      if (Array.isArray(style.transform)) {\n        style.transform = transformsToString(style.transform)\n      }\n\n      // Build CSS transition string\n      // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function\n      // for non layout transform properties either use animate function or find a workaround to do it with css\n      const delayStr = normalized.delay ? ` ${normalized.delay}ms` : ''\n      const durationOverride = normalized.config?.duration\n      style.transition = keys\n        .map((key) => {\n          // Check for property-specific animation, fall back to default\n          const propAnimation = normalized.properties[key]\n          let animationValue: string | null = null\n\n          if (typeof propAnimation === 'string') {\n            animationValue = animations[propAnimation]\n          } else if (\n            propAnimation &&\n            typeof propAnimation === 'object' &&\n            propAnimation.type\n          ) {\n            animationValue = animations[propAnimation.type]\n          } else if (defaultAnimation) {\n            animationValue = defaultAnimation\n          }\n\n          // Apply global duration override if specified\n          if (animationValue && durationOverride) {\n            animationValue = applyDurationOverride(animationValue, durationOverride)\n          }\n\n          return animationValue ? `${key} ${animationValue}${delayStr}` : null\n        })\n        .filter(Boolean)\n        .join(', ')\n\n      if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n        console.info('CSS animation', {\n          props,\n          animations,\n          normalized,\n          defaultAnimation,\n          style,\n          isEntering,\n          isExiting,\n        })\n      }\n\n      return { style, className: isEntering ? 't_unmounted' : '' }\n    },\n  }\n}\n\n// layout animations\n// useIsomorphicLayoutEffect(() => {\n//   if (!host || !props.layout) {\n//     return\n//   }\n//   // @ts-ignore\n//   const boundingBox = host?.getBoundingClientRect()\n//   if (isChanged(initialPositionRef.current, boundingBox)) {\n//     const transform = invert(\n//       host,\n//       boundingBox,\n//       initialPositionRef.current\n//     )\n\n//     animate({\n//       from: transform,\n//       to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },\n//       duration: 1000,\n//       onUpdate: ({ x, y, scaleX, scaleY }) => {\n//         // @ts-ignore\n//         host.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`\n//         // TODO: handle childRef inverse scale\n//         //   childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${\n//         //     1 / scaleY\n//         //   })`\n//       },\n//       // TODO: extract ease-in from string and convert/map it to a cubicBezier array\n//       cubicBezier: [0, 1.38, 1, -0.41],\n//     })\n//   }\n//   initialPositionRef.current = boundingBox\n// })\n\n// style.transition = `${keys} ${animation}${\n//   props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''\n// }`\n\n// const isChanged = (initialBox: any, finalBox: any) => {\n//   // we just mounted, so we don't have complete data yet\n//   if (!initialBox || !finalBox) return false\n\n//   // deep compare the two boxes\n//   return JSON.stringify(initialBox) !== JSON.stringify(finalBox)\n// }\n\n// const invert = (el, from, to) => {\n//   const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from\n//   const { x, y, width, height } = to\n\n//   const transform = {\n//     x: x - fromX - (fromWidth - width) / 2,\n//     y: y - fromY - (fromHeight - height) / 2,\n//     scaleX: width / fromWidth,\n//     scaleY: height / fromHeight,\n//   }\n\n//   el.style.transform = `\n"
+  ]
 }