@rootnative/inertia 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -4,6 +4,90 @@ 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.
+
+### Added
+
+- **Layout numerics are animatable.** Forty keys join the `animate` surface, all riding the existing generic numeric path — one shared value each, resolved on the JS thread, emitted through the same branch as `opacity`:
+
+  | Group             | Keys                                                                                                            |
+  | ----------------- | --------------------------------------------------------------------------------------------------------------- |
+  | Per-corner radius | `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius`              |
+  | Border width      | `borderWidth`, `borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`                     |
+  | Absolute inset    | `top`, `right`, `bottom`, `left`                                                                                |
+  | Padding           | `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical` |
+  | Margin            | `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical`        |
+  | Flex sizing       | `flex`, `flexGrow`, `flexShrink`                                                                                |
+  | Gap               | `gap`, `rowGap`, `columnGap`                                                                                    |
+  | Stacking          | `zIndex`                                                                                                        |
+  | Text metrics      | `fontSize`, `letterSpacing`, `lineHeight` — `Motion.Text` only, since they live on `TextStyle`                  |
+
+  Every one of these previously **typechecked and then did nothing**: `AnimateStyle<C>` mapped over the component's entire inferred style, so `animate={{ paddingTop: 40 }}` compiled cleanly, allocated nothing, and never appeared in the rendered style. The `Motion.Text` case was the sharpest — the docs told consumers to hand-roll `useAnimatedStyle` for `fontSize` while the type-test asserted `fontSize` was accepted, so the two halves of the contract actively disagreed. Sequences, `{ to }` step objects, per-property transitions, `gesture` sub-states, `exit`, variants, and the `layoutId` resting logic all work on the new keys with no special-casing.
+
+  **These drive real layout, so they reflow every frame.** Prefer `scale` / `translate*` for pure motion — those composite without touching layout. Reach for these when the layout genuinely changes: a drawer sliding via `left`, a card squaring off one corner as it expands, a pane resize via `flex`. The Fabric jitter caveat that has always applied to `width` / `height` on non-`flex: 1` containers applies here too.
+
+  **Resting values behave as they have since `0.0.3`.** A key declared only in a `gesture` sub-state, an `exit` target, or a non-active variant joins the active set, so the worklet emits it every frame including at rest — and since the animated style merges _after_ `style`, a non-identity resting default would silently stomp the consumer's layout. The existing style-scan handles this: such a key rests at whatever `StyleSheet.flatten(style)` says, falling back to the type default only when the style is silent. All 40 defaults are `0`, which is RN's own unset value for each, so a key that does fall back lands where the element already was. Guarded by four dedicated cases in `animatable-keys.test.tsx` alongside the existing `style-resting.test.tsx`.
+
+  **Bundle cost: +0.11 kB (+1.3%) per primitive subpath**, 8.80 → 8.91 kB brotlied, +0.08 kB on the root entry. No `size-limit` cap moved. Nearly free because the factory's per-key machinery was already generic: the only structural change was replacing 23 hand-written `useSharedValue` calls in `useAnimatableSharedValues` with a loop over `ALL_KEYS`, which offset almost the entire cost of the 40 new table entries. Hook order stays stable because `ALL_KEYS` is a module-level `as const` whose length is fixed at module evaluation.
+
+### Changed
+
+- **`animate` now rejects style keys Inertia doesn't drive, at compile time.** `AnimateStyle<C>` is narrowed to an intersection of the component's style keys and the set the runtime actually animates, so `animate={{ alignItems: 'center' }}` is a type error instead of a silent no-op. This restores the library's headline differentiator — the first row of the sharp-edges table promises that wrong props error rather than going unnoticed — which the previous whole-style mapping had quietly broken for every non-animatable key.
+
+  **Technically breaking, practically not:** code that passed one of these keys stops compiling, but it was already doing nothing at runtime, so nothing that worked before stops working. Fixing a break means either deleting the key or moving it to the static `style` prop, which is where it belonged.
+
+  Two categories are rejected on purpose. **Enum-valued keys** (`position`, `overflow`, `alignItems`, `flexDirection`, `display`) have no interpolable midpoint. **`minWidth` / `maxWidth` / `minHeight` / `maxHeight` / `aspectRatio`** are excluded for a subtler reason worth recording: their unset state isn't a number, so there is no value they could rest at when declared only in a `gesture` sub-state or a non-active variant — any numeric default would change the layout the instant the key activated, which is exactly the `0.0.3` resting-value regression. Animate `width` / `height` instead, or drop to the value-layer hooks. Per-primitive gating is unchanged and still enforced: `tintColor` stays Image-only, and the text metrics are rejected on `Motion.View` and `Motion.Image`.
+
+  `AnimatableStyleKey` (the new type) and `ALL_KEYS` (the runtime array) are necessarily separate declarations — one is a type, the other a value in a module that imports it — so the pairing is pinned by tests on both sides: `__type-tests__/animate-keys.test-d.tsx` (23 compile-time assertions) proves the type accepts and rejects the right keys, and `__tests__/animatable-keys.test.tsx` (17 cases) proves every accepted key reaches the rendered style. A key added to one but not the other fails one of the two.
+
+### Fixed
+
+- **Reduced motion is no longer bypassed by a sequence step that declares its own `type`.** `<MotionConfig reducedMotion="always">` (and the `'user'` default under an OS reduce-motion setting) swaps every per-key transition for `{ type: 'no-animation' }`, but `mergeTransition` in `resolveSequence.ts` let a step-declared `type` win outright over the base whenever the two differed — so `animate={{ translateX: [0, { to: 100, type: 'timing', duration: 200 }, 0] }}` still called `withTiming` for a user who had asked the OS for no motion. Both sequence arrays and the single `{ to, ...override }` form were affected, for every step type.
+
+  A `no-animation` base is now treated as a **ceiling rather than a default**: it short-circuits the merge before the step-type rule runs. That rule is unchanged and still correct for ordinary bases — mixing a spring base's `tension` into a timing override produces garbage, which is why it exists.
+
+  This contradicted the contract stated in `createMotionComponent.tsx`, which had promised since the gate was written that reduced motion "overrides every per-key transition (and any nested sequence-step transition)". The code was the half that was wrong.
+
+  **Why it went unnoticed:** `reduced-motion.test.tsx` asserted only on per-key transitions, where the base reaches Reanimated unmodified — sequence steps were the one path that could talk its way past the gate, and nothing covered them. Three cases now do, including a `reducedMotion="never"` positive control so a future regression can't pass by asserting nothing. Dropping a step `delay` alongside the type matches how the rest of the resolver already treats this transition type (`delayOf` and `repeatOf` both return `undefined` for `no-animation`), so a snap is never deferred or repeated anywhere in the library.
+
+  Surfaced by the `@rootnative/ui` validation consumer, whose `LinearProgress` / `CircularProgress` both use an inline-typed snap-back step inside an infinite keyframe loop. Their local workaround — not mounting the `Motion.View` at all under reduced motion — remains the better render and is unaffected. No bundle-size change (one early-return branch; primitives stay at 8.9 kB against the 10.3 kB cap).
+
 ## [0.0.4] - 2026-07-29
 
 **Feature release.** The three deferred items the `0.0.3` audit left on the roadmap land together: `boxShadow` joins the declarative `animate` surface, and `layoutId` shared-element transitions gain window-coordinate measurement and a style carry. No breaking changes; the three adapters are lockstep-bumped with no runtime changes of their own.
