@rootnative/inertia 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -4,6 +4,72 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+## [0.0.7] - 2026-08-14
+
+### Added
+
+- **`Motion.FlatList` — a virtualized animated scroller.** Reachable from the `Motion` namespace, as the named export `MotionFlatList`, and through the new `@rootnative/inertia/flat-list` subpath.
+
+  It closes a gap that forced a real architectural compromise on consumers: `useScroll`'s `onScroll` is a worklet handler, which only functions on a Reanimated animated component, and until now the only animated scroller was `Motion.ScrollView` — which mounts every row. A long list could virtualize (a plain `FlatList`, no animation) or animate from scroll position (`Motion.ScrollView`, every row mounted), not both. Nothing about `useScroll` was ever specific to `ScrollView`; the primitive was simply missing.
+
+  Animation props apply to the scroll **container**, matching `Motion.ScrollView`. Rows animate via a `Motion.*` primitive inside `renderItem`, which is what makes scroll-driven row effects work. The `layout` prop animates the list frame; Reanimated's `itemLayoutAnimation` is forwarded untouched for per-row layout animation.
+
+  Typing keeps both inference paths that a naive wrapper loses. `createMotionComponent<C>` returns a non-generic component, so `data` / `renderItem` would collapse to `any` — the item type is restored with a generic call signature, the same fix Reanimated applies to its own `Animated.FlatList`. The variants map is a **second** generic on that one signature, so `animate="typo"` against a `variants` prop stays a compile error here exactly as on every other primitive; declaring only the item generic would have silently dropped that narrowing on this primitive alone.
+
+  Built on Reanimated's `Animated.FlatList` rather than RN's `FlatList`, which supplies the `CellRendererComponent` injection behind `itemLayoutAnimation` and defaults `scrollEventThrottle` to 1 — so a `useScroll` handler reports every frame with no extra prop.
+
+  **Bundle cost: 9.10 kB for the new subpath, +0.04 kB on the root entry**, and nothing on existing subpaths. The cheapest primitive added so far: it is almost entirely the shared factory, adding no parser, no interpolation, and no worklet branch.
+
+### Fixed
+
+- **`gesture={{ pressed: … }}` now responds to a mouse on web.** On any primitive that isn't a `Pressable` — a plain `Motion.View`, `Motion.Text`, `Motion.Image` — the pressed layer never engaged under a desktop click. It has been inert on web since the `gesture` prop shipped in `0.0.1`.
+
+  The cause is which events the layer was wired to. `pressed` was driven by `onTouchStart` / `onTouchEnd` plus `onPressIn` / `onPressOut`. The press pair only exists on `Pressable`-style hosts, and react-native-web forwards `onTouchStart` to the DOM as a real `touchstart` listener — which a mouse never fires. So `Motion.Pressable` worked (it has the press path) while every other primitive had no live path at all for a pointer that isn't a finger.
+
+  The layer now also listens on `onPointerDown` / `onPointerUp` / `onPointerCancel`, which react-native-web forwards and which cover mouse, pen, and touch alike. `pressed` means "any pointer" on every platform. `onPointerCancel` is included so a browser-initiated takeover (a scroll or drag beginning mid-press) releases the layer instead of leaving it stuck on.
+
+  A web touch emits both `touchstart` and `pointerdown`; both set the same flag to the same value, so the overlap is idempotent rather than a double-toggle. React Native has no pointer props, so the added handlers are inert on iOS and Android. `hovered`, `focused`, and `focusVisible` were never affected — their events are forwarded on every primitive.
+
+  **Bundle cost: +0.06 kB (+0.7%) per primitive subpath**, 9.05 → 9.11 kB brotlied, +0.04 kB on the root entry. No `size-limit` cap moved. Handlers are still mounted only when `pressed` is declared, so the gesture-less path is unchanged.
+
+### Internal
+
+- **`pressed-modalities.test.tsx` asserts each input modality separately.** Every pre-existing gesture test fires `pressIn` — the one path that already worked on every platform — which is why a six-release gap in the touch and pointer paths went unseen. The new file drives touch, pointer, and press independently, plus the cancel path, the both-events-at-once overlap, composition with a consumer's own pointer handlers, and the guarantee that no pointer handler is mounted when `pressed` isn't declared.
+
+## [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 +257,9 @@ 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.7...HEAD
+[0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7
+[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

@@ -1,3 +1,9 @@
+<!--
+  Absolute URL, not a relative path: this README is the npm package page, and
+  npm does not resolve repository-relative image paths.
+-->
+<img src="https://raw.githubusercontent.com/rootnative/inertia/main/assets/brand/inertia-mark.png" alt="" width="88" height="88" />
+
 # @rootnative/inertia
 
 [![npm](https://img.shields.io/npm/v/@rootnative/inertia.svg)](https://www.npmjs.com/package/@rootnative/inertia)
@@ -6,7 +12,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.7` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
 
 ## Install
 

package/dist/{chunk-OAUWLPQH.mjs → chunk-52QSN2VQ.mjs}

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

package/dist/{chunk-VQ5D35UA.js → chunk-6V7MOBXO.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)
   );
 }
@@ -1605,6 +1652,15 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
       );
       handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
       handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
+      handlers.onPointerDown = compose(
+        rest.onPointerDown,
+        () => setPressed(true)
+      );
+      handlers.onPointerUp = compose(rest.onPointerUp, () => setPressed(false));
+      handlers.onPointerCancel = compose(
+        rest.onPointerCancel,
+        () => setPressed(false)
+      );
     }
     if (gesture.focused || gesture.focusVisible) {
       handlers.onFocus = compose(rest.onFocus, () => {
@@ -1634,6 +1690,9 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
     rest.onTouchCancel,
     rest.onPressIn,
     rest.onPressOut,
+    rest.onPointerDown,
+    rest.onPointerUp,
+    rest.onPointerCancel,
     rest.onFocus,
     rest.onBlur,
     rest.onMouseEnter,
@@ -1649,6 +1708,7 @@ function compose(user, ours) {
 }
 
 exports.Presence = Presence;
+exports.TRANSPARENT = TRANSPARENT;
 exports.createMotionComponent = createMotionComponent;
 exports.pairBoxShadowLayers = pairBoxShadowLayers;
 exports.resolveBoxShadowInput = resolveBoxShadowInput;

package/dist/{chunk-RIVVBABB.mjs → chunk-HPJMIBBK.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)
   );
 }
@@ -1599,6 +1646,15 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
       );
       handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
       handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
+      handlers.onPointerDown = compose(
+        rest.onPointerDown,
+        () => setPressed(true)
+      );
+      handlers.onPointerUp = compose(rest.onPointerUp, () => setPressed(false));
+      handlers.onPointerCancel = compose(
+        rest.onPointerCancel,
+        () => setPressed(false)
+      );
     }
     if (gesture.focused || gesture.focusVisible) {
       handlers.onFocus = compose(rest.onFocus, () => {
@@ -1628,6 +1684,9 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
     rest.onTouchCancel,
     rest.onPressIn,
     rest.onPressOut,
+    rest.onPointerDown,
+    rest.onPointerUp,
+    rest.onPointerCancel,
     rest.onFocus,
     rest.onBlur,
     rest.onMouseEnter,
@@ -1642,4 +1701,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };
+export { Presence, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };

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

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

package/dist/chunk-NPJ46457.js

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