@dloizides/ui-motion 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 1.1.0
+
+### Added
+
+- **`computeFlipDeltas(prev, next, { staggerMs, cap })`** — the pure FLIP invert step: for each
+  item that moved, the offset it must start from, staggered in new reading order (y, then x).
+  New and unmoved items are omitted; past `cap` the rest snap.
+- **`<Reorder itemKeys spring staggerMs? cap? testID?>{(key) => node}</Reorder>`** — plays that
+  step on a keyed list when its order changes. Web reads slots synchronously from the DOM and
+  inverts in a layout effect (before paint; RN-web `onLayout` misses position-only moves); native
+  uses `onLayout`. Mid-flight items start from where they are drawn; moved items past `cap` snap.
+  Items get `${testID}-item-${key}`. No animation under reduced motion.
+- **`useFocusLift(focused, spring, { scale?, lift? })`** + pure **`focusLiftTarget`** — a focused
+  tile lifts 8px and scales 1.06 on a retargetable spring; stays put under reduced motion.
+
+## 1.0.2
+
+### Fixed
+
+- **`Collapse` — a closed region is now HIDDEN, not merely clipped.** `overflow: hidden` +
+  `height: 0` clips, but the clipped child keeps its own non-empty box: it stayed in the tab
+  order, was still announced by screen readers, and was still reported VISIBLE by Playwright —
+  while the owning header said `aria-expanded="false"`. Found by an aml-v2 E2E test that could
+  see a collapsed settings panel. A settled-closed region now sets `visibility: hidden` (web),
+  `aria-hidden`, `accessibilityElementsHidden`, `importantForAccessibility="no-hide-descendants"`
+  and `pointerEvents="none"`.
+
+  `visibility: hidden` rather than `display: none` deliberately: `display: none` would zero the
+  `onLayout` measurement the component animates back to, so reopening would animate 0 -> 0.
+
+  "Settled closed" is a state distinct from `!open` — it is set only once the collapse has
+  actually finished, so the content collapses instead of vanishing, and an interrupted collapse
+  (a reopen mid-animation, `finished: false`) never hides. It is also set immediately whenever
+  there is nothing to animate: before the first `onLayout` and under reduced motion.
+
+- **`collapseSettlesClosed(open, finished)`** exported from `motionUtils` — the settle rule as a
+  pure function, because the animation callback it guards is unreachable from a jsdom test
+  (`onLayout` needs a `ResizeObserver`).
+
+
 ## 1.0.1
 
 Initial release — the shared motion layer of the dloizides.com RN-web UI kit.

package/README.md

@@ -50,6 +50,12 @@ if (!mounted) return null;
 return <Animated.View style={style}>{children}</Animated.View>;
 ```
 
+### `useFocusLift(focused, spring, { scale?, lift? })`
+
+Springs a tile to `scale` (default 1.06) and `-lift` px (default 8) while `focused`, back to rest
+otherwise. A focus change retargets the running spring. Reduced motion: no movement (signal focus
+with a ring/shadow instead). Spread `style` onto an `Animated.View`. Pure target: `focusLiftTarget`.
+
 ## Components
 
 ### `<FadeIn duration? delay? translateY? style? testID>`
@@ -91,6 +97,12 @@ loading signal than the opacity pulse in `ui-feedback`'s PageSkeleton.
 <Skeleton width="60%" height={20} borderRadius={6} />
 ```
 
+### `<Reorder itemKeys spring staggerMs? cap? testID>{(key) => node}</Reorder>`
+
+FLIP re-rank for a keyed list: when `itemKeys` changes order, moved items spring from their old
+slot to the new one, staggered (default 18ms), at most `cap` (default 8) animated. Under reduced
+motion items jump. The invert maths is the pure `computeFlipDeltas`.
+
 ## Reduced motion
 
 Every primitive honours the OS "reduce motion" setting: `FadeIn` shows content at rest,

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
-import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { EasingFunction, Animated, ViewStyle, StyleProp, PressableProps } from 'react-native';
 import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
 export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
 import React from 'react';
@@ -69,6 +69,7 @@ declare const MOTION_TEST_IDS: {
     readonly collapse: "collapse";
     readonly pressableScale: "pressable-scale";
     readonly skeleton: "skeleton";
+    readonly reorder: "reorder";
 };
 /** Default press-in scale for {@link PressableScale}. */
 declare const DEFAULT_PRESSED_SCALE = 0.96;
