@rootnative/inertia 0.0.2 → 0.0.3

package/src/motion/createMotionComponent.tsx

@@ -14,7 +14,7 @@ import Animated, {
   useSharedValue,
   type SharedValue,
 } from 'react-native-reanimated'
-import { type LayoutChangeEvent } from 'react-native'
+import { StyleSheet, type LayoutChangeEvent } from 'react-native'
 import {
   lookupNamedTransition,
   resolveNamedTransitionProp,
@@ -448,16 +448,57 @@ export function createMotionComponent<C extends ComponentType<any>>(
         )
       }
 
+      // Which keys a record actually drives *right now*. Everything else in
+      // the active set is there only because a gesture sub-state, an `exit`
+      // target, or a variant branch that isn't current mentions it. Those must
+      // rest at whatever the static `style` says — the animated style merges
+      // AFTER `style`, so resting them at `DEFAULT_RESTING` silently stomps it
+      // (`borderColor` → 'transparent', `width` → 0, and so on for every key
+      // whose default isn't an identity). Transforms and `opacity` hid this
+      // bug for a long time: their defaults happen to be no-ops.
+      const drivenNow = new Set<AnimatableKey>()
+      collectTouchedKeys(drivenNow, animateRecord)
+      if (initialRecord) collectTouchedKeys(drivenNow, initialRecord)
+      if (isExiting && exitRecord) collectTouchedKeys(drivenNow, exitRecord)
+
+      // Monotonic, like the active set. Once a record has driven a key we stop
+      // syncing it to the style, so transitioning to a variant that doesn't
+      // mention the key leaves it where the previous variant put it — the
+      // existing semantic — instead of snapping back to the style value.
+      const everDrivenRef = useRef<Set<AnimatableKey>>(new Set())
+      for (const k of drivenNow) everDrivenRef.current.add(k)
+
+      // Resting values pulled off the static `style`, for active keys nothing
+      // has driven. Gated so the common `animate`-only instance never flattens
+      // a style it has no use for.
+      const activeKeys = activeKeysRef.current!
+      const everDriven = everDrivenRef.current
+      const styleResting: Partial<Record<AnimatableKey, number | string>> = {}
+      if (activeKeys.some((k) => !everDriven.has(k))) {
+        const flat = StyleSheet.flatten(style as never) as
+          | Record<string, unknown>
+          | undefined
+        if (flat) {
+          for (const key of activeKeys) {
+            if (everDriven.has(key)) continue
+            const v = styleValueFor(flat, key)
+            if (v !== undefined) styleResting[key] = v
+          }
+        }
+      }
+
       const sharedValues = useAnimatableSharedValues((key) => {
         // Shadow offset synthetics seed from the corresponding axis on the
         // `shadowOffset: { width, height }` source — the consumer doesn't write
         // `shadowOffsetWidth` / `shadowOffsetHeight` directly. Fall back to the
-        // generic resting default when neither initial nor animate touched it.
+        // static style, then the generic resting default, when neither initial
+        // nor animate touched it.
         if (SHADOW_OFFSET_KEY_SET.has(key)) {
           const axis = shadowOffsetAxisFor(key as ShadowOffsetKey)
           if (initial === false) {
             return (
               shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ??
+              styleResting[key] ??
               DEFAULT_RESTING[key]
             )
           }
@@ -469,20 +510,39 @@ export function createMotionComponent<C extends ComponentType<any>>(
               axis,
             ) ??
             shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ??
+            styleResting[key] ??
             DEFAULT_RESTING[key]
           )
         }
         if (initial === false) {
           const a = animateRecord[key]
-          return restValue(a) ?? DEFAULT_RESTING[key]
+          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key]
         }
         return (
           initialRecord?.[key] ??
           restValue(animateRecord[key]) ??
+          styleResting[key] ??
           DEFAULT_RESTING[key]
         )
       })
 
