@rootnative/inertia 0.0.4 → 0.0.5

package/dist/{types-37pN82yh.d.ts → types-BQgLJeQG.d.ts}

@@ -184,6 +184,20 @@ type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>;
 type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S ? {
     boxShadow?: BoxShadowInput;
 } : {};
+/**
+ * The `transform: [...]` array form, passed through as the underlying style
+ * types it. Inertia reads transform entries out of the array (see
+ * `styleValueFor` in `createMotionComponent`) rather than treating the array as
+ * an animatable scalar, so it is exempted from the `AnimatableValue` mapping —
+ * wrapping it there would offer a nonsensical `transform: [[...], [...]]`
+ * keyframe form.
+ *
+ * Conditional on `S` for the same reason as `boxShadow`: only appears where the
+ * underlying style actually has it.
+ */
+type AnimatableTransformArray<S> = 'transform' extends keyof S ? {
+    transform?: S['transform'];
+} : {};
 /**
  * The animation state shape inferred from the underlying component's style
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -196,11 +210,33 @@ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S ? {
  * accepts any key. Excluding functions first keeps inference tight.
  */
 type _StyleValue<T> = Exclude<T, (...args: any[]) => any>;
+/**
+ * The style keys Inertia's runtime actually drives — the type-level mirror of
+ * `ALL_KEYS` in `createMotionComponent`, minus the `shadowOffset*` synthetics
+ * (consumers write the nested `shadowOffset` object, not the axes) and minus
+ * `boxShadow` (handled by `AnimatableStructuredExtras`, whose value shape
+ * deliberately departs from `AnimatableValue`).
+ *
+ * **This list and `ALL_KEYS` must stay in sync.** They are separate because one
+ * is a type and the other is a runtime array, and TypeScript can't derive the
+ * former from a value living in a module that imports this one. The direction
+ * that matters: a key here but not in `ALL_KEYS` typechecks and then silently
+ * does nothing at runtime — which is precisely the defect this type was
+ * introduced to kill. `animate-keys.test-d.tsx` pins the two together.
+ *
+ * Before 0.0.5 this type mapped over the component's *entire* style surface, so
+ * `animate={{ paddingTop: 40 }}` compiled cleanly and was then dropped on the
+ * floor — no error, no warning. That contradicted the library's own headline
+ * differentiator (wrong props should error, not go unnoticed), so the mapping is
+ * now an intersection: a key must be both animatable by Inertia *and* present on
+ * the underlying component's style prop.
+ */
+type AnimatableStyleKey = 'translateX' | 'translateY' | 'scaleX' | 'scaleY' | 'opacity' | 'width' | 'height' | 'borderRadius' | 'shadowOpacity' | 'shadowRadius' | 'elevation' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderWidth' | 'borderTopWidth' | 'borderRightWidth' | 'borderBottomWidth' | 'borderLeftWidth' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingHorizontal' | 'paddingVertical' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginHorizontal' | 'marginVertical' | 'flex' | 'flexGrow' | 'flexShrink' | 'fontSize' | 'letterSpacing' | 'lineHeight' | 'zIndex' | 'gap' | 'rowGap' | 'columnGap' | 'backgroundColor' | 'borderColor' | 'color' | 'tintColor' | 'shadowColor' | 'shadowOffset';
 type AnimateStyle<C> = C extends {
     style?: infer Raw;
-} ? _StyleValue<Raw> extends StyleProp<infer S> ? Omit<{
-    [K in keyof S]?: AnimatableValue<S[K]>;
-}, 'boxShadow'> & AnimatableTransformExtras & AnimatableStructuredExtras<S> : never : never;
+} ? _StyleValue<Raw> extends StyleProp<infer S> ? {
+    [K in keyof S as K extends AnimatableStyleKey ? K : never]?: K extends 'boxShadow' | 'transform' ? never : AnimatableValue<S[K]>;
+} & AnimatableTransformExtras & AnimatableStructuredExtras<S> & AnimatableTransformArray<S> : never : never;
 interface AnimationCallbackInfo<S> {
     /**
      * The animatable key that just settled — typically a `keyof S` (e.g.

package/dist/{useGesture-Cl4uzZIr.d.ts → useGesture-B0_CzOUz.d.ts}

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

package/dist/{useGesture-_IKkS8Dv.d.mts → useGesture-DfaTx-3t.d.mts}

@@ -1,5 +1,5 @@
 import { SharedValue } from 'react-native-reanimated';
-import { a as TransitionInput, G as GestureLayerTransitions } from './types-37pN82yh.mjs';
+import { a as TransitionInput, G as GestureLayerTransitions } from './types-BQgLJeQG.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.4",
+  "version": "0.0.5",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",

package/src/motion/createMotionComponent.tsx

@@ -91,6 +91,78 @@ const NUMERIC_TOP_LEVEL_KEYS = [
   'shadowOpacity',
   'shadowRadius',
   'elevation',
+  // ─── Added in 0.0.5 ──────────────────────────────────────────────────────
+  //
+  // Every key below rides the generic numeric path: one shared value, resolved
+  // on the JS thread, emitted by the worklet through the same `out[key] = v`
+  // branch as `opacity`. None needs a new interpolation mode, so the cost is
+  // the shared value plus a `DEFAULT_RESTING` entry.
+  //
+  // The load-bearing constraint is the resting default, not the plumbing. A
+  // key declared only in `gesture` / `exit` / a non-active variant rests at
+  // `DEFAULT_RESTING` unless the static `style` names it, and the animated
+  // style merges *after* `style` — so a non-identity default silently stomps
+  // the layout. That is the `0.0.3` P0 class, and it is why the sizing and
+  // spacing keys below default to `0` only in the sense RN itself does (an
+  // unset `padding` *is* 0); `minWidth`/`maxWidth`/`aspectRatio` are
+  // deliberately excluded — their "unset" is not a number, so no default can
+  // stand in for it without changing layout on activation.
+  //
+  // Per-corner radii. Animating one corner is common (a card expanding into a
+  // sheet keeps its top corners and squares off the bottom); `borderRadius`
+  // alone can't express it.
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  // Border widths. `borderWidth` is the common case; the per-edge keys matter
+  // for underline-style focus affordances (`borderBottomWidth` on a field).
+  'borderWidth',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  // Absolute-position insets. Bread-and-butter for drawers, tooltips, and
+  // anything pinned to an edge that slides in.
+  'top',
+  'right',
+  'bottom',
+  'left',
+  // Spacing. Padding animates the box from the inside (a button growing its
+  // hit area on press); margin shifts it within its parent's flow.
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginHorizontal',
+  'marginVertical',
+  // Flex sizing. `flex` / `flexGrow` interpolate the split between siblings —
+  // the idiomatic RN way to animate a pane resize without measuring.
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  // Text metrics. `TextStyle`-only at the type level (`AnimateStyle<C>` gates
+  // them per primitive), but the runtime table is shared across primitives —
+  // an unused slot is one ref, same as `tintColor` has always been.
+  'fontSize',
+  'letterSpacing',
+  'lineHeight',
+  // Stacking. Integer-valued in practice, and interpolating it mid-flight is
+  // rarely what you want, but a `no-animation` transition on `zIndex` is the
+  // clean way to reorder at a step boundary in a sequence.
+  'zIndex',
+  // Gap. Row/column gaps animate a list's density without touching children.
+  'gap',
+  'rowGap',
+  'columnGap',
 ] as const
 
 // Color-valued keys. Reanimated's value setter detects color strings and
@@ -221,6 +293,54 @@ const DEFAULT_RESTING: Record<AnimatableKey, AnimatableSlotValue> = {
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0,
+  // 0.0.5 keys. Every one of these is 0 because that is RN's own unset value
+  // for it — an element with no `paddingTop` has 0 padding, no `borderWidth`
+  // has none, no `top` is unpinned at 0 within its positioning context. So a
+  // key that reaches its resting default lands where the element already was.
+  //
+  // The exception worth naming: `flex` / `flexGrow` / `flexShrink` do NOT have
+  // 0 as a universal identity (`flexShrink` defaults to 1 on the web, and RN's
+  // own default differs by axis). They are still 0 here, because the style-scan
+  // in the resting pass reads the real value off the static `style` whenever it
+  // is declared — and a consumer animating flex without declaring it is asking
+  // for the from-0 growth, which is the readable interpretation.
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderWidth: 0,
+  borderTopWidth: 0,
+  borderRightWidth: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  padding: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  margin: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexShrink: 0,
+  fontSize: 0,
+  letterSpacing: 0,
+  lineHeight: 0,
+  zIndex: 0,
+  gap: 0,
+  rowGap: 0,
+  columnGap: 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
@@ -1245,74 +1365,38 @@ type SharedValueMap = Record<AnimatableKey, SharedValue<AnimatableSlotValue>>
  * are stable across renders (Reanimated's `useSharedValue` is a `useRef`
  * under the hood), so snapshotting the wrapping object once is safe.
  *
- * Hooks are called in a stable, lexical order — fine for rules-of-hooks.
- * Unused shared values are cheap; the worklet skips them via
- * `activeKeysRef`. Color keys are seeded with the initial color string so
- * Reanimated's value setter recognizes the slot as a color from the first
- * `withSpring` / `withTiming` call.
+ * Hooks are called by iterating `ALL_KEYS`, which is a module-level `as const`
+ * array — its length and order are fixed at module evaluation, so the hook
+ * sequence is identical on every render of every instance. That satisfies
+ * rules-of-hooks exactly as a hand-written list does, and it is what keeps this
+ * function from growing a line per key: the 0.0.5 additions took the table from
+ * 23 keys to 63, and 63 near-identical `useSharedValue` lines is both a bigger
+ * bundle and a standing invitation to add a key in one list but not the other
+ * (the failure mode is a `sharedValues[key]` of `undefined` inside the worklet,
+ * which is exactly how the first draft of that change broke).
+ *
+ * The ESLint exhaustive-deps rule can't see through the loop, hence the
+ * disable — the invariant it would check for us is asserted above instead.
+ *
+ * Unused shared values are cheap; the worklet skips them via `activeKeysRef`.
+ * Color keys are seeded with the initial color string so Reanimated's value
+ * setter recognizes the slot as a color from the first `withSpring` /
+ * `withTiming` call.
  */
 function useAnimatableSharedValues(
   init: (key: AnimatableKey) => AnimatableSlotValue,
 ): SharedValueMap {
-  const translateX = useSharedValue<AnimatableSlotValue>(init('translateX'))
-  const translateY = useSharedValue<AnimatableSlotValue>(init('translateY'))
-  const scale = useSharedValue<AnimatableSlotValue>(init('scale'))
-  const scaleX = useSharedValue<AnimatableSlotValue>(init('scaleX'))
-  const scaleY = useSharedValue<AnimatableSlotValue>(init('scaleY'))
-  const rotate = useSharedValue<AnimatableSlotValue>(init('rotate'))
-  const rotateX = useSharedValue<AnimatableSlotValue>(init('rotateX'))
-  const rotateY = useSharedValue<AnimatableSlotValue>(init('rotateY'))
-  const opacity = useSharedValue<AnimatableSlotValue>(init('opacity'))
-  const width = useSharedValue<AnimatableSlotValue>(init('width'))
-  const height = useSharedValue<AnimatableSlotValue>(init('height'))
-  const borderRadius = useSharedValue<AnimatableSlotValue>(init('borderRadius'))
-  const shadowOpacity = useSharedValue<AnimatableSlotValue>(
-    init('shadowOpacity'),
-  )
-  const shadowRadius = useSharedValue<AnimatableSlotValue>(init('shadowRadius'))
-  const elevation = useSharedValue<AnimatableSlotValue>(init('elevation'))
-  const backgroundColor = useSharedValue<AnimatableSlotValue>(
-    init('backgroundColor'),
-  )
-  const borderColor = useSharedValue<AnimatableSlotValue>(init('borderColor'))
-  const color = useSharedValue<AnimatableSlotValue>(init('color'))
-  const tintColor = useSharedValue<AnimatableSlotValue>(init('tintColor'))
-  const shadowColor = useSharedValue<AnimatableSlotValue>(init('shadowColor'))
-  const shadowOffsetWidth = useSharedValue<AnimatableSlotValue>(
-    init('shadowOffsetWidth'),
-  )
-  const shadowOffsetHeight = useSharedValue<AnimatableSlotValue>(
-    init('shadowOffsetHeight'),
-  )
-  const boxShadow = useSharedValue<AnimatableSlotValue>(init('boxShadow'))
+  const entries: [AnimatableKey, SharedValue<AnimatableSlotValue>][] = []
+  for (const key of ALL_KEYS) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    entries.push([key, useSharedValue<AnimatableSlotValue>(init(key))])
+  }
 
   const ref = useRef<SharedValueMap | null>(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,
-      boxShadow,
-    }
+    const map = {} as SharedValueMap
+    for (const [key, sv] of entries) map[key] = sv
+    ref.current = map
   }
 
   // Cancel every in-flight per-key animation when the primitive unmounts, so

