@tamagui/animations-reanimated 2.0.0-1768636514428 → 2.0.0-1768696252732

package/src/createAnimations.tsx

@@ -1,16 +1,17 @@
 import { normalizeTransition } from '@tamagui/animation-helpers'
-import { ResetPresence, usePresence } from '@tamagui/use-presence'
 import {
   getSplitStyles,
   hooks,
   isWeb,
   Text,
   useComposedRefs,
+  useIsomorphicLayoutEffect,
   useThemeWithState,
   View,
   type AnimationDriver,
   type UniversalAnimatedNumber,
 } from '@tamagui/core'
+import { ResetPresence, usePresence } from '@tamagui/use-presence'
 import React, { forwardRef, useMemo, useRef } from 'react'
 import type { SharedValue } from 'react-native-reanimated'
 import Animated_, {
@@ -66,9 +67,6 @@ type TimingConfig = {
 /** Combined animation configuration type */
 export type TransitionConfig = SpringConfig | TimingConfig
 
-/** Per-property animation overrides */
-type PropertyOverrides = Record<string, TransitionConfig | string>
-
 // =============================================================================
 // Utility Functions
 // =============================================================================
@@ -113,62 +111,6 @@ const applyAnimation = (
   return animatedValue
 }
 
-/**
- * Estimate spring animation duration based on physics parameters
- * Uses underdamped harmonic oscillator settling time formula
- *
- * Adds 15% buffer to ensure animation visually completes before exit callback
- */
-const estimateSpringDuration = (config: SpringConfig): number => {
-  const stiffness = config.stiffness ?? 100
-  const damping = config.damping ?? 10
-  const mass = config.mass ?? 1
-
-  // Guard against invalid parameters that would cause division by zero or NaN
-  if (mass <= 0 || stiffness <= 0) {
-    return 400 // sensible default
-  }
-
-  // Natural frequency: ω₀ = √(k/m)
-  const omega0 = Math.sqrt(stiffness / mass)
-  // Damping ratio: ζ = c / (2√(km))
-  const zeta = damping / (2 * Math.sqrt(stiffness * mass))
-
-  let duration: number
-  if (zeta < 1 && zeta > 0 && omega0 > 0) {
-    // Underdamped: oscillates, settling time ≈ 4 / (ζω₀)
-    duration = (4 / (zeta * omega0)) * 1000
-  } else if (omega0 > 0) {
-    // Overdamped or critically damped
-    duration = (2 / omega0) * 1000
-  } else {
-    duration = 400 // fallback
-  }
-
-  // Guard against NaN/Infinity from edge cases
-  if (!Number.isFinite(duration)) {
-    return 400
-  }
-
-  // Clamp and add 15% buffer to prevent premature exit callbacks
-  return Math.ceil(Math.min(2000, Math.max(200, duration)) * 1.15)
-}
-
-/**
- * Get total animation duration including delay
- * Adds 50ms buffer for timing animations to ensure completion before callbacks
- */
-const getAnimationDuration = (config: TransitionConfig): number => {
-  const delay = Math.max(0, config.delay ?? 0)
-
-  if (config.type === 'timing') {
-    const duration = Math.max(0, (config as TimingConfig).duration ?? 300)
-    return duration + delay + 50
-  }
-
-  return estimateSpringDuration(config as SpringConfig) + delay
-}
-
 // =============================================================================
 // Animatable Properties
 // =============================================================================
@@ -269,7 +211,7 @@ function createWebAnimatedComponent(defaultTag: 'div' | 'span') {
 
   const Component = Animated.createAnimatedComponent(
     forwardRef((propsIn: any, ref) => {
-      const { forwardedRef, tag = defaultTag, ...rest } = propsIn
+      const { forwardedRef, render = defaultTag, ...rest } = propsIn
       const hostRef = useRef<HTMLElement>(null)
       const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)
 
@@ -291,9 +233,9 @@ function createWebAnimatedComponent(defaultTag: 'div' | 'span') {
       )
 
       const viewProps = result?.viewProps ?? {}
-      const Element = tag
+      const Element = render
       const transformedProps = hooks.usePropsTransform?.(
-        tag,
+        render,
         viewProps,
         stateRef as any,
         false
@@ -444,26 +386,29 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
     // useAnimations - Main animation hook for components
     // =========================================================================
     useAnimations(animationProps) {
-      const { props, presence, style, componentState, useStyleEmitter } = animationProps
+      const { props, presence, style, componentState, useStyleEmitter, themeName } =
+        animationProps
 
-      // Extract animation key
-      const animationKey = Array.isArray(props.transition)
-        ? props.transition[0]
-        : props.transition
+      // Extract animation key from normalized transition
+      // props.transition can be: string | [string, config] | { default: string, ... }
+      const normalized = normalizeTransition(props.transition)
+      const animationKey = normalized.default
 
       // State flags
       const isHydrating = componentState.unmounted === true
       const isMounting = componentState.unmounted === 'should-enter'
       const disableAnimation = isHydrating || !animationKey
 
-      // Theme state for dynamic values
-      const [, themeState] = useThemeWithState({})
-      const isDark = themeState?.scheme === 'dark' || themeState?.name?.startsWith('dark')
+      // Theme state for dynamic values - use themeName from props instead of hook
+      const isDark = themeName?.startsWith('dark') || false
 
       // Presence state for exit animations
       const isExiting = presence?.[0] === false
       const sendExitComplete = presence?.[1]
 
+      // Track exit animation progress (0 = not started, 1 = complete)
+      const exitProgress = useSharedValue(0)
+
       // =========================================================================
       // avoidRerenders: SharedValues for style updates without re-renders
       // =========================================================================
@@ -533,16 +478,15 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         // Build per-property overrides from normalized properties
         const overrides: Record<string, TransitionConfig> = {}
 
-        for (const [key, animationNameOrConfig] of Object.entries(
-          normalized.properties
-        )) {
+        for (const key in normalized.properties) {
+          const animationNameOrConfig = normalized.properties[key]
           if (typeof animationNameOrConfig === 'string') {
             // Property override referencing a named animation: { x: 'quick' }
             overrides[key] =
               animations[animationNameOrConfig as keyof typeof animations] ?? base
           } else if (animationNameOrConfig && typeof animationNameOrConfig === 'object') {
             // Property override with inline config: { x: { type: 'quick', delay: 100 } }
-            const configType = animationNameOrConfig.type
+            const configType = (animationNameOrConfig as any).type
             const baseForProp = configType
               ? (animations[configType as keyof typeof animations] ?? base)
               : base
@@ -572,14 +516,18 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         return { baseConfig: base, propertyConfigs: configs }
       }, [isHydrating, props.transition, animatedStyles])
 
-      // Store config in ref for worklet access
-      const configRef = useRef({
+      // Store config in SharedValue for worklet access (concurrent-safe)
+      // Using useEffect to avoid writing to shared value during render
+      const configRef = useSharedValue({
         baseConfig,
         propertyConfigs,
         disableAnimation,
         isHydrating,
       })
-      configRef.current = { baseConfig, propertyConfigs, disableAnimation, isHydrating }
+
+      useIsomorphicLayoutEffect(() => {
+        configRef.set({ baseConfig, propertyConfigs, disableAnimation, isHydrating })
+      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating])
 
       // =========================================================================
       // avoidRerenders: Register style emitter callback
@@ -595,9 +543,9 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
           const rawValue = nextStyle[key]
           const value = resolveDynamicValue(rawValue, isDark)
 
-          if (value === undefined) continue
+          if (value == undefined) continue
 
-          if (configRef.current.disableAnimation) {
+          if (configRef.get().disableAnimation) {
             statics[key] = value
             continue
           }
@@ -623,9 +571,10 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         }
 
         // Update SharedValues - this triggers worklet without React re-render
-        animatedTargetsRef.value = animated
-        staticTargetsRef.value = statics
-        transformTargetsRef.value = transforms
+        // Using .set() method for concurrent-safe updates
+        animatedTargetsRef.set(animated)
+        staticTargetsRef.set(statics)
+        transformTargetsRef.set(transforms)
 
         if (
           process.env.NODE_ENV === 'development' &&
@@ -640,16 +589,41 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         }
       })
 
-      // Handle exit animation completion
-      // Use timeout based on calculated animation duration
+      // Handle exit animation completion using reanimated's native callback
+      // Animate exitProgress from 0 to 1 during exit, call sendExitComplete on completion
       React.useEffect(() => {
         if (!isExiting || !sendExitComplete) return
 
-        const duration = getAnimationDuration(baseConfig)
-        const timeoutId = setTimeout(sendExitComplete, duration)
+        // Use ref to get current config without adding to deps
+        const config = configRef.get().baseConfig
+
+        // Animate exitProgress to 1, which triggers sendExitComplete on completion
+        // Using .set() for React Compiler compatibility
+        if (config.type === 'timing') {
+          exitProgress.set(
+            withTiming(1, config as WithTimingConfig, (finished) => {
+              'worklet'
+              if (finished) {
+                runOnJS(sendExitComplete)()
+              }
+            })
+          )
+        } else {
+          exitProgress.set(
+            withSpring(1, config as WithSpringConfig, (finished) => {
+              'worklet'
+              if (finished) {
+                runOnJS(sendExitComplete)()
+              }
+            })
+          )
+        }
 
-        return () => clearTimeout(timeoutId)
-      }, [isExiting, sendExitComplete, baseConfig])
+        return () => {
+          // Cancel the exit animation if component unmounts early
+          cancelAnimation(exitProgress)
+        }
+      }, [isExiting, sendExitComplete])
 
       // Create animated style
       const animatedStyle = useAnimatedStyle(() => {
@@ -660,16 +634,16 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
         }
 
         const result: Record<string, any> = {}
-        const config = configRef.current
+        const config = configRef.get()
 
         // Check if we have avoidRerenders updates
-        const hasEmitterUpdates = animatedTargetsRef.value !== null
+        // Using .get() method for concurrent-safe reads in worklets
+        const emitterAnimated = animatedTargetsRef.get()
+        const hasEmitterUpdates = emitterAnimated !== null
 
         // Use emitter values if available, otherwise use React state values
-        const animatedValues = hasEmitterUpdates
-          ? animatedTargetsRef.value!
-          : animatedStyles
-        const staticValues = hasEmitterUpdates ? staticTargetsRef.value! : {}
+        const animatedValues = hasEmitterUpdates ? emitterAnimated! : animatedStyles
+        const staticValues = hasEmitterUpdates ? staticTargetsRef.get()! : {}
 
         // Include static values from emitter (for hover/press style changes)
         for (const key in staticValues) {
@@ -687,26 +661,27 @@ export function createAnimations<A extends Record<string, TransitionConfig>>(
 
         // Handle transforms
         const transforms = hasEmitterUpdates
-          ? transformTargetsRef.value
+          ? transformTargetsRef.get()
           : animatedStyles.transform
 
         // Animate transform properties with validation
         if (transforms && Array.isArray(transforms)) {
-          const validTransforms = (transforms as Record<string, unknown>[])
-            .filter((t) => {
-              // Validate transform object has at least one key with a numeric value
-              if (!t || typeof t !== 'object') return false
-              const keys = Object.keys(t)
-              if (keys.length === 0) return false
-              const value = t[keys[0]]
-              return typeof value === 'number' || typeof value === 'string'
-            })
-            .map((t) => {
+          const validTransforms: Record<string, unknown>[] = []
+
+          for (const t of transforms) {
+            if (!t) continue
+            const keys = Object.keys(t)
+            if (keys.length === 0) continue
+            const value = t[keys[0]]
+            if (typeof value === 'number' || typeof value === 'string') {
               const transformKey = Object.keys(t)[0]
               const targetValue = t[transformKey]
               const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig
-              return { [transformKey]: applyAnimation(targetValue as number, propConfig) }
-            })
+              validTransforms.push({
+                [transformKey]: applyAnimation(targetValue as number, propConfig),
+              })
+            }
+          }
 
           if (validTransforms.length > 0) {
             result.transform = validTransforms

package/types/createAnimations.d.ts.map

@@ -1,11 +1,11 @@
 {
-  "mappings": "AAEA,cAQO,uBAEA;AAGP,cAUO,uBACA,wBACA;;KA2BF,eAAe;CAClB,OAAO;CACP;IACE,QAAQ;;KAGP,eAAe;CAClB,MAAM;CACN;IACE,QAAQ;;AAGZ,YAAY,mBAAmB,eAAe;;;;;;;;;;;;;;;;;;;;AA4Q9C,OAAO,iBAAS,iBAAiB,UAAU,eAAe,mBACxD,kBAAkB,IACjB,gBAAgB",
+  "mappings": "AACA,cAQO,uBAEA;AAIP,cAUO,uBACA,wBACA;;KA2BF,eAAe;CAClB,OAAO;CACP;IACE,QAAQ;;KAGP,eAAe;CAClB,MAAM;CACN;IACE,QAAQ;;AAGZ,YAAY,mBAAmB,eAAe;;;;;;;;;;;;;;;;;;;;AAiN9C,OAAO,iBAAS,iBAAiB,UAAU,eAAe,mBACxD,kBAAkB,IACjB,gBAAgB",
   "names": [],
   "sources": [
     "src/createAnimations.tsx"
   ],
   "sourcesContent": [
-    "import { normalizeTransition } from '@tamagui/animation-helpers'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport {\n  getSplitStyles,\n  hooks,\n  isWeb,\n  Text,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n  type AnimationDriver,\n  type UniversalAnimatedNumber,\n} from '@tamagui/core'\nimport React, { forwardRef, useMemo, useRef } from 'react'\nimport type { SharedValue } from 'react-native-reanimated'\nimport Animated_, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withDelay,\n  withSpring,\n  withTiming,\n  type WithSpringConfig,\n  type WithTimingConfig,\n} from 'react-native-reanimated'\n\n// =============================================================================\n// ESM/CJS compatibility\n// =============================================================================\n\n/**\n * Handle ESM/CJS module interop for react-native-reanimated\n * @see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754\n */\nconst getDefaultExport = <T,>(module: T | { default: T }): T => {\n  const mod = module as any\n  if (mod.__esModule || mod[Symbol.toStringTag] === 'Module') {\n    return mod.default || mod\n  }\n  return mod\n}\n\nconst Animated = getDefaultExport(Animated_)\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype ReanimatedAnimatedNumber = SharedValue<number>\n\n/** Spring animation configuration */\ntype SpringConfig = {\n  type?: 'spring'\n  delay?: number\n} & Partial<WithSpringConfig>\n\n/** Timing animation configuration */\ntype TimingConfig = {\n  type: 'timing'\n  delay?: number\n} & Partial<WithTimingConfig>\n\n/** Combined animation configuration type */\nexport type TransitionConfig = SpringConfig | TimingConfig\n\n/** Per-property animation overrides */\ntype PropertyOverrides = Record<string, TransitionConfig | string>\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Resolve dynamic theme values (e.g., `{dynamic: {dark: \"value\", light: \"value\"}}`)\n */\nconst resolveDynamicValue = (value: unknown, isDark: boolean): unknown => {\n  if (\n    value !== null &&\n    typeof value === 'object' &&\n    'dynamic' in value &&\n    typeof (value as any).dynamic === 'object'\n  ) {\n    const dynamic = (value as any).dynamic\n    return isDark ? dynamic.dark : dynamic.light\n  }\n  return value\n}\n\n/**\n * Apply animation to a value based on config\n */\nconst applyAnimation = (\n  targetValue: number | string,\n  config: TransitionConfig\n): number | string => {\n  'worklet'\n  const delay = config.delay\n\n  let animatedValue: any\n  if (config.type === 'timing') {\n    animatedValue = withTiming(targetValue as number, config as WithTimingConfig)\n  } else {\n    animatedValue = withSpring(targetValue as number, config as WithSpringConfig)\n  }\n\n  if (delay && delay > 0) {\n    animatedValue = withDelay(delay, animatedValue)\n  }\n\n  return animatedValue\n}\n\n/**\n * Estimate spring animation duration based on physics parameters\n * Uses underdamped harmonic oscillator settling time formula\n *\n * Adds 15% buffer to ensure animation visually completes before exit callback\n */\nconst estimateSpringDuration = (config: SpringConfig): number => {\n  const stiffness = config.stiffness ?? 100\n  const damping = config.damping ?? 10\n  const mass = config.mass ?? 1\n\n  // Guard against invalid parameters that would cause division by zero or NaN\n  if (mass <= 0 || stiffness <= 0) {\n    return 400 // sensible default\n  }\n\n  // Natural frequency: ω₀ = √(k/m)\n  const omega0 = Math.sqrt(stiffness / mass)\n  // Damping ratio: ζ = c / (2√(km))\n  const zeta = damping / (2 * Math.sqrt(stiffness * mass))\n\n  let duration: number\n  if (zeta < 1 && zeta > 0 && omega0 > 0) {\n    // Underdamped: oscillates, settling time ≈ 4 / (ζω₀)\n    duration = (4 / (zeta * omega0)) * 1000\n  } else if (omega0 > 0) {\n    // Overdamped or critically damped\n    duration = (2 / omega0) * 1000\n  } else {\n    duration = 400 // fallback\n  }\n\n  // Guard against NaN/Infinity from edge cases\n  if (!Number.isFinite(duration)) {\n    return 400\n  }\n\n  // Clamp and add 15% buffer to prevent premature exit callbacks\n  return Math.ceil(Math.min(2000, Math.max(200, duration)) * 1.15)\n}\n\n/**\n * Get total animation duration including delay\n * Adds 50ms buffer for timing animations to ensure completion before callbacks\n */\nconst getAnimationDuration = (config: TransitionConfig): number => {\n  const delay = Math.max(0, config.delay ?? 0)\n\n  if (config.type === 'timing') {\n    const duration = Math.max(0, (config as TimingConfig).duration ?? 300)\n    return duration + delay + 50\n  }\n\n  return estimateSpringDuration(config as SpringConfig) + delay\n}\n\n// =============================================================================\n// Animatable Properties\n// =============================================================================\n\nconst ANIMATABLE_PROPERTIES: Record<string, boolean> = {\n  // Transform\n  transform: true,\n  // Opacity\n  opacity: true,\n  // Dimensions\n  height: true,\n  width: true,\n  minWidth: true,\n  minHeight: true,\n  maxWidth: true,\n  maxHeight: true,\n  // Background\n  backgroundColor: true,\n  // Border colors\n  borderColor: true,\n  borderLeftColor: true,\n  borderRightColor: true,\n  borderTopColor: true,\n  borderBottomColor: true,\n  // Border radius\n  borderRadius: true,\n  borderTopLeftRadius: true,\n  borderTopRightRadius: true,\n  borderBottomLeftRadius: true,\n  borderBottomRightRadius: true,\n  // Border width\n  borderWidth: true,\n  borderLeftWidth: true,\n  borderRightWidth: true,\n  borderTopWidth: true,\n  borderBottomWidth: true,\n  // Text\n  color: true,\n  fontSize: true,\n  fontWeight: true,\n  lineHeight: true,\n  letterSpacing: true,\n  // Position\n  left: true,\n  right: true,\n  top: true,\n  bottom: true,\n  // Margin\n  margin: true,\n  marginTop: true,\n  marginBottom: true,\n  marginLeft: true,\n  marginRight: true,\n  marginHorizontal: true,\n  marginVertical: true,\n  // Padding\n  padding: true,\n  paddingTop: true,\n  paddingBottom: true,\n  paddingLeft: true,\n  paddingRight: true,\n  paddingHorizontal: true,\n  paddingVertical: true,\n  // Flex/Gap\n  gap: true,\n  rowGap: true,\n  columnGap: true,\n  flex: true,\n  flexGrow: true,\n  flexShrink: true,\n}\n\n/**\n * Check if a style property can be animated\n */\nconst canAnimateProperty = (\n  key: string,\n  value: unknown,\n  animateOnly?: string[]\n): boolean => {\n  if (!ANIMATABLE_PROPERTIES[key]) return false\n  if (value === 'auto') return false\n  if (typeof value === 'string' && value.startsWith('calc')) return false\n  if (animateOnly && !animateOnly.includes(key)) return false\n  return true\n}\n\n// =============================================================================\n// Animated Components (Web)\n// =============================================================================\n\n/**\n * Create a Tamagui-compatible animated component for web\n * Supports data- attributes, className, and proper style handling\n */\nfunction createWebAnimatedComponent(defaultTag: 'div' | 'span') {\n  const isText = defaultTag === 'span'\n\n  const Component = Animated.createAnimatedComponent(\n    forwardRef((propsIn: any, ref) => {\n      const { forwardedRef, tag = defaultTag, ...rest } = propsIn\n      const hostRef = useRef<HTMLElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)\n\n      const stateRef = useRef<{ host: HTMLElement | null }>({\n        get host() {\n          return hostRef.current\n        },\n      })\n\n      const [, themeState] = useThemeWithState({})\n\n      const result = getSplitStyles(\n        rest,\n        isText ? Text.staticConfig : View.staticConfig,\n        themeState?.theme ?? {},\n        themeState?.name ?? '',\n        { unmounted: false } as any,\n        { isAnimated: false, noClass: true }\n      )\n\n      const viewProps = result?.viewProps ?? {}\n      const Element = tag\n      const transformedProps = hooks.usePropsTransform?.(\n        tag,\n        viewProps,\n        stateRef as any,\n        false\n      )\n\n      return <Element {...transformedProps} ref={composedRefs} />\n    })\n  )\n  ;(Component as any).acceptTagProp = true\n  return Component\n}\n\nconst AnimatedView = createWebAnimatedComponent('div')\nconst AnimatedText = createWebAnimatedComponent('span')\n\n// =============================================================================\n// Animation Driver Factory\n// =============================================================================\n\n/**\n * Create a Reanimated-based animation driver for Tamagui.\n *\n * This is a native Reanimated implementation without Moti dependency.\n * It provides smooth spring and timing animations with full support for:\n * - Per-property animation configurations\n * - Exit animations with proper completion callbacks\n * - Dynamic theme value resolution\n * - Transform property animations\n * - avoidReRenders optimization for hover/press/focus states\n *\n * @example\n * ```tsx\n * const animations = createAnimations({\n *   fast: { type: 'spring', damping: 20, stiffness: 250 },\n *   slow: { type: 'timing', duration: 500 },\n * })\n * ```\n */\nexport function createAnimations<A extends Record<string, TransitionConfig>>(\n  animationsConfig: A\n): AnimationDriver<A> {\n  // Normalize animation configs - default to spring if not specified\n  // This matches behavior of moti and motion drivers\n  const animations = {} as A\n  for (const key in animationsConfig) {\n    animations[key] = {\n      type: 'spring',\n      ...animationsConfig[key],\n    } as A[typeof key]\n  }\n\n  return {\n    View: isWeb ? AnimatedView : Animated.View,\n    Text: isWeb ? AnimatedText : Animated.Text,\n    isReactNative: true,\n    supportsCSS: false,\n    avoidReRenders: true,\n    animations,\n    usePresence,\n    ResetPresence,\n\n    // =========================================================================\n    // useAnimatedNumber - For imperative animated values\n    // =========================================================================\n    useAnimatedNumber(initial): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {\n      const sharedValue = useSharedValue(initial)\n\n      return useMemo(\n        () => ({\n          getInstance() {\n            'worklet'\n            return sharedValue\n          },\n\n          getValue() {\n            'worklet'\n            return sharedValue.value\n          },\n\n          setValue(next, config = { type: 'spring' }, onFinish) {\n            'worklet'\n            const handleFinish = onFinish\n              ? () => {\n                  'worklet'\n                  runOnJS(onFinish)()\n                }\n              : undefined\n\n            if (config.type === 'direct') {\n              sharedValue.value = next\n              onFinish?.()\n            } else if (config.type === 'spring') {\n              sharedValue.value = withSpring(\n                next,\n                config as WithSpringConfig,\n                handleFinish\n              )\n            } else {\n              sharedValue.value = withTiming(\n                next,\n                config as WithTimingConfig,\n                handleFinish\n              )\n            }\n          },\n\n          stop() {\n            'worklet'\n            cancelAnimation(sharedValue)\n          },\n        }),\n        [sharedValue]\n      )\n    },\n\n    // =========================================================================\n    // useAnimatedNumberReaction - React to animated value changes\n    // =========================================================================\n    useAnimatedNumberReaction({ value }, onValue) {\n      const instance = value.getInstance()\n\n      return useAnimatedReaction(\n        () => instance.value,\n        (next, prev) => {\n          if (prev !== next) {\n            runOnJS(onValue)(next)\n          }\n        },\n        [onValue, instance]\n      )\n    },\n\n    // =========================================================================\n    // useAnimatedNumberStyle - Create animated styles from values\n    // =========================================================================\n    useAnimatedNumberStyle(val, getStyle) {\n      const instance = val.getInstance()\n\n      const derivedValue = useDerivedValue(() => instance.value, [instance, getStyle])\n\n      return useAnimatedStyle(\n        () => getStyle(derivedValue.value),\n        [val, getStyle, derivedValue, instance]\n      )\n    },\n\n    // =========================================================================\n    // useAnimations - Main animation hook for components\n    // =========================================================================\n    useAnimations(animationProps) {\n      const { props, presence, style, componentState, useStyleEmitter } = animationProps\n\n      // Extract animation key\n      const animationKey = Array.isArray(props.transition)\n        ? props.transition[0]\n        : props.transition\n\n      // State flags\n      const isHydrating = componentState.unmounted === true\n      const isMounting = componentState.unmounted === 'should-enter'\n      const disableAnimation = isHydrating || !animationKey\n\n      // Theme state for dynamic values\n      const [, themeState] = useThemeWithState({})\n      const isDark = themeState?.scheme === 'dark' || themeState?.name?.startsWith('dark')\n\n      // Presence state for exit animations\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n\n      // =========================================================================\n      // avoidRerenders: SharedValues for style updates without re-renders\n      // =========================================================================\n      const animatedTargetsRef = useSharedValue<Record<string, unknown> | null>(null)\n      const staticTargetsRef = useSharedValue<Record<string, unknown> | null>(null)\n      const transformTargetsRef = useSharedValue<Array<Record<string, unknown>> | null>(\n        null\n      )\n\n      // Separate styles into animated and static\n      const { animatedStyles, staticStyles } = useMemo(() => {\n        const animated: Record<string, unknown> = {}\n        const staticStyles: Record<string, unknown> = {}\n        const animateOnly = props.animateOnly as string[] | undefined\n\n        for (const key in style) {\n          const rawValue = (style as Record<string, unknown>)[key]\n          const value = resolveDynamicValue(rawValue, isDark)\n\n          if (value === undefined) continue\n\n          if (disableAnimation) {\n            staticStyles[key] = value\n            continue\n          }\n\n          if (canAnimateProperty(key, value, animateOnly)) {\n            animated[key] = value\n          } else {\n            staticStyles[key] = value\n          }\n        }\n\n        // During mount, include animated values in static to prevent flicker\n        if (isMounting) {\n          for (const key in animated) {\n            staticStyles[key] = animated[key]\n          }\n        }\n\n        return { animatedStyles: animated, staticStyles }\n      }, [disableAnimation, style, isDark, isMounting, props.animateOnly])\n\n      // Build animation config with per-property overrides using normalized transition\n      const { baseConfig, propertyConfigs } = useMemo(() => {\n        if (isHydrating) {\n          return {\n            baseConfig: { type: 'timing' as const, duration: 0 },\n            propertyConfigs: {} as Record<string, TransitionConfig>,\n          }\n        }\n\n        // Normalize the transition prop to a consistent format\n        const normalized = normalizeTransition(props.transition)\n\n        // Get base animation config from default animation key\n        let base = normalized.default\n          ? (animations[normalized.default as keyof typeof animations] ??\n            ({ type: 'spring' } as TransitionConfig))\n          : ({ type: 'spring' } as TransitionConfig)\n\n        // Apply global delay to base config if present\n        if (normalized.delay) {\n          base = { ...base, delay: normalized.delay }\n        }\n\n        // Build per-property overrides from normalized properties\n        const overrides: Record<string, TransitionConfig> = {}\n\n        for (const [key, animationNameOrConfig] of Object.entries(\n          normalized.properties\n        )) {\n          if (typeof animationNameOrConfig === 'string') {\n            // Property override referencing a named animation: { x: 'quick' }\n            overrides[key] =\n              animations[animationNameOrConfig as keyof typeof animations] ?? base\n          } else if (animationNameOrConfig && typeof animationNameOrConfig === 'object') {\n            // Property override with inline config: { x: { type: 'quick', delay: 100 } }\n            const configType = animationNameOrConfig.type\n            const baseForProp = configType\n              ? (animations[configType as keyof typeof animations] ?? base)\n              : base\n            // Cast to TransitionConfig since we're merging compatible animation configs\n            overrides[key] = {\n              ...baseForProp,\n              ...animationNameOrConfig,\n            } as TransitionConfig\n          }\n        }\n\n        // Build per-property config map\n        const configs: Record<string, TransitionConfig> = {}\n\n        // Get all animated property keys including transform sub-properties\n        const allKeys = new Set(Object.keys(animatedStyles))\n        if (animatedStyles.transform && Array.isArray(animatedStyles.transform)) {\n          for (const t of animatedStyles.transform as Record<string, unknown>[]) {\n            allKeys.add(Object.keys(t)[0])\n          }\n        }\n\n        for (const key of allKeys) {\n          configs[key] = overrides[key] ?? base\n        }\n\n        return { baseConfig: base, propertyConfigs: configs }\n      }, [isHydrating, props.transition, animatedStyles])\n\n      // Store config in ref for worklet access\n      const configRef = useRef({\n        baseConfig,\n        propertyConfigs,\n        disableAnimation,\n        isHydrating,\n      })\n      configRef.current = { baseConfig, propertyConfigs, disableAnimation, isHydrating }\n\n      // =========================================================================\n      // avoidRerenders: Register style emitter callback\n      // When hover/press/etc state changes, this is called instead of re-rendering\n      // =========================================================================\n      useStyleEmitter?.((nextStyle: Record<string, unknown>) => {\n        const animateOnly = props.animateOnly as string[] | undefined\n        const animated: Record<string, unknown> = {}\n        const statics: Record<string, unknown> = {}\n        const transforms: Array<Record<string, unknown>> = []\n\n        for (const key in nextStyle) {\n          const rawValue = nextStyle[key]\n          const value = resolveDynamicValue(rawValue, isDark)\n\n          if (value === undefined) continue\n\n          if (configRef.current.disableAnimation) {\n            statics[key] = value\n            continue\n          }\n\n          if (key === 'transform' && Array.isArray(value)) {\n            for (const t of value as Record<string, unknown>[]) {\n              if (t && typeof t === 'object') {\n                const tKey = Object.keys(t)[0]\n                const tVal = t[tKey]\n                if (typeof tVal === 'number' || typeof tVal === 'string') {\n                  transforms.push(t)\n                }\n              }\n            }\n            continue\n          }\n\n          if (canAnimateProperty(key, value, animateOnly)) {\n            animated[key] = value\n          } else {\n            statics[key] = value\n          }\n        }\n\n        // Update SharedValues - this triggers worklet without React re-render\n        animatedTargetsRef.value = animated\n        staticTargetsRef.value = statics\n        transformTargetsRef.value = transforms\n\n        if (\n          process.env.NODE_ENV === 'development' &&\n          props.debug &&\n          props.debug !== 'profile'\n        ) {\n          console.info('[animations-reanimated] useStyleEmitter update', {\n            animated,\n            statics,\n            transforms,\n          })\n        }\n      })\n\n      // Handle exit animation completion\n      // Use timeout based on calculated animation duration\n      React.useEffect(() => {\n        if (!isExiting || !sendExitComplete) return\n\n        const duration = getAnimationDuration(baseConfig)\n        const timeoutId = setTimeout(sendExitComplete, duration)\n\n        return () => clearTimeout(timeoutId)\n      }, [isExiting, sendExitComplete, baseConfig])\n\n      // Create animated style\n      const animatedStyle = useAnimatedStyle(() => {\n        'worklet'\n\n        if (disableAnimation || isHydrating) {\n          return {}\n        }\n\n        const result: Record<string, any> = {}\n        const config = configRef.current\n\n        // Check if we have avoidRerenders updates\n        const hasEmitterUpdates = animatedTargetsRef.value !== null\n\n        // Use emitter values if available, otherwise use React state values\n        const animatedValues = hasEmitterUpdates\n          ? animatedTargetsRef.value!\n          : animatedStyles\n        const staticValues = hasEmitterUpdates ? staticTargetsRef.value! : {}\n\n        // Include static values from emitter (for hover/press style changes)\n        for (const key in staticValues) {\n          result[key] = staticValues[key]\n        }\n\n        // Animate regular properties\n        for (const key in animatedValues) {\n          if (key === 'transform') continue\n\n          const targetValue = animatedValues[key]\n          const propConfig = config.propertyConfigs[key] ?? config.baseConfig\n          result[key] = applyAnimation(targetValue as number, propConfig)\n        }\n\n        // Handle transforms\n        const transforms = hasEmitterUpdates\n          ? transformTargetsRef.value\n          : animatedStyles.transform\n\n        // Animate transform properties with validation\n        if (transforms && Array.isArray(transforms)) {\n          const validTransforms = (transforms as Record<string, unknown>[])\n            .filter((t) => {\n              // Validate transform object has at least one key with a numeric value\n              if (!t || typeof t !== 'object') return false\n              const keys = Object.keys(t)\n              if (keys.length === 0) return false\n              const value = t[keys[0]]\n              return typeof value === 'number' || typeof value === 'string'\n            })\n            .map((t) => {\n              const transformKey = Object.keys(t)[0]\n              const targetValue = t[transformKey]\n              const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig\n              return { [transformKey]: applyAnimation(targetValue as number, propConfig) }\n            })\n\n          if (validTransforms.length > 0) {\n            result.transform = validTransforms\n          }\n        }\n\n        return result\n      }, [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating])\n\n      // Debug logging\n      if (\n        process.env.NODE_ENV === 'development' &&\n        props.debug &&\n        props.debug !== 'profile'\n      ) {\n        console.info('[animations-reanimated] useAnimations', {\n          animationKey,\n          componentState,\n          isExiting,\n          animatedStyles,\n          staticStyles,\n          baseConfig,\n          propertyConfigs,\n        })\n      }\n\n      return {\n        style: [staticStyles, animatedStyle],\n      }\n    },\n  }\n}\n"
+    "import { normalizeTransition } from '@tamagui/animation-helpers'\nimport {\n  getSplitStyles,\n  hooks,\n  isWeb,\n  Text,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n  type AnimationDriver,\n  type UniversalAnimatedNumber,\n} from '@tamagui/core'\nimport { ResetPresence, usePresence } from '@tamagui/use-presence'\nimport React, { forwardRef, useMemo, useRef } from 'react'\nimport type { SharedValue } from 'react-native-reanimated'\nimport Animated_, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withDelay,\n  withSpring,\n  withTiming,\n  type WithSpringConfig,\n  type WithTimingConfig,\n} from 'react-native-reanimated'\n\n// =============================================================================\n// ESM/CJS compatibility\n// =============================================================================\n\n/**\n * Handle ESM/CJS module interop for react-native-reanimated\n * @see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754\n */\nconst getDefaultExport = <T,>(module: T | { default: T }): T => {\n  const mod = module as any\n  if (mod.__esModule || mod[Symbol.toStringTag] === 'Module') {\n    return mod.default || mod\n  }\n  return mod\n}\n\nconst Animated = getDefaultExport(Animated_)\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype ReanimatedAnimatedNumber = SharedValue<number>\n\n/** Spring animation configuration */\ntype SpringConfig = {\n  type?: 'spring'\n  delay?: number\n} & Partial<WithSpringConfig>\n\n/** Timing animation configuration */\ntype TimingConfig = {\n  type: 'timing'\n  delay?: number\n} & Partial<WithTimingConfig>\n\n/** Combined animation configuration type */\nexport type TransitionConfig = SpringConfig | TimingConfig\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Resolve dynamic theme values (e.g., `{dynamic: {dark: \"value\", light: \"value\"}}`)\n */\nconst resolveDynamicValue = (value: unknown, isDark: boolean): unknown => {\n  if (\n    value !== null &&\n    typeof value === 'object' &&\n    'dynamic' in value &&\n    typeof (value as any).dynamic === 'object'\n  ) {\n    const dynamic = (value as any).dynamic\n    return isDark ? dynamic.dark : dynamic.light\n  }\n  return value\n}\n\n/**\n * Apply animation to a value based on config\n */\nconst applyAnimation = (\n  targetValue: number | string,\n  config: TransitionConfig\n): number | string => {\n  'worklet'\n  const delay = config.delay\n\n  let animatedValue: any\n  if (config.type === 'timing') {\n    animatedValue = withTiming(targetValue as number, config as WithTimingConfig)\n  } else {\n    animatedValue = withSpring(targetValue as number, config as WithSpringConfig)\n  }\n\n  if (delay && delay > 0) {\n    animatedValue = withDelay(delay, animatedValue)\n  }\n\n  return animatedValue\n}\n\n// =============================================================================\n// Animatable Properties\n// =============================================================================\n\nconst ANIMATABLE_PROPERTIES: Record<string, boolean> = {\n  // Transform\n  transform: true,\n  // Opacity\n  opacity: true,\n  // Dimensions\n  height: true,\n  width: true,\n  minWidth: true,\n  minHeight: true,\n  maxWidth: true,\n  maxHeight: true,\n  // Background\n  backgroundColor: true,\n  // Border colors\n  borderColor: true,\n  borderLeftColor: true,\n  borderRightColor: true,\n  borderTopColor: true,\n  borderBottomColor: true,\n  // Border radius\n  borderRadius: true,\n  borderTopLeftRadius: true,\n  borderTopRightRadius: true,\n  borderBottomLeftRadius: true,\n  borderBottomRightRadius: true,\n  // Border width\n  borderWidth: true,\n  borderLeftWidth: true,\n  borderRightWidth: true,\n  borderTopWidth: true,\n  borderBottomWidth: true,\n  // Text\n  color: true,\n  fontSize: true,\n  fontWeight: true,\n  lineHeight: true,\n  letterSpacing: true,\n  // Position\n  left: true,\n  right: true,\n  top: true,\n  bottom: true,\n  // Margin\n  margin: true,\n  marginTop: true,\n  marginBottom: true,\n  marginLeft: true,\n  marginRight: true,\n  marginHorizontal: true,\n  marginVertical: true,\n  // Padding\n  padding: true,\n  paddingTop: true,\n  paddingBottom: true,\n  paddingLeft: true,\n  paddingRight: true,\n  paddingHorizontal: true,\n  paddingVertical: true,\n  // Flex/Gap\n  gap: true,\n  rowGap: true,\n  columnGap: true,\n  flex: true,\n  flexGrow: true,\n  flexShrink: true,\n}\n\n/**\n * Check if a style property can be animated\n */\nconst canAnimateProperty = (\n  key: string,\n  value: unknown,\n  animateOnly?: string[]\n): boolean => {\n  if (!ANIMATABLE_PROPERTIES[key]) return false\n  if (value === 'auto') return false\n  if (typeof value === 'string' && value.startsWith('calc')) return false\n  if (animateOnly && !animateOnly.includes(key)) return false\n  return true\n}\n\n// =============================================================================\n// Animated Components (Web)\n// =============================================================================\n\n/**\n * Create a Tamagui-compatible animated component for web\n * Supports data- attributes, className, and proper style handling\n */\nfunction createWebAnimatedComponent(defaultTag: 'div' | 'span') {\n  const isText = defaultTag === 'span'\n\n  const Component = Animated.createAnimatedComponent(\n    forwardRef((propsIn: any, ref) => {\n      const { forwardedRef, render = defaultTag, ...rest } = propsIn\n      const hostRef = useRef<HTMLElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)\n\n      const stateRef = useRef<{ host: HTMLElement | null }>({\n        get host() {\n          return hostRef.current\n        },\n      })\n\n      const [, themeState] = useThemeWithState({})\n\n      const result = getSplitStyles(\n        rest,\n        isText ? Text.staticConfig : View.staticConfig,\n        themeState?.theme ?? {},\n        themeState?.name ?? '',\n        { unmounted: false } as any,\n        { isAnimated: false, noClass: true }\n      )\n\n      const viewProps = result?.viewProps ?? {}\n      const Element = render\n      const transformedProps = hooks.usePropsTransform?.(\n        render,\n        viewProps,\n        stateRef as any,\n        false\n      )\n\n      return <Element {...transformedProps} ref={composedRefs} />\n    })\n  )\n  ;(Component as any).acceptTagProp = true\n  return Component\n}\n\nconst AnimatedView = createWebAnimatedComponent('div')\nconst AnimatedText = createWebAnimatedComponent('span')\n\n// =============================================================================\n// Animation Driver Factory\n// =============================================================================\n\n/**\n * Create a Reanimated-based animation driver for Tamagui.\n *\n * This is a native Reanimated implementation without Moti dependency.\n * It provides smooth spring and timing animations with full support for:\n * - Per-property animation configurations\n * - Exit animations with proper completion callbacks\n * - Dynamic theme value resolution\n * - Transform property animations\n * - avoidReRenders optimization for hover/press/focus states\n *\n * @example\n * ```tsx\n * const animations = createAnimations({\n *   fast: { type: 'spring', damping: 20, stiffness: 250 },\n *   slow: { type: 'timing', duration: 500 },\n * })\n * ```\n */\nexport function createAnimations<A extends Record<string, TransitionConfig>>(\n  animationsConfig: A\n): AnimationDriver<A> {\n  // Normalize animation configs - default to spring if not specified\n  // This matches behavior of moti and motion drivers\n  const animations = {} as A\n  for (const key in animationsConfig) {\n    animations[key] = {\n      type: 'spring',\n      ...animationsConfig[key],\n    } as A[typeof key]\n  }\n\n  return {\n    View: isWeb ? AnimatedView : Animated.View,\n    Text: isWeb ? AnimatedText : Animated.Text,\n    isReactNative: true,\n    supportsCSS: false,\n    avoidReRenders: true,\n    animations,\n    usePresence,\n    ResetPresence,\n\n    // =========================================================================\n    // useAnimatedNumber - For imperative animated values\n    // =========================================================================\n    useAnimatedNumber(initial): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {\n      const sharedValue = useSharedValue(initial)\n\n      return useMemo(\n        () => ({\n          getInstance() {\n            'worklet'\n            return sharedValue\n          },\n\n          getValue() {\n            'worklet'\n            return sharedValue.value\n          },\n\n          setValue(next, config = { type: 'spring' }, onFinish) {\n            'worklet'\n            const handleFinish = onFinish\n              ? () => {\n                  'worklet'\n                  runOnJS(onFinish)()\n                }\n              : undefined\n\n            if (config.type === 'direct') {\n              sharedValue.value = next\n              onFinish?.()\n            } else if (config.type === 'spring') {\n              sharedValue.value = withSpring(\n                next,\n                config as WithSpringConfig,\n                handleFinish\n              )\n            } else {\n              sharedValue.value = withTiming(\n                next,\n                config as WithTimingConfig,\n                handleFinish\n              )\n            }\n          },\n\n          stop() {\n            'worklet'\n            cancelAnimation(sharedValue)\n          },\n        }),\n        [sharedValue]\n      )\n    },\n\n    // =========================================================================\n    // useAnimatedNumberReaction - React to animated value changes\n    // =========================================================================\n    useAnimatedNumberReaction({ value }, onValue) {\n      const instance = value.getInstance()\n\n      return useAnimatedReaction(\n        () => instance.value,\n        (next, prev) => {\n          if (prev !== next) {\n            runOnJS(onValue)(next)\n          }\n        },\n        [onValue, instance]\n      )\n    },\n\n    // =========================================================================\n    // useAnimatedNumberStyle - Create animated styles from values\n    // =========================================================================\n    useAnimatedNumberStyle(val, getStyle) {\n      const instance = val.getInstance()\n\n      const derivedValue = useDerivedValue(() => instance.value, [instance, getStyle])\n\n      return useAnimatedStyle(\n        () => getStyle(derivedValue.value),\n        [val, getStyle, derivedValue, instance]\n      )\n    },\n\n    // =========================================================================\n    // useAnimations - Main animation hook for components\n    // =========================================================================\n    useAnimations(animationProps) {\n      const { props, presence, style, componentState, useStyleEmitter, themeName } =\n        animationProps\n\n      // Extract animation key from normalized transition\n      // props.transition can be: string | [string, config] | { default: string, ... }\n      const normalized = normalizeTransition(props.transition)\n      const animationKey = normalized.default\n\n      // State flags\n      const isHydrating = componentState.unmounted === true\n      const isMounting = componentState.unmounted === 'should-enter'\n      const disableAnimation = isHydrating || !animationKey\n\n      // Theme state for dynamic values - use themeName from props instead of hook\n      const isDark = themeName?.startsWith('dark') || false\n\n      // Presence state for exit animations\n      const isExiting = presence?.[0] === false\n      const sendExitComplete = presence?.[1]\n\n      // Track exit animation progress (0 = not started, 1 = complete)\n      const exitProgress = useSharedValue(0)\n\n      // =========================================================================\n      // avoidRerenders: SharedValues for style updates without re-renders\n      // =========================================================================\n      const animatedTargetsRef = useSharedValue<Record<string, unknown> | null>(null)\n      const staticTargetsRef = useSharedValue<Record<string, unknown> | null>(null)\n      const transformTargetsRef = useSharedValue<Array<Record<string, unknown>> | null>(\n        null\n      )\n\n      // Separate styles into animated and static\n      const { animatedStyles, staticStyles } = useMemo(() => {\n        const animated: Record<string, unknown> = {}\n        const staticStyles: Record<string, unknown> = {}\n        const animateOnly = props.animateOnly as string[] | undefined\n\n        for (const key in style) {\n          const rawValue = (style as Record<string, unknown>)[key]\n          const value = resolveDynamicValue(rawValue, isDark)\n\n          if (value === undefined) continue\n\n          if (disableAnimation) {\n            staticStyles[key] = value\n            continue\n          }\n\n          if (canAnimateProperty(key, value, animateOnly)) {\n            animated[key] = value\n          } else {\n            staticStyles[key] = value\n          }\n        }\n\n        // During mount, include animated values in static to prevent flicker\n        if (isMounting) {\n          for (const key in animated) {\n            staticStyles[key] = animated[key]\n          }\n        }\n\n        return { animatedStyles: animated, staticStyles }\n      }, [disableAnimation, style, isDark, isMounting, props.animateOnly])\n\n      // Build animation config with per-property overrides using normalized transition\n      const { baseConfig, propertyConfigs } = useMemo(() => {\n        if (isHydrating) {\n          return {\n            baseConfig: { type: 'timing' as const, duration: 0 },\n            propertyConfigs: {} as Record<string, TransitionConfig>,\n          }\n        }\n\n        // Normalize the transition prop to a consistent format\n        const normalized = normalizeTransition(props.transition)\n\n        // Get base animation config from default animation key\n        let base = normalized.default\n          ? (animations[normalized.default as keyof typeof animations] ??\n            ({ type: 'spring' } as TransitionConfig))\n          : ({ type: 'spring' } as TransitionConfig)\n\n        // Apply global delay to base config if present\n        if (normalized.delay) {\n          base = { ...base, delay: normalized.delay }\n        }\n\n        // Build per-property overrides from normalized properties\n        const overrides: Record<string, TransitionConfig> = {}\n\n        for (const key in normalized.properties) {\n          const animationNameOrConfig = normalized.properties[key]\n          if (typeof animationNameOrConfig === 'string') {\n            // Property override referencing a named animation: { x: 'quick' }\n            overrides[key] =\n              animations[animationNameOrConfig as keyof typeof animations] ?? base\n          } else if (animationNameOrConfig && typeof animationNameOrConfig === 'object') {\n            // Property override with inline config: { x: { type: 'quick', delay: 100 } }\n            const configType = (animationNameOrConfig as any).type\n            const baseForProp = configType\n              ? (animations[configType as keyof typeof animations] ?? base)\n              : base\n            // Cast to TransitionConfig since we're merging compatible animation configs\n            overrides[key] = {\n              ...baseForProp,\n              ...animationNameOrConfig,\n            } as TransitionConfig\n          }\n        }\n\n        // Build per-property config map\n        const configs: Record<string, TransitionConfig> = {}\n\n        // Get all animated property keys including transform sub-properties\n        const allKeys = new Set(Object.keys(animatedStyles))\n        if (animatedStyles.transform && Array.isArray(animatedStyles.transform)) {\n          for (const t of animatedStyles.transform as Record<string, unknown>[]) {\n            allKeys.add(Object.keys(t)[0])\n          }\n        }\n\n        for (const key of allKeys) {\n          configs[key] = overrides[key] ?? base\n        }\n\n        return { baseConfig: base, propertyConfigs: configs }\n      }, [isHydrating, props.transition, animatedStyles])\n\n      // Store config in SharedValue for worklet access (concurrent-safe)\n      // Using useEffect to avoid writing to shared value during render\n      const configRef = useSharedValue({\n        baseConfig,\n        propertyConfigs,\n        disableAnimation,\n        isHydrating,\n      })\n\n      React.useEffect(() => {\n        configRef.set({ baseConfig, propertyConfigs, disableAnimation, isHydrating })\n      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating])\n\n      // =========================================================================\n      // avoidRerenders: Register style emitter callback\n      // When hover/press/etc state changes, this is called instead of re-rendering\n      // =========================================================================\n      useStyleEmitter?.((nextStyle: Record<string, unknown>) => {\n        const animateOnly = props.animateOnly as string[] | undefined\n        const animated: Record<string, unknown> = {}\n        const statics: Record<string, unknown> = {}\n        const transforms: Array<Record<string, unknown>> = []\n\n        for (const key in nextStyle) {\n          const rawValue = nextStyle[key]\n          const value = resolveDynamicValue(rawValue, isDark)\n\n          if (value == undefined) continue\n\n          if (configRef.get().disableAnimation) {\n            statics[key] = value\n            continue\n          }\n\n          if (key === 'transform' && Array.isArray(value)) {\n            for (const t of value as Record<string, unknown>[]) {\n              if (t && typeof t === 'object') {\n                const tKey = Object.keys(t)[0]\n                const tVal = t[tKey]\n                if (typeof tVal === 'number' || typeof tVal === 'string') {\n                  transforms.push(t)\n                }\n              }\n            }\n            continue\n          }\n\n          if (canAnimateProperty(key, value, animateOnly)) {\n            animated[key] = value\n          } else {\n            statics[key] = value\n          }\n        }\n\n        // Update SharedValues - this triggers worklet without React re-render\n        // Using .set() method for concurrent-safe updates\n        animatedTargetsRef.set(animated)\n        staticTargetsRef.set(statics)\n        transformTargetsRef.set(transforms)\n\n        if (\n          process.env.NODE_ENV === 'development' &&\n          props.debug &&\n          props.debug !== 'profile'\n        ) {\n          console.info('[animations-reanimated] useStyleEmitter update', {\n            animated,\n            statics,\n            transforms,\n          })\n        }\n      })\n\n      // Store baseConfig in a ref so the exit effect doesn't re-run when config changes\n      const baseConfigRef = useRef(baseConfig)\n      baseConfigRef.current = baseConfig\n\n      // Handle exit animation completion using reanimated's native callback\n      // Animate exitProgress from 0 to 1 during exit, call sendExitComplete on completion\n      React.useEffect(() => {\n        if (!isExiting || !sendExitComplete) return\n\n        // Use ref to get current config without adding to deps\n        const config = baseConfigRef.current\n\n        // Animate exitProgress to 1, which triggers sendExitComplete on completion\n        // Using .set() for React Compiler compatibility\n        if (config.type === 'timing') {\n          exitProgress.set(\n            withTiming(1, config as WithTimingConfig, (finished) => {\n              'worklet'\n              if (finished) {\n                runOnJS(sendExitComplete)()\n              }\n            })\n          )\n        } else {\n          exitProgress.set(\n            withSpring(1, config as WithSpringConfig, (finished) => {\n              'worklet'\n              if (finished) {\n                runOnJS(sendExitComplete)()\n              }\n            })\n          )\n        }\n\n        return () => {\n          // Cancel the exit animation if component unmounts early\n          cancelAnimation(exitProgress)\n        }\n      }, [isExiting, sendExitComplete])\n\n      // Create animated style\n      const animatedStyle = useAnimatedStyle(() => {\n        'worklet'\n\n        if (disableAnimation || isHydrating) {\n          return {}\n        }\n\n        const result: Record<string, any> = {}\n        const config = configRef.get()\n\n        // Check if we have avoidRerenders updates\n        // Using .get() method for concurrent-safe reads in worklets\n        const emitterAnimated = animatedTargetsRef.get()\n        const hasEmitterUpdates = emitterAnimated !== null\n\n        // Use emitter values if available, otherwise use React state values\n        const animatedValues = hasEmitterUpdates ? emitterAnimated! : animatedStyles\n        const staticValues = hasEmitterUpdates ? staticTargetsRef.get()! : {}\n\n        // Include static values from emitter (for hover/press style changes)\n        for (const key in staticValues) {\n          result[key] = staticValues[key]\n        }\n\n        // Animate regular properties\n        for (const key in animatedValues) {\n          if (key === 'transform') continue\n\n          const targetValue = animatedValues[key]\n          const propConfig = config.propertyConfigs[key] ?? config.baseConfig\n          result[key] = applyAnimation(targetValue as number, propConfig)\n        }\n\n        // Handle transforms\n        const transforms = hasEmitterUpdates\n          ? transformTargetsRef.get()\n          : animatedStyles.transform\n\n        // Animate transform properties with validation\n        if (transforms && Array.isArray(transforms)) {\n          const validTransforms: Record<string, unknown>[] = []\n\n          for (const t of transforms) {\n            if (!t) continue\n            const keys = Object.keys(t)\n            if (keys.length === 0) continue\n            const value = t[keys[0]]\n            if (typeof value === 'number' || typeof value === 'string') {\n              const transformKey = Object.keys(t)[0]\n              const targetValue = t[transformKey]\n              const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig\n              validTransforms.push({\n                [transformKey]: applyAnimation(targetValue as number, propConfig),\n              })\n            }\n          }\n\n          if (validTransforms.length > 0) {\n            result.transform = validTransforms\n          }\n        }\n\n        return result\n      }, [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating])\n\n      // Debug logging\n      if (\n        process.env.NODE_ENV === 'development' &&\n        props.debug &&\n        props.debug !== 'profile'\n      ) {\n        console.info('[animations-reanimated] useAnimations', {\n          animationKey,\n          componentState,\n          isExiting,\n          animatedStyles,\n          staticStyles,\n          baseConfig,\n          propertyConfigs,\n        })\n      }\n\n      return {\n        style: [staticStyles, animatedStyle],\n      }\n    },\n  }\n}\n"
   ],
   "version": 3
 }