+      // Keep never-driven keys tracking the *live* static style. The seed above
+      // only runs at mount, but the animated style emits these keys on every
+      // frame — so without this a `style` that changes afterwards (a theme
+      // swap, a conditional colour) would stay invisible for any key some
+      // gesture / exit / variant branch happens to mention. Direct assignment,
+      // not an animation: this is a static value, not a target.
+      const styleRestingSig = stableSig(styleResting)
+      useEffect(() => {
+        for (const key of activeKeysRef.current!) {
+          if (everDrivenRef.current.has(key)) continue
+          sharedValues[key].value = (styleResting[key] ??
+            DEFAULT_RESTING[key]) as never
+        }
+        // `styleResting` is rebuilt each render; its signature is the real dep.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [styleRestingSig])
+
       // One progress SV per gesture layer, allocated unconditionally for hook
       // stability. Each layer's progress animates 0↔1 with its own transition
       // when its activation flips; the worklet reads them when compositing.
@@ -568,15 +628,39 @@ export function createMotionComponent<C extends ComponentType<any>>(
           }
         }
 
+        // Per-key transition resolution, hoisted out of the loop below so the
+        // transform-group count can ask about a key's config before the loop
+        // reaches it. Reduced motion overrides every per-key transition (and
+        // any nested sequence-step transition) with `no-animation`, which the
+        // resolver turns into a direct value assignment. Sequences still
+        // iterate but each step settles instantly, matching the "snap to final
+        // state" expectation.
+        const configFor = (key: AnimatableKey): TransitionConfig | undefined =>
+          shouldReduceMotion
+            ? ({ type: 'no-animation' } as const)
+            : transitionFor(
+                SHADOW_OFFSET_KEY_SET.has(key)
+                  ? ('shadowOffset' as keyof typeof baseRecord)
+                  : key,
+                transition,
+              )
+
         // Count transform axes participating in this effect run so the factory
         // can coalesce their terminal callbacks into a single transform-group
         // event. `undefined` when no transform axis is animating, which lets
         // the factory skip the coalescing branch entirely.
+        //
+        // Endless axes are excluded. A `repeat: 'infinite'` axis never reaches
+        // the terminal `'animation'` phase, so counting it would pin
+        // `remaining` permanently above zero — a sibling axis with a finite
+        // transition would settle, decrement, and have its completion silently
+        // swallowed. An axis that never finishes simply isn't part of the group
+        // that does.
         let transformPending = 0
         for (const k of ALL_KEYS) {
-          if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== undefined) {
-            transformPending++
-          }
+          if (!TRANSFORM_KEY_SET.has(k) || baseRecord[k] === undefined) continue
+          if (!reachesTerminalPhase(configFor(k))) continue
+          transformPending++
         }
         const transformGroup: TransformGroup | undefined =
           transformPending > 0 ? { remaining: transformPending } : undefined
@@ -595,20 +679,15 @@ export function createMotionComponent<C extends ComponentType<any>>(
                 )
               : baseRecord[key]
           if (target === undefined) continue