package/src/transitions/resolveSequence.ts

@@ -77,6 +77,18 @@ function mergeTransition(
   base: TransitionConfig | undefined,
   override: Partial<TransitionConfig>,
 ): TransitionConfig {
+  // A `no-animation` base is a ceiling, not a default, so no step override can
+  // talk its way past it. This is the reduced-motion gate: `configFor` in the
+  // factory swaps every per-key transition for `{ type: 'no-animation' }`, and
+  // the step-type rule below would otherwise hand a step its own `withTiming`
+  // back — silently animating for a user who asked the OS not to. Keep this
+  // branch first; it is the whole reason the gate holds for sequences.
+  //
+  // Returning `base` also drops any step `delay`, which matches how the rest
+  // of the resolver already treats this type: `delayOf` and `repeatOf` both
+  // return `undefined` for `no-animation`, so a snap is never deferred or
+  // repeated anywhere in the library.
+  if (base?.type === 'no-animation') return base
   // If the override declares a `type`, it wins outright — mixing fields from
   // a spring base into a timing override produces garbage. Otherwise inherit
   // the base's type and shallow-merge the rest.

package/src/types.ts

@@ -217,6 +217,22 @@ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
   : // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     {}
 
+/**
+ * The `transform: [...]` array form, passed through as the underlying style
+ * types it. Inertia reads transform entries out of the array (see
+ * `styleValueFor` in `createMotionComponent`) rather than treating the array as
+ * an animatable scalar, so it is exempted from the `AnimatableValue` mapping —
+ * wrapping it there would offer a nonsensical `transform: [[...], [...]]`
+ * keyframe form.
+ *
+ * Conditional on `S` for the same reason as `boxShadow`: only appears where the
+ * underlying style actually has it.
+ */
+type AnimatableTransformArray<S> = 'transform' extends keyof S
+  ? { transform?: S['transform'] }
+  : // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    {}
+
 /**
  * The animation state shape inferred from the underlying component's style
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -231,11 +247,98 @@ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type _StyleValue<T> = Exclude<T, (...args: any[]) => any>
 
+/**
+ * The style keys Inertia's runtime actually drives — the type-level mirror of
+ * `ALL_KEYS` in `createMotionComponent`, minus the `shadowOffset*` synthetics
+ * (consumers write the nested `shadowOffset` object, not the axes) and minus
+ * `boxShadow` (handled by `AnimatableStructuredExtras`, whose value shape
+ * deliberately departs from `AnimatableValue`).
+ *
+ * **This list and `ALL_KEYS` must stay in sync.** They are separate because one
+ * is a type and the other is a runtime array, and TypeScript can't derive the
+ * former from a value living in a module that imports this one. The direction
+ * that matters: a key here but not in `ALL_KEYS` typechecks and then silently
+ * does nothing at runtime — which is precisely the defect this type was
+ * introduced to kill. `animate-keys.test-d.tsx` pins the two together.
+ *
+ * Before 0.0.5 this type mapped over the component's *entire* style surface, so
+ * `animate={{ paddingTop: 40 }}` compiled cleanly and was then dropped on the
+ * floor — no error, no warning. That contradicted the library's own headline
+ * differentiator (wrong props should error, not go unnoticed), so the mapping is
+ * now an intersection: a key must be both animatable by Inertia *and* present on
+ * the underlying component's style prop.
+ */
+type AnimatableStyleKey =
+  // Transform axes surfaced as top-level keys.
+  | 'translateX'
+  | 'translateY'
+  | 'scaleX'
+  | 'scaleY'
+  // Numeric top-level keys.
+  | 'opacity'
+  | 'width'
+  | 'height'
+  | 'borderRadius'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+  | 'elevation'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderWidth'
+  | 'borderTopWidth'
+  | 'borderRightWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'padding'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'margin'
+  | 'marginTop'
+  | 'marginRight'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'flex'
+  | 'flexGrow'
+  | 'flexShrink'
+  | 'fontSize'
+  | 'letterSpacing'
+  | 'lineHeight'
+  | 'zIndex'
+  | 'gap'
+  | 'rowGap'
+  | 'columnGap'
+  // Color keys.
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'color'
+  | 'tintColor'
+  | 'shadowColor'
+  // The one nested-object style prop, written as `{ width, height }`.
+  | 'shadowOffset'
+
 export type AnimateStyle<C> = C extends { style?: infer Raw }
   ? _StyleValue<Raw> extends StyleProp<infer S>
-    ? Omit<{ [K in keyof S]?: AnimatableValue<S[K]> }, 'boxShadow'> &
-        AnimatableTransformExtras &
-        AnimatableStructuredExtras<S>
+    ? {
+        [K in keyof S as K extends AnimatableStyleKey ? K : never]?: K extends
+          | 'boxShadow'
+          | 'transform'
+          ? never
+          : AnimatableValue<S[K]>
+      } & AnimatableTransformExtras &
+        AnimatableStructuredExtras<S> &
+        AnimatableTransformArray<S>
     : never
   : never
 

package/dist/chunk-5SRD2WCO.js

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

package/dist/chunk-TVFNJ25Z.js

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

package/dist/chunk-VLDIFL3F.js

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