@rootnative/inertia 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -4,6 +4,40 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+## [0.0.6] - 2026-08-08
+
+**Defect release: two animations that never ran.** Both trace to one assumption about what Reanimated accepts as an animatable value, and both were hidden by the same thing — `type: 'timing'` snaps to its target when the duration elapses, so a total interpolation failure still produced the right end state. `animate={{ boxShadow }}` was inert under the default spring; every colour key was inert when it rested at its default, which is the far more common path. Neither is caught by a mocked test suite, so this release also adds a test file that runs Reanimated's real drivers.
+
+### Fixed
+
+- **`animate={{ boxShadow }}` now animates under `type: 'spring'`** — the library default, and the documented recommendation, so `animate={{ boxShadow }}` with no `transition` prop at all was the broken path. The key worked under `type: 'timing'` and was inert under spring, from its introduction in `0.0.4` until now.
+
+  The cause was the shape of the value handed to Reanimated. Its 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, so a child that is itself an object or a colour is dispatched again, recursively — while `arrayOnStart` does not, handing every element straight to the scalar spring/timing maths. `boxShadow`'s payload was an array of layer objects, so each layer was evaluated as `object - object` → `NaN`.
+
+  Why only spring broke: `withTiming` snaps to its target once the duration elapses, whatever the interpolation produced along the way, so the shadow still arrived and the fault stayed hidden. `withSpring` decides it has settled via `isAnimationTerminatingCalculation`, and every comparison against `NaN` is false — so the animation never finished, the shared value held `'[object Object]NaN'` indefinitely, `onAnimationEnd` never fired, and the frame loop never stopped.
+
+  The payload is now keyed by index (`{ 0: layer, 1: layer }`), which routes it down the object branch where the recursion works and each layer's colour reaches the RGBA-channel path. The change is internal: `animate={{ boxShadow }}` accepts the same CSS string and `BoxShadowValue[]` forms, endpoint padding is unchanged, and `onAnimationEnd`'s `value` is still reported as a layer list.
+
+- **Colour keys can now animate away from their resting default.** `'transparent'` is the one CSS colour name Reanimated's `isColor()` rejects — its colour table maps the keyword to `undefined` while every other name maps to a packed integer. A value that fails that gate but is still a string falls to the prefix-number-suffix branch built for values like `'100%'`, producing `'transparentNaN'` and, under spring, never settling.
+
+  `'transparent'` was Inertia's resting default for `backgroundColor`, `borderColor`, `color`, `tintColor`, and `shadowColor`, so `<Motion.View animate={{ backgroundColor: '#4f46e5' }} />` on an element with no static colour and no `initial` never animated. All five defaults are now `'rgba(0, 0, 0, 0)'` — the identical colour, recognised by the gate — and the keyword is rewritten to it wherever it would enter a colour slot: `initial`, `animate` (including keyframe sequences and `{ to }` steps), and the static `style` a never-driven key rests at.
+
+  Only values handed to `withSpring` / `withTiming` are affected. `interpolateColor` parses the keyword correctly, so the `gesture` cascade, the `layoutId` style carry, and `useShadow` were never affected and keep the consumer's own spelling.
+
+  **Visible difference:** a colour key resting at its default now renders `'rgba(0, 0, 0, 0)'` where it used to render `'transparent'`. Same colour, but a snapshot test asserting the literal string will need updating.
+
+- **`boxShadow`'s transparent padding layer** — added when the two endpoints have different layer counts — used the same keyword, so a single padding layer was enough to hang a whole shadow animation. It is now `'rgba(0, 0, 0, 0)'`.
+
+### Added
+
+- **`TRANSPARENT`** — the colour a custom animated component should seed a colour shared value with when it has no other source. Exported alongside `resolveTransition` and the other building blocks for custom components, because the obvious choice (`'transparent'`) is the one spelling Reanimated cannot animate away from, and nothing about the failure points at the cause.
+
+**Bundle cost: +0.13 kB (+1.5%) per primitive subpath**, 8.92 → 9.05 kB brotlied, +0.18 kB on the root entry (12.10 → 12.28 kB). No `size-limit` cap moved. The payload reshape is close to free — one index-keying pass on the JS thread and one loop in the worklet, replacing an array that crossed over by reference — and most of the delta is the colour normalization, which has to run on four separate paths into a slot.
+
+### Internal
+
+- **`reanimated-drivers.test.ts` runs Reanimated's real animation drivers**, imported by deep path, instead of the static mock the rest of the suite uses. Both defects above were invisible to that mock — `withSpring` and `withTiming` are the identity function there, so the payload Inertia produced looked correct in every assertion while being unanimatable in fact. The new file drives Reanimated's own `onStart` / `onFrame` protocol (the one its `valueSetter` runs) and asserts that leaves converge, that a spring settles, and that mid-flight frames carry numbers. It also pins the two upstream behaviours the fixes work around, so a Reanimated upgrade that changes either fails loudly rather than silently leaving dead workarounds behind.
+
 ## [0.0.5] - 2026-07-31
 
 **Correctness release for the `animate` type surface.** The 40 layout and text-metric style keys that typechecked but were silently dropped at runtime now either animate or fail to compile. No API removals; the type narrowing is technically breaking for code that passed a never-driven key, but that code was already a no-op.
