@rootnative/inertia 0.0.0-alpha.0

package/dist/motion/ScrollView.mjs

@@ -0,0 +1,1132 @@
+import { ScrollView, Platform } from 'react-native';
+import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, useCallback } from 'react';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, reanimatedVersion, useReducedMotion, withSequence, LinearTransition, runOnJS, withRepeat, withTiming, withSpring, withDelay, withDecay, Easing } from 'react-native-reanimated';
+import { isWorkletFunction } from 'react-native-worklets';
+import { jsx } from 'react/jsx-runtime';
+
+// src/motion/ScrollView.tsx
+var DEFAULT_MOTION_CONFIG = {
+  reducedMotion: "user"
+};
+var MotionConfigContext = createContext(
+  DEFAULT_MOTION_CONFIG
+);
+function useMotionConfig() {
+  return useContext(MotionConfigContext);
+}
+function useShouldReduceMotion() {
+  const { reducedMotion } = useMotionConfig();
+  const osReduced = useReducedMotion();
+  if (reducedMotion === "never") return false;
+  if (reducedMotion === "always") return true;
+  return osReduced;
+}
+var modality = "keyboard";
+var installed = false;
+function setKeyboard() {
+  modality = "keyboard";
+}
+function setPointer() {
+  modality = "pointer";
+}
+function ensureInstalled() {
+  if (installed) return;
+  if (Platform.OS !== "web") return;
+  if (typeof document === "undefined") return;
+  document.addEventListener("keydown", setKeyboard, true);
+  document.addEventListener("mousedown", setPointer, true);
+  document.addEventListener("pointerdown", setPointer, true);
+  document.addEventListener("touchstart", setPointer, true);
+  installed = true;
+}
+function isFocusVisible() {
+  if (Platform.OS !== "web") return true;
+  ensureInstalled();
+  return modality === "keyboard";
+}
+function ensureWorkletEasing(easing) {
+  if (!easing) return void 0;
+  const fn = isEasingFactory(easing) ? easing.factory() : easing;
+  if (isWorkletFunction(fn)) return fn;
+  const wrapped = (t) => {
+    "worklet";
+    return fn(t);
+  };
+  return wrapped;
+}
+function isEasingFactory(value) {
+  return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
+}
+
+// src/transitions/spring.ts
+var DEFAULT_SPRING = {
+  tension: 170,
+  friction: 26,
+  mass: 1
+};
+function springToReanimated(t) {
+  "worklet";
+  return {
+    stiffness: t.tension ?? DEFAULT_SPRING.tension,
+    damping: t.friction ?? DEFAULT_SPRING.friction,
+    mass: t.mass ?? DEFAULT_SPRING.mass,
+    velocity: t.velocity,
+    restSpeedThreshold: t.restSpeedThreshold,
+    restDisplacementThreshold: t.restDisplacementThreshold
+  };
+}
+
+// src/layout/resolveLayout.ts
+function resolveLayoutTransition(layout) {
+  if (!layout) return void 0;
+  const cfg = layout === true ? { type: "spring" } : layout;
+  if (cfg.type === "no-animation") return void 0;
+  if (cfg.type === "timing") {
+    let builder2 = LinearTransition.duration(cfg.duration ?? 300);
+    const easing = ensureWorkletEasing(cfg.easing);
+    if (easing) builder2 = builder2.easing(easing);
+    if (cfg.delay) builder2 = builder2.delay(cfg.delay);
+    return builder2;
+  }
+  const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
+  const { stiffness, damping, mass } = springToReanimated({
+    ...DEFAULT_SPRING,
+    ...spring
+  });
+  let builder = LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
+  if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
+  return builder;
+}
+
+// src/layout/sharedRegistry.ts
+var REGISTRY = /* @__PURE__ */ new Map();
+var SHARED_LAYOUT_TTL_MS = 1e3;
+var now = () => Date.now();
+function registerLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function releaseLayout(id, rect) {
+  REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
+}
+function consumeLayout(id) {
+  const entry = REGISTRY.get(id);
+  if (!entry) return void 0;
+  REGISTRY.delete(id);
+  if (entry.expiresAt < now()) return void 0;
+  return entry.rect;
+}
+function useSharedLayout(options) {
+  const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
+  const dx = useSharedValue(0);
+  const dy = useSharedValue(0);
+  const sx = useSharedValue(1);
+  const sy = useSharedValue(1);
+  const lastRectRef = useRef(null);
+  const consumedRef = useRef(false);
+  const transitionRef = useRef(transition);
+  transitionRef.current = transition;
+  const reducedMotionRef = useRef(shouldReduceMotion);
+  reducedMotionRef.current = shouldReduceMotion;
+  const setRef = useCallback(
+    (node) => {
+      if (typeof userRef === "function") userRef(node);
+      else if (userRef) userRef.current = node;
+    },
+    [userRef]
+  );
+  const onLayout = useCallback(
+    (event) => {
+      userOnLayout?.(event);
+      if (!layoutId) return;
+      const { x, y, width, height } = event.nativeEvent.layout;
+      const rect = { x, y, width, height };
+      lastRectRef.current = rect;
+      let source;
+      if (!consumedRef.current) {
+        consumedRef.current = true;
+        source = consumeLayout(layoutId);
+      }
+      registerLayout(layoutId, rect);
+      if (source) {
+        applyFlip({
+          source,
+          target: rect,
+          dx,
+          dy,
+          sx,
+          sy,
+          transition: transitionRef.current,
+          shouldReduceMotion: reducedMotionRef.current
+        });
+      }
+    },
+    // dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
+    // exhaustive-deps would flag them — including them is harmless and
+    // silences the warning.
+    [layoutId, userOnLayout, dx, dy, sx, sy]
+  );
+  useEffect(() => {
+    consumedRef.current = false;
+  }, [layoutId]);
+  useEffect(() => {
+    return () => {
+      if (!layoutId) return;
+      const rect = lastRectRef.current;
+      if (!rect) return;
+      releaseLayout(layoutId, rect);
+    };
+  }, [layoutId]);
+  return useMemo(
+    () => ({
+      flip: { dx, dy, sx, sy },
+      setRef,
+      onLayout
+    }),
+    [dx, dy, sx, sy, setRef, onLayout]
+  );
+}
+function applyFlip(args) {
+  const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
+  const sourceCenterX = source.x + source.width / 2;
+  const sourceCenterY = source.y + source.height / 2;
+  const targetCenterX = target.x + target.width / 2;
+  const targetCenterY = target.y + target.height / 2;
+  const deltaX = sourceCenterX - targetCenterX;
+  const deltaY = sourceCenterY - targetCenterY;
+  const scaleX = target.width > 0 ? source.width / target.width : 1;
+  const scaleY = target.height > 0 ? source.height / target.height : 1;
+  if (shouldReduceMotion) {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "no-animation") {
+    dx.value = 0;
+    dy.value = 0;
+    sx.value = 1;
+    sy.value = 1;
+    return;
+  }
+  if (transition?.type === "timing") {
+    const duration = transition.duration ?? 300;
+    dx.value = withSequence(
+      withTiming(deltaX, { duration: 0 }),
+      withTiming(0, { duration })
+    );
+    dy.value = withSequence(
+      withTiming(deltaY, { duration: 0 }),
+      withTiming(0, { duration })
+    );
+    sx.value = withSequence(
+      withTiming(scaleX, { duration: 0 }),
+      withTiming(1, { duration })
+    );
+    sy.value = withSequence(
+      withTiming(scaleY, { duration: 0 }),
+      withTiming(1, { duration })
+    );
+    return;
+  }
+  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
+  const springParams = springToReanimated(springCfg);
+  dx.value = withSequence(
+    withTiming(deltaX, { duration: 0 }),
+    withSpring(0, springParams)
+  );
+  dy.value = withSequence(
+    withTiming(deltaY, { duration: 0 }),
+    withSpring(0, springParams)
+  );
+  sx.value = withSequence(
+    withTiming(scaleX, { duration: 0 }),
+    withSpring(1, springParams)
+  );
+  sy.value = withSequence(
+    withTiming(scaleY, { duration: 0 }),
+    withSpring(1, springParams)
+  );
+}
+var PresenceContext = createContext(null);
+function usePresence() {
+  return useContext(PresenceContext);
+}
+var DEFAULT_TIMING_DURATION = 250;
+function buildSpring(cfg, toValue, cb) {
+  return withSpring(toValue, springToReanimated(cfg), cb);
+}
+function buildTiming(cfg, toValue, cb) {
+  return withTiming(
+    toValue,
+    {
+      duration: cfg.duration ?? DEFAULT_TIMING_DURATION,
+      easing: ensureWorkletEasing(cfg.easing) ?? Easing.inOut(Easing.ease)
+    },
+    cb
+  );
+}
+function buildDecay(cfg, cb) {
+  return withDecay(
+    {
+      velocity: cfg.velocity ?? 0,
+      deceleration: cfg.deceleration,
+      clamp: cfg.clamp
+    },
+    cb
+  );
+}
+function buildOne(cfg, toValue, cb) {
+  if (cfg.type === "no-animation") {
+    if (cb) cb(true, toValue);
+    return toValue;
+  }
+  if (cfg.type === "decay") return buildDecay(cfg, cb);
+  if (cfg.type === "timing") return buildTiming(cfg, toValue, cb);
+  return buildSpring(cfg, toValue, cb);
+}
+function applyRepeat(animation, repeat) {
+  if (repeat === void 0) return animation;
+  if (repeat === "infinite") {
+    return withRepeat(animation, -1, true);
+  }
+  if (typeof repeat === "number") {
+    return withRepeat(animation, repeat, true);
+  }
+  const count = repeat.count === "infinite" ? -1 : repeat.count;
+  const alternate = repeat.alternate ?? true;
+  return withRepeat(animation, count, alternate);
+}
+function applyDelay(animation, delay) {
+  if (!delay || delay <= 0) return animation;
+  return withDelay(delay, animation);
+}
+function resolveTransition(config, toValue, callback) {
+  const cfg = config ?? { type: "spring" };
+  const base = buildOne(cfg, toValue, callback);
+  const repeated = applyRepeat(base, repeatOf(cfg));
+  return applyDelay(repeated, delayOf(cfg));
+}
+function repeatOf(cfg) {
+  if (cfg.type === "no-animation" || cfg.type === "decay") return void 0;
+  return cfg.repeat;
+}
+function stripRepeat(cfg) {
+  if (!cfg) return cfg;
+  if (cfg.type === "no-animation" || cfg.type === "decay") return cfg;
+  if (cfg.repeat === void 0) return cfg;
+  const next = { ...cfg };
+  delete next.repeat;
+  return next;
+}
+function delayOf(cfg) {
+  if (cfg.type === "no-animation") return void 0;
+  return cfg.delay;
+}
+function isStepObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v) && "to" in v;
+}
+function resolveAnimatableValue(value, base, factory) {
+  if (Array.isArray(value)) {
+    const steps = value;
+    const stepBase = stripRepeat(base);
+    const animations = steps.map(
+      (step2, i) => resolveStep(step2, stepBase, factory?.("step", i))
+    );
+    const seq = withSequence(...animations);
+    return applyRepeat(seq, base ? repeatOf(base) : void 0);
+  }
+  const step = value;
+  const cb = factory?.("animation", void 0);
+  if (isStepObject(step)) {
+    return resolveStep(step, base, cb);
+  }
+  return resolveTransition(base, step, cb);
+}
+function resolveStep(step, base, cb) {
+  if (isStepObject(step)) {
+    const { to, ...override } = step;
+    const merged = mergeTransition(base, override);
+    return resolveTransition(merged, to, cb);
+  }
+  return resolveTransition(base, step, cb);
+}
+function mergeTransition(base, override) {
+  if (override.type && base && override.type !== base.type) {
+    return override;
+  }
+  return { ...base ?? { type: "spring" }, ...override };
+}
+
+// src/transitions/keys.ts
+var TRANSITION_CONFIG_KEYS = /* @__PURE__ */ new Set([
+  "type",
+  "tension",
+  "friction",
+  "mass",
+  "velocity",
+  "restSpeedThreshold",
+  "restDisplacementThreshold",
+  "duration",
+  "easing",
+  "delay",
+  "repeat",
+  "deceleration",
+  "clamp"
+]);
+function isTopLevelTransition(t) {
+  if (t === null || typeof t !== "object") return false;
+  const keys = Object.keys(t);
+  if (keys.length === 0) return false;
+  return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
+}
+
+// src/transitions/sig.ts
+function stableSig(value) {
+  if (value === void 0) return "";
+  try {
+    return stableStringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function stableStringify(v) {
+  if (v === null || typeof v !== "object") {
+    if (typeof v === "function" || v === void 0) return "null";
+    return JSON.stringify(v);
+  }
+  if (Array.isArray(v)) {
+    return "[" + v.map(stableStringify).join(",") + "]";
+  }
+  const obj = v;
+  const keys = Object.keys(obj).sort();
+  return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
+}
+var alreadyChecked = false;
+function ensureReanimatedInstalled() {
+  if (!__DEV__ || alreadyChecked) return;
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "test") {
+    return;
+  }
+  alreadyChecked = true;
+  const version = reanimatedVersion;
+  if (version) {
+    const major = parseInt(version.split(".")[0] ?? "0", 10);
+    if (major < 4) {
+      console.error(
+        `[inertia] react-native-reanimated v${version} is installed, but @rootnative/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",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY"
+];
+var ROTATION_KEYS = /* @__PURE__ */ new Set(["rotate", "rotateX", "rotateY"]);
+var NUMERIC_TOP_LEVEL_KEYS = [
+  "opacity",
+  "width",
+  "height",
+  "borderRadius",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation"
+];
+var COLOR_KEYS = [
+  "backgroundColor",
+  "borderColor",
+  "color",
+  "tintColor",
+  "shadowColor"
+];
+var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
+var ALL_KEYS = [
+  ...TRANSFORM_KEYS,
+  ...NUMERIC_TOP_LEVEL_KEYS,
+  ...COLOR_KEYS,
+  ...SHADOW_OFFSET_KEYS
+];
+var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
+var COLOR_KEY_SET = new Set(COLOR_KEYS);
+var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_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,
+  translateY: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: 0,
+  rotateX: 0,
+  rotateY: 0,
+  opacity: 1,
+  width: 0,
+  height: 0,
+  borderRadius: 0,
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0,
+  // 'transparent' is the only safe universal default for colors: it works as
+  // an initial seed for any color animation (no jarring opaque flash on mount
+  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
+  // any opaque target via Reanimated's color util.
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  color: "transparent",
+  tintColor: "transparent",
+  shadowColor: "transparent",
+  shadowOffsetWidth: 0,
+  shadowOffsetHeight: 0
+};
+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 Motion = forwardRef(function Motion2(props, ref) {
+    const {
+      initial,
+      animate,
+      exit,
+      transition,
+      variants,
+      controller,
+      gesture,
+      layout,
+      layoutId,
+      onAnimationEnd,
+      style,
+      onLayout: userOnLayout,
+      ...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."
+      );
+    }
+    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;
+        }
+      }
+    }
+    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];
+        }
+        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?.();
+        }
+      };
+      let transformPending = 0;
+      for (const k of ALL_KEYS) {
+        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 = 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
+        );
+      }
+      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
+      }
+    );
+  });
+  Motion.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
+  return Motion;
+}
+function useAnimatableSharedValues(init) {
+  const translateX = useSharedValue(init("translateX"));
+  const translateY = useSharedValue(init("translateY"));
+  const scale = useSharedValue(init("scale"));
+  const scaleX = useSharedValue(init("scaleX"));
+  const scaleY = useSharedValue(init("scaleY"));
+  const rotate = useSharedValue(init("rotate"));
+  const rotateX = useSharedValue(init("rotateX"));
+  const rotateY = useSharedValue(init("rotateY"));
+  const opacity = useSharedValue(init("opacity"));
+  const width = useSharedValue(init("width"));
+  const height = useSharedValue(init("height"));
+  const borderRadius = useSharedValue(init("borderRadius"));
+  const shadowOpacity = useSharedValue(init("shadowOpacity"));
+  const shadowRadius = useSharedValue(init("shadowRadius"));
+  const elevation = useSharedValue(init("elevation"));
+  const backgroundColor = useSharedValue(
+    init("backgroundColor")
+  );
+  const borderColor = useSharedValue(init("borderColor"));
+  const color = useSharedValue(init("color"));
+  const tintColor = useSharedValue(init("tintColor"));
+  const shadowColor = useSharedValue(init("shadowColor"));
+  const shadowOffsetWidth = useSharedValue(
+    init("shadowOffsetWidth")
+  );
+  const shadowOffsetHeight = useSharedValue(
+    init("shadowOffsetHeight")
+  );
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = {
+      translateX,
+      translateY,
+      scale,
+      scaleX,
+      scaleY,
+      rotate,
+      rotateX,
+      rotateY,
+      opacity,
+      width,
+      height,
+      borderRadius,
+      shadowOpacity,
+      shadowRadius,
+      elevation,
+      backgroundColor,
+      borderColor,
+      color,
+      tintColor,
+      shadowColor,
+      shadowOffsetWidth,
+      shadowOffsetHeight
+    };
+  }
+  return ref.current;
+}
+function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, meta, onSettle, transformGroup) {
+  if (!onAnimationEndRef.current && !onSettle) return void 0;
+  const state = { iteration: 0 };
+  const isTransformKey = TRANSFORM_KEY_SET.has(key);
+  const dispatch = (rawPhase, step, finished, value) => {
+    const isLastIteration = state.iteration >= meta.totalIterations - 1;
+    let phase;
+    let isTerminal = false;
+    if (rawPhase === "step") {
+      const isLastInPass = step !== void 0 && step === meta.stepCount - 1;
+      if (!isLastInPass) {
+        phase = "step";
+      } else if (isLastIteration) {
+        phase = "animation";
+        isTerminal = true;
+      } else {
+        phase = "sequence";
+      }
+    } else if (isLastIteration) {
+      phase = "animation";
+      isTerminal = true;
+    } else {
+      phase = "repeat";
+    }
+    const reportedIteration = state.iteration;
+    if (phase === "sequence" || phase === "repeat") state.iteration++;
+    const fn = onAnimationEndRef.current;
+    if (fn) {
+      if (isTransformKey && transformGroup && phase === "animation") {
+        transformGroup.remaining--;
+        if (transformGroup.remaining <= 0) {
+          fn({
+            key: "transform",
+            finished,
+            value,
+            target,
+            phase,
+            step,
+            iteration: reportedIteration
+          });
+        }
+      } else {
+        fn({
+          key,
+          finished,
+          value,
+          target,
+          phase,
+          step,
+          iteration: reportedIteration
+        });
+      }
+    }
+    if (onSettle && isTerminal) onSettle();
+  };
+  return (rawPhase, step) => {
+    const cb = (finished) => {
+      "worklet";
+      runOnJS(dispatch)(rawPhase, step, !!finished, sharedValue.value);
+    };
+    return cb;
+  };
+}
+function shadowOffsetAxisFor(key) {
+  return key === "shadowOffsetWidth" ? "width" : "height";
+}
+function shadowOffsetAxisValue(source, axis) {
+  return source?.[axis];
+}
+function collectTouchedKeys(touched, record) {
+  for (const k of ALL_KEYS) {
+    if (k in record) touched.add(k);
+  }
+  if ("shadowOffset" in record && record.shadowOffset) {
+    const so = record.shadowOffset;
+    if (so.width !== void 0) touched.add("shadowOffsetWidth");
+    if (so.height !== void 0) touched.add("shadowOffsetHeight");
+  }
+}
+function stepCountOf(v) {
+  if (Array.isArray(v)) return v.length;
+  return 1;
+}
+function totalIterationsOf(cfg) {
+  if (!cfg || cfg.type === "no-animation" || cfg.type === "decay") return 1;
+  const r = cfg.repeat;
+  if (r === void 0) return 1;
+  if (r === "infinite") return Number.POSITIVE_INFINITY;
+  if (typeof r === "number") return r;
+  if (r.count === "infinite") return Number.POSITIVE_INFINITY;
+  return r.count;
+}
+function targetEndValue(v) {
+  if (v === void 0) return void 0;
+  if (typeof v === "number" || typeof v === "string") return v;
+  if (Array.isArray(v)) {
+    return v.length > 0 ? targetEndValue(v[v.length - 1]) : void 0;
+  }
+  if (typeof v === "object" && v !== null && "to" in v) {
+    const to = v.to;
+    return typeof to === "number" || typeof to === "string" ? to : void 0;
+  }
+  return void 0;
+}
+function useControllerKey(controller) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!controller) return;
+    const unsub = controller.subscribe(() => setTick((n) => n + 1));
+    return unsub;
+  }, [controller]);
+  return controller?.current;
+}
+function resolveAnimateInput(animate, variants, controllerKey) {
+  if (controllerKey !== void 0 && variants && controllerKey in variants) {
+    return variants[controllerKey];
+  }
+  if (typeof animate === "string") {
+    if (variants && animate in variants) return variants[animate];
+    if (__DEV__) {
+      console.warn(
+        `[inertia] animate="${animate}" but no matching variant. Did you forget to pass \`variants\`?`
+      );
+    }
+    return void 0;
+  }
+  return animate;
+}
+function restValue(v) {
+  if (v === void 0) return void 0;
+  if (typeof v === "number" || typeof v === "string") return v;
+  if (Array.isArray(v)) {
+    return v.length > 0 ? restValue(v[0]) : void 0;
+  }
+  if (typeof v === "object" && v !== null && "to" in v) {
+    const to = v.to;
+    return typeof to === "number" || typeof to === "string" ? to : void 0;
+  }
+  return void 0;
+}
+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) {
+      if (SHADOW_OFFSET_KEY_SET.has(key)) {
+        const axis = shadowOffsetAxisFor(key);
+        const so = subState.shadowOffset;
+        const v = shadowOffsetAxisValue(so, axis);
+        if (v !== void 0) resolved[key] = v;
+        continue;
+      }
+      const raw = subState[key];
+      if (raw === void 0) continue;
+      const t = targetEndValue(raw);
+      if (t !== void 0) resolved[key] = t;
+    }
+    out[layer] = resolved;
+  }
+  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 = {};
+    if (gesture.pressed) {
+      handlers.onTouchStart = compose(rest.onTouchStart, () => setPressed(true));
+      handlers.onTouchEnd = compose(rest.onTouchEnd, () => setPressed(false));
+      handlers.onTouchCancel = compose(
+        rest.onTouchCancel,
+        () => setPressed(false)
+      );
+      handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
+      handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
+    }
+    if (gesture.focused || gesture.focusVisible) {
+      handlers.onFocus = compose(rest.onFocus, () => {
+        if (gesture.focused) setFocused(true);
+        if (gesture.focusVisible && isFocusVisible()) setFocusVisible(true);
+      });
+      handlers.onBlur = compose(rest.onBlur, () => {
+        if (gesture.focused) setFocused(false);
+        if (gesture.focusVisible) setFocusVisible(false);
+      });
+    }
+    if (gesture.hovered) {
+      handlers.onMouseEnter = compose(rest.onMouseEnter, () => setHovered(true));
+      handlers.onMouseLeave = compose(
+        rest.onMouseLeave,
+        () => setHovered(false)
+      );
+    }
+    return handlers;
+  }, [
+    hasPressed,
+    hasFocused,
+    hasFocusVisible,
+    hasHovered,
+    rest.onTouchStart,
+    rest.onTouchEnd,
+    rest.onTouchCancel,
+    rest.onPressIn,
+    rest.onPressOut,
+    rest.onFocus,
+    rest.onBlur,
+    rest.onMouseEnter,
+    rest.onMouseLeave
+  ]);
+}
+function compose(user, ours) {
+  if (typeof user !== "function") return ours;
+  return (event) => {
+    user(event);
+    ours(event);
+  };
+}
+
+// src/motion/ScrollView.tsx
+var MotionScrollView = createMotionComponent(ScrollView);
+
+export { MotionScrollView };
+//# sourceMappingURL=ScrollView.mjs.map
+//# sourceMappingURL=ScrollView.mjs.map