@rootnative/inertia 0.0.9 → 0.0.10

package/src/transitions/resolveSequence.ts

@@ -50,7 +50,9 @@ export function resolveAnimatableValue<V extends number | string>(
       resolveStep(step, stepBase, factory?.('step', i)),
     )
     const seq = withSequence(...(animations as never[]))
-    return applyRepeat(seq, base ? repeatOf(base) : undefined)
+    return applyRepeat(seq, base ? repeatOf(base) : undefined, {
+      sequence: true,
+    })
   }
   const step = value as SequenceStep<V>
   const cb = factory?.('animation', undefined)

package/src/transitions/runtime.ts

@@ -4,12 +4,12 @@ import {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
+import { DEFAULT_TIMING_DURATION } from './constants'
+import { unwrapEasingFactory } from './easing'
 import { springToReanimated } from './spring'
 import { type AnimationCallback } from './resolve'
 import { type TransitionConfig } from '../types'
 
-const DEFAULT_TIMING_DURATION = 250
-
 /**
  * Worklet-safe single-step animation builder. Mirrors a subset of
  * `resolveTransition` for the UI-thread path where the transition config is
@@ -58,13 +58,10 @@ export function buildReleaseAnimation(
   }
   if (transition.type === 'timing') {
     // Reanimated 4's `Easing.bezier(...)` returns an `EasingFunctionFactory`
-    // rather than the function itself. Unwrap inline so consumers calling
+    // rather than the function itself. Unwrap so consumers calling
     // `buildReleaseAnimation` from a gesture worklet don't have to.
     const e = transition.easing
-    const easingFn =
-      e && typeof e === 'object' && 'factory' in e
-        ? e.factory()
-        : (e ?? Easing.inOut(Easing.ease))
+    const easingFn = e ? unwrapEasingFactory(e) : Easing.inOut(Easing.ease)
     return withTiming(
       toValue,
       {

package/src/transitions/spring.ts

@@ -28,6 +28,13 @@ export const DEFAULT_SPRING: Required<
  * names differ but the underlying physics constants are the same. We don't
  * surface the raw names publicly because the react-spring vocabulary is
  * what designers and prior-art consumers expect.
+ *
+ * Settle control is deliberately absent: Reanimated 4 settles springs on an
+ * internal `energyThreshold` and ignores Reanimated 3's `restSpeedThreshold`
+ * / `restDisplacementThreshold`. Inertia surfaced those two names through
+ * `0.0.9`, where they were silently inert — do not re-add them. If a settle
+ * knob is ever needed, expose Reanimated 4's `overshootClamping` or
+ * `energyThreshold`, which the runtime actually reads.
  */
 export function springToReanimated(t: SpringTransition) {
   'worklet'
@@ -36,7 +43,5 @@ export function springToReanimated(t: SpringTransition) {
     damping: t.friction ?? DEFAULT_SPRING.friction,
     mass: t.mass ?? DEFAULT_SPRING.mass,
     velocity: t.velocity,
-    restSpeedThreshold: t.restSpeedThreshold,
-    restDisplacementThreshold: t.restDisplacementThreshold,
   }
 }

package/src/types.ts

@@ -31,8 +31,6 @@ export interface SpringTransition {
   friction?: number
   mass?: number
   velocity?: number
-  restSpeedThreshold?: number
-  restDisplacementThreshold?: number
   delay?: number
   repeat?: RepeatConfig
 }
@@ -130,6 +128,15 @@ export type TransitionInput = TransitionConfig | TransitionName
 
 /**
  * Repeat config — one shape, not three flags. Default `alternate: true`.
+ *
+ * `count` is the total number of iterations, including the first pass, so
+ * `repeat: 2` plays the animation twice. A count below `1` runs the animation
+ * once and warns in dev.
+ *
+ * `alternate` reverses direction on every other pass for a single-value
+ * animation. It has no effect on a sequence (an array target): Reanimated
+ * restarts a sequence at its first step on every pass. Append the reverse
+ * steps to the sequence to alternate.
  */
 export type RepeatConfig =
   | number

package/src/values/extrapolation.ts

@@ -0,0 +1,21 @@
+import { Extrapolation } from 'react-native-reanimated'
+
+/**
+ * Extrapolation behavior at the edges of the input range. Mirrors
+ * Reanimated's enum so consumers don't need a separate import.
+ *
+ * - `'clamp'` (default) — output stays pinned at the first/last value
+ *   outside the input range. Matches Framer Motion's default.
+ * - `'identity'` — return the input unchanged outside the range.
+ * - `'extend'` — continue the linear slope beyond the range.
+ */
+export type ExtrapolationMode = 'clamp' | 'identity' | 'extend'
+
+/** Map the public mode name to Reanimated's `Extrapolation` enum. */
+export function mapExtrapolation(
+  mode: ExtrapolationMode | undefined,
+): Extrapolation {
+  if (mode === 'identity') return Extrapolation.IDENTITY
+  if (mode === 'extend') return Extrapolation.EXTEND
+  return Extrapolation.CLAMP
+}

package/src/values/index.ts

@@ -38,4 +38,5 @@ export {
   type ShadowConfig,
   type UseShadowOptions,
 } from './useShadow'
+export { useTranslateStyle } from './useTranslateStyle'
 export { useVariants } from './useVariants'

package/src/values/useGesture.ts

@@ -1,11 +1,11 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useSharedValue, type SharedValue } from 'react-native-reanimated'
 import {
   resolveNamedTransitionProp,
   useNamedTransitions,
   useShouldReduceMotion,
 } from '../config'