@@ -191,7 +225,8 @@ Initial alpha publish. The full initial surface is in place; APIs are still subj
 - SVG path morphing, gradient interpolation, and shared-element transitions across screens are out of scope until `0.2.x` / `1.x` per the roadmap.
 - `react-native-gesture-handler` integration (drag, pan, swipe sub-states) lands in `0.2` via the optional `@rootnative/inertia-gestures` adapter.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.5...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.6...HEAD
+[0.0.6]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.6
 [0.0.5]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.5
 [0.0.4]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.4
 [0.0.3]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.3

package/README.md

@@ -6,7 +6,7 @@
 
 Declarative animation primitives for React Native, built as a thin wrapper around [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/). Inspired by Framer Motion (web) and react-spring (cross-platform).
 
-> **Status:** `0.0.5` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
+> **Status:** `0.0.6` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
 
 ## Install
 

package/dist/{chunk-RIVVBABB.mjs → chunk-2ICQLWH2.mjs}

@@ -5,6 +5,30 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import Animated, { useSharedValue, cancelAnimation, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native';
 
+// src/internal/color.ts
+var TRANSPARENT = "rgba(0, 0, 0, 0)";
+function normalizeAnimatableColor(value) {
+  return value === "transparent" ? TRANSPARENT : value;
+}
+function normalizeAnimatableColorTarget(target) {
+  if (typeof target === "string") {
+    return normalizeAnimatableColor(target);
+  }
+  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.to === "transparent") {
+      changed = true;
+      return { ...step, to: TRANSPARENT };
+    }
+    return step;
+  });
+  return changed ? next : target;
+}
 var PresenceContext = createContext(null);
 function usePresence() {
   return useContext(PresenceContext);
@@ -244,7 +268,7 @@ function invisibleLayer(inset) {
     offsetY: 0,
     blurRadius: 0,
     spreadDistance: 0,
-    color: "transparent",
+    color: TRANSPARENT,
     inset
   };
 }
@@ -260,8 +284,8 @@ function coerceLength(value, field) {
   return parseFloat(trimmed);
 }
 function strip(layer) {
-  const { inset: _inset, ...rest } = layer;
-  return rest;
+  const { inset: _inset, color, ...rest } = layer;
+  return { ...rest, color: normalizeAnimatableColor(color) };
 }
 function markInset(insets, i, count) {
   const list = insets ?? new Array(count).fill(false);
@@ -298,6 +322,17 @@ function prepareBoxShadowAnimation(current, target) {
   }
   return { from, to, insets };
 }
