@rootnative/inertia 0.0.0-alpha.7 → 0.0.2

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

@@ -2,7 +2,7 @@ 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';
 
 var PresenceContext = createContext(null);
 function usePresence() {
@@ -389,28 +389,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 +398,375 @@ 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 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 (gesture) {
-      for (const subState of [
-        gesture.pressed,
-        gesture.focused,
-        gesture.focusVisible,
-        gesture.hovered
-      ]) {
-        if (!subState) continue;
-        collectTouchedKeys(touched, subState);
-      }
-    }
-    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;
-        }
+    const safeToRemoveRef = useRef(void 0);
+    safeToRemoveRef.current = presence?.safeToRemove;
+    useEffect(() => {
+      if (isExiting) safeToRemoveRef.current?.();
+    }, [isExiting]);
+    return /* @__PURE__ */ jsx(
+      AnimatedComponent,
+      {
+        ref,
+        ...rest,
+        style
       }
-    }
-    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)
+    );
+  });
+  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
       );
-      hasShadowOffsetRef.current = activeKeysRef.current.some(
-        (k) => SHADOW_OFFSET_KEY_SET.has(k)
+      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."
+        );
+      }
+      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 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];
+      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);
         }
-        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];
-      }
-      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;
       }
-      let pending = 0;
-      let done = false;
-      const onSettle = () => {
-        if (done) return;
-        pending--;
-        if (pending <= 0) {
-          done = true;
-          if (isExiting) safeToRemoveRef.current?.();
+      if (gesture) {
+        for (const subState of [
+          gesture.pressed,
+          gesture.focused,
+          gesture.focusVisible,
+          gesture.hovered
+        ]) {
+          if (!subState) continue;
+          collectTouchedKeys(touched, subState);
         }
-      };
-      let transformPending = 0;
-      for (const k of ALL_KEYS) {
-        if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
-          transformPending++;
+      }
+      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;
+          }
         }
       }
-      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(
-          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
+      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)
         );
-        sharedValues[key].value = resolveAnimatableValue(
-          target,
-          cfg,
-          factory
+        hasShadowOffsetRef.current = activeKeysRef.current.some(
+          (k) => SHADOW_OFFSET_KEY_SET.has(k)
         );
       }
-      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;
+      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];
+          }
+          return shadowOffsetAxisValue(
+            initialRecord?.shadowOffset,
+            axis
+          ) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
         }
-        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 (initial === false) {
+          const a = animateRecord[key];
+          return restValue(a) ?? DEFAULT_RESTING[key];
         }
-        if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
-          const t = focusVisibleLayer[key];
-          v = isColor ? interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
+        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);
+      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;
         }
-        if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
-          const t = pressedLayer[key];
-          v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
+        let pending = 0;
+        let done = false;
+        const onSettle = () => {
+          if (done) return;
+          pending--;
+          if (pending <= 0) {
+            done = true;
+            if (isExiting) safeToRemoveRef.current?.();
+          }
+        };
+        let transformPending = 0;
+        for (const k of ALL_KEYS) {
+          if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
+            transformPending++;
+          }
         }
-        if (TRANSFORM_KEY_SET.has(key)) {
-          transform.push(
-            ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
+        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(
+            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
           );
-        } 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 (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 (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;
+          }
+          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 (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
+        }
+      );
+    }
+  );
+  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 +823,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) {