@@ -141,7 +225,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.4...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
 [0.0.2]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.2

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.4` — 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
 
@@ -88,6 +88,10 @@ Plus, on any transition: `delay`, `repeat`. Per-property transitions take preced
 
 Numeric: `opacity`, `translateX`, `translateY`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `width`, `height`, `borderRadius`, `shadowOpacity`, `shadowRadius`, `elevation`. Color: `backgroundColor`, `borderColor`, `color`, `shadowColor`, `tintColor` (Image only — `Motion.View` rejects it at compile time). Layout transforms via `transform: [...]`. Color targets are forwarded straight through `withSpring` / `withTiming`; Reanimated's value setter packs the string to RGBA and interpolates on the UI thread.
 
+Layout numerics (since `0.0.5`): per-corner radii (`borderTopLeftRadius` …), border widths (`borderWidth`, `borderTopWidth` …), absolute insets (`top` / `right` / `bottom` / `left`), padding and margin including the `*Horizontal` / `*Vertical` shorthands, `flex` / `flexGrow` / `flexShrink`, `gap` / `rowGap` / `columnGap`, `zIndex`, and the `Motion.Text`-only metrics `fontSize` / `letterSpacing` / `lineHeight`. These drive real layout, so they reflow each frame — prefer `scale` / `translate*` for pure motion.
+
+`animate` is narrowed to the keys Inertia actually drives, so an unsupported style key (`alignItems`, `position`, `minWidth`, …) is a compile error instead of a silent no-op.
+
 Nested object: `shadowOffset: { width, height }` — single-value form only (no sequences, no array keyframes). Structured: `boxShadow` — the cross-platform CSS shadow, as a string (`'0px 4px 8px rgba(0,0,0,0.3)'`) or RN's `BoxShadowValue[]`. Endpoints are padded to a common layer count, so layer counts may differ between `initial` and `animate`; sequences and `gesture` sub-states are not supported on this key.
 
 SVG path morphing ships in the [`@rootnative/inertia-svg`](../svg) adapter (`MotionPath`). Shared-element transitions across screens are wired through the `layoutId` prop — pair the same id on a source and target `Motion.*` and Inertia FLIPs between them on mount, carrying `opacity`, `borderRadius`, and the color keys across alongside the rect.

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

@@ -1,10 +1,34 @@
-import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-QKC3APP4.mjs';
-import { warnOnce, stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-TU2XFPAK.mjs';
+import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-Z3HCJ43H.mjs';
+import { warnOnce, stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-REYL77RE.mjs';
 import { createContext, useContext, useMemo, Children, isValidElement, useState, useRef, useCallback, forwardRef, useEffect } from 'react';
 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;
@@ -594,7 +629,79 @@ var NUMERIC_TOP_LEVEL_KEYS = [
   "borderRadius",
   "shadowOpacity",
   "shadowRadius",
-  "elevation"
+  "elevation",
+  // ─── Added in 0.0.5 ──────────────────────────────────────────────────────
+  //
+  // Every key below rides the generic numeric path: one shared value, resolved
+  // on the JS thread, emitted by the worklet through the same `out[key] = v`
+  // branch as `opacity`. None needs a new interpolation mode, so the cost is
+  // the shared value plus a `DEFAULT_RESTING` entry.
+  //
+  // The load-bearing constraint is the resting default, not the plumbing. A
+  // key declared only in `gesture` / `exit` / a non-active variant rests at
+  // `DEFAULT_RESTING` unless the static `style` names it, and the animated
+  // style merges *after* `style` — so a non-identity default silently stomps
+  // the layout. That is the `0.0.3` P0 class, and it is why the sizing and
+  // spacing keys below default to `0` only in the sense RN itself does (an
+  // unset `padding` *is* 0); `minWidth`/`maxWidth`/`aspectRatio` are
+  // deliberately excluded — their "unset" is not a number, so no default can
+  // stand in for it without changing layout on activation.
+  //
+  // Per-corner radii. Animating one corner is common (a card expanding into a
+  // sheet keeps its top corners and squares off the bottom); `borderRadius`
+  // alone can't express it.
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  // Border widths. `borderWidth` is the common case; the per-edge keys matter
+  // for underline-style focus affordances (`borderBottomWidth` on a field).
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  // Absolute-position insets. Bread-and-butter for drawers, tooltips, and
+  // anything pinned to an edge that slides in.
+  "top",
+  "right",
+  "bottom",
+  "left",
+  // Spacing. Padding animates the box from the inside (a button growing its
+  // hit area on press); margin shifts it within its parent's flow.
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingHorizontal",
+  "paddingVertical",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginHorizontal",
+  "marginVertical",
+  // Flex sizing. `flex` / `flexGrow` interpolate the split between siblings —
+  // the idiomatic RN way to animate a pane resize without measuring.
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  // Text metrics. `TextStyle`-only at the type level (`AnimateStyle<C>` gates
+  // them per primitive), but the runtime table is shared across primitives —
+  // an unused slot is one ref, same as `tintColor` has always been.
+  "fontSize",
+  "letterSpacing",
+  "lineHeight",
+  // Stacking. Integer-valued in practice, and interpolating it mid-flight is
+  // rarely what you want, but a `no-animation` transition on `zIndex` is the
+  // clean way to reorder at a step boundary in a sequence.
+  "zIndex",
+  // Gap. Row/column gaps animate a list's density without touching children.
+  "gap",
+  "rowGap",
+  "columnGap"
 ];
 var COLOR_KEYS = [
   "backgroundColor",
@@ -625,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",
@@ -650,15 +757,69 @@ var DEFAULT_RESTING = {
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 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",
+  // 0.0.5 keys. Every one of these is 0 because that is RN's own unset value
+  // for it — an element with no `paddingTop` has 0 padding, no `borderWidth`
+  // has none, no `top` is unpinned at 0 within its positioning context. So a
+  // key that reaches its resting default lands where the element already was.
+  //
+  // The exception worth naming: `flex` / `flexGrow` / `flexShrink` do NOT have
+  // 0 as a universal identity (`flexShrink` defaults to 1 on the web, and RN's
+  // own default differs by axis). They are still 0 here, because the style-scan
+  // in the resting pass reads the real value off the static `style` whenever it
+  // is declared — and a consumer animating flex without declaring it is asking
+  // for the from-0 growth, which is the readable interpretation.
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderWidth: 0,
+  borderTopWidth: 0,
+  borderRightWidth: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  padding: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  margin: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexShrink: 0,
+  fontSize: 0,
+  letterSpacing: 0,
+  lineHeight: 0,
+  zIndex: 0,
+  gap: 0,
+  rowGap: 0,
+  columnGap: 0,
+  // 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
@@ -845,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) {
@@ -876,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
@@ -991,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
           );
@@ -1128,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;
           }
@@ -1202,64 +1368,15 @@ function hasMotionProps(props) {
   return false;
 }
 function useAnimatableSharedValues(init) {
-  const translateX = useSharedValue(init("translateX"));
-  const translateY = useSharedValue(init("translateY"));
-  const scale = useSharedValue(init("scale"));
-  const scaleX = useSharedValue(init("scaleX"));
-  const scaleY = useSharedValue(init("scaleY"));
-  const rotate = useSharedValue(init("rotate"));
-  const rotateX = useSharedValue(init("rotateX"));
-  const rotateY = useSharedValue(init("rotateY"));
-  const opacity = useSharedValue(init("opacity"));
-  const width = useSharedValue(init("width"));
-  const height = useSharedValue(init("height"));
-  const borderRadius = useSharedValue(init("borderRadius"));
-  const shadowOpacity = useSharedValue(
-    init("shadowOpacity")
-  );
-  const shadowRadius = useSharedValue(init("shadowRadius"));
-  const elevation = useSharedValue(init("elevation"));
-  const backgroundColor = useSharedValue(
-    init("backgroundColor")
-  );
-  const borderColor = useSharedValue(init("borderColor"));
-  const color = useSharedValue(init("color"));
-  const tintColor = useSharedValue(init("tintColor"));
-  const shadowColor = useSharedValue(init("shadowColor"));
-  const shadowOffsetWidth = useSharedValue(
-    init("shadowOffsetWidth")
-  );
-  const shadowOffsetHeight = useSharedValue(
-    init("shadowOffsetHeight")
-  );
-  const boxShadow = useSharedValue(init("boxShadow"));
+  const entries = [];
+  for (const key of ALL_KEYS) {
+    entries.push([key, useSharedValue(init(key))]);
+  }
   const ref = useRef(null);
   if (ref.current === null) {
-    ref.current = {
-      translateX,
-      translateY,
-      scale,
-      scaleX,
-      scaleY,
-      rotate,
-      rotateX,
-      rotateY,
-      opacity,
-      width,
-      height,
-      borderRadius,
-      shadowOpacity,
-      shadowRadius,
-      elevation,
-      backgroundColor,
-      borderColor,
-      color,
-      tintColor,
-      shadowColor,
-      shadowOffsetWidth,
-      shadowOffsetHeight,
-      boxShadow
-    };
+    const map2 = {};
+    for (const [key, sv] of entries) map2[key] = sv;
+    ref.current = map2;
   }
   const map = ref.current;
   useEffect(
@@ -1300,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") {
@@ -1308,7 +1426,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
           fn({
             key: "transform",
             finished,
-            value,
+            value: reportedValue,
             target,
             phase,
             step,
@@ -1319,7 +1437,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
         fn({
           key,
           finished,
-          value,
+          value: reportedValue,
           target,
           phase,
           step,
@@ -1344,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)
   );
 }
@@ -1571,4 +1689,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };
+export { Presence, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };

package/dist/{chunk-D5KAHWMC.js → chunk-4NAMD62I.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkWVRCKOPO_js = require('./chunk-WVRCKOPO.js');
-var chunk7A6WTXNK_js = require('./chunk-7A6WTXNK.js');
+var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
+var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 
@@ -10,12 +10,12 @@ function useGesture(transition) {
   const focused = reactNativeReanimated.useSharedValue(0);
   const focusVisible = reactNativeReanimated.useSharedValue(0);
   const hovered = reactNativeReanimated.useSharedValue(0);
-  const shouldReduceMotion = chunkWVRCKOPO_js.useShouldReduceMotion();
-  const resolved = chunkWVRCKOPO_js.resolveNamedTransitionProp(transition, chunkWVRCKOPO_js.useNamedTransitions());
+  const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
+  const resolved = chunkOBRGJAST_js.resolveNamedTransitionProp(transition, chunkOBRGJAST_js.useNamedTransitions());
   const setLayer = react.useCallback(
     (sv, layer, target) => {
       const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, resolved) ?? { type: "spring" };
-      sv.value = chunk7A6WTXNK_js.resolveTransition(cfg, target);
+      sv.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
     },
     // The transition is intentionally read on every call rather than cooked
     // into the dep array — a fresh literal each render would otherwise
@@ -34,7 +34,7 @@ function useGesture(transition) {
       onHoverOut: () => setLayer(hovered, "hovered", 0),
       onFocus: () => {
         setLayer(focused, "focused", 1);
-        if (chunkWVRCKOPO_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
+        if (chunkOBRGJAST_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
       },
       onBlur: () => {
         setLayer(focused, "focused", 0);
@@ -47,7 +47,7 @@ function useGesture(transition) {
 }
 function layerTransition(layer, transition) {
   if (!transition) return void 0;
-  if (chunk7A6WTXNK_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 

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

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