@rootnative/inertia 0.0.1 → 0.0.3

package/dist/{chunk-DWCLIBYO.mjs → chunk-CSODMRJ7.mjs}

@@ -2,7 +2,8 @@ import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition,
 import { stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-CY7Y64C3.mjs';
 import { createContext, useContext, useMemo, Children, isValidElement, useState, useRef, useCallback, forwardRef, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, cancelAnimation, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native';
 
 var PresenceContext = createContext(null);
 function usePresence() {
@@ -29,6 +30,8 @@ function Presence({ children }) {
     () => /* @__PURE__ */ new Map()
   );
   const prevIncomingRef = useRef(incoming);
+  const orderRef = useRef([]);
+  let pendingExiting = null;
   if (prevIncomingRef.current !== incoming) {
     const prev = prevIncomingRef.current;
     prevIncomingRef.current = incoming;
@@ -50,8 +53,12 @@ function Presence({ children }) {
         ensureMutable().delete(key);
       }
     }
-    if (next) setExiting(next);
+    if (next) {
+      pendingExiting = next;
+      setExiting(next);
+    }
   }
+  const activeExiting = pendingExiting ?? exiting;
   const handleRemove = useCallback((key) => {
     setExiting((prev) => {
       if (!prev.has(key)) return prev;
@@ -60,19 +67,42 @@ function Presence({ children }) {
       return next;
     });
   }, []);
-  const renderList = [];
+  const byKey = /* @__PURE__ */ new Map();
+  const presentKeys = /* @__PURE__ */ new Set();
+  const order = [];
   for (const el of incoming) {
-    renderList.push({
-      key: el.key,
-      element: el,
-      isPresent: true
-    });
+    const key = el.key;
+    byKey.set(key, el);
+    presentKeys.add(key);
+    order.push(key);
   }
-  for (const [key, el] of exiting) {
-    if (!renderList.some((entry) => entry.key === key)) {
-      renderList.push({ key, element: el, isPresent: false });
+  const prevOrder = orderRef.current;
+  for (let i = 0; i < prevOrder.length; i++) {
+    const key = prevOrder[i];
+    const departing = activeExiting.get(key);
+    if (!departing || byKey.has(key)) continue;
+    let insertAt = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const anchor = order.indexOf(prevOrder[j]);
+      if (anchor !== -1) {
+        insertAt = anchor + 1;
+        break;
+      }
     }
+    byKey.set(key, departing);
+    order.splice(insertAt, 0, key);
+  }
+  for (const [key, el] of activeExiting) {
+    if (byKey.has(key)) continue;
+    byKey.set(key, el);
+    order.push(key);
   }
+  orderRef.current = order;
+  const renderList = order.map((key) => ({
+    key,
+    element: byKey.get(key),
+    isPresent: presentKeys.has(key)
+  }));
   return /* @__PURE__ */ jsx(Fragment, { children: renderList.map(({ key, element, isPresent }) => /* @__PURE__ */ jsx(
     PresenceItem,
     {
@@ -124,11 +154,23 @@ function resolveLayoutTransition(layout) {
 var REGISTRY = /* @__PURE__ */ new Map();
 var SHARED_LAYOUT_TTL_MS = 1e3;
 var now = () => Date.now();
+var lastSweep = 0;
+function sweepExpired(at) {
+  if (at - lastSweep < SHARED_LAYOUT_TTL_MS) return;
+  lastSweep = at;
+  for (const [id, entry] of REGISTRY) {
+    if (entry.expiresAt < at) REGISTRY.delete(id);
+  }
+}
 function registerLayout(id, rect) {
-  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+  const at = now();
+  sweepExpired(at);
+  REGISTRY.set(id, { rect, expiresAt: at + SHARED_LAYOUT_TTL_MS });
 }
 function releaseLayout(id, rect) {
-  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+  const at = now();
+  sweepExpired(at);
+  REGISTRY.set(id, { rect, expiresAt: at + SHARED_LAYOUT_TTL_MS });
 }
 function consumeLayout(id) {
   const entry = REGISTRY.get(id);
@@ -389,28 +431,8 @@ function createMotionComponent(Component) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Component
   );
-  const Motion = forwardRef(function Motion2(props, ref) {
-    const {
-      initial,
-      animate,
-      exit,
-      transition: transitionProp,
-      variants,
-      controller,
-      gesture,
-      layout: layoutProp,
-      layoutId,
-      onAnimationEnd,
-      style,
-      onLayout: userOnLayout,
-      ...rest
-    } = props;
-    const namedTransitions = useNamedTransitions();
-    const transition = resolveNamedTransitionProp(
-      transitionProp,
-      namedTransitions
-    );
-    const layout = typeof layoutProp === "string" ? lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+  const PlainHost = forwardRef(function PlainHost2(props, ref) {
+    const { style, ...rest } = props;
     if (__DEV__ && typeof style === "function") {
       throw new Error(
         "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
@@ -418,293 +440,402 @@ function createMotionComponent(Component) {
     }
     const presence = usePresence();
     const isExiting = presence !== null && presence.isPresent === false;
-    const shouldReduceMotion = useShouldReduceMotion();
-    const onAnimationEndRef = useRef(onAnimationEnd);
-    onAnimationEndRef.current = onAnimationEnd;
-    const variantKey = useControllerKey(controller);
-    const resolvedAnimate = resolveAnimateInput(
-      animate,
-      variants,
-      variantKey
+    const safeToRemoveRef = useRef(void 0);
+    safeToRemoveRef.current = presence?.safeToRemove;
+    useEffect(() => {
+      if (isExiting) safeToRemoveRef.current?.();
+    }, [isExiting]);
+    return /* @__PURE__ */ jsx(
+      AnimatedComponent,
+      {
+        ref,
+        ...rest,
+        style
+      }
     );
-    const animateRecord = resolvedAnimate ?? {};
-    const initialRecord = initial && initial !== false ? initial : void 0;
-    const exitRecord = exit ? exit : void 0;
-    const [pressed, setPressed] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const [hovered, setHovered] = useState(false);
-    const touched = /* @__PURE__ */ new Set();
-    collectTouchedKeys(touched, animateRecord);
-    if (initialRecord) collectTouchedKeys(touched, initialRecord);
-    if (variants) {
-      for (const variant of Object.values(variants)) {
-        if (!variant) continue;
-        collectTouchedKeys(touched, variant);
+  });
+  PlainHost.displayName = `MotionPlain(${Component.displayName ?? Component.name ?? "Component"})`;
+  const MotionAnimated = forwardRef(
+    function MotionAnimated2(props, ref) {
+      const {
+        initial,
+        animate,
+        exit,
+        transition: transitionProp,
+        variants,
+        controller,
+        gesture,
+        layout: layoutProp,
+        layoutId,
+        onAnimationEnd,
+        style,
+        onLayout: userOnLayout,
+        ...rest
+      } = props;
+      const namedTransitions = useNamedTransitions();
+      const transition = resolveNamedTransitionProp(
+        transitionProp,
+        namedTransitions
+      );
+      const layout = typeof layoutProp === "string" ? lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+      if (__DEV__ && typeof style === "function") {
+        throw new Error(
+          "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
+        );
       }
-    }
-    if (gesture) {
-      for (const subState of [
-        gesture.pressed,
-        gesture.focused,
-        gesture.focusVisible,
-        gesture.hovered
-      ]) {
-        if (!subState) continue;
-        collectTouchedKeys(touched, subState);
+      const presence = usePresence();
+      const isExiting = presence !== null && presence.isPresent === false;
+      const shouldReduceMotion = useShouldReduceMotion();
+      const onAnimationEndRef = useRef(onAnimationEnd);
+      onAnimationEndRef.current = onAnimationEnd;
+      const variantKey = useControllerKey(controller);
+      const resolvedAnimate = resolveAnimateInput(
+        animate,
+        variants,
+        variantKey
+      );
+      const animateRecord = resolvedAnimate ?? {};
+      const initialRecord = initial && initial !== false ? initial : void 0;
+      const exitRecord = exit ? exit : void 0;
+      const [pressed, setPressed] = useState(false);
+      const [focused, setFocused] = useState(false);
+      const [focusVisible, setFocusVisible] = useState(false);
+      const [hovered, setHovered] = useState(false);
+      const touched = /* @__PURE__ */ new Set();
+      collectTouchedKeys(touched, animateRecord);
+      if (initialRecord) collectTouchedKeys(touched, initialRecord);
+      if (variants) {
+        for (const variant of Object.values(variants)) {
+          if (!variant) continue;
+          collectTouchedKeys(touched, variant);
+        }
       }
-    }
-    if (exitRecord) collectTouchedKeys(touched, exitRecord);
-    const activeKeysRef = useRef(null);
-    const hasTransformRef = useRef(false);
-    const hasShadowOffsetRef = useRef(false);
-    const prevActive = activeKeysRef.current;
-    let grew = prevActive === null;
-    if (!grew && prevActive) {
-      for (const k of touched) {
-        if (!prevActive.includes(k)) {
-          grew = true;
-          break;
+      if (gesture) {
+        for (const subState of [
+          gesture.pressed,
+          gesture.focused,
+          gesture.focusVisible,
+          gesture.hovered
+        ]) {
+          if (!subState) continue;
+          collectTouchedKeys(touched, subState);
         }
       }
-    }
-    if (grew) {
-      const merged = new Set(prevActive ?? []);
-      for (const k of touched) merged.add(k);
-      activeKeysRef.current = ALL_KEYS.filter((k) => merged.has(k));
-      hasTransformRef.current = activeKeysRef.current.some(
-        (k) => TRANSFORM_KEY_SET.has(k)
-      );
-      hasShadowOffsetRef.current = activeKeysRef.current.some(
-        (k) => SHADOW_OFFSET_KEY_SET.has(k)
-      );
-    }
-    const sharedValues = useAnimatableSharedValues((key) => {
-      if (SHADOW_OFFSET_KEY_SET.has(key)) {
-        const axis = shadowOffsetAxisFor(key);
-        if (initial === false) {
-          return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
+      if (exitRecord) collectTouchedKeys(touched, exitRecord);
+      const activeKeysRef = useRef(null);
+      const hasTransformRef = useRef(false);
+      const hasShadowOffsetRef = useRef(false);
+      const prevActive = activeKeysRef.current;
+      let grew = prevActive === null;
+      if (!grew && prevActive) {
+        for (const k of touched) {
+          if (!prevActive.includes(k)) {
+            grew = true;
+            break;
+          }
         }
-        return shadowOffsetAxisValue(
-          initialRecord?.shadowOffset,
-          axis
-        ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
       }
-      if (initial === false) {
-        const a = animateRecord[key];
-        return restValue(a) ?? DEFAULT_RESTING[key];
+      if (grew) {
+        const merged = new Set(prevActive ?? []);
+        for (const k of touched) merged.add(k);
+        activeKeysRef.current = ALL_KEYS.filter((k) => merged.has(k));
+        hasTransformRef.current = activeKeysRef.current.some(
+          (k) => TRANSFORM_KEY_SET.has(k)
+        );
+        hasShadowOffsetRef.current = activeKeysRef.current.some(
+          (k) => SHADOW_OFFSET_KEY_SET.has(k)
+        );
       }
-      return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? DEFAULT_RESTING[key];
-    });
-    const pressedProgress = useSharedValue(0);
-    const focusedProgress = useSharedValue(0);
-    const focusVisibleProgress = useSharedValue(0);
-    const hoveredProgress = useSharedValue(0);
-    const gestureSV = useSharedValue(
-      resolveGestureLayers(gesture)
-    );
-    const gestureTargetsSig = stableSig(gesture);
-    useEffect(() => {
-      gestureSV.value = resolveGestureLayers(gesture);
-    }, [gestureTargetsSig]);
-    const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-    const baseSig = stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-    const transitionSig = stableSig(transition);
-    const safeToRemoveRef = useRef(void 0);
-    safeToRemoveRef.current = presence?.safeToRemove;
-    useEffect(() => {
-      if (isExiting && (!exitRecord || Object.keys(exitRecord).length === 0)) {
-        safeToRemoveRef.current?.();
-        return;
+      const drivenNow = /* @__PURE__ */ new Set();
+      collectTouchedKeys(drivenNow, animateRecord);
+      if (initialRecord) collectTouchedKeys(drivenNow, initialRecord);
+      if (isExiting && exitRecord) collectTouchedKeys(drivenNow, exitRecord);
+      const everDrivenRef = useRef(/* @__PURE__ */ new Set());
+      for (const k of drivenNow) everDrivenRef.current.add(k);
+      const activeKeys = activeKeysRef.current;
+      const everDriven = everDrivenRef.current;
+      const styleResting = {};
+      if (activeKeys.some((k) => !everDriven.has(k))) {
+        const flat = StyleSheet.flatten(style);
+        if (flat) {
+          for (const key of activeKeys) {
+            if (everDriven.has(key)) continue;
+            const v = styleValueFor(flat, key);
+            if (v !== void 0) styleResting[key] = v;
+          }
+        }
       }
-      let pending = 0;
-      let done = false;
-      const onSettle = () => {
-        if (done) return;
-        pending--;
-        if (pending <= 0) {
-          done = true;
-          if (isExiting) safeToRemoveRef.current?.();
+      const sharedValues = useAnimatableSharedValues((key) => {
+        if (SHADOW_OFFSET_KEY_SET.has(key)) {
+          const axis = shadowOffsetAxisFor(key);
+          if (initial === false) {
+            return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          }
+          return shadowOffsetAxisValue(
+            initialRecord?.shadowOffset,
+            axis
+          ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? styleResting[key] ?? DEFAULT_RESTING[key];
         }
-      };
-      let transformPending = 0;
-      for (const k of ALL_KEYS) {
-        if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
-          transformPending++;
+        if (initial === false) {
+          const a = animateRecord[key];
+          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
         }
-      }
-      const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
-      for (const key of ALL_KEYS) {
-        const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
-          baseRecord.shadowOffset,
-          shadowOffsetAxisFor(key)
-        ) : baseRecord[key];
-        if (target === void 0) continue;
-        const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
+        return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+      });
+      const styleRestingSig = stableSig(styleResting);
+      useEffect(() => {
+        for (const key of activeKeysRef.current) {
+          if (everDrivenRef.current.has(key)) continue;
+          sharedValues[key].value = styleResting[key] ?? DEFAULT_RESTING[key];
+        }
+      }, [styleRestingSig]);
+      const pressedProgress = useSharedValue(0);
+      const focusedProgress = useSharedValue(0);
+      const focusVisibleProgress = useSharedValue(0);
+      const hoveredProgress = useSharedValue(0);
+      useEffect(
+        () => () => {
+          cancelAnimation(pressedProgress);
+          cancelAnimation(focusedProgress);
+          cancelAnimation(focusVisibleProgress);
+          cancelAnimation(hoveredProgress);
+        },
+        // The progress SVs are identity-stable per hook instance.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+      );
+      const gestureSV = useSharedValue(
+        resolveGestureLayers(gesture)
+      );
+      const gestureTargetsSig = stableSig(gesture);
+      useEffect(() => {
+        gestureSV.value = resolveGestureLayers(gesture);
+      }, [gestureTargetsSig]);
+      const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
+      const baseSig = stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+      const transitionSig = stableSig(transition);
+      const safeToRemoveRef = useRef(void 0);
+      safeToRemoveRef.current = presence?.safeToRemove;
+      useEffect(() => {
+        if (isExiting && (!exitRecord || Object.keys(exitRecord).length === 0)) {
+          safeToRemoveRef.current?.();
+          return;
+        }
+        let pending = 0;
+        let done = false;
+        const onSettle = () => {
+          if (done) return;
+          pending--;
+          if (pending <= 0) {
+            done = true;
+            if (isExiting) safeToRemoveRef.current?.();
+          }
+        };
+        const configFor = (key) => shouldReduceMotion ? { type: "no-animation" } : transitionFor(
           SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
           transition
         );
-        if (isExiting) pending++;
-        const factory = makeKeyCallbackFactory(
-          key,
-          sharedValues[key],
-          targetEndValue(target),
-          onAnimationEndRef,
-          {
-            stepCount: stepCountOf(target),
-            totalIterations: totalIterationsOf(cfg)
-          },
-          isExiting ? onSettle : void 0,
-          TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
-        );
-        sharedValues[key].value = resolveAnimatableValue(
-          target,
-          cfg,
-          factory
-        );
-      }
-      if (isExiting && pending === 0) {
-        safeToRemoveRef.current?.();
-      }
-    }, [baseSig, transitionSig]);
-    useGestureLayerProgress(
-      pressedProgress,
-      pressed,
-      gesture?.pressed != null,
-      "pressed",
-      transition,
-      isExiting,
-      shouldReduceMotion
-    );
-    useGestureLayerProgress(
-      focusedProgress,
-      focused,
-      gesture?.focused != null,
-      "focused",
-      transition,
-      isExiting,
-      shouldReduceMotion
-    );
-    useGestureLayerProgress(
-      focusVisibleProgress,
-      focusVisible,
-      gesture?.focusVisible != null,
-      "focusVisible",
-      transition,
-      isExiting,
-      shouldReduceMotion
-    );
-    useGestureLayerProgress(
-      hoveredProgress,
-      hovered,
-      gesture?.hovered != null,
-      "hovered",
-      transition,
-      isExiting,
-      shouldReduceMotion
-    );
-    const sharedLayout = useSharedLayout({
-      layoutId,
-      userRef: ref,
-      transition: isTopLevelTransition(transition) ? transition : void 0,
-      shouldReduceMotion,
-      userOnLayout
-    });
-    const flip = sharedLayout.flip;
-    const hasLayoutId = layoutId !== void 0;
-    const animatedStyle = useAnimatedStyle(() => {
-      const activeKeys = activeKeysRef.current;
-      const hasTransform = hasTransformRef.current;
-      const hasShadowOffset = hasShadowOffsetRef.current;
-      const out = {};
-      const transform = [];
-      let shadowOffsetW = 0;
-      let shadowOffsetH = 0;
-      const ph = hoveredProgress.value;
-      const pf = focusedProgress.value;
-      const pfv = focusVisibleProgress.value;
-      const pp = pressedProgress.value;
-      const layers = gestureSV.value;
-      const hoveredLayer = layers ? layers.hovered : null;
-      const focusedLayer = layers ? layers.focused : null;
-      const focusVisibleLayer = layers ? layers.focusVisible : null;
-      const pressedLayer = layers ? layers.pressed : null;
-      for (const key of activeKeys) {
-        let v = sharedValues[key].value;
-        const isColor = COLOR_KEY_SET.has(key);
-        if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
-          const t = hoveredLayer[key];
-          v = isColor ? interpolateColor(ph, [0, 1], [v, t]) : v + (t - v) * ph;
+        let transformPending = 0;
+        for (const k of ALL_KEYS) {
+          if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === void 0) continue;
+          if (!reachesTerminalPhase(configFor(k))) continue;
+          transformPending++;
         }
-        if (focusedLayer && pf > 0 && focusedLayer[key] !== void 0) {
-          const t = focusedLayer[key];
-          v = isColor ? interpolateColor(pf, [0, 1], [v, t]) : v + (t - v) * pf;
+        const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
+        for (const key of ALL_KEYS) {
+          const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
+            baseRecord.shadowOffset,
+            shadowOffsetAxisFor(key)
+          ) : baseRecord[key];
+          if (target === void 0) continue;
+          const cfg = configFor(key);
+          if (isExiting && reachesTerminalPhase(cfg)) pending++;
+          const factory = makeKeyCallbackFactory(
+            key,
+            sharedValues[key],
+            targetEndValue(target),
+            onAnimationEndRef,
+            {
+              stepCount: stepCountOf(target),
+              totalIterations: totalIterationsOf(cfg)
+            },
+            isExiting ? onSettle : void 0,
+            TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
+          );
+          sharedValues[key].value = resolveAnimatableValue(
+            target,
+            cfg,
+            factory
+          );
         }
-        if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
-          const t = focusVisibleLayer[key];
-          v = isColor ? interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
+        if (isExiting && pending === 0) {
+          safeToRemoveRef.current?.();
         }
-        if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
-          const t = pressedLayer[key];
-          v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
+      }, [baseSig, transitionSig]);
+      useGestureLayerProgress(
+        pressedProgress,
+        pressed,
+        gesture?.pressed != null,
+        "pressed",
+        transition,
+        isExiting,
+        shouldReduceMotion
+      );
+      useGestureLayerProgress(
+        focusedProgress,
+        focused,
+        gesture?.focused != null,
+        "focused",
+        transition,
+        isExiting,
+        shouldReduceMotion
+      );
+      useGestureLayerProgress(
+        focusVisibleProgress,
+        focusVisible,
+        gesture?.focusVisible != null,
+        "focusVisible",
+        transition,
+        isExiting,
+        shouldReduceMotion
+      );
+      useGestureLayerProgress(
+        hoveredProgress,
+        hovered,
+        gesture?.hovered != null,
+        "hovered",
+        transition,
+        isExiting,
+        shouldReduceMotion
+      );
+      const sharedLayout = useSharedLayout({
+        layoutId,
+        userRef: ref,
+        transition: isTopLevelTransition(transition) ? transition : void 0,
+        shouldReduceMotion,
+        userOnLayout
+      });
+      const flip = sharedLayout.flip;
+      const hasLayoutId = layoutId !== void 0;
+      const animatedStyle = useAnimatedStyle(() => {
+        const activeKeys2 = activeKeysRef.current;
+        const hasTransform = hasTransformRef.current;
+        const hasShadowOffset = hasShadowOffsetRef.current;
+        const out = {};
+        const transform = [];
+        let shadowOffsetW = 0;
+        let shadowOffsetH = 0;
+        const ph = hoveredProgress.value;
+        const pf = focusedProgress.value;
+        const pfv = focusVisibleProgress.value;
+        const pp = pressedProgress.value;
+        const layers = gestureSV.value;
+        const hoveredLayer = layers ? layers.hovered : null;
+        const focusedLayer = layers ? layers.focused : null;
+        const focusVisibleLayer = layers ? layers.focusVisible : null;
+        const pressedLayer = layers ? layers.pressed : null;
+        for (const key of activeKeys2) {
+          let v = sharedValues[key].value;
+          const isColor = COLOR_KEY_SET.has(key);
+          if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
+            const t = hoveredLayer[key];
+            v = isColor ? interpolateColor(ph, [0, 1], [v, t]) : v + (t - v) * ph;
+          }
+          if (focusedLayer && pf > 0 && focusedLayer[key] !== void 0) {
+            const t = focusedLayer[key];
+            v = isColor ? interpolateColor(pf, [0, 1], [v, t]) : v + (t - v) * pf;
+          }
+          if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
+            const t = focusVisibleLayer[key];
+            v = isColor ? interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
+          }
+          if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
+            const t = pressedLayer[key];
+            v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
+          }
+          if (TRANSFORM_KEY_SET.has(key)) {
+            transform.push(
+              ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
+            );
+          } else if (key === "shadowOffsetWidth") {
+            shadowOffsetW = v;
+          } else if (key === "shadowOffsetHeight") {
+            shadowOffsetH = v;
+          } else {
+            out[key] = v;
+          }
         }
-        if (TRANSFORM_KEY_SET.has(key)) {
-          transform.push(
-            ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
-          );
-        } else if (key === "shadowOffsetWidth") {
-          shadowOffsetW = v;
-        } else if (key === "shadowOffsetHeight") {
-          shadowOffsetH = v;
-        } else {
-          out[key] = v;
+        if (hasLayoutId) {
+          transform.push({ translateX: flip.dx.value });
+          transform.push({ translateY: flip.dy.value });
+          transform.push({ scaleX: flip.sx.value });
+          transform.push({ scaleY: flip.sy.value });
         }
-      }
-      if (hasLayoutId) {
-        transform.push({ translateX: flip.dx.value });
-        transform.push({ translateY: flip.dy.value });
-        transform.push({ scaleX: flip.sx.value });
-        transform.push({ scaleY: flip.sy.value });
-      }
-      if (hasTransform || hasLayoutId) out.transform = transform;
-      if (hasShadowOffset) {
-        out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
-      }
-      return out;
-    });
-    const mergedStyle = useMemo(
-      () => isExiting ? [style, animatedStyle, EXITING_POINTER_EVENTS_STYLE] : [style, animatedStyle],
-      [style, animatedStyle, isExiting]
-    );
-    const gestureHandlers = useGestureHandlers(
-      gesture,
-      rest,
-      setPressed,
-      setFocused,
-      setFocusVisible,
-      setHovered
-    );
-    const layoutSig = stableSig(layout);
-    const layoutTransition = useMemo(
-      () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [layoutSig, shouldReduceMotion]
-    );
-    return /* @__PURE__ */ jsx(
-      AnimatedComponent,
-      {
-        ref: sharedLayout.setRef,
-        ...rest,
-        ...gestureHandlers,
-        onLayout: sharedLayout.onLayout,
-        layout: layoutTransition,
-        style: mergedStyle
-      }
-    );
+        if (hasTransform || hasLayoutId) out.transform = transform;
+        if (hasShadowOffset) {
+          out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
+        }
+        return out;
+      });
+      const mergedStyle = useMemo(
+        () => isExiting ? [style, animatedStyle, EXITING_POINTER_EVENTS_STYLE] : [style, animatedStyle],
+        [style, animatedStyle, isExiting]
+      );
+      const gestureHandlers = useGestureHandlers(
+        gesture,
+        rest,
+        setPressed,
+        setFocused,
+        setFocusVisible,
+        setHovered
+      );
+      const layoutSig = stableSig(layout);
+      const layoutTransition = useMemo(
+        () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [layoutSig, shouldReduceMotion]
+      );
+      return /* @__PURE__ */ jsx(
+        AnimatedComponent,
+        {
+          ref: sharedLayout.setRef,
+          ...rest,
+          ...gestureHandlers,
+          onLayout: sharedLayout.onLayout,
+          layout: layoutTransition,
+          style: mergedStyle
+        }
+      );
+    }
+  );
+  MotionAnimated.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
+  const Motion = forwardRef(function Motion2(props, ref) {
+    if (hasMotionProps(props)) {
+      return /* @__PURE__ */ jsx(MotionAnimated, { ref, ...props });
+    }
+    return /* @__PURE__ */ jsx(PlainHost, { ref, ...props });
   });
   Motion.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
   return Motion;
 }
+var MOTION_PROP_KEYS = [
+  "initial",
+  "animate",
+  "exit",
+  "transition",
+  "variants",
+  "controller",
+  "gesture",
+  "layout",
+  "layoutId",
+  "onAnimationEnd"
+];
+function hasMotionProps(props) {
+  for (const key of MOTION_PROP_KEYS) {
+    if (props[key] !== void 0) return true;
+  }
+  return false;
+}
 function useAnimatableSharedValues(init) {
   const translateX = useSharedValue(init("translateX"));
   const translateY = useSharedValue(init("translateY"));
@@ -761,6 +892,17 @@ function useAnimatableSharedValues(init) {
       shadowOffsetHeight
     };
   }
+  const map = ref.current;
+  useEffect(
+    () => () => {
+      for (const key in map) {
+        cancelAnimation(map[key]);
+      }
+    },
+    // `map` is identity-stable per hook instance.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return ref.current;
 }
 function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, meta, onSettle, transformGroup) {
@@ -832,6 +974,40 @@ function shadowOffsetAxisFor(key) {
 function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
+function styleValueFor(flat, key) {
+  if (SHADOW_OFFSET_KEY_SET.has(key)) {
+    return shadowOffsetAxisValue(
+      flat.shadowOffset,
+      shadowOffsetAxisFor(key)
+    );
+  }
+  if (TRANSFORM_KEY_SET.has(key)) {
+    const list = flat.transform;
+    if (!Array.isArray(list)) return void 0;
+    for (const entry of list) {
+      if (!entry || typeof entry !== "object") continue;
+      const v2 = entry[key];
+      if (v2 === void 0) continue;
+      if (ROTATION_KEYS.has(key)) return parseAngleDegrees(v2);
+      return typeof v2 === "number" ? v2 : void 0;
+    }
+    return void 0;
+  }
+  const v = flat[key];
+  if (COLOR_KEY_SET.has(key)) {
+    return typeof v === "string" || typeof v === "number" ? v : void 0;
+  }
+  return typeof v === "number" ? v : void 0;
+}
+function parseAngleDegrees(v) {
+  if (typeof v === "number") return v;
+  if (typeof v !== "string") return void 0;
+  const deg = /^(-?\d*\.?\d+)deg$/.exec(v);
+  if (deg) return Number(deg[1]);
+  const rad = /^(-?\d*\.?\d+)rad$/.exec(v);
+  if (rad) return Number(rad[1]) * 180 / Math.PI;
+  return void 0;
+}
 function collectTouchedKeys(touched, record) {
   for (const k of ALL_KEYS) {
     if (k in record) touched.add(k);
@@ -855,6 +1031,9 @@ function totalIterationsOf(cfg) {
   if (r.count === "infinite") return Number.POSITIVE_INFINITY;
   return r.count;
 }
+function reachesTerminalPhase(cfg) {
+  return Number.isFinite(totalIterationsOf(cfg));
+}
 function targetEndValue(v) {
   if (v === void 0) return void 0;
   if (typeof v === "number" || typeof v === "string") return v;