@@ -76,6 +77,14 @@ declare const DEFAULT_PRESSED_SCALE = 0.96;
 declare const DEFAULT_FADE_TRANSLATE_Y = 8;
 /** Default shimmer sweep duration (ms) for {@link Skeleton}. */
 declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+/** Default focused scale for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_SCALE = 1.06;
+/** Default focused lift (px, upward) for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_LIFT_PX = 8;
+/** Default per-item stagger (ms) for {@link Reorder}. */
+declare const DEFAULT_FLIP_STAGGER_MS = 18;
+/** Default maximum number of items {@link Reorder} animates; the rest snap. */
+declare const DEFAULT_FLIP_CAP = 8;
 
 interface UseEnterExitOptions {
     /** Whether the element should be visible (entered). */
@@ -108,6 +117,57 @@ interface UseEnterExitResult {
 }
 declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
 
+interface FocusLiftSpring {
+    stiffness: number;
+    damping: number;
+}
+interface FocusLiftOptions {
+    /** Scale while focused. Default 1.06. */
+    scale?: number;
+    /** Upward lift (px) while focused. Default 8. */
+    lift?: number;
+}
+interface FocusLiftTarget {
+    scale: number;
+    translateY: number;
+}
+interface UseFocusLiftResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: Animated.WithAnimatedObject<ViewStyle>;
+}
+/** The transform a tile should settle at. Pure — the hook only springs toward it. */
+declare function focusLiftTarget(focused: boolean, reduced: boolean, opts: FocusLiftOptions): FocusLiftTarget;
+declare function useFocusLift(focused: boolean, spring: FocusLiftSpring, opts?: FocusLiftOptions): UseFocusLiftResult;
+
+/**
+ * computeFlipDeltas — the FLIP "invert" step, kept pure so it can be unit-tested
+ * without driving RN `Animated` or a layout pass.
+ *
+ * Given every item's slot BEFORE and AFTER a reorder, it returns, for each item that
+ * moved, the offset it must start from so it visually sits in its old slot — the
+ * caller then springs that offset to 0 ("play"). Items are staggered in their NEW
+ * reading order (row-first: y, then x). New items (no previous slot) and items that
+ * did not move are omitted. Past `cap` animated items the rest are omitted too, so
+ * they snap straight to their new slot — a long list does not play a long wave.
+ */
+interface LayoutBox {
+    x: number;
+    y: number;
+}
+interface FlipDelta {
+    key: string;
+    dx: number;
+    dy: number;
+    delayMs: number;
+}
+interface FlipOptions {
+    /** Delay (ms) added per animated item, in new reading order. */
+    staggerMs: number;
+    /** Maximum number of items that animate; the rest snap. */
+    cap: number;
+}
+declare function computeFlipDeltas(prev: ReadonlyMap<string, LayoutBox>, next: ReadonlyMap<string, LayoutBox>, opts: FlipOptions): FlipDelta[];
+
 /**
  * FadeIn — fades its children in (with a small upward translate) once, on mount.
  * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
@@ -138,8 +198,18 @@ declare const FadeIn: ({ children, duration, delay, translateY, style, testID, }
  * web and native. Height is a layout prop, so the native driver can never be used
  * here (`useNativeDriver: false`).
  *
- * The children stay MOUNTED at all times (only clipped by `overflow: hidden`), so
- * their state is preserved across open/close and screen readers still reach them.
+ * The children stay MOUNTED at all times, so their state survives open/close and a
+ * consumer's `aria-controls` always resolves to a real node. MOUNTED IS NOT EXPOSED,
+ * though: once the collapse has settled shut the content is hidden from the
+ * accessibility tree, the tab order and hit-testing.
+ *
+ * THAT DISTINCTION IS A BUG FIX, and this comment used to assert the bug ("screen
+ * readers still reach them"). `overflow: hidden` + `height: 0` CLIPS; it does not hide.
+ * The clipped child keeps its own non-empty box, so it stayed focusable by Tab,
+ * announced by screen readers, and reported VISIBLE by Playwright — while the owning
+ * header said `aria-expanded="false"`. Found via an aml-v2 E2E test that could see a
+ * collapsed settings panel.
+ *
  * Reduced-motion snaps to the target height with no animation.
  */
 
