@rootnative/inertia 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -4,6 +4,54 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+## [0.0.8] - 2026-08-16
+
+### Added
+
+- **`<Stagger>` — parent-owned delays for a cascading list entrance.** Wrapping a list in `<Stagger interval={60}>` assigns each child a delay of `delay + position * interval` milliseconds, applied to the declarative animations (the `initial` → `animate` mount and any later `animate` change) of every `Motion.*` primitive in that child's subtree. No child computes `index * ms` itself, which removes the two structural problems of the per-child form: a list that filters or reorders staggers from stale indices, and the cascade cannot be turned off in one place. Positions re-derive from render order every render, `from="last"` reverses the cascade, and `enabled={false}` zeroes every delay — pass `enabled={revealed}` and the reveal cascades while the hide animates together.
+
+  The delay wraps each key's fully resolved animation exactly once, on the JS thread — never merged into the base transition config, which a keyframe sequence would re-apply per step. It composes with the child's own `transition.delay` (the two add). It deliberately does not delay `gesture` sub-state feedback (press feedback delayed by list position reads as lag), `<Presence>` exits (a positional delay holds `safeToRemove` — and therefore the unmount — hostage to the cascade), or reduced-motion snaps (a deferred snap is still choreography).
+
+  `<Stagger>` renders no host view — only per-child context providers, so it composes with any layout. Custom animated components built on `resolveTransition` / `resolveAnimatableValue` can participate through the new `useStaggerDelay()` hook, and `applyDelay(animation, ms)` is now exported alongside the other transition utilities.
+
+  Surfaced by the `purrfect-match` validation consumer (DX feedback entry 13), generalized here per the audience-and-scope rule: the shape follows Framer Motion's `staggerChildren` / `delayChildren`, renamed to `interval` / `delay` because the component's own name already says "children".
+
+- **`buildReleaseAnimation` accepts a settle callback.** A third, optional `callback` parameter — the same `(finished) => void` shape Reanimated's `with*` factories accept — is forwarded to the underlying `withSpring` / `withTiming` / `withDecay` call and fires once when the animation settles. For `no-animation` it fires synchronously with `finished: true`, since a direct assignment has no settle point of its own. Existing two-argument call sites are unchanged.
+
+  This is the primitive behind `useSwipe`'s new `onSwipeEnd` in `@rootnative/inertia-gestures`: a gesture-release worklet can now learn when its release animation has finished without polling a shared value. The `AnimationCallback` type is exported from the root barrel alongside it.
+
+## [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.
@@ -225,7 +273,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.6...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.8...HEAD
+[0.0.8]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.8
+[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

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.6` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
+> **Status:** `0.0.8` — stable. Pre-`1.0.0` minor versions may break — see the root [README](https://github.com/rootnative/inertia#versioning--release).
 
 ## Install
 

package/dist/chunk-24NUL23E.js

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

package/dist/chunk-4XBX7KOD.js

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

package/dist/{chunk-OBRGJAST.js → chunk-6AN5X3YE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
+var chunkWNVHPMBI_js = require('./chunk-WNVHPMBI.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 = chunkPM6CVGXJ_js.stableSig(transitions);
+  const transitionsSig = chunkWNVHPMBI_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 (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   const map = transition;
   let out = null;
   for (const key in map) {

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

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

package/dist/{chunk-PFPO7DX2.mjs → chunk-6YIUETBF.mjs}

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
-var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
+var chunk6AN5X3YE_js = require('./chunk-6AN5X3YE.js');
+var chunkWNVHPMBI_js = require('./chunk-WNVHPMBI.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Animated = require('react-native-reanimated');
@@ -159,6 +159,26 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PresenceContext.Provider, { value, children });
 }
+var StaggerContext = react.createContext(0);
+function useStaggerDelay() {
+  return react.useContext(StaggerContext);
+}
+function Stagger({
+  children,
+  interval,
+  delay = 0,
+  from = "first",
+  enabled = true
+}) {
+  const items = react.Children.toArray(children);
+  const count = items.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child, index) => {
+    const position = from === "last" ? count - 1 - index : index;
+    const childDelay = enabled ? delay + position * interval : 0;
+    const key = react.isValidElement(child) ? child.key ?? index : index;
+    return /* @__PURE__ */ jsxRuntime.jsx(StaggerContext.Provider, { value: childDelay, children: child }, key);
+  }) });
+}
 
 // src/internal/boxShadow.ts
 var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
@@ -345,14 +365,14 @@ function resolveLayoutTransition(layout) {
   if (cfg.type === "no-animation") return void 0;
   if (cfg.type === "timing") {
     let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
-    const easing = chunkPM6CVGXJ_js.ensureWorkletEasing(cfg.easing);
+    const easing = chunkWNVHPMBI_js.ensureWorkletEasing(cfg.easing);
     if (easing) builder2 = builder2.easing(easing);
     if (cfg.delay) builder2 = builder2.delay(cfg.delay);
     return builder2;
   }
   const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
-  const { stiffness, damping, mass } = chunkPM6CVGXJ_js.springToReanimated({
-    ...chunkPM6CVGXJ_js.DEFAULT_SPRING,
+  const { stiffness, damping, mass } = chunkWNVHPMBI_js.springToReanimated({
+    ...chunkWNVHPMBI_js.DEFAULT_SPRING,
     ...spring
   });
   let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
@@ -546,8 +566,8 @@ function legBuilder(transition) {
       Animated.withTiming(to, { duration })
     );
   }
-  const springCfg = transition?.type === "spring" ? { ...chunkPM6CVGXJ_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkPM6CVGXJ_js.DEFAULT_SPRING };
-  const springParams = chunkPM6CVGXJ_js.springToReanimated(springCfg);
+  const springCfg = transition?.type === "spring" ? { ...chunkWNVHPMBI_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkWNVHPMBI_js.DEFAULT_SPRING };
+  const springParams = chunkWNVHPMBI_js.springToReanimated(springCfg);
   return (from, to) => Animated.withSequence(
     Animated.withTiming(from, { duration: 0 }),
     Animated.withSpring(to, springParams)
@@ -833,14 +853,14 @@ var DEFAULT_RESTING = {
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
   return transition[prop];
 }
 function gestureLayerTransitionFor(layer, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
+  if (chunkWNVHPMBI_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 function createMotionComponent(Component) {
@@ -890,12 +910,12 @@ function createMotionComponent(Component) {
         onLayout: userOnLayout,
         ...rest
       } = props;
-      const namedTransitions = chunkOBRGJAST_js.useNamedTransitions();
-      const transition = chunkOBRGJAST_js.resolveNamedTransitionProp(
+      const namedTransitions = chunk6AN5X3YE_js.useNamedTransitions();
+      const transition = chunk6AN5X3YE_js.resolveNamedTransitionProp(
         transitionProp,
         namedTransitions
       );
-      const layout = typeof layoutProp === "string" ? chunkOBRGJAST_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+      const layout = typeof layoutProp === "string" ? chunk6AN5X3YE_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
       if (__DEV__ && typeof style === "function") {
         throw new Error(
           "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
@@ -903,7 +923,8 @@ function createMotionComponent(Component) {
       }
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
-      const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
+      const shouldReduceMotion = chunk6AN5X3YE_js.useShouldReduceMotion();
+      const staggerDelay = useStaggerDelay();
       const onAnimationEndRef = react.useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -987,7 +1008,7 @@ function createMotionComponent(Component) {
         if (__DEV__ && hasBoxShadowRef.current && activeKeysRef.current.some(
           (k) => k !== "boxShadow" && k.startsWith("shadow")
         )) {
-          chunkPM6CVGXJ_js.warnOnce(
+          chunkWNVHPMBI_js.warnOnce(
             "boxShadow-with-native-shadow",
             "[inertia] `boxShadow` is animated alongside the native `shadow*` keys on the same element, which applies two shadow systems at once. Pick one: `boxShadow` for the cross-platform CSS form, or the native `shadow*` keys."
           );
@@ -1055,7 +1076,7 @@ function createMotionComponent(Component) {
       const boxShadowInsets = Animated.useSharedValue(
         boxShadowSeedRef.current.insets
       );
-      const styleRestingSig = chunkPM6CVGXJ_js.stableSig(styleResting);
+      const styleRestingSig = chunkWNVHPMBI_js.stableSig(styleResting);
       react.useEffect(() => {
         for (const key of activeKeysRef.current) {
           if (everDrivenRef.current.has(key)) continue;
@@ -1083,13 +1104,13 @@ function createMotionComponent(Component) {
       const gestureSV = Animated.useSharedValue(
         resolveGestureLayers(gesture)
       );
-      const gestureTargetsSig = chunkPM6CVGXJ_js.stableSig(gesture);
+      const gestureTargetsSig = chunkWNVHPMBI_js.stableSig(gesture);
       react.useEffect(() => {
         gestureSV.value = resolveGestureLayers(gesture);
       }, [gestureTargetsSig]);
       const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-      const baseSig = chunkPM6CVGXJ_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-      const transitionSig = chunkPM6CVGXJ_js.stableSig(transition);
+      const baseSig = chunkWNVHPMBI_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+      const transitionSig = chunkWNVHPMBI_js.stableSig(transition);
       const safeToRemoveRef = react.useRef(void 0);
       safeToRemoveRef.current = presence?.safeToRemove;
       react.useEffect(() => {
@@ -1111,6 +1132,7 @@ function createMotionComponent(Component) {
           SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
           transition
         );
+        const runStagger = shouldReduceMotion || isExiting || staggerDelay <= 0 ? 0 : staggerDelay;
         let transformPending = 0;
         for (const k of ALL_KEYS) {
           if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === void 0) continue;
@@ -1129,6 +1151,7 @@ function createMotionComponent(Component) {
               boxShadowInsets,
               shadowTarget,
               cfg2,
+              runStagger,
               makeKeyCallbackFactory(
                 "boxShadow",
                 sharedValues.boxShadow,
@@ -1162,10 +1185,13 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = chunkPM6CVGXJ_js.resolveAnimatableValue(
-            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
-            cfg,
-            factory
+          sharedValues[key].value = chunkWNVHPMBI_js.applyDelay(
+            chunkWNVHPMBI_js.resolveAnimatableValue(
+              COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
+              cfg,
+              factory
+            ),
+            runStagger
           );
         }
         if (isExiting && pending === 0) {
@@ -1224,7 +1250,7 @@ function createMotionComponent(Component) {
       const sharedLayout = useSharedLayout({
         layoutId,
         userRef: ref,
-        transition: chunkPM6CVGXJ_js.isTopLevelTransition(transition) ? transition : void 0,
+        transition: chunkWNVHPMBI_js.isTopLevelTransition(transition) ? transition : void 0,
         shouldReduceMotion,
         userOnLayout,
         readStyles: readSharedStyles
@@ -1326,7 +1352,7 @@ function createMotionComponent(Component) {
         setFocusVisible,
         setHovered
       );
-      const layoutSig = chunkPM6CVGXJ_js.stableSig(layout);
+      const layoutSig = chunkWNVHPMBI_js.stableSig(layout);
       const layoutTransition = react.useMemo(
         () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1467,7 +1493,7 @@ function shadowOffsetAxisFor(key) {
 function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
-function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
+function driveBoxShadow(slot, insetSlot, target, cfg, staggerDelay, factory) {
   const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
     { layers: currentLayers, insets: insetSlot.value },
@@ -1475,10 +1501,13 @@ function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
   );
   insetSlot.value = insets;
   if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
-  slot.value = chunkPM6CVGXJ_js.resolveTransition(
-    cfg,
-    layersToPayload(to),
-    factory?.("animation", void 0)
+  slot.value = chunkWNVHPMBI_js.applyDelay(
+    chunkWNVHPMBI_js.resolveTransition(
+      cfg,
+      layersToPayload(to),
+      factory?.("animation", void 0)
+    ),
+    staggerDelay
   );
 }
 function styleValueFor(flat, key) {
@@ -1599,7 +1628,7 @@ function resolveGestureLayers(gesture) {
     for (const key of ALL_KEYS) {
       if (STRUCTURED_KEY_SET.has(key)) {
         if (__DEV__ && subState[key] !== void 0) {
-          chunkPM6CVGXJ_js.warnOnce(
+          chunkWNVHPMBI_js.warnOnce(
             `gesture-structured-${layer}-${key}`,
             `[inertia] \`${key}\` is not supported inside \`gesture.${layer}\` and will be ignored. Drive it from \`animate\` (optionally via a variant keyed off the same state), or interpolate it yourself with \`useShadow\`.`
           );
