@rootnative/inertia 0.0.0-alpha.0 → 0.0.0-alpha.2

package/dist/index.d.mts

@@ -2,10 +2,10 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { M as MotionComponent, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, V as VariantController } from './types-cU43dEmH.mjs';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, d as SequenceStep, e as TimingTransition, f as Transition, g as VariantsMap } from './types-cU43dEmH.mjs';
+import { M as MotionComponent, N as NamedTransitions, T as TransitionInput, a as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-BzEgiUdJ.mjs';
+export { c as AnimateStyle, d as AnimationCallbackInfo, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, G as GestureSubStates, g as MotionProps, h as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, i as RepeatConfig, j as SequenceStep, k as TimingTransition, l as Transition, m as VariantsMap } from './types-BzEgiUdJ.mjs';
 import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
-export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-DxtXdz-K.mjs';
+export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-C0GBS7d2.mjs';
 export { MotionImage } from './motion/Image.mjs';
 export { MotionPressable } from './motion/Pressable.mjs';
 export { MotionScrollView } from './motion/ScrollView.mjs';
@@ -51,6 +51,12 @@ declare const Motion: {
 type ReducedMotion = 'user' | 'never' | 'always';
 interface MotionConfigValue {
     reducedMotion: ReducedMotion;
+    /**
+     * Named transitions registered by ancestor `<MotionConfig transitions>`
+     * providers, already merged (nearest provider wins per name). Empty with no
+     * provider — every name then resolves to the unknown-name fallback.
+     */
+    transitions: NamedTransitions;
 }
 /**
  * Read the active `<MotionConfig>` from a descendant. Returns the default
@@ -63,18 +69,64 @@ declare function useMotionConfig(): MotionConfigValue;
  * primitives call this to decide whether to swap transitions for
  * `no-animation`.
  */
+/**
+ * Read the merged named-transition registry from the nearest `<MotionConfig>`
+ * ancestors. This is what the Motion primitives and value-layer hooks consult
+ * when a `TransitionName` string is passed where a `TransitionConfig` is
+ * accepted; custom animated components (and adapter packages) use it together
+ * with `resolveNamedTransition` to support names on their own surface.
+ */
+declare function useNamedTransitions(): NamedTransitions;
 declare function useShouldReduceMotion(): boolean;
 
+interface MotionConfigProps {
+    /**
+     * How descendants respond to reduced-motion preferences. Inherits from the
+     * nearest ancestor `<MotionConfig>` when omitted (the root default is
+     * `'user'` — respect the OS accessibility setting).
+     */
+    reducedMotion?: ReducedMotion;
+    /**
+     * Named transitions available to every descendant wherever a
+     * `TransitionConfig` is accepted — the `transition` prop (top-level and
+     * per-property), the `layout` prop, and the value-layer hooks:
+     *
+     * ```tsx
+     * <MotionConfig
+     *   transitions={{
+     *     'state-press': { type: 'timing', duration: 100 },
+     *     selection: { type: 'spring', tension: 380, friction: 33 },
+     *   }}
+     * >
+     *   <Motion.View animate={{ scale: 1 }} transition="selection" />
+     * </MotionConfig>
+     * ```
+     *
+     * Names resolve at the nearest provider; nested providers merge with the
+     * ancestor registry, child entries overriding same-named ancestor entries.
+     * Unknown names warn in dev and fall back to the library default spring.
+     * Names are consumer vocabulary — Inertia ships no presets.
+     */
+    transitions?: NamedTransitions;
+    children: ReactNode;
+}
 /**
- * Provider that controls how descendant Motion primitives respond to
- * reduced-motion preferences. Wrap the root of your app once with the
+ * Provider for subtree-wide animation config: reduced-motion behaviour and
+ * the named-transition registry. Wrap the root of your app once with the
  * default (`reducedMotion="user"`) to respect the OS accessibility setting,
  * or scope a subtree with `'always'` / `'never'` for specific use cases.
+ * Nested providers inherit from their ancestor: an omitted prop keeps the
+ * ancestor's value, and `transitions` maps merge per name (child wins).
  */
-declare function MotionConfig({ reducedMotion, children, }: {
-    reducedMotion?: ReducedMotion;
-    children: ReactNode;
-}): react.JSX.Element;
+declare function MotionConfig({ reducedMotion, transitions, children, }: MotionConfigProps): react.JSX.Element;
+
+/**
+ * Resolve a single transition input — a `TransitionConfig` passes through
+ * untouched, a `TransitionName` is looked up in `registry`. This is the
+ * building block adapter packages use to accept names wherever they accept a
+ * config (pair it with `useNamedTransitions()` for the registry).
+ */
+declare function resolveNamedTransition(input: TransitionInput | undefined, registry: NamedTransitions): TransitionConfig | undefined;
 
 /**
  * Wrap a list of children with mount / unmount transitions. When a child is
@@ -154,6 +206,47 @@ declare function resolveTransition(config: TransitionConfig | undefined, toValue
  */
 declare function resolveAnimatableValue<V extends number | string>(value: AnimatableValue<V>, base: TransitionConfig | undefined, factory?: CallbackFactory): unknown;
 
+/**
+ * Build a `timing.easing` value from cubic-bezier control points — as four
+ * numbers, as a W3C CSS `cubic-bezier(...)` string, or as a CSS easing
+ * keyword. Design systems store easing tokens in the CSS format; this helper
+ * makes any such token file directly consumable without hand-translating to
+ * `Easing.bezier` calls:
+ *
+ * ```ts
+ * cubicBezier(0.2, 0, 0, 1)                  // number form
+ * cubicBezier('cubic-bezier(0.2, 0, 0, 1)')  // CSS token form
+ * cubicBezier('ease-out')                    // CSS keywords, incl. 'linear'
+ * ```
+ *
+ * The return value is exactly what `timing.easing` accepts (Reanimated's
+ * bezier factory; the resolver worklet-wraps it via `ensureWorkletEasing`
+ * like every other easing input), so it works in the `transition` prop, in
+ * named transitions registered on `<MotionConfig transitions>`, and in the
+ * value-layer hooks:
+ *
+ * ```tsx
+ * <MotionConfig
+ *   transitions={{
+ *     'state-hover': {
+ *       type: 'timing',
+ *       duration: 150,
+ *       easing: cubicBezier(theme.motion.easingStandard),
+ *     },
+ *   }}
+ * >
+ * ```
+ *
+ * Invalid input **throws** rather than warning: easing tokens are constructed
+ * at theme/module setup, and a malformed token should fail loudly there, not
+ * silently animate with the wrong curve. Per the CSS spec, `x1` / `x2` must
+ * be within `[0, 1]` (`y1` / `y2` are unrestricted). The stepping keywords
+ * (`step-start` / `step-end`) and the CSS `linear(...)` function are not
+ * easing curves this helper produces — they're intentionally unsupported.
+ */
+declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): EasingInput;
+declare function cubicBezier(css: string): EasingInput;
+
 /**
  * Reanimated 3.9+ validates that easing functions used in nested-transition
  * contexts (variants, sequences, per-property maps) are worklets, and crashes
@@ -200,7 +293,8 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
 
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
- * — spring, timing, decay, or no-animation. The general-purpose value-layer
+ * — spring, timing, decay, or no-animation — or a `TransitionName` registered
+ * on the nearest `<MotionConfig transitions>`. The general-purpose value-layer
  * hook: reach for it when you need raw `useSharedValue + useEffect + withX`
  * outside the declarative `animate` flow.
  *
@@ -242,7 +336,7 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
  * })
  * ```
  */
-declare function useAnimation(target: number, transition?: TransitionConfig): SharedValue<number>;
+declare function useAnimation(target: number, transition?: TransitionInput): SharedValue<number>;
 
 /**
  * Toggle a 0↔1 progress value with a spring whenever `active` flips.
@@ -265,9 +359,11 @@ declare function useAnimation(target: number, transition?: TransitionConfig): Sh
  *
  * The spring config follows the same react-spring vocabulary as the rest of
  * the library (`tension` / `friction` / `mass`); omit it to take the
- * library's defaults.
+ * library's defaults, or pass a `TransitionName` registered on the nearest
+ * `<MotionConfig transitions>` (spring-typed names only — see `useSpring`
+ * for the non-spring fallback behaviour).
  */
-declare function useBooleanSpring(active: boolean, springConfig?: SpringTransition): SharedValue<number>;
+declare function useBooleanSpring(active: boolean, springConfig?: SpringTransition | TransitionName): SharedValue<number>;
 
 /**
  * Color style keys understood by React Native that this hook can target.
@@ -334,6 +430,8 @@ declare function useColorTransition(progress: SharedValue<number>, range: readon
  * onPress={() => { x.value = 100 }}
  * ```
  */
+declare function useMotionValue(initial: number): SharedValue<number>;
+declare function useMotionValue(initial: string): SharedValue<string>;
 declare function useMotionValue<T extends number | string>(initial: T): SharedValue<T>;
 
 /**
@@ -349,8 +447,14 @@ declare function useMotionValue<T extends number | string>(initial: T): SharedVa
  *
  * Both call sites end up at the same `withSpring` invocation; the split is
  * just about which thread observes the source change.
+ *
+ * `config` also accepts a `TransitionName` registered on the nearest
+ * `<MotionConfig transitions>`. Because this hook is spring-only, the name
+ * must resolve to a spring config — a name registered as timing / decay /
+ * no-animation warns in dev and falls back to the default spring (reach for
+ * `useAnimation` when the named transition's type should be honored).
  */
-declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition): SharedValue<number>;
+declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
 
 /**
  * Extrapolation behavior at the edges of the input range. Mirrors
@@ -415,10 +519,13 @@ interface UseScrollResult {
  * ```tsx
  * const { scrollY, onScroll } = useScroll()
  * const headerOpacity = useTransform(scrollY, [0, 100], [1, 0])
+ * const headerStyle = useAnimatedStyle(() => ({
+ *   opacity: headerOpacity.value,
+ * }))
  *
  * return (
  *   <>
- *     <Motion.View animate={{ opacity: headerOpacity }} />
+ *     <Animated.View style={headerStyle} />
  *     <Motion.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
  *       …
  *     </Motion.ScrollView>
@@ -426,6 +533,10 @@ interface UseScrollResult {
  * )
  * ```
  *
+ * The derived shared values are consumed through Reanimated interop
+ * (`useAnimatedStyle` / `useDerivedValue`) — the declarative `animate` prop
+ * takes target values, not shared values.
+ *
  * Scroll events fire on the UI thread, so `scrollX` / `scrollY` are safe to
  * read from any worklet (`useAnimatedStyle`, `useDerivedValue`,
  * `useTransform`) without a JS-thread bounce.
@@ -504,4 +615,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type ColorStyleKey, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type ColorStyleKey, EasingInput, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, TransitionInput, TransitionName, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };

package/dist/index.d.ts

@@ -2,10 +2,10 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { M as MotionComponent, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, V as VariantController } from './types-cU43dEmH.js';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, d as SequenceStep, e as TimingTransition, f as Transition, g as VariantsMap } from './types-cU43dEmH.js';
+import { M as MotionComponent, N as NamedTransitions, T as TransitionInput, a as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-BzEgiUdJ.js';
+export { c as AnimateStyle, d as AnimationCallbackInfo, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, G as GestureSubStates, g as MotionProps, h as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, i as RepeatConfig, j as SequenceStep, k as TimingTransition, l as Transition, m as VariantsMap } from './types-BzEgiUdJ.js';
 import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
-export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-BnY65PlQ.js';
+export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-BRLgiNOC.js';
 export { MotionImage } from './motion/Image.js';
 export { MotionPressable } from './motion/Pressable.js';
 export { MotionScrollView } from './motion/ScrollView.js';
@@ -51,6 +51,12 @@ declare const Motion: {
 type ReducedMotion = 'user' | 'never' | 'always';
 interface MotionConfigValue {
     reducedMotion: ReducedMotion;
+    /**
+     * Named transitions registered by ancestor `<MotionConfig transitions>`
+     * providers, already merged (nearest provider wins per name). Empty with no
+     * provider — every name then resolves to the unknown-name fallback.
+     */
+    transitions: NamedTransitions;
 }
 /**
  * Read the active `<MotionConfig>` from a descendant. Returns the default
@@ -63,18 +69,64 @@ declare function useMotionConfig(): MotionConfigValue;
  * primitives call this to decide whether to swap transitions for
  * `no-animation`.
  */
