@rootnative/inertia 0.0.3 → 0.0.5

package/dist/motion/Image.d.ts

@@ -1,5 +1,5 @@
 import { Image } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.js';
+import { M as MotionComponent } from '../types-BQgLJeQG.js';
 import 'react';
 
 /**

package/dist/motion/Image.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkKBP4LR75_js = require('../chunk-KBP4LR75.js');
-require('../chunk-BP3Y2SHQ.js');
-require('../chunk-7AOERN53.js');
-require('../chunk-PTRF47DA.js');
+var chunkGPOMFIIU_js = require('../chunk-GPOMFIIU.js');
+require('../chunk-VQ5D35UA.js');
+require('../chunk-OBRGJAST.js');
+require('../chunk-PM6CVGXJ.js');
 
 
 
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunkKBP4LR75_js.MotionImage; }
+  get: function () { return chunkGPOMFIIU_js.MotionImage; }
 });

package/dist/motion/Image.mjs

@@ -1,4 +1,4 @@
-export { MotionImage } from '../chunk-O22NXXCZ.mjs';
-import '../chunk-CSODMRJ7.mjs';
-import '../chunk-R63GIUNU.mjs';
-import '../chunk-CY7Y64C3.mjs';
+export { MotionImage } from '../chunk-XSK5MNUH.mjs';
+import '../chunk-RIVVBABB.mjs';
+import '../chunk-Z3HCJ43H.mjs';
+import '../chunk-REYL77RE.mjs';

package/dist/motion/Pressable.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import * as react_native from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
+import { M as MotionComponent } from '../types-BQgLJeQG.mjs';
 
 /**
  * Animatable `Pressable`. The `gesture` prop's `pressed` sub-state hooks into

package/dist/motion/Pressable.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import * as react_native from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.js';
+import { M as MotionComponent } from '../types-BQgLJeQG.js';
 
 /**
  * Animatable `Pressable`. The `gesture` prop's `pressed` sub-state hooks into

package/dist/motion/Pressable.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk3XTVY34H_js = require('../chunk-3XTVY34H.js');
-require('../chunk-BP3Y2SHQ.js');
-require('../chunk-7AOERN53.js');
-require('../chunk-PTRF47DA.js');
+var chunk27U6766G_js = require('../chunk-27U6766G.js');
+require('../chunk-VQ5D35UA.js');
+require('../chunk-OBRGJAST.js');
+require('../chunk-PM6CVGXJ.js');
 
 
 
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunk3XTVY34H_js.MotionPressable; }
+  get: function () { return chunk27U6766G_js.MotionPressable; }
 });

package/dist/motion/Pressable.mjs

@@ -1,4 +1,4 @@
-export { MotionPressable } from '../chunk-46P57VMY.mjs';
-import '../chunk-CSODMRJ7.mjs';
-import '../chunk-R63GIUNU.mjs';
-import '../chunk-CY7Y64C3.mjs';
+export { MotionPressable } from '../chunk-OAUWLPQH.mjs';
+import '../chunk-RIVVBABB.mjs';
+import '../chunk-Z3HCJ43H.mjs';
+import '../chunk-REYL77RE.mjs';

package/dist/motion/ScrollView.d.mts

@@ -1,5 +1,5 @@
 import { ScrollView } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
+import { M as MotionComponent } from '../types-BQgLJeQG.mjs';
 import 'react';
 
 /**

package/dist/motion/ScrollView.d.ts

@@ -1,5 +1,5 @@
 import { ScrollView } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.js';
+import { M as MotionComponent } from '../types-BQgLJeQG.js';
 import 'react';
 
 /**

package/dist/motion/ScrollView.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkW5MC3P4N_js = require('../chunk-W5MC3P4N.js');
-require('../chunk-BP3Y2SHQ.js');
-require('../chunk-7AOERN53.js');
-require('../chunk-PTRF47DA.js');
+var chunkQQVDZKSD_js = require('../chunk-QQVDZKSD.js');
+require('../chunk-VQ5D35UA.js');
+require('../chunk-OBRGJAST.js');
+require('../chunk-PM6CVGXJ.js');
 
 
 
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunkW5MC3P4N_js.MotionScrollView; }
+  get: function () { return chunkQQVDZKSD_js.MotionScrollView; }
 });

package/dist/motion/ScrollView.mjs

@@ -1,4 +1,4 @@
-export { MotionScrollView } from '../chunk-OQV66TBQ.mjs';
-import '../chunk-CSODMRJ7.mjs';
-import '../chunk-R63GIUNU.mjs';
-import '../chunk-CY7Y64C3.mjs';
+export { MotionScrollView } from '../chunk-27MKBTSG.mjs';
+import '../chunk-RIVVBABB.mjs';
+import '../chunk-Z3HCJ43H.mjs';
+import '../chunk-REYL77RE.mjs';

package/dist/motion/Text.d.mts

@@ -1,5 +1,5 @@
 import { Text } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
+import { M as MotionComponent } from '../types-BQgLJeQG.mjs';
 import 'react';
 
 /**

package/dist/motion/Text.d.ts

@@ -1,5 +1,5 @@
 import { Text } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.js';
+import { M as MotionComponent } from '../types-BQgLJeQG.js';
 import 'react';
 
 /**

package/dist/motion/Text.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkFWQOXA43_js = require('../chunk-FWQOXA43.js');
-require('../chunk-BP3Y2SHQ.js');
-require('../chunk-7AOERN53.js');
-require('../chunk-PTRF47DA.js');
+var chunk67GHRCF6_js = require('../chunk-67GHRCF6.js');
+require('../chunk-VQ5D35UA.js');
+require('../chunk-OBRGJAST.js');
+require('../chunk-PM6CVGXJ.js');
 
 
 
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunkFWQOXA43_js.MotionText; }
+  get: function () { return chunk67GHRCF6_js.MotionText; }
 });

package/dist/motion/Text.mjs

@@ -1,4 +1,4 @@
-export { MotionText } from '../chunk-SGUHE5CX.mjs';
-import '../chunk-CSODMRJ7.mjs';
-import '../chunk-R63GIUNU.mjs';
-import '../chunk-CY7Y64C3.mjs';
+export { MotionText } from '../chunk-COEJVWRZ.mjs';
+import '../chunk-RIVVBABB.mjs';
+import '../chunk-Z3HCJ43H.mjs';
+import '../chunk-REYL77RE.mjs';

package/dist/motion/View.d.mts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
+import { M as MotionComponent } from '../types-BQgLJeQG.mjs';
 import 'react';
 
 /**

package/dist/motion/View.d.ts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { M as MotionComponent } from '../types-G1dBU2IQ.js';
+import { M as MotionComponent } from '../types-BQgLJeQG.js';
 import 'react';
 
 /**

package/dist/motion/View.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkFNVFV4EY_js = require('../chunk-FNVFV4EY.js');
-require('../chunk-BP3Y2SHQ.js');
-require('../chunk-7AOERN53.js');
-require('../chunk-PTRF47DA.js');
+var chunkK63LXGKS_js = require('../chunk-K63LXGKS.js');
+require('../chunk-VQ5D35UA.js');
+require('../chunk-OBRGJAST.js');
+require('../chunk-PM6CVGXJ.js');
 
 
 
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunkFNVFV4EY_js.MotionView; }
+  get: function () { return chunkK63LXGKS_js.MotionView; }
 });

package/dist/motion/View.mjs

@@ -1,4 +1,4 @@
-export { MotionView } from '../chunk-BQQTHG2V.mjs';
-import '../chunk-CSODMRJ7.mjs';
-import '../chunk-R63GIUNU.mjs';
-import '../chunk-CY7Y64C3.mjs';
+export { MotionView } from '../chunk-GTJ6VAH5.mjs';
+import '../chunk-RIVVBABB.mjs';
+import '../chunk-Z3HCJ43H.mjs';
+import '../chunk-REYL77RE.mjs';

package/dist/touch/index.d.mts

@@ -1,6 +1,6 @@
 import { PanResponderInstance } from 'react-native';
 import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
-import { T as TransitionConfig } from '../types-G1dBU2IQ.mjs';
+import { T as TransitionConfig } from '../types-BQgLJeQG.mjs';
 import 'react';
 
 /**

package/dist/touch/index.d.ts

@@ -1,6 +1,6 @@
 import { PanResponderInstance } from 'react-native';
 import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
-import { T as TransitionConfig } from '../types-G1dBU2IQ.js';
+import { T as TransitionConfig } from '../types-BQgLJeQG.js';
 import 'react';
 
 /**

package/dist/touch/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPTRF47DA_js = require('../chunk-PTRF47DA.js');
+var chunkPM6CVGXJ_js = require('../chunk-PM6CVGXJ.js');
 var react = require('react');
 var reactNative = require('react-native');
 var reactNativeReanimated = require('react-native-reanimated');
@@ -48,14 +48,14 @@ function useTouchDrag(options = {}) {
         if (result) {
           if (result.x && lockX) {
             const toX = "to" in result.x ? result.x.to : x;
-            dragX.value = chunkPTRF47DA_js.buildReleaseAnimation(
+            dragX.value = chunkPM6CVGXJ_js.buildReleaseAnimation(
               result.x,
               toX
             );
           }
           if (result.y && lockY) {
             const toY = "to" in result.y ? result.y.to : y;
-            dragY.value = chunkPTRF47DA_js.buildReleaseAnimation(
+            dragY.value = chunkPM6CVGXJ_js.buildReleaseAnimation(
               result.y,
               toY
             );

package/dist/touch/index.mjs

@@ -1,4 +1,4 @@
-import { buildReleaseAnimation } from '../chunk-CY7Y64C3.mjs';
+import { buildReleaseAnimation } from '../chunk-REYL77RE.mjs';
 import { useMemo } from 'react';
 import { PanResponder } from 'react-native';
 import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

package/dist/{types-G1dBU2IQ.d.mts → types-BQgLJeQG.d.mts}

@@ -1,5 +1,5 @@
 import { ComponentType, ComponentProps, Ref, ReactElement } from 'react';
-import { StyleProp } from 'react-native';
+import { StyleProp, BoxShadowValue } from 'react-native';
 
 /**
  * A single animation step's destination, optionally overriding the transition
@@ -154,6 +154,50 @@ type AnimatableTransformExtras = {
     rotateX?: AnimatableValue<number>;
     rotateY?: AnimatableValue<number>;
 };
+/**
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
+ *
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
+ * (the short side is padded with a transparent layer, as CSS transitions do).
+ * A layer that is `inset` on one side and not the other is not interpolable
+ * and throws.
+ */
+type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>;
+/**
+ * Keys whose animatable form deliberately departs from the generic
+ * `AnimatableValue<S[K]>` mapping.
+ *
+ * `boxShadow` is the only member. Its natural value is already an array, which
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
+ * sequence. The array slot is given to layers, which is the shape RN itself
+ * uses and by far the common case, and sequences are unsupported on this key.
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
+ * { type: 'timing' } }}` works as it does for every other key.
+ *
+ * Conditional on `S` so the key only appears where the underlying style
+ * actually has it, rather than being bolted onto every primitive.
+ */
+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
@@ -166,11 +210,33 @@ type AnimatableTransformExtras = {
  * 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> ? {
-    [K in keyof S]?: AnimatableValue<S[K]>;
-} & AnimatableTransformExtras : never : never;
+    [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.
@@ -339,19 +405,24 @@ interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
      * recorded rect to its natural position via a FLIP transform stack.
      *
      * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
-     * Inertia-side measure-based replacement. Rects are recorded in
-     * parent-relative coordinates (from `onLayout`), which composes when the
-     * source and target screens share an outer content container (the common
-     * stack-navigator case); nested-parent layouts need the v2
-     * window-coordinate path.
+     * Inertia-side measure-based replacement. Rects are recorded in **window**
+     * coordinates wherever the host can be measured synchronously (Fabric),
+     * which is what lets a source and target sit under containers at different
+     * screen offsets; elsewhere both fall back to the parent-relative
+     * coordinates `onLayout` reports. A source and target that ended up in
+     * different spaces skip the animation rather than play a wrong one.
      *
      * The same `transition` prop drives the FLIP animation (spring by
      * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
-     * motion skips the transition). Out of scope for the first iteration:
-     * style-prop interpolation (border radius, colors, etc.) — only the
-     * rect-to-rect transform is animated. Two simultaneously-mounted
-     * primitives sharing the same `layoutId` are undefined behavior; pick a
-     * primitive per id at a time.
+     * motion skips the transition). Alongside the rect, a fixed set of style
+     * keys is carried from the source and crossfaded out on that same
+     * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
+     * `color`, `tintColor`. Transform keys are not carried — the FLIP owns
+     * them — and a key only participates when the element already has a value
+     * for it, from a record or from its static `style`.
+     *
+     * Two simultaneously-mounted primitives sharing the same `layoutId` are
+     * undefined behavior; pick a primitive per id at a time.
      */
     layoutId?: string;
     /**
@@ -385,4 +456,4 @@ interface MotionComponent<C extends ComponentType<any>> {
     displayName?: string;
 }
 
-export type { AnimatableValue as A, 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, VariantController as V, TransitionInput as a, TransitionName as b, AnimateStyle as c, AnimationCallbackInfo as d, EasingFunction as e, EasingFunctionFactory as f, GestureSubStates as g, MotionProps as h, NoAnimationTransition as i, RepeatConfig as j, SequenceStep as k, TimingTransition as l, Transition as m, VariantsMap 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, VariantController as V, TransitionInput as a, TransitionName as b, AnimateStyle as c, AnimationCallbackInfo as d, EasingFunction as e, EasingFunctionFactory as f, GestureSubStates as g, MotionProps as h, NoAnimationTransition as i, RepeatConfig as j, SequenceStep as k, TimingTransition as l, Transition as m, VariantsMap as n };

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

@@ -1,5 +1,5 @@
 import { ComponentType, ComponentProps, Ref, ReactElement } from 'react';
-import { StyleProp } from 'react-native';
+import { StyleProp, BoxShadowValue } from 'react-native';
 
 /**
  * A single animation step's destination, optionally overriding the transition
@@ -154,6 +154,50 @@ type AnimatableTransformExtras = {
     rotateX?: AnimatableValue<number>;
     rotateY?: AnimatableValue<number>;
 };
+/**
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
+ *
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
+ * (the short side is padded with a transparent layer, as CSS transitions do).
+ * A layer that is `inset` on one side and not the other is not interpolable
+ * and throws.
+ */
+type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>;
+/**
+ * Keys whose animatable form deliberately departs from the generic
+ * `AnimatableValue<S[K]>` mapping.
+ *
+ * `boxShadow` is the only member. Its natural value is already an array, which
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
+ * sequence. The array slot is given to layers, which is the shape RN itself
+ * uses and by far the common case, and sequences are unsupported on this key.
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
+ * { type: 'timing' } }}` works as it does for every other key.
+ *
+ * Conditional on `S` so the key only appears where the underlying style
+ * actually has it, rather than being bolted onto every primitive.
+ */
+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
@@ -166,11 +210,33 @@ type AnimatableTransformExtras = {
  * 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> ? {
-    [K in keyof S]?: AnimatableValue<S[K]>;
-} & AnimatableTransformExtras : never : never;
+    [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.
@@ -339,19 +405,24 @@ interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
      * recorded rect to its natural position via a FLIP transform stack.
      *
      * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
-     * Inertia-side measure-based replacement. Rects are recorded in
-     * parent-relative coordinates (from `onLayout`), which composes when the
-     * source and target screens share an outer content container (the common
-     * stack-navigator case); nested-parent layouts need the v2
-     * window-coordinate path.
+     * Inertia-side measure-based replacement. Rects are recorded in **window**
+     * coordinates wherever the host can be measured synchronously (Fabric),
+     * which is what lets a source and target sit under containers at different
+     * screen offsets; elsewhere both fall back to the parent-relative
+     * coordinates `onLayout` reports. A source and target that ended up in
+     * different spaces skip the animation rather than play a wrong one.
      *
      * The same `transition` prop drives the FLIP animation (spring by
      * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
-     * motion skips the transition). Out of scope for the first iteration:
-     * style-prop interpolation (border radius, colors, etc.) — only the
-     * rect-to-rect transform is animated. Two simultaneously-mounted
-     * primitives sharing the same `layoutId` are undefined behavior; pick a
-     * primitive per id at a time.
+     * motion skips the transition). Alongside the rect, a fixed set of style
+     * keys is carried from the source and crossfaded out on that same
+     * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
+     * `color`, `tintColor`. Transform keys are not carried — the FLIP owns
+     * them — and a key only participates when the element already has a value
+     * for it, from a record or from its static `style`.
+     *
+     * Two simultaneously-mounted primitives sharing the same `layoutId` are
+     * undefined behavior; pick a primitive per id at a time.
      */
     layoutId?: string;
     /**
@@ -385,4 +456,4 @@ interface MotionComponent<C extends ComponentType<any>> {
     displayName?: string;
 }
 
-export type { AnimatableValue as A, 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, VariantController as V, TransitionInput as a, TransitionName as b, AnimateStyle as c, AnimationCallbackInfo as d, EasingFunction as e, EasingFunctionFactory as f, GestureSubStates as g, MotionProps as h, NoAnimationTransition as i, RepeatConfig as j, SequenceStep as k, TimingTransition as l, Transition as m, VariantsMap 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, VariantController as V, TransitionInput as a, TransitionName as b, AnimateStyle as c, AnimationCallbackInfo as d, EasingFunction as e, EasingFunctionFactory as f, GestureSubStates as g, MotionProps as h, NoAnimationTransition as i, RepeatConfig as j, SequenceStep as k, TimingTransition as l, Transition as m, VariantsMap as n };

package/dist/{useGesture-D1e4ixJo.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-G1dBU2IQ.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-RFY6kTL3.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-G1dBU2IQ.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/llms.txt

@@ -140,7 +140,9 @@ Color: `backgroundColor`, `borderColor`, `color`, `tintColor` (Image only), `sha
 
 Nested object: `shadowOffset: { width, height }`. The only nested-object style on the surface — internally decomposes into two synthetic axis SVs that the worklet recomposes into a single `shadowOffset` prop. `0.0.1` supports the **single-value form only** (`{ width: 0, height: 4 }`); sequences / array keyframes / per-axis transition splits are out of scope, drop to `useMotionValue` for those.
 
-Auto-layout transitions ship via the `layout` prop (`true` / `TransitionConfig`) on every `Motion.*` primitive — see Layout. Shared element transitions ship via the `layoutId` prop: pair the same id on a source and target `Motion.*` and Inertia FLIPs between them on mount (parent-relative coords, rect-only animation, 1s TTL).
+Structured: `boxShadow` — the cross-platform CSS shadow form, as a CSS string (`'0px 4px 8px rgba(0,0,0,0.3)'`, px lengths only) or RN's `BoxShadowValue[]`. Endpoints are normalized on the JS thread and padded to a common layer count (CSS-transition semantics), so layer counts may differ between `initial` and `animate`; every length and color interpolates per layer. `inset` is carried as a static per-layer flag, not interpolated — a layer inset on one side only throws. **No sequences on this key** (the array slot means layers, not keyframes) and **not accepted in `gesture` sub-states** (dev-warns and is ignored; drive it from `animate`, or interpolate manually with `useShadow`). Don't animate it alongside the native `shadow*` keys on one element — two shadow systems at once; Inertia dev-warns.
+
+Auto-layout transitions ship via the `layout` prop (`true` / `TransitionConfig`) on every `Motion.*` primitive — see Layout. Shared element transitions ship via the `layoutId` prop: pair the same id on a source and target `Motion.*` and Inertia FLIPs between them on mount (1s TTL). Alongside the rect, a fixed set of style keys is carried from the source and crossfaded out on the same transition — `opacity`, `borderRadius`, `backgroundColor`, `borderColor`, `color`, `tintColor` — but only for keys the element already has a value for, from a record or its static `style`; transform keys are not carried because the FLIP owns them. Rects are measured in **window** coordinates via `measureInWindow` where the host resolves it synchronously (Fabric), which is what lets source and target sit under differently-offset parents; elsewhere both fall back to parent-relative `onLayout` coords. A source and target in different coordinate spaces skip the animation rather than play a wrong one. A still-mounted source is re-measured when the target lays out, so an ancestor scroll (which never fires `onLayout`) doesn't offset the transition.
 
 ## Optional adapter packages
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",

package/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * `@rootnative/inertia` — declarative animation primitives for React Native.
  *
- * v0.1 surface: `Motion.View` / `Motion.Text` / `Motion.Image` /
+ * Public surface: `Motion.View` / `Motion.Text` / `Motion.Image` /
  * `Motion.Pressable` / `Motion.ScrollView`, with `initial` / `animate` /
  * `exit` / `transition` / `variants` / `gesture` / `controller` /
  * `onAnimationEnd` props. Sequences, repeats (single-value and
@@ -82,6 +82,7 @@ export type {
   AnimatableValue,
   AnimateStyle,
   AnimationCallbackInfo,
+  BoxShadowInput,
   DecayTransition,
   EasingFunction,
   EasingFunctionFactory,