@@ -1623,7 +1652,7 @@ function resolveGestureLayers(gesture) {
   return out;
 }
 function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
-  const layerCfgSig = chunkPM6CVGXJ_js.stableSig(gestureLayerTransitionFor(layer, transition));
+  const layerCfgSig = chunkWNVHPMBI_js.stableSig(gestureLayerTransitionFor(layer, transition));
   react.useEffect(() => {
     if (!declared) return;
     if (isExiting) {
@@ -1632,7 +1661,7 @@ function useGestureLayerProgress(progress, active, declared, layer, transition,
     }
     const target = active ? 1 : 0;
     const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
-    progress.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
+    progress.value = chunkWNVHPMBI_js.resolveTransition(cfg, target);
   }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
@@ -1652,11 +1681,20 @@ 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, () => {
         if (gesture.focused) setFocused(true);
-        if (gesture.focusVisible && chunkOBRGJAST_js.isFocusVisible()) setFocusVisible(true);
+        if (gesture.focusVisible && chunk6AN5X3YE_js.isFocusVisible()) setFocusVisible(true);
       });
       handlers.onBlur = compose(rest.onBlur, () => {
         if (gesture.focused) setFocused(false);
@@ -1681,6 +1719,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,
@@ -1696,8 +1737,10 @@ function compose(user, ours) {
 }
 
 exports.Presence = Presence;
+exports.Stagger = Stagger;
 exports.TRANSPARENT = TRANSPARENT;
 exports.createMotionComponent = createMotionComponent;
 exports.pairBoxShadowLayers = pairBoxShadowLayers;
 exports.resolveBoxShadowInput = resolveBoxShadowInput;
 exports.usePresence = usePresence;
+exports.useStaggerDelay = useStaggerDelay;

package/dist/chunk-EN4PN7X3.mjs

@@ -0,0 +1,22 @@
+import { createMotionComponent } from './chunk-IX6SEOSK.mjs';
+import Animated from 'react-native-reanimated';
+
+var MotionFlatList = createMotionComponent(
+  Animated.FlatList
+  // `createMotionComponent<C>` returns a non-generic `MotionComponent<C>`, so
+  // `data` / `renderItem` would collapse to `any` and lose `ItemT` inference.
+  // Restore it with the same call-signature cast Reanimated itself uses for
+  // this exact problem (see its `ReanimatedFlatList` export, and the
+  // `@ts-expect-error` above `AnimatedFlatList` explaining that
+  // `createAnimatedComponent` cannot create generic components).
+  //
+  // **Both** generics live on the one call signature, and that is deliberate:
+  // `ItemT` infers from `data` while `V` infers from `variants`, independently.
+  // Declaring only `ItemT` (the obvious first cut) silently drops the
+  // variant-key narrowing that `MotionComponent` provides on every other
+  // primitive — `animate="typo"` would stop being a compile error here and
+  // nowhere else. Both directions are pinned in
+  // `__type-tests__/flat-list.test-d.tsx`.
+);
+
+export { MotionFlatList };

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

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

package/dist/chunk-IHVMNOS4.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var chunkE3ALFSH2_js = require('./chunk-E3ALFSH2.js');
+var Animated = require('react-native-reanimated');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+var MotionFlatList = chunkE3ALFSH2_js.createMotionComponent(
+  Animated__default.default.FlatList
+  // `createMotionComponent<C>` returns a non-generic `MotionComponent<C>`, so
+  // `data` / `renderItem` would collapse to `any` and lose `ItemT` inference.
+  // Restore it with the same call-signature cast Reanimated itself uses for
+  // this exact problem (see its `ReanimatedFlatList` export, and the
+  // `@ts-expect-error` above `AnimatedFlatList` explaining that
+  // `createAnimatedComponent` cannot create generic components).
+  //
+  // **Both** generics live on the one call signature, and that is deliberate:
+  // `ItemT` infers from `data` while `V` infers from `variants`, independently.
+  // Declaring only `ItemT` (the obvious first cut) silently drops the
+  // variant-key narrowing that `MotionComponent` provides on every other
+  // primitive — `animate="typo"` would stop being a compile error here and
+  // nowhere else. Both directions are pinned in
+  // `__type-tests__/flat-list.test-d.tsx`.
+);
+
+exports.MotionFlatList = MotionFlatList;

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

@@ -1,5 +1,5 @@
-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 { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-MFAFB4K7.mjs';
+import { warnOnce, stableSig, applyDelay, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-W7NTRSPD.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';
@@ -153,6 +153,26 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsx(PresenceContext.Provider, { value, children });
 }
+var StaggerContext = createContext(0);
+function useStaggerDelay() {
+  return useContext(StaggerContext);
+}
+function Stagger({
+  children,
+  interval,
+  delay = 0,
+  from = "first",
+  enabled = true
+}) {
+  const items = Children.toArray(children);
+  const count = items.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((child, index) => {
+    const position = from === "last" ? count - 1 - index : index;
+    const childDelay = enabled ? delay + position * interval : 0;
+    const key = isValidElement(child) ? child.key ?? index : index;
+    return /* @__PURE__ */ jsx(StaggerContext.Provider, { value: childDelay, children: child }, key);
+  }) });
+}
 
 // src/internal/boxShadow.ts
 var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
@@ -898,6 +918,7 @@ function createMotionComponent(Component) {
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
       const shouldReduceMotion = useShouldReduceMotion();
+      const staggerDelay = useStaggerDelay();
       const onAnimationEndRef = useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -1105,6 +1126,7 @@ function createMotionComponent(Component) {
           SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
           transition
         );
+        const runStagger = shouldReduceMotion || isExiting || staggerDelay <= 0 ? 0 : staggerDelay;
         let transformPending = 0;
         for (const k of ALL_KEYS) {
           if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === void 0) continue;
@@ -1123,6 +1145,7 @@ function createMotionComponent(Component) {
               boxShadowInsets,
               shadowTarget,
               cfg2,
+              runStagger,
               makeKeyCallbackFactory(
                 "boxShadow",
                 sharedValues.boxShadow,
@@ -1156,10 +1179,13 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = resolveAnimatableValue(
-            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
-            cfg,
-            factory
+          sharedValues[key].value = applyDelay(
+            resolveAnimatableValue(
+              COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
+              cfg,
+              factory
+            ),
+            runStagger
           );
         }
         if (isExiting && pending === 0) {
@@ -1461,7 +1487,7 @@ function shadowOffsetAxisFor(key) {
 function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
-function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
+function driveBoxShadow(slot, insetSlot, target, cfg, staggerDelay, factory) {
   const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
     { layers: currentLayers, insets: insetSlot.value },
@@ -1469,10 +1495,13 @@ function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
   );
   insetSlot.value = insets;
   if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
-  slot.value = resolveTransition(
-    cfg,
-    layersToPayload(to),
-    factory?.("animation", void 0)
+  slot.value = applyDelay(
+    resolveTransition(
+      cfg,
+      layersToPayload(to),
+      factory?.("animation", void 0)
+    ),
+    staggerDelay
   );
 }
 function styleValueFor(flat, key) {
@@ -1646,6 +1675,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, () => {
@@ -1675,6 +1713,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,
@@ -1689,4 +1730,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };
+export { Presence, Stagger, TRANSPARENT, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence, useStaggerDelay };

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

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

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

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