+/**
+ * Read the merged named-transition registry from the nearest `<MotionConfig>`
+ * ancestors. This is what the Motion primitives and value-layer hooks consult
+ * when a `TransitionName` string is passed where a `TransitionConfig` is
+ * accepted; custom animated components (and adapter packages) use it together
+ * with `resolveNamedTransition` to support names on their own surface.
+ */
+declare function useNamedTransitions(): NamedTransitions;
 declare function useShouldReduceMotion(): boolean;
 
+interface MotionConfigProps {
+    /**
+     * How descendants respond to reduced-motion preferences. Inherits from the
+     * nearest ancestor `<MotionConfig>` when omitted (the root default is
+     * `'user'` — respect the OS accessibility setting).
+     */
+    reducedMotion?: ReducedMotion;
+    /**
+     * Named transitions available to every descendant wherever a
+     * `TransitionConfig` is accepted — the `transition` prop (top-level and
+     * per-property), the `layout` prop, and the value-layer hooks:
+     *
+     * ```tsx
+     * <MotionConfig
+     *   transitions={{
+     *     'state-press': { type: 'timing', duration: 100 },
+     *     selection: { type: 'spring', tension: 380, friction: 33 },
+     *   }}
+     * >
+     *   <Motion.View animate={{ scale: 1 }} transition="selection" />
+     * </MotionConfig>
+     * ```
+     *
+     * Names resolve at the nearest provider; nested providers merge with the
+     * ancestor registry, child entries overriding same-named ancestor entries.
+     * Unknown names warn in dev and fall back to the library default spring.
+     * Names are consumer vocabulary — Inertia ships no presets.
+     */
+    transitions?: NamedTransitions;
+    children: ReactNode;
+}
 /**
- * Provider that controls how descendant Motion primitives respond to
- * reduced-motion preferences. Wrap the root of your app once with the
+ * Provider for subtree-wide animation config: reduced-motion behaviour and
+ * the named-transition registry. Wrap the root of your app once with the
  * default (`reducedMotion="user"`) to respect the OS accessibility setting,
  * or scope a subtree with `'always'` / `'never'` for specific use cases.
+ * Nested providers inherit from their ancestor: an omitted prop keeps the
+ * ancestor's value, and `transitions` maps merge per name (child wins).
  */
