@rootnative/inertia 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/CHANGELOG.md +63 -5
  2. package/README.md +5 -3
  3. package/dist/{chunk-ZN3PNGHQ.mjs → chunk-4ASOELLA.mjs} +1 -1
  4. package/dist/{chunk-LYMLQ6WQ.mjs → chunk-55W7BNO2.mjs} +604 -106
  5. package/dist/chunk-5SRD2WCO.js +8 -0
  6. package/dist/{chunk-PTRF47DA.js → chunk-7A6WTXNK.js} +10 -3
  7. package/dist/{chunk-NKA6XR77.js → chunk-CENTULW6.js} +2 -2
  8. package/dist/{chunk-4PEHWDAZ.js → chunk-D5KAHWMC.js} +7 -7
  9. package/dist/{chunk-2DHKV2XY.mjs → chunk-J5Q46OPW.mjs} +1 -1
  10. package/dist/{chunk-RGNX6UZN.mjs → chunk-K3CLP74S.mjs} +2 -2
  11. package/dist/{chunk-IWLU3VDE.js → chunk-MYE5NMXW.js} +623 -123
  12. package/dist/{chunk-HFDZAHWP.mjs → chunk-NAOXQJ7U.mjs} +1 -1
  13. package/dist/{chunk-R63GIUNU.mjs → chunk-QKC3APP4.mjs} +1 -1
  14. package/dist/{chunk-V6BTXHZK.mjs → chunk-RF7J5FRM.mjs} +1 -1
  15. package/dist/{chunk-CY7Y64C3.mjs → chunk-TU2XFPAK.mjs} +10 -4
  16. package/dist/chunk-TVFNJ25Z.js +8 -0
  17. package/dist/chunk-VLDIFL3F.js +8 -0
  18. package/dist/{chunk-7AOERN53.js → chunk-WVRCKOPO.js} +3 -3
  19. package/dist/{chunk-TUYHTHVV.js → chunk-XMEVPEMH.js} +2 -2
  20. package/dist/{chunk-TUMNV4P7.mjs → chunk-YKGY22SB.mjs} +1 -1
  21. package/dist/gestureLayer/index.d.mts +2 -2
  22. package/dist/gestureLayer/index.d.ts +2 -2
  23. package/dist/gestureLayer/index.js +10 -10
  24. package/dist/gestureLayer/index.mjs +3 -3
  25. package/dist/index.d.mts +14 -12
  26. package/dist/index.d.ts +14 -12
  27. package/dist/index.js +68 -176
  28. package/dist/index.mjs +40 -147
  29. package/dist/motion/Image.d.mts +1 -1
  30. package/dist/motion/Image.d.ts +1 -1
  31. package/dist/motion/Image.js +5 -5
  32. package/dist/motion/Image.mjs +4 -4
  33. package/dist/motion/Pressable.d.mts +1 -1
  34. package/dist/motion/Pressable.d.ts +1 -1
  35. package/dist/motion/Pressable.js +5 -5
  36. package/dist/motion/Pressable.mjs +4 -4
  37. package/dist/motion/ScrollView.d.mts +1 -1
  38. package/dist/motion/ScrollView.d.ts +1 -1
  39. package/dist/motion/ScrollView.js +5 -5
  40. package/dist/motion/ScrollView.mjs +4 -4
  41. package/dist/motion/Text.d.mts +1 -1
  42. package/dist/motion/Text.d.ts +1 -1
  43. package/dist/motion/Text.js +5 -5
  44. package/dist/motion/Text.mjs +4 -4
  45. package/dist/motion/View.d.mts +1 -1
  46. package/dist/motion/View.d.ts +1 -1
  47. package/dist/motion/View.js +5 -5
  48. package/dist/motion/View.mjs +4 -4
  49. package/dist/touch/index.d.mts +1 -1
  50. package/dist/touch/index.d.ts +1 -1
  51. package/dist/touch/index.js +3 -3
  52. package/dist/touch/index.mjs +1 -1
  53. package/dist/{types-G1dBU2IQ.d.mts → types-37pN82yh.d.mts} +49 -14
  54. package/dist/{types-G1dBU2IQ.d.ts → types-37pN82yh.d.ts} +49 -14
  55. package/dist/{useGesture-D1e4ixJo.d.ts → useGesture-Cl4uzZIr.d.ts} +1 -1
  56. package/dist/{useGesture-RFY6kTL3.d.mts → useGesture-_IKkS8Dv.d.mts} +1 -1
  57. package/llms.txt +3 -1
  58. package/package.json +1 -1
  59. package/src/index.ts +2 -1
  60. package/src/internal/boxShadow.ts +177 -6
  61. package/src/internal/nonWorkletWarning.ts +4 -6
  62. package/src/internal/warnOnce.ts +28 -0
  63. package/src/layout/index.ts +11 -0
  64. package/src/layout/measureWindow.ts +135 -0
  65. package/src/layout/sharedRegistry.ts +156 -18
  66. package/src/layout/useSharedLayout.ts +256 -91
  67. package/src/motion/createMotionComponent.tsx +550 -55
  68. package/src/motion/installCheck.ts +1 -1
  69. package/src/presence/Presence.tsx +73 -10
  70. package/src/transitions/index.ts +1 -1
  71. package/src/types.ts +52 -12
  72. package/src/values/useAnimator.ts +25 -14
  73. package/src/values/useColorCascade.ts +34 -16
  74. package/src/values/useColorTransition.ts +1 -1
  75. package/dist/chunk-34Q4UM6V.js +0 -8
  76. package/dist/chunk-KYJROYCG.js +0 -8
  77. package/dist/chunk-X5J5M3K3.js +0 -8
@@ -1,4 +1,4 @@
1
- export { MotionPressable } from '../chunk-V6BTXHZK.mjs';
2
- import '../chunk-LYMLQ6WQ.mjs';
3
- import '../chunk-R63GIUNU.mjs';
4
- import '../chunk-CY7Y64C3.mjs';
1
+ export { MotionPressable } from '../chunk-RF7J5FRM.mjs';
2
+ import '../chunk-55W7BNO2.mjs';
3
+ import '../chunk-QKC3APP4.mjs';
4
+ import '../chunk-TU2XFPAK.mjs';
@@ -1,5 +1,5 @@
1
1
  import { ScrollView } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
2
+ import { M as MotionComponent } from '../types-37pN82yh.mjs';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { ScrollView } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.js';
2
+ import { M as MotionComponent } from '../types-37pN82yh.js';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var chunkTUYHTHVV_js = require('../chunk-TUYHTHVV.js');
4
- require('../chunk-IWLU3VDE.js');
5
- require('../chunk-7AOERN53.js');
6
- require('../chunk-PTRF47DA.js');
3
+ var chunkXMEVPEMH_js = require('../chunk-XMEVPEMH.js');
4
+ require('../chunk-MYE5NMXW.js');
5
+ require('../chunk-WVRCKOPO.js');
6
+ require('../chunk-7A6WTXNK.js');
7
7
 
8
8
 
9
9
 
10
10
  Object.defineProperty(exports, "MotionScrollView", {
11
11
  enumerable: true,
12
- get: function () { return chunkTUYHTHVV_js.MotionScrollView; }
12
+ get: function () { return chunkXMEVPEMH_js.MotionScrollView; }
13
13
  });
@@ -1,4 +1,4 @@
1
- export { MotionScrollView } from '../chunk-HFDZAHWP.mjs';
2
- import '../chunk-LYMLQ6WQ.mjs';
3
- import '../chunk-R63GIUNU.mjs';
4
- import '../chunk-CY7Y64C3.mjs';
1
+ export { MotionScrollView } from '../chunk-NAOXQJ7U.mjs';
2
+ import '../chunk-55W7BNO2.mjs';
3
+ import '../chunk-QKC3APP4.mjs';
4
+ import '../chunk-TU2XFPAK.mjs';
@@ -1,5 +1,5 @@
1
1
  import { Text } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
2
+ import { M as MotionComponent } from '../types-37pN82yh.mjs';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { Text } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.js';
2
+ import { M as MotionComponent } from '../types-37pN82yh.js';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var chunkX5J5M3K3_js = require('../chunk-X5J5M3K3.js');
4
- require('../chunk-IWLU3VDE.js');
5
- require('../chunk-7AOERN53.js');
6
- require('../chunk-PTRF47DA.js');
3
+ var chunkTVFNJ25Z_js = require('../chunk-TVFNJ25Z.js');
4
+ require('../chunk-MYE5NMXW.js');
5
+ require('../chunk-WVRCKOPO.js');
6
+ require('../chunk-7A6WTXNK.js');
7
7
 
8
8
 
9
9
 
10
10
  Object.defineProperty(exports, "MotionText", {
11
11
  enumerable: true,
12
- get: function () { return chunkX5J5M3K3_js.MotionText; }
12
+ get: function () { return chunkTVFNJ25Z_js.MotionText; }
13
13
  });
@@ -1,4 +1,4 @@
1
- export { MotionText } from '../chunk-ZN3PNGHQ.mjs';
2
- import '../chunk-LYMLQ6WQ.mjs';
3
- import '../chunk-R63GIUNU.mjs';
4
- import '../chunk-CY7Y64C3.mjs';
1
+ export { MotionText } from '../chunk-4ASOELLA.mjs';
2
+ import '../chunk-55W7BNO2.mjs';
3
+ import '../chunk-QKC3APP4.mjs';
4
+ import '../chunk-TU2XFPAK.mjs';
@@ -1,5 +1,5 @@
1
1
  import { View } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.mjs';
2
+ import { M as MotionComponent } from '../types-37pN82yh.mjs';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { View } from 'react-native';
2
- import { M as MotionComponent } from '../types-G1dBU2IQ.js';
2
+ import { M as MotionComponent } from '../types-37pN82yh.js';
3
3
  import 'react';
4
4
 