-          // Reduced-motion overrides every per-key transition (and any nested
-          // sequence-step transition) with `no-animation`, which the resolver
-          // turns into a direct value assignment. Sequences still iterate but
-          // each step settles instantly, which matches the "snap to final
-          // state" expectation.
-          const cfg = shouldReduceMotion
-            ? ({ type: 'no-animation' } as const)
-            : transitionFor(
-                SHADOW_OFFSET_KEY_SET.has(key)
-                  ? ('shadowOffset' as keyof typeof baseRecord)
-                  : key,
-                transition,
-              )
-          if (isExiting) pending++
+          const cfg = configFor(key)
+          // <Presence> waits on this counter before unmounting, so only count
+          // keys that can actually settle. An endless exit animation (a
+          // `repeat: 'infinite'` transition inherited by `exit`, e.g. a pulsing
+          // element inside <Presence>) would otherwise never call
+          // `safeToRemove` and the child would stay mounted forever. Finite
+          // keys still gate the unmount; if every exit key is endless, the
+          // post-loop `pending === 0` release fires immediately.
+          if (isExiting && reachesTerminalPhase(cfg)) pending++
           const factory = makeKeyCallbackFactory(
             key,
             sharedValues[key],
@@ -1146,6 +1225,67 @@ function shadowOffsetAxisValue(
   return source?.[axis]
 }
 
+/**
+ * Read an animatable key's resting value out of a **flattened style object**.
+ *
+ * Used for keys that are in the active set but that no record drives — they
+ * have to rest wherever the static `style` put them, because the animated
+ * style merges after `style` and would otherwise override it.
+ *
+ * Three shapes need unwrapping: transform keys live inside the `transform`
+ * array rather than at the top level, `shadowOffset*` synthetics decompose
+ * from the nested object, and rotations are unit-suffixed strings on a style
+ * but plain degrees in our shared values.
+ *
+ * Type-narrow deliberately: only numbers are accepted for numeric slots, so a
+ * `width: '100%'` is left to `DEFAULT_RESTING` rather than seeded into a slot
+ * that a later `withTiming` would try to interpolate as a number.
+ */
+function styleValueFor(
+  flat: Record<string, unknown>,
+  key: AnimatableKey,
+): number | string | undefined {
+  if (SHADOW_OFFSET_KEY_SET.has(key)) {
+    return shadowOffsetAxisValue(
+      flat.shadowOffset as { width?: number; height?: number } | undefined,
+      shadowOffsetAxisFor(key as ShadowOffsetKey),
+    )
+  }
+  if (TRANSFORM_KEY_SET.has(key)) {
+    const list = flat.transform
+    if (!Array.isArray(list)) return undefined
+    for (const entry of list) {
+      if (!entry || typeof entry !== 'object') continue
+      const v = (entry as Record<string, unknown>)[key]
+      if (v === undefined) continue
+      if (ROTATION_KEYS.has(key)) return parseAngleDegrees(v)
+      return typeof v === 'number' ? v : undefined
+    }
+    return undefined
+  }
+  const v = flat[key]
+  if (COLOR_KEY_SET.has(key)) {
+    return typeof v === 'string' || typeof v === 'number' ? v : undefined
+  }
+  return typeof v === 'number' ? v : undefined
+}
+
+/**
+ * Style rotations are unit-suffixed strings (`'45deg'`, `'0.5rad'`); the shared
+ * value behind a rotation key holds plain degrees. Anything we can't convert
+ * confidently returns `undefined` so the caller falls back to the resting
+ * default instead of guessing at a unit.
+ */
+function parseAngleDegrees(v: unknown): number | undefined {
+  if (typeof v === 'number') return v
+  if (typeof v !== 'string') return undefined
+  const deg = /^(-?\d*\.?\d+)deg$/.exec(v)
+  if (deg) return Number(deg[1])
+  const rad = /^(-?\d*\.?\d+)rad$/.exec(v)
+  if (rad) return (Number(rad[1]) * 180) / Math.PI
+  return undefined
+}
+
 /**
  * Populate `touched` with the `AnimatableKey`s mentioned in `record`. Direct
  * matches (e.g. `opacity`, `width`) come from the key iteration; the nested
@@ -1190,6 +1330,22 @@ function totalIterationsOf(cfg: TransitionConfig | undefined): number {
   return r.count
 }
 
+/**
+ * Whether an animation built from `cfg` will ever reach its terminal
+ * `'animation'` phase. Everything finite does; `repeat: 'infinite'` never
+ * does, because `dispatch` only promotes a callback to the terminal phase once
+ * `iteration >= totalIterations - 1`, and that comparison is unreachable
+ * against `Infinity`.
+ *
+ * Anything counting pending completions must exclude endless animations, or
+ * the counter never drains: one endless transform axis swallowed every sibling
+ * axis's `onAnimationEnd`, and one endless `exit` key left a `<Presence>` child
+ * mounted forever because `safeToRemove` was gated behind it.
+ */
+function reachesTerminalPhase(cfg: TransitionConfig | undefined): boolean {
+  return Number.isFinite(totalIterationsOf(cfg))
+}
+
 /**
  * Pull a single end-value out of an `AnimatableValue` for the
  * `AnimationCallbackInfo.target` field. Plain numbers/strings come through;

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/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/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;