+function layersToPayload(layers) {
+  const payload = {};
+  for (let i = 0; i < layers.length; i++) payload[i] = layers[i];
+  return payload;
+}
+function payloadToLayers(payload) {
+  "worklet";
+  const layers = [];
+  for (let i = 0; payload[i] !== void 0; i++) layers.push(payload[i]);
+  return layers;
+}
 function resolveLayoutTransition(layout) {
   if (!layout) return void 0;
   const cfg = layout === true ? { type: "spring" } : layout;
@@ -697,7 +732,7 @@ var COLOR_KEY_SET = new Set(COLOR_KEYS);
 var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
 var STRUCTURED_KEY_SET = new Set(STRUCTURED_KEYS);
 var SHARED_STYLE_KEY_SET = new Set(SHARED_STYLE_KEYS);
-var NO_BOX_SHADOW = Object.freeze([]);
+var NO_BOX_SHADOW = Object.freeze({});
 var GESTURE_LAYER_NAMES = [
   "hovered",
   "focused",
@@ -770,15 +805,21 @@ var DEFAULT_RESTING = {
   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
-  // any opaque target via Reanimated's color util.
-  backgroundColor: "transparent",
-  borderColor: "transparent",
-  color: "transparent",
-  tintColor: "transparent",
-  shadowColor: "transparent",
+  // Fully transparent black 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 interpolates cleanly into any
+  // opaque target.
+  //
+  // Spelled `rgba(0, 0, 0, 0)` and NOT `'transparent'`, which is not optional.
+  // Reanimated's color-name table maps `transparent` to `undefined`, so it is
+  // the one named color `isColor()` rejects — a slot resting at the keyword
+  // takes the prefix-number-suffix branch on its next animation and produces
+  // `NaN` instead of a color. See `TRANSPARENT` in `internal/boxShadow.ts`.
+  backgroundColor: TRANSPARENT,
+  borderColor: TRANSPARENT,
+  color: TRANSPARENT,
+  tintColor: TRANSPARENT,
+  shadowColor: TRANSPARENT,
   shadowOffsetWidth: 0,
   shadowOffsetHeight: 0,
   boxShadow: NO_BOX_SHADOW
@@ -965,25 +1006,28 @@ function createMotionComponent(Component) {
               const raw = flat.boxShadow;
               if (raw !== void 0) {
                 styleRestingShadow = normalizeBoxShadow(raw);
-                styleResting.boxShadow = styleRestingShadow.layers;
+                styleResting.boxShadow = layersToPayload(
+                  styleRestingShadow.layers
+                );
               }
               continue;
             }
             const v = styleValueFor(flat, key);
-            if (v !== void 0) styleResting[key] = v;
+            if (v !== void 0) {
+              styleResting[key] = COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(v) : v;
+            }
           }
         }
       }
       const boxShadowSeedRef = useRef(null);
       if (boxShadowSeedRef.current === null) {
         const source = initial === false ? animateRecord.boxShadow : initialRecord?.boxShadow ?? animateRecord.boxShadow;
-        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? {
-          layers: [...NO_BOX_SHADOW],
-          insets: null
-        };
+        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? { layers: [], insets: null };
       }
       const sharedValues = useAnimatableSharedValues((key) => {
-        if (key === "boxShadow") return boxShadowSeedRef.current.layers;
+        if (key === "boxShadow") {
+          return layersToPayload(boxShadowSeedRef.current.layers);
+        }
         if (SHADOW_OFFSET_KEY_SET.has(key)) {
           const axis = shadowOffsetAxisFor(key);
           if (initial === false) {
@@ -996,9 +1040,11 @@ function createMotionComponent(Component) {
         }
         if (initial === false) {
           const a = animateRecord[key];
-          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          const seed2 = restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed2) : seed2;
         }
-        return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        const seed = initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed) : seed;
       });
       const boxShadowInsets = useSharedValue(
         boxShadowSeedRef.current.insets
@@ -1111,7 +1157,7 @@ function createMotionComponent(Component) {
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
           sharedValues[key].value = resolveAnimatableValue(
-            target,
+            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
             cfg,
             factory
           );
@@ -1248,14 +1294,14 @@ function createMotionComponent(Component) {
           out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
         }
         if (hasBoxShadow) {
-          const layers2 = sharedValues.boxShadow.value;
+          const payload = sharedValues.boxShadow.value;
           const insets = boxShadowInsets.value;
           if (insets === null) {
-            out.boxShadow = layers2;
+            out.boxShadow = payloadToLayers(payload);
           } else {
             const withInset = [];
-            for (let i = 0; i < layers2.length; i++) {
-              withInset.push({ ...layers2[i], inset: insets[i] });
+            for (let i = 0; payload[i] !== void 0; i++) {
+              withInset.push({ ...payload[i], inset: insets[i] });
             }
             out.boxShadow = withInset;
           }
@@ -1371,6 +1417,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
     }
     const reportedIteration = state.iteration;
     if (phase === "sequence" || phase === "repeat") state.iteration++;
+    const reportedValue = key === "boxShadow" && value !== void 0 ? payloadToLayers(value) : value;
     const fn = onAnimationEndRef.current;
     if (fn) {
       if (isTransformKey && transformGroup && phase === "animation") {
@@ -1379,7 +1426,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
           fn({
             key: "transform",
             finished,
-            value,
+            value: reportedValue,
             target,
             phase,
             step,
@@ -1390,7 +1437,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
         fn({
           key,
           finished,
-          value,
+          value: reportedValue,
           target,
           phase,
           step,
@@ -1415,16 +1462,16 @@ function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
 function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
-  const currentLayers = Array.isArray(slot.value) ? slot.value : NO_BOX_SHADOW;
+  const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
-    { layers: [...currentLayers], insets: insetSlot.value },
+    { layers: currentLayers, insets: insetSlot.value },
     target
   );
   insetSlot.value = insets;
-  if (from.length !== currentLayers.length) slot.value = from;
+  if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
   slot.value = resolveTransition(
     cfg,
-    to,
+    layersToPayload(to),
     factory?.("animation", void 0)
   );
 }
@@ -1642,4 +1689,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };
+export { Presence, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };

package/dist/{chunk-27U6766G.js → chunk-5MGWHOSV.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkVQ5D35UA_js = require('./chunk-VQ5D35UA.js');
+var chunk767UKZXG_js = require('./chunk-767UKZXG.js');
 var reactNative = require('react-native');
 
-var MotionPressable = chunkVQ5D35UA_js.createMotionComponent(reactNative.Pressable);
+var MotionPressable = chunk767UKZXG_js.createMotionComponent(reactNative.Pressable);
 
 exports.MotionPressable = MotionPressable;

package/dist/{chunk-VQ5D35UA.js → chunk-767UKZXG.js}

@@ -11,6 +11,30 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 
+// src/internal/color.ts
+var TRANSPARENT = "rgba(0, 0, 0, 0)";
+function normalizeAnimatableColor(value) {
+  return value === "transparent" ? TRANSPARENT : value;
+}
+function normalizeAnimatableColorTarget(target) {
+  if (typeof target === "string") {
+    return normalizeAnimatableColor(target);
+  }
+  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.to === "transparent") {
+      changed = true;
+      return { ...step, to: TRANSPARENT };
+    }
+    return step;
+  });
+  return changed ? next : target;
+}
 var PresenceContext = react.createContext(null);
 function usePresence() {
   return react.useContext(PresenceContext);
@@ -250,7 +274,7 @@ function invisibleLayer(inset) {
     offsetY: 0,
     blurRadius: 0,
     spreadDistance: 0,
-    color: "transparent",
+    color: TRANSPARENT,
     inset
   };
 }
@@ -266,8 +290,8 @@ function coerceLength(value, field) {
   return parseFloat(trimmed);
 }
 function strip(layer) {
-  const { inset: _inset, ...rest } = layer;
-  return rest;
+  const { inset: _inset, color, ...rest } = layer;
+  return { ...rest, color: normalizeAnimatableColor(color) };
 }
 function markInset(insets, i, count) {
   const list = insets ?? new Array(count).fill(false);
@@ -304,6 +328,17 @@ function prepareBoxShadowAnimation(current, target) {
   }
   return { from, to, insets };
 }
+function layersToPayload(layers) {
+  const payload = {};
+  for (let i = 0; i < layers.length; i++) payload[i] = layers[i];
+  return payload;
+}
+function payloadToLayers(payload) {
+  "worklet";
+  const layers = [];
+  for (let i = 0; payload[i] !== void 0; i++) layers.push(payload[i]);
+  return layers;
+}
 function resolveLayoutTransition(layout) {
   if (!layout) return void 0;
   const cfg = layout === true ? { type: "spring" } : layout;
@@ -703,7 +738,7 @@ var COLOR_KEY_SET = new Set(COLOR_KEYS);
 var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
 var STRUCTURED_KEY_SET = new Set(STRUCTURED_KEYS);
 var SHARED_STYLE_KEY_SET = new Set(SHARED_STYLE_KEYS);
-var NO_BOX_SHADOW = Object.freeze([]);
+var NO_BOX_SHADOW = Object.freeze({});
 var GESTURE_LAYER_NAMES = [
   "hovered",
   "focused",
@@ -776,15 +811,21 @@ var DEFAULT_RESTING = {
   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
-  // any opaque target via Reanimated's color util.
-  backgroundColor: "transparent",
-  borderColor: "transparent",
-  color: "transparent",
-  tintColor: "transparent",
-  shadowColor: "transparent",
+  // Fully transparent black 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 interpolates cleanly into any
+  // opaque target.
+  //
+  // Spelled `rgba(0, 0, 0, 0)` and NOT `'transparent'`, which is not optional.
+  // Reanimated's color-name table maps `transparent` to `undefined`, so it is
+  // the one named color `isColor()` rejects — a slot resting at the keyword
+  // takes the prefix-number-suffix branch on its next animation and produces
+  // `NaN` instead of a color. See `TRANSPARENT` in `internal/boxShadow.ts`.
+  backgroundColor: TRANSPARENT,
+  borderColor: TRANSPARENT,
+  color: TRANSPARENT,
+  tintColor: TRANSPARENT,
+  shadowColor: TRANSPARENT,
   shadowOffsetWidth: 0,
   shadowOffsetHeight: 0,
   boxShadow: NO_BOX_SHADOW
@@ -971,25 +1012,28 @@ function createMotionComponent(Component) {
               const raw = flat.boxShadow;
               if (raw !== void 0) {
                 styleRestingShadow = normalizeBoxShadow(raw);
-                styleResting.boxShadow = styleRestingShadow.layers;
+                styleResting.boxShadow = layersToPayload(
+                  styleRestingShadow.layers
+                );
               }
               continue;
             }
             const v = styleValueFor(flat, key);
-            if (v !== void 0) styleResting[key] = v;
+            if (v !== void 0) {
+              styleResting[key] = COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(v) : v;
+            }
           }
         }
       }
       const boxShadowSeedRef = react.useRef(null);
       if (boxShadowSeedRef.current === null) {
         const source = initial === false ? animateRecord.boxShadow : initialRecord?.boxShadow ?? animateRecord.boxShadow;
-        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? {
-          layers: [...NO_BOX_SHADOW],
-          insets: null
-        };
+        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? { layers: [], insets: null };
       }
       const sharedValues = useAnimatableSharedValues((key) => {
-        if (key === "boxShadow") return boxShadowSeedRef.current.layers;
+        if (key === "boxShadow") {
+          return layersToPayload(boxShadowSeedRef.current.layers);
+        }
         if (SHADOW_OFFSET_KEY_SET.has(key)) {
           const axis = shadowOffsetAxisFor(key);
           if (initial === false) {
@@ -1002,9 +1046,11 @@ function createMotionComponent(Component) {
         }
         if (initial === false) {
           const a = animateRecord[key];
-          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          const seed2 = restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed2) : seed2;
         }
-        return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        const seed = initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed) : seed;
       });
       const boxShadowInsets = Animated.useSharedValue(
         boxShadowSeedRef.current.insets
@@ -1117,7 +1163,7 @@ function createMotionComponent(Component) {
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
           sharedValues[key].value = chunkPM6CVGXJ_js.resolveAnimatableValue(
-            target,
+            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
             cfg,
             factory
           );
@@ -1254,14 +1300,14 @@ function createMotionComponent(Component) {
           out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
         }
         if (hasBoxShadow) {
-          const layers2 = sharedValues.boxShadow.value;
+          const payload = sharedValues.boxShadow.value;
           const insets = boxShadowInsets.value;
           if (insets === null) {
-            out.boxShadow = layers2;
+            out.boxShadow = payloadToLayers(payload);
           } else {
             const withInset = [];
-            for (let i = 0; i < layers2.length; i++) {
-              withInset.push({ ...layers2[i], inset: insets[i] });
+            for (let i = 0; payload[i] !== void 0; i++) {
+              withInset.push({ ...payload[i], inset: insets[i] });
             }
             out.boxShadow = withInset;
           }
@@ -1377,6 +1423,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
     }
     const reportedIteration = state.iteration;
     if (phase === "sequence" || phase === "repeat") state.iteration++;
+    const reportedValue = key === "boxShadow" && value !== void 0 ? payloadToLayers(value) : value;
     const fn = onAnimationEndRef.current;
     if (fn) {
       if (isTransformKey && transformGroup && phase === "animation") {
@@ -1385,7 +1432,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
           fn({
             key: "transform",
             finished,
-            value,
+            value: reportedValue,
             target,
             phase,
             step,
@@ -1396,7 +1443,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
         fn({
           key,
           finished,
-          value,
+          value: reportedValue,
           target,
           phase,
           step,
@@ -1421,16 +1468,16 @@ function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
 function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
-  const currentLayers = Array.isArray(slot.value) ? slot.value : NO_BOX_SHADOW;
+  const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
-    { layers: [...currentLayers], insets: insetSlot.value },
+    { layers: currentLayers, insets: insetSlot.value },
     target
   );
   insetSlot.value = insets;
-  if (from.length !== currentLayers.length) slot.value = from;
+  if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
   slot.value = chunkPM6CVGXJ_js.resolveTransition(
     cfg,
-    to,
+    layersToPayload(to),
     factory?.("animation", void 0)
   );
 }
@@ -1649,6 +1696,7 @@ function compose(user, ours) {
 }
 
 exports.Presence = Presence;
+exports.TRANSPARENT = TRANSPARENT;
 exports.createMotionComponent = createMotionComponent;
 exports.pairBoxShadowLayers = pairBoxShadowLayers;
 exports.resolveBoxShadowInput = resolveBoxShadowInput;

package/dist/{chunk-27MKBTSG.mjs → chunk-BAAQI37F.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-RIVVBABB.mjs';
+import { createMotionComponent } from './chunk-2ICQLWH2.mjs';
 import { ScrollView } from 'react-native';
 
 var MotionScrollView = createMotionComponent(ScrollView);

package/dist/{chunk-OAUWLPQH.mjs → chunk-C3EDC5ZW.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-RIVVBABB.mjs';
+import { createMotionComponent } from './chunk-2ICQLWH2.mjs';
 import { Pressable } from 'react-native';
 
 var MotionPressable = createMotionComponent(Pressable);

package/dist/{chunk-GTJ6VAH5.mjs → chunk-CMHVF6F4.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-RIVVBABB.mjs';
+import { createMotionComponent } from './chunk-2ICQLWH2.mjs';
 import { View } from 'react-native';
 
 var MotionView = createMotionComponent(View);

package/dist/{chunk-COEJVWRZ.mjs → chunk-F7LJX56B.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-RIVVBABB.mjs';
+import { createMotionComponent } from './chunk-2ICQLWH2.mjs';
 import { Text } from 'react-native';
 
 var MotionText = createMotionComponent(Text);

package/dist/chunk-FWWVHLXB.js

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

package/dist/chunk-K5SI6VXS.js

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

package/dist/{chunk-XSK5MNUH.mjs → chunk-PFPO7DX2.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-RIVVBABB.mjs';
+import { createMotionComponent } from './chunk-2ICQLWH2.mjs';
 import { Image } from 'react-native';
 
 var MotionImage = createMotionComponent(Image);

package/dist/chunk-STARIT6W.js

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

package/dist/{chunk-QQVDZKSD.js → chunk-X7B5WR5A.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkVQ5D35UA_js = require('./chunk-VQ5D35UA.js');
+var chunk767UKZXG_js = require('./chunk-767UKZXG.js');
 var reactNative = require('react-native');
 
-var MotionScrollView = chunkVQ5D35UA_js.createMotionComponent(reactNative.ScrollView);
+var MotionScrollView = chunk767UKZXG_js.createMotionComponent(reactNative.ScrollView);
 
 exports.MotionScrollView = MotionScrollView;