5
5
  /**
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var chunkKYJROYCG_js = require('../chunk-KYJROYCG.js');
4
- require('../chunk-IWLU3VDE.js');
5
- require('../chunk-7AOERN53.js');
6
- require('../chunk-PTRF47DA.js');
3
+ var chunkVLDIFL3F_js = require('../chunk-VLDIFL3F.js');
4
+ require('../chunk-MYE5NMXW.js');
5
+ require('../chunk-WVRCKOPO.js');
6
+ require('../chunk-7A6WTXNK.js');
7
7
 
8
8
 
9
9
 
10
10
  Object.defineProperty(exports, "MotionView", {
11
11
  enumerable: true,
12
- get: function () { return chunkKYJROYCG_js.MotionView; }
12
+ get: function () { return chunkVLDIFL3F_js.MotionView; }
13
13
  });
@@ -1,4 +1,4 @@
1
- export { MotionView } from '../chunk-TUMNV4P7.mjs';
2
- import '../chunk-LYMLQ6WQ.mjs';
3
- import '../chunk-R63GIUNU.mjs';
4
- import '../chunk-CY7Y64C3.mjs';
1
+ export { MotionView } from '../chunk-YKGY22SB.mjs';
2
+ import '../chunk-55W7BNO2.mjs';
3
+ import '../chunk-QKC3APP4.mjs';
4
+ import '../chunk-TU2XFPAK.mjs';
@@ -1,6 +1,6 @@
1
1
  import { PanResponderInstance } from 'react-native';
2
2
  import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
3
- import { T as TransitionConfig } from '../types-G1dBU2IQ.mjs';
3
+ import { T as TransitionConfig } from '../types-37pN82yh.mjs';
4
4
  import 'react';
5
5
 
6
6
  /**
@@ -1,6 +1,6 @@
1
1
  import { PanResponderInstance } from 'react-native';
2
2
  import { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
3
- import { T as TransitionConfig } from '../types-G1dBU2IQ.js';
3
+ import { T as TransitionConfig } from '../types-37pN82yh.js';
4
4
  import 'react';
5
5
 
6
6
  /**
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkPTRF47DA_js = require('../chunk-PTRF47DA.js');
3
+ var chunk7A6WTXNK_js = require('../chunk-7A6WTXNK.js');
4
4
  var react = require('react');
5
5
  var reactNative = require('react-native');
6
6
  var reactNativeReanimated = require('react-native-reanimated');
@@ -48,14 +48,14 @@ function useTouchDrag(options = {}) {
48
48
  if (result) {
49
49
  if (result.x && lockX) {
50
50
  const toX = "to" in result.x ? result.x.to : x;
51
- dragX.value = chunkPTRF47DA_js.buildReleaseAnimation(
51
+ dragX.value = chunk7A6WTXNK_js.buildReleaseAnimation(
52
52
  result.x,
53
53
  toX
54
54
  );
55
55
  }
56
56
  if (result.y && lockY) {
57
57
  const toY = "to" in result.y ? result.y.to : y;
58
- dragY.value = chunkPTRF47DA_js.buildReleaseAnimation(
58
+ dragY.value = chunk7A6WTXNK_js.buildReleaseAnimation(
59
59
  result.y,
60
60
  toY
61
61
  );
@@ -1,4 +1,4 @@
1
- import { buildReleaseAnimation } from '../chunk-CY7Y64C3.mjs';
1
+ import { buildReleaseAnimation } from '../chunk-TU2XFPAK.mjs';
2
2
  import { useMemo } from 'react';
3
3
  import { PanResponder } from 'react-native';
4
4
  import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
@@ -1,5 +1,5 @@
1
1
  import { ComponentType, ComponentProps, Ref, ReactElement } from 'react';
2
- import { StyleProp } from 'react-native';
2
+ import { StyleProp, BoxShadowValue } from 'react-native';
3
3
 
4
4
  /**
5
5
  * A single animation step's destination, optionally overriding the transition
@@ -154,6 +154,36 @@ type AnimatableTransformExtras = {
154
154
  rotateX?: AnimatableValue<number>;
155
155
  rotateY?: AnimatableValue<number>;
156
156
  };
157
+ /**
158
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
159
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
160
+ *
161
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
162
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
163
+ * (the short side is padded with a transparent layer, as CSS transitions do).
164
+ * A layer that is `inset` on one side and not the other is not interpolable
165
+ * and throws.
166
+ */
167
+ type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>;
168
+ /**
169
+ * Keys whose animatable form deliberately departs from the generic
170
+ * `AnimatableValue<S[K]>` mapping.
171
+ *
172
+ * `boxShadow` is the only member. Its natural value is already an array, which
173
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
174
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
175
+ * sequence. The array slot is given to layers, which is the shape RN itself
176
+ * uses and by far the common case, and sequences are unsupported on this key.
177
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
178
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
179
+ * { type: 'timing' } }}` works as it does for every other key.
180
+ *
181
+ * Conditional on `S` so the key only appears where the underlying style
182
+ * actually has it, rather than being bolted onto every primitive.
183
+ */
184
+ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S ? {
185
+ boxShadow?: BoxShadowInput;
186
+ } : {};
157
187
  /**
158
188
  * The animation state shape inferred from the underlying component's style
159
189
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -168,9 +198,9 @@ type AnimatableTransformExtras = {
168
198
  type _StyleValue<T> = Exclude<T, (...args: any[]) => any>;
169
199
  type AnimateStyle<C> = C extends {
170
200
  style?: infer Raw;
171
- } ? _StyleValue<Raw> extends StyleProp<infer S> ? {
201
+ } ? _StyleValue<Raw> extends StyleProp<infer S> ? Omit<{
172
202
  [K in keyof S]?: AnimatableValue<S[K]>;
173
- } & AnimatableTransformExtras : never : never;
203
+ }, 'boxShadow'> & AnimatableTransformExtras & AnimatableStructuredExtras<S> : never : never;
174
204
  interface AnimationCallbackInfo<S> {
175
205
  /**
176
206
  * The animatable key that just settled — typically a `keyof S` (e.g.
@@ -339,19 +369,24 @@ interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
339
369
  * recorded rect to its natural position via a FLIP transform stack.
340
370
  *
341
371
  * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
342
- * Inertia-side measure-based replacement. Rects are recorded in
343
- * parent-relative coordinates (from `onLayout`), which composes when the
344
- * source and target screens share an outer content container (the common
345
- * stack-navigator case); nested-parent layouts need the v2
346
- * window-coordinate path.
372
+ * Inertia-side measure-based replacement. Rects are recorded in **window**
373
+ * coordinates wherever the host can be measured synchronously (Fabric),
374
+ * which is what lets a source and target sit under containers at different
375
+ * screen offsets; elsewhere both fall back to the parent-relative
376
+ * coordinates `onLayout` reports. A source and target that ended up in
377
+ * different spaces skip the animation rather than play a wrong one.
347
378
  *
348
379
  * The same `transition` prop drives the FLIP animation (spring by
349
380
  * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
350
- * motion skips the transition). Out of scope for the first iteration:
351
- * style-prop interpolation (border radius, colors, etc.) only the
352
- * rect-to-rect transform is animated. Two simultaneously-mounted
353
- * primitives sharing the same `layoutId` are undefined behavior; pick a
354
- * primitive per id at a time.
381
+ * motion skips the transition). Alongside the rect, a fixed set of style
382
+ * keys is carried from the source and crossfaded out on that same
383
+ * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
384
+ * `color`, `tintColor`. Transform keys are not carried the FLIP owns
385
+ * them and a key only participates when the element already has a value
386
+ * for it, from a record or from its static `style`.
387
+ *
388
+ * Two simultaneously-mounted primitives sharing the same `layoutId` are
389
+ * undefined behavior; pick a primitive per id at a time.
355
390
  */
