@rootnative/inertia 0.0.5 → 0.0.6

package/dist/index.d.mts

@@ -292,6 +292,34 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
  */
 declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
 
+/**
+ * The one colour spelling Reanimated's animation drivers cannot accept.
+ *
+ * Reanimated dispatches an animation on the runtime shape of its **source**
+ * value, and `isColor()` is the gate for the RGBA-channel path. That gate is
+ * `processColorInitially(value) != null`, and Reanimated's colour-name table
+ * (`Colors.ts`) maps `transparent` to `undefined` — every other CSS colour
+ * name maps to a packed integer. So `'transparent'` is the single named colour
+ * that reports **false**.
+ *
+ * A value that fails the gate but is still a string falls to the
+ * prefix-number-suffix branch, which exists for values like `'100%'`. It runs
+ * `parseFloat('transparent')` → `NaN`, animates that, and re-attaches the
+ * prefix, so the slot fills with `'transparentNaN'`. Under `withTiming` the
+ * animation still snaps to its target when the duration elapses, which hides
+ * the fault; under `withSpring` — the library default — settling is decided by
+ * comparisons against `NaN`, which are all false, so the animation runs
+ * forever and the colour never appears.
+ *
+ * `'rgba(0, 0, 0, 0)'` is the same colour and passes the gate.
+ *
+ * This only applies to values handed to `withSpring` / `withTiming`.
+ * `interpolateColor` parses `'transparent'` correctly, which is why the
+ * gesture cascade, the shared-element carry, and `useShadow` are unaffected
+ * and keep the consumer's own spelling.
+ */
+declare const TRANSPARENT = "rgba(0, 0, 0, 0)";
+
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
  * — spring, timing, decay, or no-animation — or a `TransitionName` registered
@@ -869,4 +897,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.d.ts

@@ -292,6 +292,34 @@ declare function ensureWorkletEasing(easing: EasingInput | undefined): ((t: numb
  */
 declare function buildReleaseAnimation(transition: TransitionConfig, toValue: number): unknown;
 
+/**
+ * The one colour spelling Reanimated's animation drivers cannot accept.
+ *
+ * Reanimated dispatches an animation on the runtime shape of its **source**
+ * value, and `isColor()` is the gate for the RGBA-channel path. That gate is
+ * `processColorInitially(value) != null`, and Reanimated's colour-name table
+ * (`Colors.ts`) maps `transparent` to `undefined` — every other CSS colour
+ * name maps to a packed integer. So `'transparent'` is the single named colour
+ * that reports **false**.
+ *
+ * A value that fails the gate but is still a string falls to the
+ * prefix-number-suffix branch, which exists for values like `'100%'`. It runs
+ * `parseFloat('transparent')` → `NaN`, animates that, and re-attaches the
+ * prefix, so the slot fills with `'transparentNaN'`. Under `withTiming` the
+ * animation still snaps to its target when the duration elapses, which hides
+ * the fault; under `withSpring` — the library default — settling is decided by
+ * comparisons against `NaN`, which are all false, so the animation runs
+ * forever and the colour never appears.
+ *
+ * `'rgba(0, 0, 0, 0)'` is the same colour and passes the gate.
+ *
+ * This only applies to values handed to `withSpring` / `withTiming`.
+ * `interpolateColor` parses `'transparent'` correctly, which is why the
+ * gesture cascade, the shared-element carry, and `useShadow` are unaffected
+ * and keep the consumer's own spelling.
+ */
+declare const TRANSPARENT = "rgba(0, 0, 0, 0)";
+
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
  * — spring, timing, decay, or no-animation — or a `TransitionName` registered
@@ -869,4 +897,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type Animator, type BoxShadowLayer, type ColorCascadeLayer, type ColorStyleKey, EasingInput, type ExtrapolationMode, type InterpolatedStyleMap, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, type NumericStyleKey, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TRANSPARENT, type TransformKey, TransitionConfig, TransitionInput, TransitionName, type UseColorCascadeOptions, type UseColorTransitionOptions, type UseInterpolatedStyleOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useAnimator, useBooleanSpring, useColorCascade, useColorTransition, useInterpolatedStyle, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var chunk4NAMD62I_js = require('./chunk-4NAMD62I.js');
-var chunkK63LXGKS_js = require('./chunk-K63LXGKS.js');
-var chunk67GHRCF6_js = require('./chunk-67GHRCF6.js');
-var chunkGPOMFIIU_js = require('./chunk-GPOMFIIU.js');
-var chunk27U6766G_js = require('./chunk-27U6766G.js');
-var chunkQQVDZKSD_js = require('./chunk-QQVDZKSD.js');
-var chunkVQ5D35UA_js = require('./chunk-VQ5D35UA.js');
+var chunkK5SI6VXS_js = require('./chunk-K5SI6VXS.js');
+var chunkSTARIT6W_js = require('./chunk-STARIT6W.js');
+var chunkFWWVHLXB_js = require('./chunk-FWWVHLXB.js');
+var chunk5MGWHOSV_js = require('./chunk-5MGWHOSV.js');
+var chunkX7B5WR5A_js = require('./chunk-X7B5WR5A.js');
+var chunk767UKZXG_js = require('./chunk-767UKZXG.js');
 var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
 var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
 var react = require('react');
@@ -15,11 +15,11 @@ var reactNativeWorklets = require('react-native-worklets');
 
 // src/motion/index.ts
 var Motion = {
-  View: chunkK63LXGKS_js.MotionView,
-  Text: chunk67GHRCF6_js.MotionText,
-  Image: chunkGPOMFIIU_js.MotionImage,
-  Pressable: chunk27U6766G_js.MotionPressable,
-  ScrollView: chunkQQVDZKSD_js.MotionScrollView
+  View: chunkK5SI6VXS_js.MotionView,
+  Text: chunkSTARIT6W_js.MotionText,
+  Image: chunkFWWVHLXB_js.MotionImage,
+  Pressable: chunk5MGWHOSV_js.MotionPressable,
+  ScrollView: chunkX7B5WR5A_js.MotionScrollView
 };
 function useAnimation(target, transition) {
   const output = reactNativeReanimated.useSharedValue(target);
@@ -362,9 +362,9 @@ function useShadow({
   const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
   const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
   const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
-  const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? chunkVQ5D35UA_js.pairBoxShadowLayers(
-    chunkVQ5D35UA_js.resolveBoxShadowInput(from.boxShadow),
-    chunkVQ5D35UA_js.resolveBoxShadowInput(to.boxShadow)
+  const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? chunk767UKZXG_js.pairBoxShadowLayers(
+    chunk767UKZXG_js.resolveBoxShadowInput(from.boxShadow),
+    chunk767UKZXG_js.resolveBoxShadowInput(to.boxShadow)
   ) : [];
   const opacityFrom = from.shadowOpacity ?? 0;
   const opacityTo = to.shadowOpacity ?? 0;
@@ -467,35 +467,39 @@ Object.defineProperty(exports, "useGesture", {
 });
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunkK63LXGKS_js.MotionView; }
+  get: function () { return chunkK5SI6VXS_js.MotionView; }
 });
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunk67GHRCF6_js.MotionText; }
+  get: function () { return chunkSTARIT6W_js.MotionText; }
 });
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunkGPOMFIIU_js.MotionImage; }
+  get: function () { return chunkFWWVHLXB_js.MotionImage; }
 });
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunk27U6766G_js.MotionPressable; }
+  get: function () { return chunk5MGWHOSV_js.MotionPressable; }
 });
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunkQQVDZKSD_js.MotionScrollView; }
+  get: function () { return chunkX7B5WR5A_js.MotionScrollView; }
 });
 Object.defineProperty(exports, "Presence", {
   enumerable: true,
-  get: function () { return chunkVQ5D35UA_js.Presence; }
+  get: function () { return chunk767UKZXG_js.Presence; }
+});
+Object.defineProperty(exports, "TRANSPARENT", {
+  enumerable: true,
+  get: function () { return chunk767UKZXG_js.TRANSPARENT; }
 });
 Object.defineProperty(exports, "createMotionComponent", {
   enumerable: true,
-  get: function () { return chunkVQ5D35UA_js.createMotionComponent; }
+  get: function () { return chunk767UKZXG_js.createMotionComponent; }
 });
 Object.defineProperty(exports, "usePresence", {
   enumerable: true,
-  get: function () { return chunkVQ5D35UA_js.usePresence; }
+  get: function () { return chunk767UKZXG_js.usePresence; }
 });
 Object.defineProperty(exports, "MotionConfig", {
   enumerable: true,

package/dist/index.mjs

@@ -1,16 +1,16 @@
 export { useGesture } from './chunk-OW5XTGVN.mjs';
-import { MotionView } from './chunk-GTJ6VAH5.mjs';
-export { MotionView } from './chunk-GTJ6VAH5.mjs';
-import { MotionText } from './chunk-COEJVWRZ.mjs';
-export { MotionText } from './chunk-COEJVWRZ.mjs';
-import { MotionImage } from './chunk-XSK5MNUH.mjs';
-export { MotionImage } from './chunk-XSK5MNUH.mjs';
-import { MotionPressable } from './chunk-OAUWLPQH.mjs';
-export { MotionPressable } from './chunk-OAUWLPQH.mjs';
-import { MotionScrollView } from './chunk-27MKBTSG.mjs';
-export { MotionScrollView } from './chunk-27MKBTSG.mjs';
-import { pairBoxShadowLayers, resolveBoxShadowInput } from './chunk-RIVVBABB.mjs';
-export { Presence, createMotionComponent, usePresence } from './chunk-RIVVBABB.mjs';
+import { MotionView } from './chunk-CMHVF6F4.mjs';
+export { MotionView } from './chunk-CMHVF6F4.mjs';
+import { MotionText } from './chunk-F7LJX56B.mjs';
+export { MotionText } from './chunk-F7LJX56B.mjs';
+import { MotionImage } from './chunk-PFPO7DX2.mjs';
+export { MotionImage } from './chunk-PFPO7DX2.mjs';
+import { MotionPressable } from './chunk-C3EDC5ZW.mjs';
+export { MotionPressable } from './chunk-C3EDC5ZW.mjs';
+import { MotionScrollView } from './chunk-BAAQI37F.mjs';
+export { MotionScrollView } from './chunk-BAAQI37F.mjs';
+import { pairBoxShadowLayers, resolveBoxShadowInput } from './chunk-2ICQLWH2.mjs';
+export { Presence, TRANSPARENT, createMotionComponent, usePresence } from './chunk-2ICQLWH2.mjs';
 import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-Z3HCJ43H.mjs';
 export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-Z3HCJ43H.mjs';
 import { stableSig, resolveTransition, springToReanimated, warnNonWorkletOnce } from './chunk-REYL77RE.mjs';

package/dist/motion/Image.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkGPOMFIIU_js = require('../chunk-GPOMFIIU.js');
-require('../chunk-VQ5D35UA.js');
+var chunkFWWVHLXB_js = require('../chunk-FWWVHLXB.js');
+require('../chunk-767UKZXG.js');
 require('../chunk-OBRGJAST.js');
 require('../chunk-PM6CVGXJ.js');
 
@@ -9,5 +9,5 @@ require('../chunk-PM6CVGXJ.js');
 
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunkGPOMFIIU_js.MotionImage; }
+  get: function () { return chunkFWWVHLXB_js.MotionImage; }
 });

package/dist/motion/Image.mjs

@@ -1,4 +1,4 @@
-export { MotionImage } from '../chunk-XSK5MNUH.mjs';
-import '../chunk-RIVVBABB.mjs';
+export { MotionImage } from '../chunk-PFPO7DX2.mjs';
+import '../chunk-2ICQLWH2.mjs';
 import '../chunk-Z3HCJ43H.mjs';
 import '../chunk-REYL77RE.mjs';

package/dist/motion/Pressable.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk27U6766G_js = require('../chunk-27U6766G.js');
-require('../chunk-VQ5D35UA.js');
+var chunk5MGWHOSV_js = require('../chunk-5MGWHOSV.js');
+require('../chunk-767UKZXG.js');
 require('../chunk-OBRGJAST.js');
 require('../chunk-PM6CVGXJ.js');
 
@@ -9,5 +9,5 @@ require('../chunk-PM6CVGXJ.js');
 
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunk27U6766G_js.MotionPressable; }
+  get: function () { return chunk5MGWHOSV_js.MotionPressable; }
 });

package/dist/motion/Pressable.mjs

@@ -1,4 +1,4 @@
-export { MotionPressable } from '../chunk-OAUWLPQH.mjs';
-import '../chunk-RIVVBABB.mjs';
+export { MotionPressable } from '../chunk-C3EDC5ZW.mjs';
+import '../chunk-2ICQLWH2.mjs';
 import '../chunk-Z3HCJ43H.mjs';
 import '../chunk-REYL77RE.mjs';

package/dist/motion/ScrollView.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkQQVDZKSD_js = require('../chunk-QQVDZKSD.js');
-require('../chunk-VQ5D35UA.js');
+var chunkX7B5WR5A_js = require('../chunk-X7B5WR5A.js');
+require('../chunk-767UKZXG.js');
 require('../chunk-OBRGJAST.js');
 require('../chunk-PM6CVGXJ.js');
 
@@ -9,5 +9,5 @@ require('../chunk-PM6CVGXJ.js');
 
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunkQQVDZKSD_js.MotionScrollView; }
+  get: function () { return chunkX7B5WR5A_js.MotionScrollView; }
 });

package/dist/motion/ScrollView.mjs

@@ -1,4 +1,4 @@
-export { MotionScrollView } from '../chunk-27MKBTSG.mjs';
-import '../chunk-RIVVBABB.mjs';
+export { MotionScrollView } from '../chunk-BAAQI37F.mjs';
+import '../chunk-2ICQLWH2.mjs';
 import '../chunk-Z3HCJ43H.mjs';
 import '../chunk-REYL77RE.mjs';

package/dist/motion/Text.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk67GHRCF6_js = require('../chunk-67GHRCF6.js');
-require('../chunk-VQ5D35UA.js');
+var chunkSTARIT6W_js = require('../chunk-STARIT6W.js');
+require('../chunk-767UKZXG.js');
 require('../chunk-OBRGJAST.js');
 require('../chunk-PM6CVGXJ.js');
 
@@ -9,5 +9,5 @@ require('../chunk-PM6CVGXJ.js');
 
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunk67GHRCF6_js.MotionText; }
+  get: function () { return chunkSTARIT6W_js.MotionText; }
 });

package/dist/motion/Text.mjs

@@ -1,4 +1,4 @@
-export { MotionText } from '../chunk-COEJVWRZ.mjs';
-import '../chunk-RIVVBABB.mjs';
+export { MotionText } from '../chunk-F7LJX56B.mjs';
+import '../chunk-2ICQLWH2.mjs';
 import '../chunk-Z3HCJ43H.mjs';
 import '../chunk-REYL77RE.mjs';

package/dist/motion/View.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkK63LXGKS_js = require('../chunk-K63LXGKS.js');
-require('../chunk-VQ5D35UA.js');
+var chunkK5SI6VXS_js = require('../chunk-K5SI6VXS.js');
+require('../chunk-767UKZXG.js');
 require('../chunk-OBRGJAST.js');
 require('../chunk-PM6CVGXJ.js');
 
@@ -9,5 +9,5 @@ require('../chunk-PM6CVGXJ.js');
 
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunkK63LXGKS_js.MotionView; }
+  get: function () { return chunkK5SI6VXS_js.MotionView; }
 });

package/dist/motion/View.mjs