@@ -203,4 +273,32 @@ interface SkeletonProps {
 }
 declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
 
-export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };
+/**
+ * Reorder — a keyed list whose moved items spring from their old slot to the new one
+ * when `itemKeys` changes order (FLIP; maths in computeFlipDeltas, play in playFlip).
+ * - web: RN-web `onLayout` (ResizeObserver) misses position-only moves, so OLD slots are
+ *   read from the DOM during the render that changes the order (DOM still holds the last
+ *   commit) and NEW slots in `useLayoutEffect` — after the DOM mutation, before paint.
+ * - native: `onLayout` reports moves; the flip plays one frame after they arrive.
+ * Reduced motion: nothing animates (the caller crossfades). Transform only.
+ */
+
+interface ReorderProps {
+    /** Stable item keys, in display order. */
+    itemKeys: readonly string[];
+    /** Renders the content for one key. */
+    children: (key: string) => React.ReactNode;
+    spring: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Per-item stagger (ms). Default 18. */
+    staggerMs?: number;
+    /** Maximum animated items; the rest snap. Default 8. */
+    cap?: number;
+    /** Container testID; each item gets `${testID}-item-${key}`. */
+    testID?: string;
+}
+declare function Reorder({ itemKeys, children, spring, staggerMs, cap, testID, }: ReorderProps): React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_FLIP_CAP, DEFAULT_FLIP_STAGGER_MS, DEFAULT_FOCUS_LIFT_PX, DEFAULT_FOCUS_SCALE, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, type FlipDelta, type FlipOptions, type FocusLiftOptions, type FocusLiftSpring, type FocusLiftTarget, type LayoutBox, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Reorder, type ReorderProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, type UseFocusLiftResult, collapseTargetHeight, computeFlipDeltas, focusLiftTarget, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit, useFocusLift };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
-import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { EasingFunction, Animated, ViewStyle, StyleProp, PressableProps } from 'react-native';
 import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
 export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
 import React from 'react';
@@ -69,6 +69,7 @@ declare const MOTION_TEST_IDS: {
     readonly collapse: "collapse";
     readonly pressableScale: "pressable-scale";
     readonly skeleton: "skeleton";
+    readonly reorder: "reorder";
 };
 /** Default press-in scale for {@link PressableScale}. */
 declare const DEFAULT_PRESSED_SCALE = 0.96;