-declare function MotionConfig({ reducedMotion, children, }: {
-    reducedMotion?: ReducedMotion;
-    children: ReactNode;
-}): react.JSX.Element;
+declare function MotionConfig({ reducedMotion, transitions, children, }: MotionConfigProps): react.JSX.Element;
+
+/**
+ * Resolve a single transition input — a `TransitionConfig` passes through
+ * untouched, a `TransitionName` is looked up in `registry`. This is the
+ * building block adapter packages use to accept names wherever they accept a
+ * config (pair it with `useNamedTransitions()` for the registry).
+ */
+declare function resolveNamedTransition(input: TransitionInput | undefined, registry: NamedTransitions): TransitionConfig | undefined;
 
 /**
  * Wrap a list of children with mount / unmount transitions. When a child is
@@ -154,6 +206,47 @@ declare function resolveTransition(config: TransitionConfig | undefined, toValue
  */
 declare function resolveAnimatableValue<V extends number | string>(value: AnimatableValue<V>, base: TransitionConfig | undefined, factory?: CallbackFactory): unknown;
 
+/**
+ * Build a `timing.easing` value from cubic-bezier control points — as four
+ * numbers, as a W3C CSS `cubic-bezier(...)` string, or as a CSS easing
+ * keyword. Design systems store easing tokens in the CSS format; this helper
+ * makes any such token file directly consumable without hand-translating to
+ * `Easing.bezier` calls:
+ *
+ * ```ts
+ * cubicBezier(0.2, 0, 0, 1)                  // number form
+ * cubicBezier('cubic-bezier(0.2, 0, 0, 1)')  // CSS token form
+ * cubicBezier('ease-out')                    // CSS keywords, incl. 'linear'
+ * ```
+ *
+ * The return value is exactly what `timing.easing` accepts (Reanimated's
+ * bezier factory; the resolver worklet-wraps it via `ensureWorkletEasing`
+ * like every other easing input), so it works in the `transition` prop, in
+ * named transitions registered on `<MotionConfig transitions>`, and in the
+ * value-layer hooks:
+ *
+ * ```tsx
+ * <MotionConfig
+ *   transitions={{
+ *     'state-hover': {
+ *       type: 'timing',
+ *       duration: 150,
+ *       easing: cubicBezier(theme.motion.easingStandard),
+ *     },
+ *   }}
+ * >
+ * ```
+ *
+ * Invalid input **throws** rather than warning: easing tokens are constructed
+ * at theme/module setup, and a malformed token should fail loudly there, not
+ * silently animate with the wrong curve. Per the CSS spec, `x1` / `x2` must
+ * be within `[0, 1]` (`y1` / `y2` are unrestricted). The stepping keywords
+ * (`step-start` / `step-end`) and the CSS `linear(...)` function are not
+ * easing curves this helper produces — they're intentionally unsupported.
+ */
+declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): EasingInput;
+declare function cubicBezier(css: string): EasingInput;
+
 /**
  * Reanimated 3.9+ validates that easing functions used in nested-transition
  * contexts (variants, sequences, per-property maps) are worklets, and crashes
@@ -200,7 +293,8 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
 
 /**
  * Drive a `SharedValue<number>` toward `target` with **any** transition shape
- * — spring, timing, decay, or no-animation. The general-purpose value-layer
+ * — spring, timing, decay, or no-animation — or a `TransitionName` registered
+ * on the nearest `<MotionConfig transitions>`. The general-purpose value-layer
  * hook: reach for it when you need raw `useSharedValue + useEffect + withX`
  * outside the declarative `animate` flow.
  *
@@ -242,7 +336,7 @@ declare function buildReleaseAnimation(transition: TransitionConfig, toValue: nu
  * })
  * ```
  */
