@rootnative/inertia 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -4,6 +4,56 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+## [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 +191,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.4...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.5...HEAD
+[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.5` — 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-NAOXQJ7U.mjs → chunk-27MKBTSG.mjs}

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

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

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

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-67GHRCF6.js

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

package/dist/{chunk-4ASOELLA.mjs → chunk-COEJVWRZ.mjs}

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

package/dist/chunk-GPOMFIIU.js

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

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

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

package/dist/chunk-K63LXGKS.js

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

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

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

package/dist/{chunk-WVRCKOPO.js → chunk-OBRGJAST.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk7A6WTXNK_js = require('./chunk-7A6WTXNK.js');
+var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 var jsxRuntime = require('react/jsx-runtime');
@@ -32,7 +32,7 @@ function MotionConfig({
   children
 }) {
   const parent = useMotionConfig();
-  const transitionsSig = chunk7A6WTXNK_js.stableSig(transitions);
+  const transitionsSig = chunkPM6CVGXJ_js.stableSig(transitions);
   const value = react.useMemo(
     () => ({
       reducedMotion: reducedMotion ?? parent.reducedMotion,
@@ -66,7 +66,7 @@ function resolveNamedTransitionProp(transition, registry) {
   if (typeof transition === "string") {
     return lookupNamedTransition(transition, registry);
   }
-  if (chunk7A6WTXNK_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
   const map = transition;
   let out = null;
   for (const key in map) {

package/dist/{chunk-K3CLP74S.mjs → chunk-OW5XTGVN.mjs}

@@ -1,5 +1,5 @@
-import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-QKC3APP4.mjs';
-import { resolveTransition, isTopLevelTransition } from './chunk-TU2XFPAK.mjs';
+import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-Z3HCJ43H.mjs';
+import { resolveTransition, isTopLevelTransition } from './chunk-REYL77RE.mjs';
 import { useCallback, useMemo } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 

package/dist/{chunk-7A6WTXNK.js → chunk-PM6CVGXJ.js}

@@ -159,6 +159,7 @@ function resolveStep(step, base, cb) {
   return resolveTransition(base, step, cb);
 }
 function mergeTransition(base, override) {
+  if (base?.type === "no-animation") return base;
   if (override.type && base && override.type !== base.type) {
     return override;
   }

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

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

package/dist/{chunk-TU2XFPAK.mjs → chunk-REYL77RE.mjs}

@@ -157,6 +157,7 @@ function resolveStep(step, base, cb) {
   return resolveTransition(base, step, cb);
 }
 function mergeTransition(base, override) {
+  if (base?.type === "no-animation") return base;
   if (override.type && base && override.type !== base.type) {
     return override;
   }

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

@@ -1,5 +1,5 @@
-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';
@@ -594,7 +594,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",
@@ -650,6 +722,54 @@ var DEFAULT_RESTING = {
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0,
+  // 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,
   // '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
@@ -1202,64 +1322,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(