@@ -76,6 +77,14 @@ declare const DEFAULT_PRESSED_SCALE = 0.96;
 declare const DEFAULT_FADE_TRANSLATE_Y = 8;
 /** Default shimmer sweep duration (ms) for {@link Skeleton}. */
 declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+/** Default focused scale for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_SCALE = 1.06;
+/** Default focused lift (px, upward) for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_LIFT_PX = 8;
+/** Default per-item stagger (ms) for {@link Reorder}. */
+declare const DEFAULT_FLIP_STAGGER_MS = 18;
+/** Default maximum number of items {@link Reorder} animates; the rest snap. */
+declare const DEFAULT_FLIP_CAP = 8;
 
 interface UseEnterExitOptions {
     /** Whether the element should be visible (entered). */
@@ -108,6 +117,57 @@ interface UseEnterExitResult {
 }
 declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
 
+interface FocusLiftSpring {
+    stiffness: number;
+    damping: number;
+}
+interface FocusLiftOptions {
+    /** Scale while focused. Default 1.06. */
+    scale?: number;
+    /** Upward lift (px) while focused. Default 8. */
+    lift?: number;
+}
+interface FocusLiftTarget {
+    scale: number;
+    translateY: number;
+}
+interface UseFocusLiftResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: Animated.WithAnimatedObject<ViewStyle>;
+}
+/** The transform a tile should settle at. Pure — the hook only springs toward it. */
+declare function focusLiftTarget(focused: boolean, reduced: boolean, opts: FocusLiftOptions): FocusLiftTarget;
+declare function useFocusLift(focused: boolean, spring: FocusLiftSpring, opts?: FocusLiftOptions): UseFocusLiftResult;
+
+/**
+ * computeFlipDeltas — the FLIP "invert" step, kept pure so it can be unit-tested
+ * without driving RN `Animated` or a layout pass.
+ *
+ * Given every item's slot BEFORE and AFTER a reorder, it returns, for each item that
+ * moved, the offset it must start from so it visually sits in its old slot — the
+ * caller then springs that offset to 0 ("play"). Items are staggered in their NEW
+ * reading order (row-first: y, then x). New items (no previous slot) and items that
+ * did not move are omitted. Past `cap` animated items the rest are omitted too, so
+ * they snap straight to their new slot — a long list does not play a long wave.
+ */
+interface LayoutBox {
+    x: number;
+    y: number;
+}
+interface FlipDelta {
+    key: string;
+    dx: number;
+    dy: number;
+    delayMs: number;
+}
+interface FlipOptions {
+    /** Delay (ms) added per animated item, in new reading order. */
+    staggerMs: number;
+    /** Maximum number of items that animate; the rest snap. */
+    cap: number;
+}
+declare function computeFlipDeltas(prev: ReadonlyMap<string, LayoutBox>, next: ReadonlyMap<string, LayoutBox>, opts: FlipOptions): FlipDelta[];
+
 /**
  * FadeIn — fades its children in (with a small upward translate) once, on mount.
  * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
@@ -138,8 +198,18 @@ declare const FadeIn: ({ children, duration, delay, translateY, style, testID, }
  * web and native. Height is a layout prop, so the native driver can never be used
  * here (`useNativeDriver: false`).
  *
- * The children stay MOUNTED at all times (only clipped by `overflow: hidden`), so
- * their state is preserved across open/close and screen readers still reach them.
+ * The children stay MOUNTED at all times, so their state survives open/close and a
+ * consumer's `aria-controls` always resolves to a real node. MOUNTED IS NOT EXPOSED,
+ * though: once the collapse has settled shut the content is hidden from the
+ * accessibility tree, the tab order and hit-testing.
+ *
+ * THAT DISTINCTION IS A BUG FIX, and this comment used to assert the bug ("screen
+ * readers still reach them"). `overflow: hidden` + `height: 0` CLIPS; it does not hide.
+ * The clipped child keeps its own non-empty box, so it stayed focusable by Tab,
+ * announced by screen readers, and reported VISIBLE by Playwright — while the owning
+ * header said `aria-expanded="false"`. Found via an aml-v2 E2E test that could see a
+ * collapsed settings panel.
+ *
  * Reduced-motion snaps to the target height with no animation.
  */
 
@@ -203,4 +273,32 @@ interface SkeletonProps {
 }
 declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
 
-export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };
+/**
+ * Reorder — a keyed list whose moved items spring from their old slot to the new one
+ * when `itemKeys` changes order (FLIP; maths in computeFlipDeltas, play in playFlip).
+ * - web: RN-web `onLayout` (ResizeObserver) misses position-only moves, so OLD slots are
+ *   read from the DOM during the render that changes the order (DOM still holds the last
+ *   commit) and NEW slots in `useLayoutEffect` — after the DOM mutation, before paint.
+ * - native: `onLayout` reports moves; the flip plays one frame after they arrive.
+ * Reduced motion: nothing animates (the caller crossfades). Transform only.
+ */
+
+interface ReorderProps {
+    /** Stable item keys, in display order. */
+    itemKeys: readonly string[];
+    /** Renders the content for one key. */
+    children: (key: string) => React.ReactNode;
+    spring: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Per-item stagger (ms). Default 18. */
+    staggerMs?: number;
+    /** Maximum animated items; the rest snap. Default 8. */
+    cap?: number;
+    /** Container testID; each item gets `${testID}-item-${key}`. */
+    testID?: string;
+}
+declare function Reorder({ itemKeys, children, spring, staggerMs, cap, testID, }: ReorderProps): React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_FLIP_CAP, DEFAULT_FLIP_STAGGER_MS, DEFAULT_FOCUS_LIFT_PX, DEFAULT_FOCUS_SCALE, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, type FlipDelta, type FlipOptions, type FocusLiftOptions, type FocusLiftSpring, type FocusLiftTarget, type LayoutBox, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Reorder, type ReorderProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, type UseFocusLiftResult, collapseTargetHeight, computeFlipDeltas, focusLiftTarget, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit, useFocusLift };

package/dist/index.js

@@ -24,6 +24,9 @@ function collapseTargetHeight(open, measured) {
   if (measured === null) return void 0;
   return open ? measured : 0;
 }
+function collapseSettlesClosed(open, finished) {
+  return finished && !open;
+}
 function resolveScale(pressed, reduced, pressedScale) {
   if (reduced) return 1;
   return pressed ? pressedScale : 1;
@@ -37,11 +40,16 @@ var MOTION_TEST_IDS = {
   fadeIn: "fade-in",
   collapse: "collapse",
   pressableScale: "pressable-scale",
-  skeleton: "skeleton"
+  skeleton: "skeleton",
+  reorder: "reorder"
 };
 var DEFAULT_PRESSED_SCALE = 0.96;
 var DEFAULT_FADE_TRANSLATE_Y = 8;
 var DEFAULT_SKELETON_DURATION_MS = 1200;
+var DEFAULT_FOCUS_SCALE = 1.06;
+var DEFAULT_FOCUS_LIFT_PX = 8;
+var DEFAULT_FLIP_STAGGER_MS = 18;
+var DEFAULT_FLIP_CAP = 8;
 function useEnterExit(options) {
   const { visible, duration = motionDurations.base, translateY = 0, fromScale = 1 } = options;
   const reduced = rnWebHooks.useReducedMotion();
@@ -96,6 +104,55 @@ function useEnterExit(options) {
   }, [progress, translateY, fromScale]);
   return { style, mounted };
 }
+var REST = { scale: 1, translateY: 0 };
+function focusLiftTarget(focused, reduced, opts) {
+  if (reduced || !focused) return REST;
+  return { scale: opts.scale ?? DEFAULT_FOCUS_SCALE, translateY: -(opts.lift ?? DEFAULT_FOCUS_LIFT_PX) };
+}
+function useFocusLift(focused, spring, opts = {}) {
+  const reduced = rnWebHooks.useReducedMotion();
+  const target = focusLiftTarget(focused, reduced, opts);
+  const scale = react.useRef(new reactNative.Animated.Value(target.scale)).current;
+  const translateY = react.useRef(new reactNative.Animated.Value(target.translateY)).current;
+  const { stiffness, damping } = spring;
+  react.useEffect(() => {
+    if (reduced) {
+      scale.stopAnimation();
+      translateY.stopAnimation();
+      scale.setValue(target.scale);
+      translateY.setValue(target.translateY);
+      return;
+    }
+    const config = { stiffness, damping, mass: 1, useNativeDriver: shouldUseNativeDriver() };
+    reactNative.Animated.spring(scale, { ...config, toValue: target.scale }).start();
+    reactNative.Animated.spring(translateY, { ...config, toValue: target.translateY }).start();
+  }, [reduced, target.scale, target.translateY, stiffness, damping, scale, translateY]);
+  react.useEffect(
+    () => () => {
+      scale.stopAnimation();
+      translateY.stopAnimation();
+    },
+    [scale, translateY]
+  );
+  const style = react.useMemo(() => ({ transform: [{ translateY }, { scale }] }), [scale, translateY]);
+  return { style };
+}
+
+// src/flip/computeFlipDeltas.ts
+function computeFlipDeltas(prev, next, opts) {
+  const ordered = [...next.entries()].sort(([, a], [, b]) => a.y - b.y || a.x - b.x);
+  const moved = [];
+  for (const [key, box] of ordered) {
+    if (moved.length >= opts.cap) break;
+    const before = prev.get(key);
+    if (before === void 0) continue;
+    const dx = before.x - box.x;
+    const dy = before.y - box.y;
+    if (dx === 0 && dy === 0) continue;
+    moved.push({ key, dx, dy, delayMs: moved.length * opts.staggerMs });
+  }
+  return moved;
+}
 var FadeIn = ({
   children,
   duration = motionDurations.base,
@@ -132,11 +189,13 @@ var FadeIn = ({
   }, [progress, translateY]);
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [animatedStyle, style], testID, children });
 };
+var IS_WEB = reactNative.Platform.OS === "web";
 var styles = reactNative.StyleSheet.create({
   outer: {
     overflow: "hidden"
   }
 });