-declare function useAnimation(target: number, transition?: TransitionConfig): SharedValue<number>;
+declare function useAnimation(target: number, transition?: TransitionInput): SharedValue<number>;
 
 /**
  * Toggle a 0↔1 progress value with a spring whenever `active` flips.
@@ -265,9 +359,11 @@ declare function useAnimation(target: number, transition?: TransitionConfig): Sh
  *
  * The spring config follows the same react-spring vocabulary as the rest of
  * the library (`tension` / `friction` / `mass`); omit it to take the
- * library's defaults.
+ * library's defaults, or pass a `TransitionName` registered on the nearest
+ * `<MotionConfig transitions>` (spring-typed names only — see `useSpring`
+ * for the non-spring fallback behaviour).
  */
-declare function useBooleanSpring(active: boolean, springConfig?: SpringTransition): SharedValue<number>;
+declare function useBooleanSpring(active: boolean, springConfig?: SpringTransition | TransitionName): SharedValue<number>;
 
 /**
  * Color style keys understood by React Native that this hook can target.
@@ -334,6 +430,8 @@ declare function useColorTransition(progress: SharedValue<number>, range: readon
  * onPress={() => { x.value = 100 }}
  * ```
  */
+declare function useMotionValue(initial: number): SharedValue<number>;
+declare function useMotionValue(initial: string): SharedValue<string>;
 declare function useMotionValue<T extends number | string>(initial: T): SharedValue<T>;
 
 /**
@@ -349,8 +447,14 @@ declare function useMotionValue<T extends number | string>(initial: T): SharedVa
  *
  * Both call sites end up at the same `withSpring` invocation; the split is
  * just about which thread observes the source change.
+ *
+ * `config` also accepts a `TransitionName` registered on the nearest
+ * `<MotionConfig transitions>`. Because this hook is spring-only, the name
+ * must resolve to a spring config — a name registered as timing / decay /
+ * no-animation warns in dev and falls back to the default spring (reach for
+ * `useAnimation` when the named transition's type should be honored).
  */
-declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition): SharedValue<number>;
+declare function useSpring(target: number | SharedValue<number>, config?: SpringTransition | TransitionName): SharedValue<number>;
 
 /**
  * Extrapolation behavior at the edges of the input range. Mirrors
@@ -415,10 +519,13 @@ interface UseScrollResult {
  * ```tsx
  * const { scrollY, onScroll } = useScroll()
  * const headerOpacity = useTransform(scrollY, [0, 100], [1, 0])
+ * const headerStyle = useAnimatedStyle(() => ({
+ *   opacity: headerOpacity.value,
+ * }))
  *
  * return (
  *   <>
- *     <Motion.View animate={{ opacity: headerOpacity }} />
+ *     <Animated.View style={headerStyle} />
  *     <Motion.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
  *       …
  *     </Motion.ScrollView>
@@ -426,6 +533,10 @@ interface UseScrollResult {
  * )
  * ```
  *
+ * The derived shared values are consumed through Reanimated interop
+ * (`useAnimatedStyle` / `useDerivedValue`) — the declarative `animate` prop
+ * takes target values, not shared values.
+ *
  * Scroll events fire on the UI thread, so `scrollX` / `scrollY` are safe to
  * read from any worklet (`useAnimatedStyle`, `useDerivedValue`,
  * `useTransform`) without a JS-thread bounce.
@@ -504,4 +615,4 @@ declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnTyp
  */
 declare function useVariants<V extends Readonly<Record<string, object>>>(variants: V, initial?: keyof V & string): VariantController<keyof V & string>;
 
-export { AnimatableValue, type ColorStyleKey, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigValue, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
+export { AnimatableValue, type ColorStyleKey, EasingInput, type ExtrapolationMode, Motion, MotionComponent, MotionConfig, type MotionConfigProps, type MotionConfigValue, NamedTransitions, Presence, type PresenceContextValue, type ReducedMotion, type ShadowConfig, SpringTransition, TransitionConfig, TransitionInput, TransitionName, type UseColorTransitionOptions, type UseScrollResult, type UseShadowOptions, type UseTransformOptions, VariantController, buildReleaseAnimation, createMotionComponent, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveNamedTransition, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useMotionConfig, useMotionValue, useNamedTransitions, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };