@rootnative/inertia 0.0.2 → 0.0.4

package/src/motion/installCheck.ts

@@ -41,7 +41,7 @@ export function ensureReanimatedInstalled(): void {
     const major = parseInt(version.split('.')[0] ?? '0', 10)
     if (major < 4) {
       console.error(
-        `[inertia] react-native-reanimated v${version} is installed, but @rootnative/inertia requires v4.0.0 or later. ` +
+        `[inertia] react-native-reanimated ${version} is installed, but @rootnative/inertia requires 4.0.0 or later. ` +
           `Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`,
       )
       return

package/src/presence/Presence.tsx

@@ -63,6 +63,20 @@ export function Presence({ children }: { children: ReactNode }) {
   // synchronously alongside the setState call.
   const prevIncomingRef = useRef<ReactElement[]>(incoming)
 
+  // Render order from the previous pass, *including* entries that were already
+  // exiting. An exiting child is by definition absent from `incoming`, so this
+  // is the only record of where it sat among its siblings.
+  const orderRef = useRef<Key[]>([])
+
+  // The exiting map this render should actually render with. On the render
+  // that detects a departure, `exiting` state is still the pre-departure map —
+  // `setExiting` below schedules the update but doesn't apply it here. Ordering
+  // has to see the departure immediately: if it doesn't, the key is missing
+  // from `orderRef` on the *next* render too, and the walk below (which only
+  // visits keys it remembers) would drop the child entirely instead of just
+  // misplacing it.
+  let pendingExiting: Map<Key, ReactElement> | null = null
+
   if (prevIncomingRef.current !== incoming) {
     const prev = prevIncomingRef.current
     prevIncomingRef.current = incoming
@@ -91,9 +105,14 @@ export function Presence({ children }: { children: ReactNode }) {
       }
     }
 
-    if (next) setExiting(next)
+    if (next) {
+      pendingExiting = next
+      setExiting(next)
+    }
   }
 
+  const activeExiting = pendingExiting ?? exiting
+
   const handleRemove = useCallback((key: Key) => {
     setExiting((prev) => {
       if (!prev.has(key)) return prev
@@ -107,20 +126,64 @@ export function Presence({ children }: { children: ReactNode }) {
   // one array (rather than two `.map` calls inside a fragment) ensures React
   // reconciles by `key` across positions — when an entry moves from
   // present-list to exiting-list, the component instance persists.
-  const renderList: RenderEntry[] = []
+  //
+  // Exiting entries are spliced back in at the position they held, not
+  // appended. React reconciles this array by key, so appending *moves* the
+  // node: removing the middle of `a, b, c` rendered `a, c, b` and the
+  // departing row visibly jumped to the end before it had finished animating
+  // out. Absolutely-positioned overlays (popovers, sheets) never showed it;
+  // any list or column did.
+  const byKey = new Map<Key, ReactElement>()
+  const presentKeys = new Set<Key>()
+  const order: Key[] = []
   for (const el of incoming) {
-    renderList.push({
-      key: el.key as Key,
-      element: el,
-      isPresent: true,
-    })
+    const key = el.key as Key
+    byKey.set(key, el)
+    presentKeys.add(key)
+    order.push(key)
   }
-  for (const [key, el] of exiting) {
-    if (!renderList.some((entry) => entry.key === key)) {
-      renderList.push({ key, element: el, isPresent: false })
+
+  // Walk the remembered order so that several adjacent departures keep their
+  // relative order, and anchor each one immediately after the nearest
+  // preceding sibling that is still rendered. No surviving predecessor means
+  // it was at the front, so it goes back to the front.
+  const prevOrder = orderRef.current
+  for (let i = 0; i < prevOrder.length; i++) {
+    const key = prevOrder[i]!
+    const departing = activeExiting.get(key)
+    if (!departing || byKey.has(key)) continue
+    let insertAt = 0
+    for (let j = i - 1; j >= 0; j--) {
+      const anchor = order.indexOf(prevOrder[j]!)
+      if (anchor !== -1) {
+        insertAt = anchor + 1
+        break
+      }
     }
+    byKey.set(key, departing)
+    order.splice(insertAt, 0, key)
+  }
+
+  // Safety net: an exiting child the remembered order never saw still has to
+  // render, or it would unmount with no exit animation at all. Appending is
+  // the old (wrong-position) behaviour, which is strictly better than dropping
+  // it — in practice `activeExiting` keeps this loop empty.
+  for (const [key, el] of activeExiting) {
+    if (byKey.has(key)) continue
+    byKey.set(key, el)
+    order.push(key)
   }
 
+  orderRef.current = order
+
+  // A live `incoming` entry always wins: a key that returns mid-exit is
+  // present again, and the same instance interrupts back toward `animate`.
+  const renderList: RenderEntry[] = order.map((key) => ({
+    key,
+    element: byKey.get(key)!,
+    isPresent: presentKeys.has(key),
+  }))
+
   return (
     <>
       {renderList.map(({ key, element, isPresent }) => (

package/src/transitions/index.ts

@@ -1,4 +1,4 @@
-export { resolveTransition } from './resolve'
+export { resolveTransition, type CallbackFactory } from './resolve'
 export { resolveAnimatableValue } from './resolveSequence'
 export { cubicBezier } from './cubicBezier'
 export { ensureWorkletEasing } from './easing'

package/src/types.ts

@@ -4,7 +4,7 @@ import {
   type ReactElement,
   type Ref,
 } from 'react'
-import { type StyleProp } from 'react-native'
+import { type BoxShadowValue, type StyleProp } from 'react-native'
 
 /**
  * A single animation step's destination, optionally overriding the transition
@@ -184,6 +184,39 @@ type AnimatableTransformExtras = {
   rotateY?: AnimatableValue<number>
 }
 
+/**
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
+ *
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
+ * (the short side is padded with a transparent layer, as CSS transitions do).
+ * A layer that is `inset` on one side and not the other is not interpolable
+ * and throws.
+ */
+export type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>
+
+/**
+ * Keys whose animatable form deliberately departs from the generic
+ * `AnimatableValue<S[K]>` mapping.
+ *
+ * `boxShadow` is the only member. Its natural value is already an array, which
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
+ * sequence. The array slot is given to layers, which is the shape RN itself
+ * uses and by far the common case, and sequences are unsupported on this key.
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
+ * { type: 'timing' } }}` works as it does for every other key.
+ *
+ * Conditional on `S` so the key only appears where the underlying style
+ * actually has it, rather than being bolted onto every primitive.
+ */
+type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
+  ? { boxShadow?: BoxShadowInput }
+  : // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    {}
+
 /**
  * The animation state shape inferred from the underlying component's style
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -200,7 +233,9 @@ type _StyleValue<T> = Exclude<T, (...args: any[]) => any>
 
 export type AnimateStyle<C> = C extends { style?: infer Raw }
   ? _StyleValue<Raw> extends StyleProp<infer S>
-    ? { [K in keyof S]?: AnimatableValue<S[K]> } & AnimatableTransformExtras
+    ? Omit<{ [K in keyof S]?: AnimatableValue<S[K]> }, 'boxShadow'> &
+        AnimatableTransformExtras &
+        AnimatableStructuredExtras<S>
     : never
   : never
 
@@ -379,19 +414,24 @@ export interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
    * recorded rect to its natural position via a FLIP transform stack.
    *
    * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
-   * Inertia-side measure-based replacement. Rects are recorded in
-   * parent-relative coordinates (from `onLayout`), which composes when the
-   * source and target screens share an outer content container (the common
-   * stack-navigator case); nested-parent layouts need the v2
-   * window-coordinate path.
+   * Inertia-side measure-based replacement. Rects are recorded in **window**
+   * coordinates wherever the host can be measured synchronously (Fabric),
+   * which is what lets a source and target sit under containers at different
+   * screen offsets; elsewhere both fall back to the parent-relative
+   * coordinates `onLayout` reports. A source and target that ended up in
+   * different spaces skip the animation rather than play a wrong one.
    *
    * The same `transition` prop drives the FLIP animation (spring by
    * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
-   * motion skips the transition). Out of scope for the first iteration:
-   * style-prop interpolation (border radius, colors, etc.) — only the
-   * rect-to-rect transform is animated. Two simultaneously-mounted
-   * primitives sharing the same `layoutId` are undefined behavior; pick a
-   * primitive per id at a time.
+   * motion skips the transition). Alongside the rect, a fixed set of style
+   * keys is carried from the source and crossfaded out on that same
+   * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
+   * `color`, `tintColor`. Transform keys are not carried — the FLIP owns
+   * them — and a key only participates when the element already has a value
+   * for it, from a record or from its static `style`.
+   *
+   * Two simultaneously-mounted primitives sharing the same `layoutId` are
+   * undefined behavior; pick a primitive per id at a time.
    */
   layoutId?: string
   /**

package/src/values/useAnimator.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { type SharedValue } from 'react-native-reanimated'
 import {
   resolveNamedTransition,
@@ -24,9 +24,11 @@ import { type TransitionInput } from '../types'
  *    `<MotionConfig reducedMotion>`. Hand-rolled `resolveTransition` writes
  *    silently bypass that setting — a correctness bug this hook fixes.
  *
- * The returned callback is stable across renders (it reads the registry and
- * the reduced-motion flag live inside the body), so it can be dropped straight
- * into memoized handlers.
+ * The returned callback is identity-stable for the lifetime of the component —
+ * it reads the registry and the reduced-motion flag out of refs at call time,
+ * so neither a new `<MotionConfig transitions>` map nor a reduced-motion change
+ * gives it a new identity. Drop it straight into memoized handlers or a
+ * `useCallback` dependency list without churning them.
  *
  * This is not a new animation API — it starts animations in Inertia's existing
  * transition vocabulary, so it does not conflict with the "no imperative-only
@@ -59,14 +61,23 @@ export function useAnimator(): Animator {
   const registry = useNamedTransitions()
   const shouldReduceMotion = useShouldReduceMotion()
 
-  return useCallback(
-    (value, to, transition) => {
-      const resolved = resolveNamedTransition(transition, registry)
-      const cfg = shouldReduceMotion
-        ? ({ type: 'no-animation' } as const)
-        : (resolved ?? ({ type: 'spring' } as const))
-      value.value = resolveTransition(cfg, to) as never
-    },
-    [registry, shouldReduceMotion],
-  )
+  // Latest context values behind refs, so the callback below can close over
+  // nothing that changes. Depending on them directly would hand back a new
+  // identity whenever a provider re-published its registry or the OS
+  // reduced-motion flag flipped — which breaks the documented contract that
+  // this is safe to drop into a memoized handler. Reading at call time is also
+  // strictly more correct: the write always resolves against the registry that
+  // is current *when the event fires*, not the one captured at render.
+  const registryRef = useRef(registry)
+  registryRef.current = registry
+  const reduceMotionRef = useRef(shouldReduceMotion)
+  reduceMotionRef.current = shouldReduceMotion
+
+  return useCallback((value, to, transition) => {
+    const resolved = resolveNamedTransition(transition, registryRef.current)
+    const cfg = reduceMotionRef.current
+      ? ({ type: 'no-animation' } as const)
+      : (resolved ?? ({ type: 'spring' } as const))
+    value.value = resolveTransition(cfg, to) as never
+  }, [])
 }

package/src/values/useColorCascade.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import {
   interpolateColor,
   useAnimatedStyle,
@@ -60,11 +60,11 @@ export interface UseColorCascadeOptions {
  * hook is not a replacement for it. For a mixed numeric + color cascade, or
  * function-valued layers, drop to a hand-rolled `useAnimatedStyle`.
  *
- * The layer chain is resolved once on the JS thread and memoized on a
- * structural signature (colors + key), so a fresh-but-equal `layers` array
- * each render produces no new UI-thread closure (CLAUDE.md principle 8). The
- * `progress` shared values are read live in the worklet, so their identity is
- * intentionally excluded from the signature.
+ * The layer chain is resolved once on the JS thread and kept identity-stable,
+ * so a fresh-but-equal `layers` array each render produces no new UI-thread
+ * closure (CLAUDE.md principle 8). Changing a colour, the `key`, the base
+ * `rest`, the layer count, or **which shared value drives a layer** all rewire
+ * the worklet as you'd expect.
  */
 export function useColorCascade(
   rest: string,
@@ -73,21 +73,39 @@ export function useColorCascade(
 ): ReturnType<typeof useAnimatedStyle> {
   const key = options?.key ?? 'backgroundColor'
 
-  // Resolve the layer chain into two flat, memoized arrays the worklet closes
-  // over — the static colors and the live progress shared values. Both are
-  // memoized on the same structural signature so a fresh-but-equal `layers`
-  // literal each render yields the same array references; Reanimated then sees
-  // an unchanged closure dependency and does not rebuild the UI-thread worklet
-  // (CLAUDE.md principle 8). The `progress` shared values are identity-stable
-  // per hook instance, so signing the colors + count is enough to detect a
-  // real change to the chain.
+  // Resolve the layer chain into two flat arrays the worklet closes over — the
+  // static colors and the live progress shared values. Both must keep a stable
+  // identity across renders where nothing really changed, or Reanimated sees a
+  // fresh closure dependency and rebuilds the UI-thread worklet every render
+  // (CLAUDE.md principle 8).
+  //
+  // Colors key off a structural signature.
   const sig = `${key}|${rest}|${layers.length}|${layers
     .map((l) => l.color)
     .join(',')}`
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const colors = useMemo(() => layers.map((l) => l.color), [sig])
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const progressValues = useMemo(() => layers.map((l) => l.progress), [sig])
+
+  // Progress values can't go in that signature — they're objects, not
+  // stringifiable. But they can't be excluded from change detection either:
+  // swapping *which* shared value drives a layer while its colour stays the
+  // same has to rewire the worklet. (It previously didn't: the cascade kept
+  // reading the old SV forever, silently.) So compare references directly and
+  // rebuild the array only when one actually differs — an equal-but-fresh
+  // `layers` literal still yields the same reference and no new worklet.
+  const progressRef = useRef<readonly SharedValue<number>[]>([])
+  const prevProgress = progressRef.current
+  let progressChanged = prevProgress.length !== layers.length
+  if (!progressChanged) {
+    for (let i = 0; i < layers.length; i++) {
+      if (prevProgress[i] !== layers[i]!.progress) {
+        progressChanged = true
+        break
+      }
+    }
+  }
+  if (progressChanged) progressRef.current = layers.map((l) => l.progress)
+  const progressValues = progressRef.current
 
   return useAnimatedStyle(() => {
     'worklet'

package/src/values/useColorTransition.ts

@@ -6,7 +6,7 @@ import {
 
 /**
  * Color style keys understood by React Native that this hook can target.
- * Sticks to the keys that exist on the v0.1 animatable surface so the
+ * Sticks to the keys that exist on the animatable surface so the
  * returned style fragment is always a legal RN style.
  */
 export type ColorStyleKey =

package/dist/chunk-34Q4UM6V.js

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

package/dist/chunk-KYJROYCG.js

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

package/dist/chunk-X5J5M3K3.js

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