@onlynative/inertia 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/index.mjs

@@ -1,9 +1,14 @@
 import { Image, Pressable, ScrollView, Text, View, Platform } from 'react-native';
 import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, Children, isValidElement, useCallback } from 'react';
-import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withSequence, runOnJS, withRepeat, withDelay, withDecay, withTiming, Easing, withSpring, isWorkletFunction } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, useReducedMotion, withSequence, runOnJS, withRepeat, withDelay, withDecay, withTiming, Easing, withSpring, isWorkletFunction } from 'react-native-reanimated';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-// src/motion/Image.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var DEFAULT_MOTION_CONFIG = {
   reducedMotion: "user"
 };
@@ -279,6 +284,40 @@ function mergeTransition(base, override) {
   }
   return { ...base ?? { type: "spring" }, ...override };
 }
+
+// src/motion/installCheck.ts
+var alreadyChecked = false;
+function ensureReanimatedInstalled() {
+  if (!__DEV__ || alreadyChecked) return;
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "test") {
+    return;
+  }
+  alreadyChecked = true;
+  let version;
+  try {
+    const pkg = __require("react-native-reanimated/package.json");
+    version = pkg.version;
+  } catch {
+  }
+  if (version) {
+    const major = parseInt(version.split(".")[0] ?? "0", 10);
+    if (major < 4) {
+      console.error(
+        `[inertia] react-native-reanimated v${version} is installed, but @onlynative/inertia requires v4.0.0 or later. Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`
+      );
+      return;
+    }
+  }
+  const probe = function probe2() {
+    "worklet";
+    return 0;
+  };
+  if (typeof probe.__workletHash !== "number") {
+    console.error(
+      `[inertia] The Reanimated worklets babel plugin is not configured. Add \`'react-native-worklets/plugin'\` as the LAST entry in the \`plugins\` array of your \`babel.config.js\`, then restart Metro with a fresh cache: \`npx expo start -c\` or \`npx react-native start --reset-cache\`.`
+    );
+  }
+}
 var TRANSFORM_KEYS = [
   "translateX",
   "translateY",
@@ -305,6 +344,14 @@ var ALL_KEYS = [
   ...COLOR_KEYS
 ];
 var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
+var COLOR_KEY_SET = new Set(COLOR_KEYS);
+var GESTURE_LAYER_NAMES = [
+  "hovered",
+  "focused",
+  "focusVisible",
+  "pressed"
+];
+var GESTURE_LAYER_NAME_SET = new Set(GESTURE_LAYER_NAMES);
 var EXITING_POINTER_EVENTS_STYLE = { pointerEvents: "none" };
 var DEFAULT_RESTING = {
   translateX: 0,
@@ -350,10 +397,18 @@ function isTopLevelTransition(t) {
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
   if (isTopLevelTransition(transition)) return transition;
+  if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
   return transition[prop];
 }
+function gestureLayerTransitionFor(layer, transition) {
+  if (!transition) return void 0;
+  if (isTopLevelTransition(transition)) return transition;
+  return transition[layer];
+}
 function createMotionComponent(Component) {
+  ensureReanimatedInstalled();
   const AnimatedComponent = Animated.createAnimatedComponent(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Component
   );
   const Motion2 = forwardRef(function Motion3(props, ref) {
@@ -432,13 +487,19 @@ function createMotionComponent(Component) {
       }
       return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? DEFAULT_RESTING[key];
     });
-    const mergedRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : mergeGestureTargets(animateRecord, gesture, {
-      pressed,
-      focused,
-      focusVisible,
-      hovered
-    });
-    const mergedSig = stableSig(mergedRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+    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;
@@ -459,13 +520,13 @@ function createMotionComponent(Component) {
       };
       let transformPending = 0;
       for (const k of ALL_KEYS) {
-        if (TRANSFORM_KEY_SET.has(k) && mergedRecord[k] !== void 0) {
+        if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
           transformPending++;
         }
       }
       const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
       for (const key of ALL_KEYS) {
-        const target = mergedRecord[key];
+        const target = baseRecord[key];
         if (target === void 0) continue;
         const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(key, transition);
         if (isExiting) pending++;
@@ -490,14 +551,76 @@ function createMotionComponent(Component) {
       if (isExiting && pending === 0) {
         safeToRemoveRef.current?.();
       }
-    }, [mergedSig, transitionSig]);
+    }, [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 animatedStyle = useAnimatedStyle(() => {
       const activeKeys = activeKeysRef.current;
       const hasTransform = hasTransformRef.current;
       const out = {};
       const transform = [];
+      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) {
-        const v = sharedValues[key].value;
+        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(
             key === "rotate" ? { rotate: `${v}deg` } : { [key]: v }
@@ -716,52 +839,41 @@ function stableStringify(v) {
   const keys = Object.keys(obj).sort();
   return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
 }
-function mergeGestureTargets(base, gesture, active) {
-  if (!gesture) return base;
-  const merged = {
-    ...base
-  };
-  const subStates = [
-    gesture.hovered,
-    gesture.focused,
-    gesture.focusVisible,
-    gesture.pressed
-  ];
-  for (const sub of subStates) {
-    if (!sub) continue;
-    for (const k of ALL_KEYS) {
-      if (k in sub && !(k in merged)) {
-        merged[k] = DEFAULT_RESTING[k];
-      }
+function resolveGestureLayers(gesture) {
+  if (!gesture) return null;
+  const out = {};
+  for (const layer of GESTURE_LAYER_NAMES) {
+    const subState = gesture[layer];
+    if (!subState) continue;
+    const resolved = {};
+    for (const key of ALL_KEYS) {
+      const raw = subState[key];
+      if (raw === void 0) continue;
+      const t = targetEndValue(raw);
+      if (t !== void 0) resolved[key] = t;
     }
+    out[layer] = resolved;
   }
-  if (active.hovered && gesture.hovered) {
-    Object.assign(
-      merged,
-      gesture.hovered
-    );
-  }
-  if (active.focused && gesture.focused) {
-    Object.assign(
-      merged,
-      gesture.focused
-    );
-  }
-  if (active.focusVisible && gesture.focusVisible) {
-    Object.assign(
-      merged,
-      gesture.focusVisible
-    );
-  }
-  if (active.pressed && gesture.pressed) {
-    Object.assign(
-      merged,
-      gesture.pressed
-    );
-  }
-  return merged;
+  return out;
+}
+function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
+  const layerCfgSig = stableSig(gestureLayerTransitionFor(layer, transition));
+  useEffect(() => {
+    if (!declared) return;
+    if (isExiting) {
+      progress.value = 0;
+      return;
+    }
+    const target = active ? 1 : 0;
+    const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
+    progress.value = resolveTransition(cfg, target);
+  }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
+  const hasPressed = gesture?.pressed ? 1 : 0;
+  const hasFocused = gesture?.focused ? 1 : 0;
+  const hasFocusVisible = gesture?.focusVisible ? 1 : 0;
+  const hasHovered = gesture?.hovered ? 1 : 0;
   return useMemo(() => {
     if (!gesture) return {};
     const handlers = {};
@@ -794,10 +906,10 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
     }
     return handlers;
   }, [
-    gesture?.pressed ? 1 : 0,
-    gesture?.focused ? 1 : 0,
-    gesture?.focusVisible ? 1 : 0,
-    gesture?.hovered ? 1 : 0,
+    hasPressed,
+    hasFocused,
+    hasFocusVisible,
+    hasHovered,
     rest.onTouchStart,
     rest.onTouchEnd,
     rest.onTouchCancel,