@rootnative/inertia 0.0.9 → 0.0.10

package/dist/touch/index.mjs

@@ -1,7 +1,9 @@
-import { buildReleaseAnimation } from '../chunk-W7NTRSPD.mjs';
-import { useMemo } from 'react';
+import { applyBounds, useTranslateStyle } from '../chunk-OH46TGEA.mjs';
+export { applyBounds } from '../chunk-OH46TGEA.mjs';
+import { buildReleaseAnimation } from '../chunk-HEAWMZEM.mjs';
+import { useRef, useMemo } from 'react';
 import { PanResponder } from 'react-native';
-import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 
 function useTouchDrag(options = {}) {
   const { axis = "both", constraints, elastic = 0 } = options;
@@ -17,22 +19,12 @@ function useTouchDrag(options = {}) {
   const top = constraints?.top;
   const bottom = constraints?.bottom;
   const elasticCoef = elastic;
-  const { onDragStart, onDragEnd, onRelease } = options;
+  const callbacksRef = useRef(options);
+  callbacksRef.current = options;
   const responder = useMemo(
     () => buildResponder(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      lockX,
-      lockY,
-      left,
-      right,
-      top,
-      bottom,
-      elasticCoef,
-      onDragStart,
-      onDragEnd,
-      onRelease
-    ]
+    [lockX, lockY, left, right, top, bottom, elasticCoef]
   );
   function buildResponder() {
     const handleEnd = (g) => {
@@ -41,6 +33,7 @@ function useTouchDrag(options = {}) {
       const y = dragY.value;
       const vx = g.vx * 1e3;
       const vy = g.vy * 1e3;
+      const { onRelease, onDragEnd } = callbacksRef.current;
       if (onRelease) {
         const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
         if (result) {
@@ -72,7 +65,7 @@ function useTouchDrag(options = {}) {
         startX.value = dragX.value;
         startY.value = dragY.value;
         isDragging.value = true;
-        if (onDragStart) onDragStart();
+        callbacksRef.current.onDragStart?.();
       },
       onPanResponderMove: (_e, g) => {
         if (lockX) {
@@ -96,9 +89,7 @@ function useTouchDrag(options = {}) {
       onPanResponderTerminate: (_e, g) => handleEnd(g)
     });
   }
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: dragX.value }, { translateY: dragY.value }]
-  }));
+  const animatedStyle = useTranslateStyle(dragX, dragY);
   return {
     panHandlers: responder.panHandlers,
     animatedStyle,
@@ -107,14 +98,5 @@ function useTouchDrag(options = {}) {
     isDragging
   };
 }
-function applyBounds(value, min, max, elastic) {
-  if (min !== void 0 && value < min) {
-    return elastic > 0 ? min + (value - min) * elastic : min;
-  }
-  if (max !== void 0 && value > max) {
-    return elastic > 0 ? max + (value - max) * elastic : max;
-  }
-  return value;
-}
 
 export { useTouchDrag };

package/dist/{types-DyJpG64F.d.mts → types-08mG8fNk.d.mts}

@@ -24,8 +24,6 @@ interface SpringTransition {
     friction?: number;
     mass?: number;
     velocity?: number;
-    restSpeedThreshold?: number;
-    restDisplacementThreshold?: number;
     delay?: number;
     repeat?: RepeatConfig;
 }
@@ -107,6 +105,15 @@ type NamedTransitions = Partial<Record<TransitionName, TransitionConfig>>;
 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.
  */
 type RepeatConfig = number | 'infinite' | {
     count: number | 'infinite';
@@ -456,4 +463,4 @@ interface MotionComponent<C extends ComponentType<any>> {
     displayName?: string;
 }
 
-export type { AnimatableValue as A, BoxShadowInput as B, DecayTransition as D, EasingInput as E, GestureLayerTransitions as G, MotionComponent as M, NamedTransitions as N, PerPropertyTransition as P, RegisteredTransitions as R, SpringTransition as S, TransitionConfig as T, VariantsMap as V, MotionProps as a, TransitionInput as b, TransitionName as c, VariantController as d, AnimateStyle as e, AnimationCallbackInfo as f, EasingFunction as g, EasingFunctionFactory as h, GestureSubStates as i, NoAnimationTransition as j, RepeatConfig as k, SequenceStep as l, TimingTransition as m, Transition as n };
+export type { AnimatableValue as A, BoxShadowInput as B, DecayTransition as D, EasingInput as E, GestureLayerTransitions as G, MotionComponent as M, NamedTransitions as N, PerPropertyTransition as P, RegisteredTransitions as R, SpringTransition as S, TransitionConfig as T, VariantsMap as V, MotionProps as a, TransitionInput as b, TransitionName as c, VariantController as d, AnimateStyle as e, AnimationCallbackInfo as f, EasingFunction as g, EasingFunctionFactory as h, GestureSubStates as i, MotionComponentProps as j, NoAnimationTransition as k, RepeatConfig as l, SequenceStep as m, TimingTransition as n, Transition as o };

package/dist/{types-DyJpG64F.d.ts → types-08mG8fNk.d.ts}

@@ -24,8 +24,6 @@ interface SpringTransition {
     friction?: number;
     mass?: number;
     velocity?: number;
-    restSpeedThreshold?: number;
-    restDisplacementThreshold?: number;
     delay?: number;
     repeat?: RepeatConfig;
 }
@@ -107,6 +105,15 @@ type NamedTransitions = Partial<Record<TransitionName, TransitionConfig>>;
 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.
  */
 type RepeatConfig = number | 'infinite' | {
     count: number | 'infinite';
@@ -456,4 +463,4 @@ interface MotionComponent<C extends ComponentType<any>> {
     displayName?: string;
 }
 
-export type { AnimatableValue as A, BoxShadowInput as B, DecayTransition as D, EasingInput as E, GestureLayerTransitions as G, MotionComponent as M, NamedTransitions as N, PerPropertyTransition as P, RegisteredTransitions as R, SpringTransition as S, TransitionConfig as T, VariantsMap as V, MotionProps as a, TransitionInput as b, TransitionName as c, VariantController as d, AnimateStyle as e, AnimationCallbackInfo as f, EasingFunction as g, EasingFunctionFactory as h, GestureSubStates as i, NoAnimationTransition as j, RepeatConfig as k, SequenceStep as l, TimingTransition as m, Transition as n };
+export type { AnimatableValue as A, BoxShadowInput as B, DecayTransition as D, EasingInput as E, GestureLayerTransitions as G, MotionComponent as M, NamedTransitions as N, PerPropertyTransition as P, RegisteredTransitions as R, SpringTransition as S, TransitionConfig as T, VariantsMap as V, MotionProps as a, TransitionInput as b, TransitionName as c, VariantController as d, AnimateStyle as e, AnimationCallbackInfo as f, EasingFunction as g, EasingFunctionFactory as h, GestureSubStates as i, MotionComponentProps as j, NoAnimationTransition as k, RepeatConfig as l, SequenceStep as m, TimingTransition as n, Transition as o };

package/dist/{useGesture-DbH46EBp.d.ts → useGesture-D1lHeQQ6.d.ts}

@@ -1,5 +1,5 @@
 import { SharedValue } from 'react-native-reanimated';
-import { b as TransitionInput, G as GestureLayerTransitions } from './types-DyJpG64F.js';
+import { b as TransitionInput, G as GestureLayerTransitions } from './types-08mG8fNk.js';
 
 /**
  * Handler bag returned by `useGesture`. Spread on a `Pressable` to drive the

package/dist/{useGesture-CnZQnYHH.d.mts → useGesture-DjszaHWz.d.mts}

@@ -1,5 +1,5 @@
 import { SharedValue } from 'react-native-reanimated';
-import { b as TransitionInput, G as GestureLayerTransitions } from './types-DyJpG64F.mjs';
+import { b as TransitionInput, G as GestureLayerTransitions } from './types-08mG8fNk.mjs';
 
 /**
  * Handler bag returned by `useGesture`. Spread on a `Pressable` to drive the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",
@@ -125,13 +125,14 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
+    "@testing-library/react-native": ">=13.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-worklets": ">=0.5.0"
   },
   "peerDependenciesMeta": {
-    "react-native-worklets": {
+    "@testing-library/react-native": {
       "optional": true
     }
   },
@@ -145,6 +146,7 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-reanimated": "~4.1.1",
+    "react-native-worklets": "~0.5.1",
     "react-test-renderer": "19.1.0",
     "size-limit": "^11.1.0",
     "tsup": "^8.3.5",

package/src/config/namedTransitions.ts

@@ -1,3 +1,4 @@
+import { warnOnce } from '../internal/warnOnce'
 import { isTopLevelTransition } from '../transitions/keys'
 import {
   type NamedTransitions,
@@ -6,8 +7,6 @@ import {
   type TransitionInput,
 } from '../types'
 
-declare const __DEV__: boolean
-
 /**
  * Fallback used when a name isn't found in the registry: the library default
  * spring, matching what an omitted transition resolves to everywhere else.
@@ -26,13 +25,12 @@ export function lookupNamedTransition(
 ): TransitionConfig {
   const cfg = registry[name]
   if (cfg) return cfg
-  if (__DEV__) {
-    console.warn(
-      `[inertia] Unknown transition name "${name}" — falling back to the ` +
-        `default spring. Register it on a provider: ` +
-        `<MotionConfig transitions={{ '${name}': { ... } }}>.`,
-    )
-  }
+  warnOnce(
+    `unknown-transition:${name}`,
+    `[inertia] Unknown transition name "${name}" — falling back to the ` +
+      `default spring. Register it on a provider: ` +
+      `<MotionConfig transitions={{ '${name}': { ... } }}>.`,
+  )
   return UNKNOWN_NAME_FALLBACK
 }
 

package/src/gestureLayer/index.ts

@@ -20,3 +20,6 @@ export type {
   UseGestureLayerOptions,
   UseGestureLayerResult,
 } from './useGestureLayer'
+// The per-layer form of `UseGestureLayerOptions.transition`. Re-exported here
+// so a consumer of this subpath can name it without also importing the root.
+export type { GestureLayerTransitions } from '../types'

package/src/gestureLayer/useGestureLayer.ts

@@ -210,7 +210,10 @@ export function useGestureLayer(
   // JS-thread precompute: union of keys across all layers, per-key type
   // (number vs color), and a rest-fallback table. The worklet body reads
   // from `meta` instead of probing each layer per frame — the type check
-  // only runs when layer identities change.
+  // only runs when the layers change structurally. Keyed on a signature, not
+  // on object identity: `states` is usually an inline literal, and a fresh
+  // `meta` each render would rebuild the animated style's worklet.
+  const statesSig = stableSig(states)
   const meta = useMemo(() => {
     const layers = {
       rest: states.rest,
@@ -251,14 +254,8 @@ export function useGestureLayer(
         restRaw !== undefined ? restRaw : isColor ? 'transparent' : 0
     }
     return { layers, keys, types, restValues }
-  }, [
-    states.rest,
-    states.hovered,
-    states.focused,
-    states.focusVisible,
-    states.pressed,
-    states.disabled,
-  ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statesSig])
 
   const style = useAnimatedStyle(() => {
     const { layers, keys, types, restValues } = meta

package/src/gestures/focusVisibility.ts

@@ -12,15 +12,16 @@ import { Platform } from 'react-native'
  * arrives via D-pad, screen reader, or hardware keyboard, all of which are
  * keyboard-equivalent — so `isFocusVisible()` is unconditionally `true`.
  *
- * The web listeners attach eagerly at module import (capture phase, so they
- * run before the focus event reaches the focused element) and stay installed
- * for the lifetime of the document. Eager installation matters: the very
- * first interaction with a page can be the mouse click that focuses a
- * gesture-wired element, and if the listeners only attached during that
- * focus dispatch the mousedown would already have passed unobserved —
- * leaving the default `'keyboard'` modality and drawing a focus ring for a
- * pointer interaction. They are passive and idle-cheap; the cost is one
- * boolean read per `onFocus` dispatch.
+ * The web listeners attach when the first component that tracks
+ * `focusVisible` mounts (`installFocusVisibility`, called from a mount
+ * effect), in the capture phase so they run before the focus event reaches
+ * the focused element, and they stay installed for the lifetime of the
+ * document. Mount-time installation is early enough: the click that focuses
+ * a gesture-wired element can only land on an element that is already
+ * mounted, so its `mousedown` is observed. The listeners are not attached at
+ * import time — `@rootnative/inertia` declares `sideEffects: false`, and an
+ * import-time listener would make that declaration false. They are passive
+ * and idle-cheap; the cost is one boolean read per `onFocus` dispatch.
  */
 
 type InputModality = 'keyboard' | 'pointer'
@@ -38,7 +39,14 @@ function setPointer() {
   modality = 'pointer'
 }
 
-function ensureInstalled(): void {
+/**
+ * Attach the document listeners that track input modality on web. Idempotent
+ * and a no-op on native or without a `document`. Call it from a mount effect
+ * of any component that reads `isFocusVisible()`, so the pointer event that
+ * precedes the first focus is observed (see module doc above).
+ * `isFocusVisible` also calls it as a safety net.
+ */
+export function installFocusVisibility(): void {
   if (installed) return
   if (Platform.OS !== 'web') return
   if (typeof document === 'undefined') return
@@ -49,12 +57,6 @@ function ensureInstalled(): void {
   installed = true
 }
 
-// Install at import time so the pointer event that precedes the first focus
-// is observed (see module doc above). `ensureInstalled` stays in
-// `isFocusVisible` as a safety net for environments where `document` appears
-// after import.
-ensureInstalled()
-
 /**
  * `true` if the next `onFocus` should be treated as "focus-visible" (keyboard
  * focus). On native, always `true`. On web, reflects the most recent user
@@ -62,7 +64,7 @@ ensureInstalled()
  */
 export function isFocusVisible(): boolean {
   if (Platform.OS !== 'web') return true
-  ensureInstalled()
+  installFocusVisibility()
   return modality === 'keyboard'
 }
 

package/src/gestures/index.ts

@@ -1 +1 @@
-export { isFocusVisible } from './focusVisibility'
+export { installFocusVisibility, isFocusVisible } from './focusVisibility'

package/src/index.ts

@@ -42,12 +42,18 @@ export {
   resolveTransition,
   resolveAnimatableValue,
   ensureWorkletEasing,
+  isTopLevelTransition,
+  stableSig,
   type AnimationCallback,
+  type CallbackFactory,
 } from './transitions'
 // Seed value for any color shared value a custom animated component drives
 // through `resolveTransition`. Exported because the obvious choice —
 // `'transparent'` — cannot be animated away from; see the symbol's own docs.
 export { TRANSPARENT } from './internal/color'
+// Worklet-safe clamp shared by `useTouchDrag` and the gesture adapters'
+// `useDrag`; exported so a custom drag can apply the same rubber-band rule.
+export { applyBounds } from './touch/applyBounds'
 export {
   useAnimation,
   useAnimator,
@@ -61,6 +67,7 @@ export {
   useShadow,
   useSpring,
   useTransform,
+  useTranslateStyle,
   useVariants,
 } from './values'
 // The value-layer hooks above all return Reanimated `SharedValue`s — export
@@ -97,8 +104,10 @@ export type {
   EasingFunction,
   EasingFunctionFactory,
   EasingInput,
+  GestureLayerTransitions,
   GestureSubStates,
   MotionComponent,
+  MotionComponentProps,
   MotionProps,
   NamedTransitions,
   NoAnimationTransition,

package/src/layout/resolveLayout.ts

@@ -1,4 +1,5 @@
 import { LinearTransition } from 'react-native-reanimated'
+import { DEFAULT_LAYOUT_DURATION } from '../transitions/constants'
 import { ensureWorkletEasing } from '../transitions/easing'
 import { DEFAULT_SPRING, springToReanimated } from '../transitions/spring'
 import { type TransitionConfig } from '../types'
@@ -34,7 +35,9 @@ export function resolveLayoutTransition(
   if (cfg.type === 'no-animation') return undefined
 
   if (cfg.type === 'timing') {
-    let builder = LinearTransition.duration(cfg.duration ?? 300)
+    let builder = LinearTransition.duration(
+      cfg.duration ?? DEFAULT_LAYOUT_DURATION,
+    )
     const easing = ensureWorkletEasing(cfg.easing)
     if (easing) builder = builder.easing(easing)
     if (cfg.delay) builder = builder.delay(cfg.delay)

package/src/layout/useSharedLayout.ts

@@ -15,6 +15,7 @@ import {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
+import { DEFAULT_LAYOUT_DURATION } from '../transitions/constants'
 import { DEFAULT_SPRING, springToReanimated } from '../transitions/spring'
 import { type SpringTransition, type TransitionConfig } from '../types'
 import { measureWindowRect } from './measureWindow'
@@ -334,7 +335,7 @@ function legBuilder(
   transition: TransitionConfig | undefined,
 ): (from: number, to: number) => number {
   if (transition?.type === 'timing') {
-    const duration = transition.duration ?? 300
+    const duration = transition.duration ?? DEFAULT_LAYOUT_DURATION
     return (from, to) =>
       withSequence(
         withTiming(from, { duration: 0 }),