@@ -1,4 +1,4 @@
-export { MotionView } from '../chunk-GTJ6VAH5.mjs';
-import '../chunk-RIVVBABB.mjs';
+export { MotionView } from '../chunk-CMHVF6F4.mjs';
+import '../chunk-2ICQLWH2.mjs';
 import '../chunk-Z3HCJ43H.mjs';
 import '../chunk-REYL77RE.mjs';

package/llms.txt

@@ -67,6 +67,7 @@ import { MotionScrollView } from '@rootnative/inertia/scroll-view'
 - `resolveAnimatableValue(value, base, factory?)` — one level up: resolves a full per-property `animate` value (plain target, `{ to, ...override }` step, or keyframe array → `withSequence` with sequence-level `repeat`) into one animation. Gives custom components the complete `animate` grammar.
 - `cubicBezier(x1, y1, x2, y2)` / `cubicBezier(css)` — builds a `timing.easing` value from cubic-bezier control points: four numbers, a W3C CSS `cubic-bezier(0.2, 0, 0, 1)` string (design-token form), or a CSS keyword (`'linear'` | `'ease'` | `'ease-in'` | `'ease-out'` | `'ease-in-out'`). Makes CSS-format easing tokens directly consumable — pair with named transitions to feed a theme's motion tokens into the registry. Invalid input throws (`x1`/`x2` must be within [0, 1]; `step-*` and `linear(...)` unsupported).
 - `ensureWorkletEasing(easing)` — normalizes any accepted easing input (plain function, worklet, or Reanimated 4 `EasingFunctionFactory`) into a worklet `withTiming` can consume. Only needed for manual `withTiming` calls — the resolvers and primitives apply it automatically.
+- `TRANSPARENT` — `'rgba(0, 0, 0, 0)'`, the value to seed a colour shared value with when a custom component has no other source. Not `'transparent'`: Reanimated's colour table maps that keyword to `undefined`, so it is the one CSS colour name `isColor()` rejects, and a slot resting at it cannot be animated away from — under `withTiming` the target still snaps in at the end, under `withSpring` (the default) the animation never settles. Only affects values passed to `withSpring` / `withTiming`; `interpolateColor` parses the keyword fine, so hooks that interpolate colours themselves are unaffected.
 - `SharedValue<T>` (type) — re-exported from the root entry so props/refs that carry a value-layer hook result can be typed without importing from `react-native-reanimated`.
 - `@rootnative/inertia/reanimated` — render-layer interop subpath: pure re-exports of `Animated`, `createAnimatedComponent`, `useAnimatedStyle`, `useAnimatedProps`, `useDerivedValue`, `interpolate`, `interpolateColor`, `Extrapolation`, `cancelAnimation` (plus `SharedValue` / `DerivedValue` / `AnimatedStyle` / `AnimatedProps` types) under their original Reanimated names, for components that own their own `useAnimatedStyle` worklet over Inertia-driven shared values. Names must stay original — the Reanimated Babel plugin auto-workletizes callbacks by callee name. The `with*` animation factories are deliberately not re-exported; start animations with `useAnimation` / `resolveTransition` / `buildReleaseAnimation`.
 

package/package.json

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

package/src/index.ts