356
391
  layoutId?: string;
357
392
  /**
@@ -385,4 +420,4 @@ interface MotionComponent<C extends ComponentType<any>> {
385
420
  displayName?: string;
386
421
  }
387
422
 
388
- 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 };
423
+ 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 };
@@ -1,5 +1,5 @@
1
1
  import { ComponentType, ComponentProps, Ref, ReactElement } from 'react';
2
- import { StyleProp } from 'react-native';
2
+ import { StyleProp, BoxShadowValue } from 'react-native';
3
3
 
4
4
  /**
5
5
  * A single animation step's destination, optionally overriding the transition
@@ -154,6 +154,36 @@ type AnimatableTransformExtras = {
154
154
  rotateX?: AnimatableValue<number>;
155
155
  rotateY?: AnimatableValue<number>;
156
156
  };
157
+ /**
158
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
159
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
160
+ *
161
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
162
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
163
+ * (the short side is padded with a transparent layer, as CSS transitions do).
164
+ * A layer that is `inset` on one side and not the other is not interpolable
165
+ * and throws.
166
+ */
167
+ type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>;
168
+ /**
169
+ * Keys whose animatable form deliberately departs from the generic
170
+ * `AnimatableValue<S[K]>` mapping.
171
+ *
172
+ * `boxShadow` is the only member. Its natural value is already an array, which
173
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
174
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
175
+ * sequence. The array slot is given to layers, which is the shape RN itself
176
+ * uses and by far the common case, and sequences are unsupported on this key.
177
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
178
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
179
+ * { type: 'timing' } }}` works as it does for every other key.
180
+ *
181
+ * Conditional on `S` so the key only appears where the underlying style
182
+ * actually has it, rather than being bolted onto every primitive.
183
+ */
184
+ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S ? {
185
+ boxShadow?: BoxShadowInput;
186
+ } : {};
157
187
  /**
158
188
  * The animation state shape inferred from the underlying component's style
159
189
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -168,9 +198,9 @@ type AnimatableTransformExtras = {
168
198
  type _StyleValue<T> = Exclude<T, (...args: any[]) => any>;
169
199
  type AnimateStyle<C> = C extends {
170
200
  style?: infer Raw;
171
- } ? _StyleValue<Raw> extends StyleProp<infer S> ? {
201
+ } ? _StyleValue<Raw> extends StyleProp<infer S> ? Omit<{
172
202
  [K in keyof S]?: AnimatableValue<S[K]>;
173
- } & AnimatableTransformExtras : never : never;
203
+ }, 'boxShadow'> & AnimatableTransformExtras & AnimatableStructuredExtras<S> : never : never;
174
204
  interface AnimationCallbackInfo<S> {
175
205
  /**
176
206
  * The animatable key that just settled — typically a `keyof S` (e.g.
@@ -339,19 +369,24 @@ interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
339
369
  * recorded rect to its natural position via a FLIP transform stack.
340
370
  *
341
371
  * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
342
- * Inertia-side measure-based replacement. Rects are recorded in
343
- * parent-relative coordinates (from `onLayout`), which composes when the
344
- * source and target screens share an outer content container (the common
345
- * stack-navigator case); nested-parent layouts need the v2
346
- * window-coordinate path.
372
+ * Inertia-side measure-based replacement. Rects are recorded in **window**
373
+ * coordinates wherever the host can be measured synchronously (Fabric),
374
+ * which is what lets a source and target sit under containers at different
375
+ * screen offsets; elsewhere both fall back to the parent-relative
376
+ * coordinates `onLayout` reports. A source and target that ended up in
377
+ * different spaces skip the animation rather than play a wrong one.
347
378
  *
348
379
  * The same `transition` prop drives the FLIP animation (spring by
349
380
  * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
350
- * motion skips the transition). Out of scope for the first iteration:
351
- * style-prop interpolation (border radius, colors, etc.) only the
352
- * rect-to-rect transform is animated. Two simultaneously-mounted
353
- * primitives sharing the same `layoutId` are undefined behavior; pick a
354
- * primitive per id at a time.
381
+ * motion skips the transition). Alongside the rect, a fixed set of style
382
+ * keys is carried from the source and crossfaded out on that same
383
+ * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
384
+ * `color`, `tintColor`. Transform keys are not carried the FLIP owns
385
+ * them and a key only participates when the element already has a value
386
+ * for it, from a record or from its static `style`.
387
+ *
388
+ * Two simultaneously-mounted primitives sharing the same `layoutId` are
389
+ * undefined behavior; pick a primitive per id at a time.
355
390
  */