-import { isFocusVisible } from '../gestures'
+import { installFocusVisibility, isFocusVisible } from '../gestures'
 import { isTopLevelTransition, resolveTransition } from '../transitions'
 import {
   type GestureLayerTransitions,
@@ -110,6 +110,13 @@ export function useGesture(
   // the callbacks below only ever see concrete configs.
   const resolved = resolveNamedTransitionProp(transition, useNamedTransitions())
 
+  // The web modality listeners behind `focusVisible` attach on mount — see
+  // `focusVisibility.ts` for why mount time is early enough and import time
+  // is not an option.
+  useEffect(() => {
+    installFocusVisibility()
+  }, [])
+
   const setLayer = useCallback(
     (sv: SharedValue<number>, layer: LayerName, target: 0 | 1) => {
       const cfg = shouldReduceMotion

package/src/values/useInterpolatedStyle.ts

@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import {
-  Extrapolation,
   interpolate,
   interpolateColor,
   useAnimatedStyle,
   type SharedValue,
 } from 'react-native-reanimated'
+import { warnOnce } from '../internal/warnOnce'
+import { mapExtrapolation, type ExtrapolationMode } from './extrapolation'
 import type { ColorStyleKey } from './useColorTransition'
-import type { ExtrapolationMode } from './useTransform'
 
 /**
  * Numeric style keys `useInterpolatedStyle` can emit directly (not lifted into
@@ -158,12 +158,6 @@ function evenlySpaced(count: number): number[] {
   return out
 }
 
-function mapExtrapolation(mode: ExtrapolationMode | undefined): Extrapolation {
-  if (mode === 'identity') return Extrapolation.IDENTITY
-  if (mode === 'extend') return Extrapolation.EXTEND
-  return Extrapolation.CLAMP
-}
-
 /**
  * Order-preserving structural signature of the map + options. Unlike
  * `stableSig` (which sorts keys), this walks `map` in insertion order because
@@ -202,8 +196,9 @@ function buildEntries(
         ? [0, 1]
         : evenlySpaced(output.length)
 
-    if (__DEV__ && explicitInput && explicitInput.length !== output.length) {
-      console.warn(
+    if (explicitInput && explicitInput.length !== output.length) {
+      warnOnce(
+        `interpolated-style-range:${String(key)}:${explicitInput.length}:${output.length}`,
         `[inertia] useInterpolatedStyle: inputRange has ${explicitInput.length} stops but the "${String(
           key,
         )}" output has ${output.length}. They must match — interpolation results are undefined otherwise.`,
@@ -345,5 +340,3 @@ export function useInterpolatedStyle<K extends keyof InterpolatedStyleMap>(
     return out
   }) as InterpolatedStyle<K>
 }
-
-declare const __DEV__: boolean

package/src/values/useShadow.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import {
   interpolate,
   interpolateColor,
@@ -9,6 +10,7 @@ import {
   resolveBoxShadowInput,
   type BoxShadowLayer,
 } from '../internal/boxShadow'
+import { stableSig } from '../transitions/sig'
 
 export type { BoxShadowLayer }
 
@@ -113,13 +115,22 @@ export function useShadow({
   // boxShadow layers: parse/pair once on the JS thread into flat records so
   // the worklet only interpolates numbers/colors and concatenates — no
   // frame-time parsing. `[]` when neither side provides the key.
-  const boxShadowPairs =
-    from.boxShadow !== undefined || to.boxShadow !== undefined
-      ? pairBoxShadowLayers(
-          resolveBoxShadowInput(from.boxShadow),
-          resolveBoxShadowInput(to.boxShadow),
-        )
-      : []
+  //
+  // Memoised on the inputs' structure: the pairs array is the one non-scalar
+  // the worklet captures, and `from` / `to` are usually inline literals, so
+  // without the memo a fresh array each render would rebuild the worklet.
+  const boxShadowSig = stableSig([from.boxShadow, to.boxShadow])
+  const boxShadowPairs = useMemo(
+    () =>
+      from.boxShadow !== undefined || to.boxShadow !== undefined
+        ? pairBoxShadowLayers(
+            resolveBoxShadowInput(from.boxShadow),
+            resolveBoxShadowInput(to.boxShadow),
+          )
+        : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [boxShadowSig],
+  )
 
   const opacityFrom = from.shadowOpacity ?? 0
   const opacityTo = to.shadowOpacity ?? 0

package/src/values/useSpring.ts

@@ -6,7 +6,12 @@ import {
   withSpring,
   type SharedValue,
 } from 'react-native-reanimated'
-import { lookupNamedTransition, useNamedTransitions } from '../config'
+import {
+  lookupNamedTransition,
+  useNamedTransitions,
+  useShouldReduceMotion,
+} from '../config'
+import { warnOnce } from '../internal/warnOnce'
 import { springToReanimated } from '../transitions/spring'
 import {
   type NamedTransitions,
@@ -14,8 +19,6 @@ import {
   type TransitionName,
 } from '../types'
 
-declare const __DEV__: boolean
-
 /**
  * Animate a shared value toward `target` with spring physics, using the
  * library's react-spring vocabulary (`tension` / `friction` / `mass`).
@@ -35,12 +38,16 @@ declare const __DEV__: boolean
  * 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).
+ *
+ * Reduced motion (via `<MotionConfig reducedMotion>`) is honoured: the output
+ * is assigned the target directly, with no spring, on both paths.
  */
 export function useSpring(
   target: number | SharedValue<number>,
   config?: SpringTransition | TransitionName,
 ): SharedValue<number> {
   const spring = resolveSpringInput(config, useNamedTransitions())
+  const shouldReduceMotion = useShouldReduceMotion()
   // Reanimated config is rebuilt only when the public config object changes
   // shape. The worklet path reads this from JS-thread closure capture, which
   // is fine: it's the resolved config that's invariant across UI-thread
@@ -52,14 +59,7 @@ export function useSpring(
     // depending on `config` itself would rebuild the Reanimated config on
     // every render and defeat the memo.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      spring?.tension,
-      spring?.friction,
-      spring?.mass,
-      spring?.velocity,
-      spring?.restSpeedThreshold,
-      spring?.restDisplacementThreshold,
-    ],
+    [spring?.tension, spring?.friction, spring?.mass, spring?.velocity],
   )
 
   const isSharedTarget = isSharedValue(target)
@@ -72,28 +72,38 @@ export function useSpring(
   // a stale closure.
   useEffect(() => {
     if (isSharedTarget) return
-    output.value = withSpring(target as number, reanimConfig)
+    output.value = shouldReduceMotion
+      ? (target as number)
+      : withSpring(target as number, reanimConfig)
     // `output` is identity-stable per hook instance (Reanimated guarantee).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSharedTarget, target, reanimConfig])
+  }, [isSharedTarget, target, reanimConfig, shouldReduceMotion])
 
   // SharedValue path. `useAnimatedReaction` runs the prepare worklet whenever
   // its returned value changes; we read `.value` off the target SV and pipe
   // it through `withSpring` on the UI thread. When the target is a plain
   // number we never declare a source so the reaction is inert (returns
   // `null`, never fires `react`).
+  //
+  // `source` is in the dependency list on purpose. An explicit list replaces
+  // Reanimated's closure-derived one, so a caller that swaps which shared
+  // value drives the spring would otherwise keep the reaction wired to the
+  // old one — the same stale-closure class `useColorCascade` fixed in 0.0.4.
+  // A plain-number target maps to `null`, so a changing number does not
+  // re-register the inert reaction.
+  const source = isSharedTarget ? target : null
   useAnimatedReaction(
     () => {
       'worklet'
-      if (!isSharedTarget) return null
-      return (target as SharedValue<number>).value
+      if (source === null) return null
+      return source.value
     },
     (next, prev) => {
       'worklet'
       if (next === null || next === prev) return
-      output.value = withSpring(next, reanimConfig)
+      output.value = shouldReduceMotion ? next : withSpring(next, reanimConfig)
     },
-    [isSharedTarget, reanimConfig],
+    [source, reanimConfig, shouldReduceMotion],
   )
 
   // Stop the in-flight spring when the owning component unmounts so its
@@ -122,14 +132,13 @@ function resolveSpringInput(
   if (typeof config !== 'string') return config
   const cfg = lookupNamedTransition(config, registry)
   if (cfg.type === undefined || cfg.type === 'spring') return cfg
-  if (__DEV__) {
-    console.warn(
-      `[inertia] Named transition "${config}" resolves to type ` +
-        `'${cfg.type}', but useSpring / useBooleanSpring are spring-only — ` +
-        `falling back to the default spring. Use useAnimation to honor ` +
-        `non-spring named transitions.`,
-    )
-  }
+  warnOnce(
+    `spring-only:${config}`,
+    `[inertia] Named transition "${config}" resolves to type ` +
+      `'${cfg.type}', but useSpring / useBooleanSpring are spring-only — ` +
+      `falling back to the default spring. Use useAnimation to honor ` +
+      `non-spring named transitions.`,
+  )
   return undefined
 }
 

package/src/values/useTransform.ts

@@ -1,5 +1,5 @@
+import { useMemo } from 'react'
 import {
-  Extrapolation,
   interpolate,
   interpolateColor,
   useDerivedValue,
@@ -11,17 +11,10 @@ import {
 // import is always available wherever Inertia is.
 import { isWorkletFunction } from 'react-native-worklets'
 import { warnNonWorkletOnce } from '../internal/nonWorkletWarning'
+import { stableSig } from '../transitions/sig'
+import { mapExtrapolation, type ExtrapolationMode } from './extrapolation'
 
-/**
- * Extrapolation behavior at the edges of the input range. Mirrors
- * Reanimated's enum so consumers don't need a separate import.
- *
- * - `'clamp'` (default) — output stays pinned at the first/last value
- *   outside the input range. Matches Framer Motion's default.
- * - `'identity'` — return the input unchanged outside the range.
- * - `'extend'` — continue the linear slope beyond the range.
- */
-export type ExtrapolationMode = 'clamp' | 'identity' | 'extend'
+export type { ExtrapolationMode }
 
 export interface UseTransformOptions {
   extrapolateLeft?: ExtrapolationMode
@@ -34,7 +27,10 @@ export interface UseTransformOptions {
  * ```ts
  * const x = useMotionValue(0)
  * const y = useMotionValue(0)
- * const distance = useTransform(() => Math.sqrt(x.value ** 2 + y.value ** 2))
+ * const distance = useTransform(() => {
+ *   'worklet'
+ *   return Math.sqrt(x.value ** 2 + y.value ** 2)
+ * })
  * ```
  *
  * The transformer MUST be a worklet — put the `'worklet'` directive as its
@@ -87,6 +83,20 @@ export function useTransform<T>(
   // `useDerivedValue` exactly once. Keeping the hook call unconditional
   // satisfies rules-of-hooks; per-call branching (transformer vs
   // interpolation) is decided once at JS time, never at frame time.
+  // Range arrays are memoised on their contents: callers routinely write
+  // `useTransform(x, [0, 1], [0, 100])` inline, and a fresh array each render
+  // would otherwise change the producer's closure and rebuild the derived
+  // value's worklet every render.
+  const rangeSig = stableSig([inputRange, outputRange])
+  const ranges = useMemo(
+    () => ({
+      input: (inputRange ?? []) as readonly number[],
+      output: (outputRange ?? []) as readonly (number | string)[],
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rangeSig],
+  )
+
   let producer: () => unknown
   if (typeof arg1 === 'function') {
     // Transformer overload. Must be a worklet — the directive-wrapped
@@ -110,8 +120,8 @@ export function useTransform<T>(
     // Interpolation overload. We pre-resolve everything JS-side so the
     // worklet body only consumes flat values.
     const source = arg1
-    const input = inputRange as readonly number[]
-    const output = outputRange as readonly (number | string)[]
+    const input = ranges.input
+    const output = ranges.output
     const isColor = output.length > 0 && typeof output[0] === 'string'
     const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft)
     const extrapolateRight = mapExtrapolation(options?.extrapolateRight)
@@ -140,9 +150,3 @@ export function useTransform<T>(
     | SharedValue<number>
     | SharedValue<string>
 }
-
-function mapExtrapolation(mode: ExtrapolationMode | undefined): Extrapolation {
-  if (mode === 'identity') return Extrapolation.IDENTITY
-  if (mode === 'extend') return Extrapolation.EXTEND
-  return Extrapolation.CLAMP
-}

package/src/values/useTranslateStyle.ts

@@ -0,0 +1,31 @@
+import { useAnimatedStyle, type SharedValue } from 'react-native-reanimated'
+
+/**
+ * Animated style that translates by two shared values:
+ * `transform: [{ translateX: x }, { translateY: y }]`.
+ *
+ * This is the style fragment every drag-style hook returns (`useTouchDrag`,
+ * and `useDrag` / `usePan` / `useSwipe` in `@rootnative/inertia-gestures`).
+ * Use it directly when a custom gesture owns its own translation values.
+ *
+ * The style owns the whole `transform` key. Do not stack a second transform
+ * style beside it — `transform` is one key in React Native, so the later
+ * style replaces this one instead of merging. Nest another animated view, or
+ * build one style from `x` / `y` with `useInterpolatedStyle`, to add a
+ * transform.
+ *
+ * ```tsx
+ * const x = useMotionValue(0)
+ * const y = useMotionValue(0)
+ * const style = useTranslateStyle(x, y)
+ * return <Motion.View style={style} />
+ * ```
+ */
+export function useTranslateStyle(
+  x: SharedValue<number>,
+  y: SharedValue<number>,
+): ReturnType<typeof useAnimatedStyle> {
+  return useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }, { translateY: y.value }],
+  }))
+}

package/dist/chunk-24NUL23E.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
-var reactNative = require('react-native');
-
-var MotionView = chunkE3ALFSH2_js.createMotionComponent(reactNative.View);
-
-exports.MotionView = MotionView;

package/dist/chunk-4XBX7KOD.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
-var reactNative = require('react-native');
-
-var MotionText = chunkE3ALFSH2_js.createMotionComponent(reactNative.Text);
-
-exports.MotionText = MotionText;

package/dist/chunk-Z5USXWTE.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
-var reactNative = require('react-native');
-
-var MotionImage = chunkE3ALFSH2_js.createMotionComponent(reactNative.Image);
-
-exports.MotionImage = MotionImage;