@rootnative/inertia 0.0.0-alpha.7 → 0.0.2

package/dist/index.d.ts

@@ -339,6 +339,50 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
  */
 declare function useAnimation(target: number, transition?: TransitionInput): SharedValue<number>;
 
+/**
+ * Imperative setter that drives a `SharedValue<number>` toward `to`, resolving
+ * the transition through the **same context** the declarative surface uses. It
+ * is the imperative escape hatch that closes the two footguns of writing
+ * `value.value = resolveTransition(config, to)` by hand from an event handler:
+ *
+ * 1. **Named transitions resolve.** A `TransitionName` registered on the
+ *    nearest `<MotionConfig transitions>` works here just as it does on the
+ *    `transition` prop or in `useAnimation`. Raw `resolveTransition` can't
+ *    reach the registry (names resolve via context), so imperative call sites
+ *    otherwise rebuild configs the provider already owns.
+ * 2. **Reduced motion is respected.** Writes route through the same
+ *    `no-animation` downgrade `useAnimation` applies under
+ *    `<MotionConfig reducedMotion>`. Hand-rolled `resolveTransition` writes
+ *    silently bypass that setting — a correctness bug this hook fixes.
+ *
+ * The returned callback is stable across renders (it reads the registry and
+ * the reduced-motion flag live inside the body), so it can be dropped straight
+ * into memoized handlers.
+ *
+ * This is not a new animation API — it starts animations in Inertia's existing
+ * transition vocabulary, so it does not conflict with the "no imperative-only
+ * APIs that bypass the declarative surface" scope rule. It is the hooks-layer
+ * equivalent of `useMotionValue` + `resolveTransition`, minus the footguns.
+ *
+ * @example
+ * ```tsx
+ * const hovered = useMotionValue(0)
+ * const animate = useAnimator()
+ *
+ * const onHoverIn = () => animate(hovered, 1, 'state-hover')
+ * const onHoverOut = () => animate(hovered, 0, 'state-hover')
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Inline config works too; default is spring when omitted.
+ * animate(progress, 1, { type: 'timing', duration: 150 })
+ * animate(progress, 0) // spring
+ * ```
+ */
+type Animator = (value: SharedValue<number>, to: number, transition?: TransitionInput) => void;
+declare function useAnimator(): Animator;
+
 /**
  * Toggle a 0↔1 progress value with a spring whenever `active` flips.
  *
@@ -406,56 +450,64 @@ interface UseColorTransitionOptions {
 declare function useColorTransition(progress: SharedValue<number>, range: readonly [string, string], options?: UseColorTransitionOptions): ReturnType<typeof useAnimatedStyle>;
 
 /**
- * Create an animatable value owned by JS but readable from worklets.
- *
- * This is the escape-hatch primitive that the rest of the value-layer hooks
- * (`useSpring`, `useTransform`, `useScroll`) compose against. It is a thin
- * pass-through over Reanimated's `useSharedValue`: a `SharedValue<T>` with
- * `.value` for direct reads/writes (UI-thread reads in worklets, JS-thread
- * writes from event handlers / effects).
+ * One layer in a color cascade: its own `progress` shared value (0→1) and the
+ * color it blends toward as that progress rises. Layers are ordered lowest
+ * priority first; a later layer wins over an earlier one at equal progress.
+ */
+interface ColorCascadeLayer {
+    /** 0→1 driver for this layer. Drive it upstream (spring / boolean / gesture). */
+    progress: SharedValue<number>;
+    /** The color this layer blends toward as `progress` moves 0→1. */
+    color: string;
+}
+interface UseColorCascadeOptions {
+    /**
+     * Which style slot the composited color is emitted under. Defaults to
+     * `backgroundColor` — identical to `useColorTransition`. Override for ring
+     * colors (`borderColor`), text (`color`), image tints (`tintColor`), etc.
+     */
+    key?: ColorStyleKey;
+}
+/**
+ * Priority-ordered layered color crossfade: each layer owns an independent
+ * `progress` value and blends the accumulated color below it toward its own
+ * color as that progress moves 0→1. Later layers win over earlier ones — the
+ * array is priority order, **lowest first** (matching the `gesture` prop's
+ * fixed-priority cascade, Decision 5).
  *
- * We intentionally do not introduce a `MotionValue` wrapper class around the
- * shared value. The simplest object that interops with `useAnimatedStyle`,
- * `useDerivedValue`, and every other Reanimated API _is_ the shared value
- * itself; adding a `{ get, set, value }` shell would force consumers to
- * unwrap it at every Reanimated boundary and break worklet capture.
+ * Equivalent to the hand-chained nested-`interpolateColor` shape
+ * `focus(error(hover(rest)))`, collapsed into one hook and one worklet:
  *
- * Worklet read:
- * ```ts
- * const x = useMotionValue(0)
- * useAnimatedStyle(() => ({ transform: [{ translateX: x.value }] }))
- * ```
+ * ```tsx
+ * const borderStyle = useColorCascade(
+ *   colors.border,
+ *   [
+ *     { progress: hovered, color: colors.borderHover },
+ *     { progress: errored, color: colors.borderError },
+ *     { progress: focused, color: colors.borderFocus },
+ *   ],
+ *   { key: 'borderColor' },
+ * )
  *
- * JS write:
- * ```ts
- * onPress={() => { x.value = 100 }}
+ * return <Motion.View style={[styles.field, borderStyle]} />
  * ```
- */
-declare function useMotionValue(initial: number): SharedValue<number>;
-declare function useMotionValue(initial: string): SharedValue<string>;
-declare function useMotionValue<T extends number | string>(initial: T): SharedValue<T>;
-
-/**
- * Animate a shared value toward `target` with spring physics, using the
- * library's react-spring vocabulary (`tension` / `friction` / `mass`).
  *
- * `target` may be a plain number or a `SharedValue<number>`. The plain-number
- * path drives the spring from a JS `useEffect`, so the animation re-runs on
- * every render where `target` changes. The shared-value path drives the
- * spring from a Reanimated reaction on the UI thread, so values produced by
- * gestures, scroll handlers, or other worklets flow through without bouncing
- * back to JS.
+ * This is a pure interpolator — it does not animate on its own. Drive each
+ * layer's `progress` upstream with a `useSpring`, `useBooleanSpring`, gesture
+ * progress, or anything else producing a 0→1 shared value.
  *
- * Both call sites end up at the same `withSpring` invocation; the split is
- * just about which thread observes the source change.
+ * For the single-layer case (`rest` ⇄ one active color), reach for
+ * [`useColorTransition`](./useColorTransition) — it is the fast path and this
+ * hook is not a replacement for it. For a mixed numeric + color cascade, or
+ * function-valued layers, drop to a hand-rolled `useAnimatedStyle`.
  *
- * `config` also accepts a `TransitionName` registered on the nearest
- * `<MotionConfig transitions>`. Because this hook is spring-only, the name
- * must resolve to a spring config — a name registered as timing / decay /
- * no-animation warns in dev and falls back to the default spring (reach for
- * `useAnimation` when the named transition's type should be honored).
+ * The layer chain is resolved once on the JS thread and memoized on a
+ * structural signature (colors + key), so a fresh-but-equal `layers` array
+ * each render produces no new UI-thread closure (CLAUDE.md principle 8). The
+ * `progress` shared values are read live in the worklet, so their identity is
+ * intentionally excluded from the signature.
  */
-declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
+declare function useColorCascade(rest: string, layers: readonly ColorCascadeLayer[], options?: UseColorCascadeOptions): ReturnType<typeof useAnimatedStyle>;
 
 /**
  * Extrapolation behavior at the edges of the input range. Mirrors
@@ -509,6 +561,140 @@ declare function useTransform<T>(transformer: () => T): SharedValue<T>;
 declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly number[], options?: UseTransformOptions): SharedValue<number>;
 declare function useTransform(value: SharedValue<number>, inputRange: readonly number[], outputRange: readonly string[], options?: UseTransformOptions): SharedValue<string>;
 
+/**
+ * Numeric style keys `useInterpolatedStyle` can emit directly (not lifted into
+ * the transform array). Mirrors the flat numeric surface of the `animate`
+ * prop.
+ */
+type NumericStyleKey = 'opacity' | 'width' | 'height' | 'borderRadius' | 'shadowOpacity' | 'shadowRadius' | 'elevation' | 'top' | 'left' | 'right' | 'bottom' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'borderWidth';
+/**
+ * Transform keys, lifted into a `transform: [...]` array in the order they
+ * appear in the map — the same key-order convention the `animate` prop uses.
+ * `rotate` / `rotateX` / `rotateY` take numeric degrees and emit
+ * `'<n>deg'` strings.
+ */
+type TransformKey = 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY' | 'rotate' | 'rotateX' | 'rotateY';
+/**
+ * Interpolation map: each entry maps `progress` onto an output range for one
+ * style or transform key. Numeric / transform keys take number stops; color
+ * keys take color-string stops. Mixing stop types per key is a compile error.
+ */
+type InterpolatedStyleMap = {
+    [K in NumericStyleKey | TransformKey]?: readonly number[];
+} & {
+    [K in ColorStyleKey]?: readonly string[];
+};
+interface UseInterpolatedStyleOptions {
+    /**
+     * Input range mapped onto every key's output range. Defaults to `[0, 1]`
+     * for 2-stop outputs, and to evenly-spaced stops across `[0, 1]` for
+     * longer outputs. When provided, it applies to all keys; a key whose
+     * output length differs from `inputRange.length` throws in dev.
+     */
+    inputRange?: readonly number[];
+    /**
+     * Edge behavior outside the input range. Defaults to `'clamp'`, matching
+     * `useColorTransition`. Applies to numeric keys; color interpolation
+     * always clamps (Reanimated's `interpolateColor` has no extrapolation
+     * option).
+     */
+    extrapolate?: ExtrapolationMode;
+}
+/**
+ * Map one `progress` shared value onto N style props via `interpolate` /
+ * `interpolateColor`, returning an animated style fragment that composes in a
+ * style array on any Reanimated-aware host (`Motion.*`, a hand-rolled
+ * `Animated.View`). The style-fragment counterpart to `useTransform`'s
+ * output-range form, in the same family as `useColorTransition` / `useShadow`.
+ *
+ * ```tsx
+ * const collapseStyle = useInterpolatedStyle(collapseProgress, {
+ *   height: [expandedHeight, collapsedHeight],
+ *   fontSize: [expanded.fontSize, collapsed.fontSize],
+ * })
+ *
+ * const labelStyle = useInterpolatedStyle(floatProgress, {
+ *   translateY: [restingOffset, 0],
+ *   scale: [restingScale, 1],
+ * })
+ *
+ * return <Motion.View style={[base, collapseStyle, labelStyle]} />
+ * ```
+ *
+ * This is a pure interpolator — it does not animate on its own. Drive
+ * `progress` upstream with a `useSpring`, `useBooleanSpring`, gesture
+ * progress, or scroll-derived `useTransform`.
+ *
+ * - Numeric / transform keys route through `interpolate`; color-string stops
+ *   on a color key route through `interpolateColor` (a multi-stop
+ *   `useColorTransition` without touching that hook).
+ * - Transform keys (`translateX`, `scale`, `rotate`, …) are lifted into a
+ *   single `transform` array in the order they appear in the map. `rotate*`
+ *   keys take numeric degrees and emit `'<n>deg'` strings, consistent with
+ *   the `animate` surface.
+ * - `options.inputRange` defaults to `[0, 1]` for 2-stop outputs and to
+ *   evenly-spaced stops otherwise. `options.extrapolate` defaults to
+ *   `'clamp'`.
+ *
+ * For function-valued entries or multi-source composition, drop to a
+ * hand-rolled `useAnimatedStyle` (or `useTransform`'s worklet form) — this
+ * hook stays fully declarative and hashable so unchanged maps produce zero
+ * new UI-thread closures.
+ */
+declare function useInterpolatedStyle(progress: SharedValue<number>, map: InterpolatedStyleMap, options?: UseInterpolatedStyleOptions): ReturnType<typeof useAnimatedStyle>;
+
+/**
+ * Create an animatable value owned by JS but readable from worklets.
+ *
+ * This is the escape-hatch primitive that the rest of the value-layer hooks
+ * (`useSpring`, `useTransform`, `useScroll`) compose against. It is a thin
+ * pass-through over Reanimated's `useSharedValue`: a `SharedValue<T>` with
+ * `.value` for direct reads/writes (UI-thread reads in worklets, JS-thread
+ * writes from event handlers / effects).
+ *
+ * We intentionally do not introduce a `MotionValue` wrapper class around the
+ * shared value. The simplest object that interops with `useAnimatedStyle`,
+ * `useDerivedValue`, and every other Reanimated API _is_ the shared value
+ * itself; adding a `{ get, set, value }` shell would force consumers to
+ * unwrap it at every Reanimated boundary and break worklet capture.
+ *
+ * Worklet read:
+ * ```ts
+ * const x = useMotionValue(0)
+ * useAnimatedStyle(() => ({ transform: [{ translateX: x.value }] }))
+ * ```
+ *
+ * JS write:
+ * ```ts
+ * onPress={() => { x.value = 100 }}
+ * ```
+ */
+declare function useMotionValue(initial: number): SharedValue<number>;
+declare function useMotionValue(initial: string): SharedValue<string>;
+declare function useMotionValue<T extends number | string>(initial: T): SharedValue<T>;
+
+/**
+ * Animate a shared value toward `target` with spring physics, using the
+ * library's react-spring vocabulary (`tension` / `friction` / `mass`).
+ *
+ * `target` may be a plain number or a `SharedValue<number>`. The plain-number
+ * path drives the spring from a JS `useEffect`, so the animation re-runs on
+ * every render where `target` changes. The shared-value path drives the
+ * spring from a Reanimated reaction on the UI thread, so values produced by
+ * gestures, scroll handlers, or other worklets flow through without bouncing
+ * back to JS.
+ *
+ * Both call sites end up at the same `withSpring` invocation; the split is
+ * just about which thread observes the source change.
+ *
+ * `config` also accepts a `TransitionName` registered on the nearest
+ * `<MotionConfig transitions>`. Because this hook is spring-only, the name
+ * must resolve to a spring config — a name registered as timing / decay /
+ * no-animation warns in dev and falls back to the default spring (reach for
+ * `useAnimation` when the named transition's type should be honored).
+ */
+declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
+
 interface UseScrollResult {
     /** Horizontal scroll offset in points. */
     scrollX: SharedValue<number>;
@@ -681,4 +867,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type BoxShadowLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, TransitionInput, TransitionName, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var chunk4PEHWDAZ_js = require('./chunk-4PEHWDAZ.js');
-var chunk4QGXK6TF_js = require('./chunk-4QGXK6TF.js');
-var chunkZ7HIOFKQ_js = require('./chunk-Z7HIOFKQ.js');
-var chunk3UTJJ4A3_js = require('./chunk-3UTJJ4A3.js');
-var chunkTDSO63CJ_js = require('./chunk-TDSO63CJ.js');
-var chunk2HYD2ZBK_js = require('./chunk-2HYD2ZBK.js');
-var chunk7UDYEFBU_js = require('./chunk-7UDYEFBU.js');
+var chunkKYJROYCG_js = require('./chunk-KYJROYCG.js');
+var chunkX5J5M3K3_js = require('./chunk-X5J5M3K3.js');
+var chunk34Q4UM6V_js = require('./chunk-34Q4UM6V.js');
+var chunkNKA6XR77_js = require('./chunk-NKA6XR77.js');
+var chunkTUYHTHVV_js = require('./chunk-TUYHTHVV.js');
+var chunkIWLU3VDE_js = require('./chunk-IWLU3VDE.js');
 var chunk7AOERN53_js = require('./chunk-7AOERN53.js');
 var chunkPTRF47DA_js = require('./chunk-PTRF47DA.js');
 var react = require('react');
@@ -15,11 +15,11 @@ var reactNativeWorklets = require('react-native-worklets');
 
 // src/motion/index.ts
 var Motion = {
-  View: chunk4QGXK6TF_js.MotionView,
-  Text: chunkZ7HIOFKQ_js.MotionText,
-  Image: chunk3UTJJ4A3_js.MotionImage,
-  Pressable: chunkTDSO63CJ_js.MotionPressable,
-  ScrollView: chunk2HYD2ZBK_js.MotionScrollView
+  View: chunkKYJROYCG_js.MotionView,
+  Text: chunkX5J5M3K3_js.MotionText,
+  Image: chunk34Q4UM6V_js.MotionImage,
+  Pressable: chunkNKA6XR77_js.MotionPressable,
+  ScrollView: chunkTUYHTHVV_js.MotionScrollView
 };
 function useAnimation(target, transition) {
   const output = reactNativeReanimated.useSharedValue(target);
@@ -30,8 +30,26 @@ function useAnimation(target, transition) {
     const cfg = shouldReduceMotion ? { type: "no-animation" } : resolved ?? { type: "spring" };
     output.value = chunkPTRF47DA_js.resolveTransition(cfg, target);
   }, [target, cfgSig, shouldReduceMotion]);
+  react.useEffect(
+    () => () => reactNativeReanimated.cancelAnimation(output),
+    // `output` is identity-stable per hook instance (Reanimated guarantee).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return output;
 }
+function useAnimator() {
+  const registry = chunk7AOERN53_js.useNamedTransitions();
+  const shouldReduceMotion = chunk7AOERN53_js.useShouldReduceMotion();
+  return react.useCallback(
+    (value, to, transition) => {
+      const resolved = chunk7AOERN53_js.resolveNamedTransition(transition, registry);
+      const cfg = shouldReduceMotion ? { type: "no-animation" } : resolved ?? { type: "spring" };
+      value.value = chunkPTRF47DA_js.resolveTransition(cfg, to);
+    },
+    [registry, shouldReduceMotion]
+  );
+}
 function useSpring(target, config) {
   const spring = resolveSpringInput(config, chunk7AOERN53_js.useNamedTransitions());
   const reanimConfig = react.useMemo(
@@ -70,6 +88,12 @@ function useSpring(target, config) {
     },
     [isSharedTarget, reanimConfig]
   );
+  react.useEffect(
+    () => () => reactNativeReanimated.cancelAnimation(output),
+    // `output` is identity-stable per hook instance (Reanimated guarantee).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return output;
 }
 function resolveSpringInput(config, registry) {
@@ -91,6 +115,24 @@ function isSharedValue(v) {
 function useBooleanSpring(active, springConfig) {
   return useSpring(active ? 1 : 0, springConfig);
 }
+function useColorCascade(rest, layers, options) {
+  const key = options?.key ?? "backgroundColor";
+  const sig = `${key}|${rest}|${layers.length}|${layers.map((l) => l.color).join(",")}`;
+  const colors = react.useMemo(() => layers.map((l) => l.color), [sig]);
+  const progressValues = react.useMemo(() => layers.map((l) => l.progress), [sig]);
+  return reactNativeReanimated.useAnimatedStyle(() => {
+    "worklet";
+    let acc = rest;
+    for (let i = 0; i < colors.length; i++) {
+      acc = reactNativeReanimated.interpolateColor(
+        progressValues[i].value,
+        [0, 1],
+        [acc, colors[i]]
+      );
+    }
+    return { [key]: acc };
+  });
+}
 function useColorTransition(progress, range, options) {
   const key = options?.key ?? "backgroundColor";
   const from = range[0];
@@ -100,8 +142,139 @@ function useColorTransition(progress, range, options) {
     return { [key]: reactNativeReanimated.interpolateColor(progress.value, [0, 1], [from, to]) };
   });
 }
+var TRANSFORM_KEYS = /* @__PURE__ */ new Set([
+  "translateX",
+  "translateY",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY"
+]);
+var ROTATION_KEYS = /* @__PURE__ */ new Set(["rotate", "rotateX", "rotateY"]);
+var COLOR_KEYS = /* @__PURE__ */ new Set([
+  "backgroundColor",
+  "color",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "tintColor",
+  "shadowColor"
+]);
+function evenlySpaced(count) {
+  if (count <= 1) return [0];
+  const out = [];
+  for (let i = 0; i < count; i++) out.push(i / (count - 1));
+  return out;
+}
+function mapExtrapolation(mode) {
+  if (mode === "identity") return reactNativeReanimated.Extrapolation.IDENTITY;
+  if (mode === "extend") return reactNativeReanimated.Extrapolation.EXTEND;
+  return reactNativeReanimated.Extrapolation.CLAMP;
+}
+function buildSignature(map, options) {
+  let sig = "";
+  for (const key of Object.keys(map)) {
+    const output = map[key];
+    sig += `${key}:${JSON.stringify(output)}|`;
+  }
+  sig += `#ir:${JSON.stringify(options?.inputRange)}|ex:${options?.extrapolate ?? ""}`;
+  return sig;
+}
+function buildEntries(map, options) {
+  const explicitInput = options?.inputRange;
+  const entries = [];
+  for (const key of Object.keys(map)) {
+    const output = map[key];
+    if (output === void 0 || output.length === 0) continue;
+    const input = explicitInput ? explicitInput : output.length === 2 ? [0, 1] : evenlySpaced(output.length);
+    if (__DEV__ && explicitInput && explicitInput.length !== output.length) {
+      console.warn(
+        `[inertia] useInterpolatedStyle: inputRange has ${explicitInput.length} stops but the "${String(
+          key
+        )}" output has ${output.length}. They must match \u2014 interpolation results are undefined otherwise.`
+      );
+    }
+    const isColor = COLOR_KEYS.has(key) && typeof output[0] === "string";
+    if (isColor) {
+      entries.push({
+        kind: "color",
+        key,
+        input,
+        output
+      });
+    } else if (ROTATION_KEYS.has(key)) {
+      entries.push({
+        kind: "rotation",
+        key,
+        input,
+        output
+      });
+    } else if (TRANSFORM_KEYS.has(key)) {
+      entries.push({
+        kind: "transform-numeric",
+        key,
+        input,
+        output
+      });
+    } else {
+      entries.push({
+        kind: "numeric",
+        key,
+        input,
+        output
+      });
+    }
+  }
+  return entries;
+}
+function useInterpolatedStyle(progress, map, options) {
+  const extrapolate = mapExtrapolation(options?.extrapolate);
+  const sig = buildSignature(map, options);
+  const entries = react.useMemo(() => buildEntries(map, options), [sig]);
+  return reactNativeReanimated.useAnimatedStyle(() => {
+    "worklet";
+    const out = {};
+    const transform = [];
+    for (const e of entries) {
+      if (e.kind === "color") {
+        out[e.key] = reactNativeReanimated.interpolateColor(progress.value, e.input, e.output);
+      } else if (e.kind === "numeric") {
+        out[e.key] = reactNativeReanimated.interpolate(progress.value, e.input, e.output, {
+          extrapolateLeft: extrapolate,
+          extrapolateRight: extrapolate
+        });
+      } else if (e.kind === "transform-numeric") {
+        transform.push({
+          [e.key]: reactNativeReanimated.interpolate(progress.value, e.input, e.output, {
+            extrapolateLeft: extrapolate,
+            extrapolateRight: extrapolate
+          })
+        });
+      } else {
+        const deg = reactNativeReanimated.interpolate(progress.value, e.input, e.output, {
+          extrapolateLeft: extrapolate,
+          extrapolateRight: extrapolate
+        });
+        transform.push({ [e.key]: `${deg}deg` });
+      }
+    }
+    if (transform.length > 0) out.transform = transform;
+    return out;
+  });
+}
 function useMotionValue(initial) {
-  return reactNativeReanimated.useSharedValue(initial);
+  const sv = reactNativeReanimated.useSharedValue(initial);
+  react.useEffect(
+    () => () => reactNativeReanimated.cancelAnimation(sv),
+    // `sv` is identity-stable per hook instance (Reanimated guarantee).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  return sv;
 }
 function useTransform(arg1, inputRange, outputRange, options) {
   let producer;
@@ -124,8 +297,8 @@ function useTransform(arg1, inputRange, outputRange, options) {
     const input = inputRange;
     const output = outputRange;
     const isColor = output.length > 0 && typeof output[0] === "string";
-    const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft);
-    const extrapolateRight = mapExtrapolation(options?.extrapolateRight);
+    const extrapolateLeft = mapExtrapolation2(options?.extrapolateLeft);
+    const extrapolateRight = mapExtrapolation2(options?.extrapolateRight);
     producer = isColor ? () => {
       "worklet";
       return reactNativeReanimated.interpolateColor(
@@ -145,7 +318,7 @@ function useTransform(arg1, inputRange, outputRange, options) {
   }
   return reactNativeReanimated.useDerivedValue(producer);
 }
-function mapExtrapolation(mode) {
+function mapExtrapolation2(mode) {
   if (mode === "identity") return reactNativeReanimated.Extrapolation.IDENTITY;
   if (mode === "extend") return reactNativeReanimated.Extrapolation.EXTEND;
   return reactNativeReanimated.Extrapolation.CLAMP;
@@ -402,35 +575,35 @@ Object.defineProperty(exports, "useGesture", {
 });
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunk4QGXK6TF_js.MotionView; }
+  get: function () { return chunkKYJROYCG_js.MotionView; }
 });
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunkZ7HIOFKQ_js.MotionText; }
+  get: function () { return chunkX5J5M3K3_js.MotionText; }
 });
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunk3UTJJ4A3_js.MotionImage; }
+  get: function () { return chunk34Q4UM6V_js.MotionImage; }
 });
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunkTDSO63CJ_js.MotionPressable; }
+  get: function () { return chunkNKA6XR77_js.MotionPressable; }
 });
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunk2HYD2ZBK_js.MotionScrollView; }
+  get: function () { return chunkTUYHTHVV_js.MotionScrollView; }
 });
 Object.defineProperty(exports, "Presence", {
   enumerable: true,
-  get: function () { return chunk7UDYEFBU_js.Presence; }
+  get: function () { return chunkIWLU3VDE_js.Presence; }
 });
 Object.defineProperty(exports, "createMotionComponent", {
   enumerable: true,
-  get: function () { return chunk7UDYEFBU_js.createMotionComponent; }
+  get: function () { return chunkIWLU3VDE_js.createMotionComponent; }
 });
 Object.defineProperty(exports, "usePresence", {
   enumerable: true,
-  get: function () { return chunk7UDYEFBU_js.usePresence; }
+  get: function () { return chunkIWLU3VDE_js.usePresence; }
 });
 Object.defineProperty(exports, "MotionConfig", {
   enumerable: true,
@@ -474,8 +647,11 @@ Object.defineProperty(exports, "resolveTransition", {
 });
 exports.Motion = Motion;
 exports.useAnimation = useAnimation;
+exports.useAnimator = useAnimator;
 exports.useBooleanSpring = useBooleanSpring;
+exports.useColorCascade = useColorCascade;
 exports.useColorTransition = useColorTransition;
+exports.useInterpolatedStyle = useInterpolatedStyle;
 exports.useMotionValue = useMotionValue;
 exports.useScroll = useScroll;
 exports.useShadow = useShadow;