356
391
  layoutId?: string;
357
392
  /**
@@ -385,4 +420,4 @@ interface MotionComponent<C extends ComponentType<any>> {
385
420
  displayName?: string;
386
421
  }
387
422
 
388
- 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 };
423
+ 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 };
@@ -1,5 +1,5 @@
1
1
  import { SharedValue } from 'react-native-reanimated';
2
- import { a as TransitionInput, G as GestureLayerTransitions } from './types-G1dBU2IQ.js';
2
+ import { a as TransitionInput, G as GestureLayerTransitions } from './types-37pN82yh.js';
3
3
 
4
4
  /**
5
5
  * Handler bag returned by `useGesture`. Spread on a `Pressable` to drive the
@@ -1,5 +1,5 @@
1
1
  import { SharedValue } from 'react-native-reanimated';
2
- import { a as TransitionInput, G as GestureLayerTransitions } from './types-G1dBU2IQ.mjs';
2
+ import { a as TransitionInput, G as GestureLayerTransitions } from './types-37pN82yh.mjs';
3
3
 
4
4
  /**
5
5
  * Handler bag returned by `useGesture`. Spread on a `Pressable` to drive the
package/llms.txt CHANGED
@@ -140,7 +140,9 @@ Color: `backgroundColor`, `borderColor`, `color`, `tintColor` (Image only), `sha
140
140
 
141
141
  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.
142
142
 
143
- Auto-layout transitions ship via the `layout` prop (`true` / `TransitionConfig`) on every `Motion.*` primitivesee 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).
143
+ 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.
144
+
145
+ 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.
144
146
 
145
147
  ## Optional adapter packages
146
148
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rootnative/inertia",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
5
5
  "license": "MIT",
6
6
  "author": "RootNative",
package/src/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * `@rootnative/inertia` — declarative animation primitives for React Native.
3
3
  *
4
- * v0.1 surface: `Motion.View` / `Motion.Text` / `Motion.Image` /
4
+ * Public surface: `Motion.View` / `Motion.Text` / `Motion.Image` /
5
5
  * `Motion.Pressable` / `Motion.ScrollView`, with `initial` / `animate` /
6
6
  * `exit` / `transition` / `variants` / `gesture` / `controller` /
7
7
  * `onAnimationEnd` props. Sequences, repeats (single-value and
@@ -82,6 +82,7 @@ export type {
82
82
  AnimatableValue,
83
83
  AnimateStyle,
84
84
  AnimationCallbackInfo,
85
+ BoxShadowInput,
85
86
  DecayTransition,
86
87
  EasingFunction,
87
88
  EasingFunctionFactory,