@@ -39,6 +39,10 @@ export {
   resolveAnimatableValue,
   ensureWorkletEasing,
 } 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'
 export {
   useAnimation,
   useAnimator,

package/src/internal/boxShadow.ts

@@ -12,6 +12,8 @@
  * loudly there, not silently render the wrong elevation.
  */
 
+import { normalizeAnimatableColor, TRANSPARENT } from './color'
+
 /**
  * One layer of a `box-shadow`, structurally mirroring React Native's
  * `BoxShadowValue` (RN 0.76+ `boxShadow` style). Lengths are px numbers.
@@ -205,7 +207,7 @@ function invisibleLayer(inset: boolean): ResolvedBoxShadowLayer {
     offsetY: 0,
     blurRadius: 0,
     spreadDistance: 0,
-    color: 'transparent',
+    color: TRANSPARENT,
     inset,
   }
 }
@@ -225,10 +227,10 @@ function invisibleLayer(inset: boolean): ResolvedBoxShadowLayer {
  * drive, and nothing it can't.
  *
  * `inset` is deliberately absent. `withTiming` / `withSpring` recurse into
- * arrays and objects and animate each leaf, and a boolean leaf falls through
- * to the plain numeric path — `false + (false - false) * p` evaluates to `0`,
- * so an in-flight frame hands the native shadow a number where it expects a
- * boolean. Inset is instead carried alongside as a static per-layer flag (see
+ * objects and animate each leaf, and a boolean leaf falls through to the plain
+ * numeric path — `false + (false - false) * p` evaluates to `0`, so an
+ * in-flight frame hands the native shadow a number where it expects a boolean.
+ * Inset is instead carried alongside as a static per-layer flag (see
  * `SplitBoxShadow.insets`) and reattached when the style is emitted.
  */
 export interface AnimatedBoxShadowLayer {
@@ -295,10 +297,16 @@ function coerceLength(value: unknown, field: string): number {
   return parseFloat(trimmed)
 }
 
-/** Drop `inset`, leaving only the fields Reanimated may drive. */
+/**
+ * Drop `inset`, leaving only the fields Reanimated may drive, and rewrite a
+ * `'transparent'` colour to its RGBA spelling — see {@link TRANSPARENT} for
+ * why the CSS keyword cannot be animated. Done here rather than at parse time
+ * so the `useShadow` path, which interpolates colours itself and accepts the
+ * keyword happily, keeps the consumer's own spelling.
+ */
 function strip(layer: ResolvedBoxShadowLayer): AnimatedBoxShadowLayer {
-  const { inset: _inset, ...rest } = layer
-  return rest
+  const { inset: _inset, color, ...rest } = layer
+  return { ...rest, color: normalizeAnimatableColor(color) }
 }
 
 /**
@@ -335,7 +343,7 @@ export function normalizeBoxShadow(input: BoxShadowInput): SplitBoxShadow {
  * Prepare a from/to pair for a Reanimated-driven `boxShadow` animation.
  *
  * Both sides come back padded to the same layer count, because Reanimated's
- * `arrayOnStart` walks the **current** value's indices and reads `toValue[i]`
+ * `objectOnStart` walks the **current** value's keys and reads `toValue[key]`
  * for each — a target with fewer layers leaves the surplus leaves with
  * `toValue: undefined`, and a target with more never animates the extras at
  * all. `pairBoxShadowLayers` supplies the padding (a transparent zero layer,
@@ -373,3 +381,57 @@ export function prepareBoxShadowAnimation(
   }
   return { from, to, insets }
 }
+
+/**
+ * The shape a `boxShadow` shared value actually holds: layers keyed by their
+ * index (`{ 0: layer, 1: layer }`) rather than an array.
+ *
+ * **This is not cosmetic, and an array does not work here.** Reanimated's
+ * animation drivers walk a structured value by dispatching on each leaf's
+ * runtime shape, but the two container branches are not symmetrical
+ * (`animation/util.ts`):
+ *
+ * - `objectOnStart` re-assigns the **decorated** `onStart` onto each child
+ *   (`animation[key].onStart = animation.onStart`), so a child that is itself
+ *   an object or a colour is dispatched again, recursively.
+ * - `arrayOnStart` does not. Each element gets the **base** scalar `onStart`,
+ *   so anything other than a number is handed straight to the spring/timing
+ *   maths. A layer object yields `object - object` → `NaN`; a colour string
+ *   yields the same.
+ *
+ * The failure is silent and total: `withTiming` still snaps to the target when
+ * its duration elapses, so an array *looks* like it works, while `withSpring`
+ * — Inertia's default — decides it has settled only when
+ * `isAnimationTerminatingCalculation` says so, and every comparison against
+ * `NaN` is false. The animation never finishes, the shared value holds
+ * `'[object Object]NaN'` forever, `onAnimationEnd` never fires, and the frame
+ * loop never stops.
+ *
+ * Keying by index sends the layer list down the object branch, where the
+ * recursion works and each layer's colour reaches the RGBA-channel path.
+ */
+export type BoxShadowPayload = Record<string, AnimatedBoxShadowLayer>
+
+/** Index-key a layer list into the shape a shared value can animate. */
+export function layersToPayload(
+  layers: readonly AnimatedBoxShadowLayer[],
+): BoxShadowPayload {
+  const payload: BoxShadowPayload = {}
+  for (let i = 0; i < layers.length; i++) payload[i] = layers[i]!
+  return payload
+}
+
+/**
+ * Read an index-keyed payload back out as a layer list.
+ *
+ * Callable from a worklet: the loop stops at the first missing index rather
+ * than asking for the key set, so no `Object.keys` runs at frame time.
+ */
+export function payloadToLayers(
+  payload: BoxShadowPayload,
+): AnimatedBoxShadowLayer[] {
+  'worklet'
+  const layers: AnimatedBoxShadowLayer[] = []
+  for (let i = 0; payload[i] !== undefined; i++) layers.push(payload[i]!)
+  return layers
+}

package/src/internal/color.ts

@@ -0,0 +1,70 @@
+/**
+ * The one colour spelling Reanimated's animation drivers cannot accept.
+ *
+ * Reanimated dispatches an animation on the runtime shape of its **source**
+ * value, and `isColor()` is the gate for the RGBA-channel path. That gate is
+ * `processColorInitially(value) != null`, and Reanimated's colour-name table
+ * (`Colors.ts`) maps `transparent` to `undefined` — every other CSS colour
+ * name maps to a packed integer. So `'transparent'` is the single named colour
+ * that reports **false**.
+ *
+ * A value that fails the gate but is still a string falls to the
+ * prefix-number-suffix branch, which exists for values like `'100%'`. It runs
+ * `parseFloat('transparent')` → `NaN`, animates that, and re-attaches the
+ * prefix, so the slot fills with `'transparentNaN'`. Under `withTiming` the
+ * animation still snaps to its target when the duration elapses, which hides
+ * the fault; under `withSpring` — the library default — settling is decided by
+ * comparisons against `NaN`, which are all false, so the animation runs
+ * forever and the colour never appears.
+ *
+ * `'rgba(0, 0, 0, 0)'` is the same colour and passes the gate.
+ *
+ * This only applies to values handed to `withSpring` / `withTiming`.
+ * `interpolateColor` parses `'transparent'` correctly, which is why the
+ * gesture cascade, the shared-element carry, and `useShadow` are unaffected
+ * and keep the consumer's own spelling.
+ */
+export const TRANSPARENT = 'rgba(0, 0, 0, 0)'
+
+/**
+ * Rewrite `'transparent'` to a spelling Reanimated recognises. Any other value
+ * — a different colour, a number, a non-string — is returned untouched, by
+ * reference, so this costs nothing on the overwhelmingly common path.
+ */
+export function normalizeAnimatableColor<T>(value: T): T | string {
+  return value === 'transparent' ? TRANSPARENT : value
+}
+
+/**
+ * Apply {@link normalizeAnimatableColor} across a whole `animate` target for a
+ * colour key, including the sequence forms — a keyframe array whose entries are
+ * either raw values or `{ to, ...transitionOverride }` step objects.
+ *
+ * Returns the input by reference when nothing needed rewriting, so an
+ * unaffected target neither allocates nor breaks any identity a caller relies
+ * on.
+ */
+export function normalizeAnimatableColorTarget<T>(target: T): T {
+  if (typeof target === 'string') {
+    return normalizeAnimatableColor(target) as T
+  }
+  if (!Array.isArray(target)) return target
+
+  let changed = false
+  const next = target.map((step) => {
+    if (step === 'transparent') {
+      changed = true
+      return TRANSPARENT
+    }
+    if (
+      step !== null &&
+      typeof step === 'object' &&
+      (step as { to?: unknown }).to === 'transparent'
+    ) {
+      changed = true
+      return { ...(step as object), to: TRANSPARENT }
+    }
+    return step
+  })
+  return (changed ? next : target) as T
+}