+var HIDDEN_WHEN_SETTLED_CLOSED = { visibility: "hidden" };
 var Collapse = ({
   open,
   children,
@@ -146,6 +205,7 @@ var Collapse = ({
 }) => {
   const reduced = rnWebHooks.useReducedMotion();
   const [measured, setMeasured] = react.useState(null);
+  const [settledClosed, setSettledClosed] = react.useState(!open);
   const heightAnim = react.useRef(new reactNative.Animated.Value(0)).current;
   const initialized = react.useRef(false);
   const onContentLayout = react.useCallback((event) => {
@@ -153,16 +213,17 @@ var Collapse = ({
     setMeasured((previous) => previous === nextHeight ? previous : nextHeight);
   }, []);
   react.useEffect(() => {
+    if (open) setSettledClosed(false);
     const target = collapseTargetHeight(open, measured);
-    if (target === void 0) return void 0;
-    if (!initialized.current) {
-      heightAnim.setValue(target);
-      initialized.current = true;
+    if (target === void 0) {
+      if (!open) setSettledClosed(true);
       return void 0;
     }
     const effectiveDuration = resolveDuration(duration, reduced);
-    if (effectiveDuration === 0) {
+    if (!initialized.current || effectiveDuration === 0) {
       heightAnim.setValue(target);
+      initialized.current = true;
+      if (!open) setSettledClosed(true);
       return void 0;
     }
     const anim = reactNative.Animated.timing(heightAnim, {
@@ -172,11 +233,29 @@ var Collapse = ({
       // Height is a layout prop — the native driver cannot animate it.
       useNativeDriver: false
     });
-    anim.start();
+    anim.start(({ finished }) => {
+      if (collapseSettlesClosed(open, finished)) setSettledClosed(true);
+    });
     return () => anim.stop();
   }, [open, measured, duration, reduced, heightAnim]);
   const outerHeight = measured === null ? void 0 : heightAnim;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles.outer, { height: outerHeight }, style], testID, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { onLayout: onContentLayout, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Animated.View,
+    {
+      accessibilityElementsHidden: settledClosed,
+      "aria-hidden": settledClosed ? true : void 0,
+      importantForAccessibility: settledClosed ? "no-hide-descendants" : "auto",
+      pointerEvents: settledClosed ? "none" : "auto",
+      style: [
+        styles.outer,
+        { height: outerHeight },
+        style,
+        settledClosed && IS_WEB ? HIDDEN_WHEN_SETTLED_CLOSED : null
+      ],
+      testID,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { onLayout: onContentLayout, children })
+    }
+  );
 };
 var PressableScale = ({
   pressedScale = DEFAULT_PRESSED_SCALE,
@@ -286,6 +365,120 @@ var Skeleton = ({
     }
   );
 };
+var ORIGIN = { x: 0, y: 0 };
+function measureSlots(nodes) {
+  const slots = /* @__PURE__ */ new Map();
+  for (const [key, node] of nodes) {
+    const el = node;
+    if (typeof el?.offsetLeft === "number" && typeof el.offsetTop === "number") {
+      slots.set(key, { x: el.offsetLeft, y: el.offsetTop });
+    }
+  }
+  return slots;
+}
+function playFlip(offsets, prev, next, opts) {
+  const moved = computeFlipDeltas(prev, next, { staggerMs: opts.staggerMs, cap: Number.POSITIVE_INFINITY });
+  moved.forEach(({ key, dx, dy, delayMs }, index) => {
+    const xy = offsets.get(key);
+    if (xy === void 0) return;
+    xy.stopAnimation((current) => {
+      if (index >= opts.cap) {
+        xy.setValue(ORIGIN);
+        return;
+      }
+      xy.setValue({ x: current.x + dx, y: current.y + dy });
+      reactNative.Animated.spring(xy, {
+        toValue: ORIGIN,
+        stiffness: opts.spring.stiffness,
+        damping: opts.spring.damping,
+        mass: 1,
+        delay: delayMs,
+        useNativeDriver: shouldUseNativeDriver()
+      }).start();
+    });
+  });
+}
+function Reorder({
+  itemKeys,
+  children,
+  spring,
+  staggerMs = DEFAULT_FLIP_STAGGER_MS,
+  cap = DEFAULT_FLIP_CAP,
+  testID = MOTION_TEST_IDS.reorder
+}) {
+  const reduced = rnWebHooks.useReducedMotion();
+  const web = reactNative.Platform.OS === "web";
+  const layouts = react.useRef(/* @__PURE__ */ new Map()).current;
+  const nodes = react.useRef(/* @__PURE__ */ new Map()).current;
+  const offsets = react.useRef(/* @__PURE__ */ new Map()).current;
+  const snapshot = react.useRef(null);
+  const measuredOrder = react.useRef(null);
+  const frame = react.useRef(null);
+  const order = JSON.stringify(itemKeys);
+  const opts = { staggerMs, cap, spring };
+  if (web && measuredOrder.current !== order) {
+    measuredOrder.current = order;
+    snapshot.current = measureSlots(nodes);
+  }
+  const offsetFor = (key) => {
+    if (!offsets.has(key)) offsets.set(key, new reactNative.Animated.ValueXY({ x: 0, y: 0 }));
+    return offsets.get(key);
+  };
+  const takeSnapshot = () => {
+    const prev = snapshot.current;
+    snapshot.current = null;
+    return prev;
+  };
+  react.useLayoutEffect(() => {
+    const live = new Set(itemKeys);
+    for (const key of [...offsets.keys()]) {
+      if (live.has(key)) continue;
+      layouts.delete(key);
+      offsets.delete(key);
+    }
+    if (!web) {
+      snapshot.current = reduced ? null : new Map(layouts);
+      return;
+    }
+    const prev = takeSnapshot();
+    if (prev !== null && !reduced) playFlip(offsets, prev, measureSlots(nodes), opts);
+  }, [order, reduced]);
+  react.useEffect(() => {
+    if (!reduced) return;
+    for (const xy of offsets.values()) {
+      xy.stopAnimation();
+      xy.setValue({ x: 0, y: 0 });
+    }
+  }, [reduced, offsets]);
+  react.useEffect(() => () => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+  }, []);
+  const playNative = () => {
+    frame.current = null;
+    const prev = takeSnapshot();
+    if (prev !== null) playFlip(offsets, prev, layouts, opts);
+  };
+  const onItemLayout = (key) => (event) => {
+    const { x, y } = event.nativeEvent.layout;
+    layouts.set(key, { x, y });
+    if (snapshot.current !== null && frame.current === null) frame.current = requestAnimationFrame(playNative);
+  };
+  const registerNode = (key) => (node) => {
+    if (node === null) nodes.delete(key);
+    else nodes.set(key, node);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID, children: itemKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Animated.View,
+    {
+      ref: registerNode(key),
+      testID: `${testID}-item-${key}`,
+      onLayout: web ? void 0 : onItemLayout(key),
+      style: { transform: offsetFor(key).getTranslateTransform() },
+      children: children(key)
+    },
+    key
+  )) });
+}
 
 Object.defineProperty(exports, "prefersReducedMotion", {
   enumerable: true,
@@ -301,13 +494,20 @@ Object.defineProperty(exports, "DEFAULT_MOTION", {
 });
 exports.Collapse = Collapse;
 exports.DEFAULT_FADE_TRANSLATE_Y = DEFAULT_FADE_TRANSLATE_Y;
+exports.DEFAULT_FLIP_CAP = DEFAULT_FLIP_CAP;
+exports.DEFAULT_FLIP_STAGGER_MS = DEFAULT_FLIP_STAGGER_MS;
+exports.DEFAULT_FOCUS_LIFT_PX = DEFAULT_FOCUS_LIFT_PX;
+exports.DEFAULT_FOCUS_SCALE = DEFAULT_FOCUS_SCALE;
 exports.DEFAULT_PRESSED_SCALE = DEFAULT_PRESSED_SCALE;
 exports.DEFAULT_SKELETON_DURATION_MS = DEFAULT_SKELETON_DURATION_MS;
 exports.FadeIn = FadeIn;
 exports.MOTION_TEST_IDS = MOTION_TEST_IDS;
 exports.PressableScale = PressableScale;
+exports.Reorder = Reorder;
 exports.Skeleton = Skeleton;
 exports.collapseTargetHeight = collapseTargetHeight;
+exports.computeFlipDeltas = computeFlipDeltas;
+exports.focusLiftTarget = focusLiftTarget;
 exports.motionDurations = motionDurations;
 exports.motionEasingTokens = motionEasingTokens;
 exports.motionEasings = motionEasings;
@@ -316,5 +516,6 @@ exports.resolveScale = resolveScale;
 exports.shimmerRange = shimmerRange;
 exports.shouldUseNativeDriver = shouldUseNativeDriver;
 exports.useEnterExit = useEnterExit;
+exports.useFocusLift = useFocusLift;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map