@rootnative/inertia 0.0.0-alpha.4 → 0.0.0-alpha.6

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to `@rootnative/inertia` are documented here. The format fol
 
 ## [Unreleased]
 
+### Added
+
+- **`useShadow` now interpolates CSS `boxShadow`.** The classic `shadow*`/`elevation` keys never reach the web renderer, so a `useShadow` elevation crossfade silently dropped its shadow on web — the platform where hover, its most common driver, matters most (gap surfaced by the RootNative UI Card migration). `ShadowConfig` gains `boxShadow?: string | BoxShadowLayer[]`: pass the CSS string form design systems store elevation tokens in (px lengths only; parsed once on the JS thread, `cubicBezier`-style — malformed tokens throw at setup rather than warning) or structured layers mirroring RN's `BoxShadowValue`. Multi-layer shadows interpolate per layer with CSS-transition padding semantics (shorter side padded with invisible layers; a genuine `inset` mismatch throws); blur clamps at 0 under springy overshoot. Emitted as a `boxShadow` style string — passed through as CSS by react-native-web and rendered natively on RN 0.76+ new architecture; keep `shadow*`/`elevation` alongside it for old-arch native. New `BoxShadowLayer` type exported from the root.
+
+## [0.0.0-alpha.5] - 2026-07-21
+
+### Changed
+
+- **Non-worklet transformers and easings now dev-warn.** `useTransform`'s transformer overload and custom `timing.easing` functions must be worklets (`'worklet'` directive as the first statement). The previous "plain functions are auto-wrapped" promise was unfulfillable: the directive-wrapped fallback closes over the opaque function reference, not the shared values read inside it, so Reanimated cannot extract dependencies (a `useTransform` derived value silently only refreshed on React re-renders — found via a frozen TextField label float in the UI library) and native builds reject the plain function when the closure is serialized to the UI thread. The fallback wrapper remains as a web-only best effort, but both sites now `console.warn` once in dev (suppressed under Jest, where the shared stubs report every function as non-worklet). Docs (`transitions.md`, `layout.md`, `api/hooks.md`) and docstrings corrected to state the real contract.
+
+## [0.0.0-alpha.4] - 2026-07-21
+
+### Fixed
+
+- **First mouse click after page load no longer draws a focus ring** (web). The `focusVisibility` input-modality listeners attached lazily on the first `isFocusVisible()` call — which happens _during_ the focus dispatch of that first click, after its `mousedown` had already passed unobserved — leaving the default `'keyboard'` modality and misclassifying the pointer interaction as keyboard focus. The listeners now install eagerly at module import (the lazy path remains as a safety net for environments where `document` appears after import).
+
+## [0.0.0-alpha.3] - 2026-07-21
+
+### Fixed
+
+- **Named transitions resolve correctly across subpath entries.** `splitting: false` in the tsup config made every dist entry inline its own copy of `MotionConfigContext`, so the provider (root entry) and consumers (e.g. the `/gesture-layer` subpath) held different React contexts and every registered name silently fell back to the default spring. Dist now builds with code splitting so the context module is shared.
+
 ## [0.0.0-alpha.2] - 2026-07-20
 
 ### Added

package/dist/{chunk-5I3G43XA.js → chunk-2HYD2ZBK.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk6UQ4KA6V_js = require('./chunk-6UQ4KA6V.js');
+var chunk7UDYEFBU_js = require('./chunk-7UDYEFBU.js');
 var reactNative = require('react-native');
 
-var MotionScrollView = chunk6UQ4KA6V_js.createMotionComponent(reactNative.ScrollView);
+var MotionScrollView = chunk7UDYEFBU_js.createMotionComponent(reactNative.ScrollView);
 
 exports.MotionScrollView = MotionScrollView;

package/dist/chunk-3UTJJ4A3.js

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

package/dist/{chunk-Q6ZTMLTI.js → chunk-4PEHWDAZ.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk6EP3S2PN_js = require('./chunk-6EP3S2PN.js');
-var chunkSFRNO6AW_js = require('./chunk-SFRNO6AW.js');
+var chunk7AOERN53_js = require('./chunk-7AOERN53.js');
+var chunkPTRF47DA_js = require('./chunk-PTRF47DA.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 
@@ -10,12 +10,12 @@ function useGesture(transition) {
   const focused = reactNativeReanimated.useSharedValue(0);
   const focusVisible = reactNativeReanimated.useSharedValue(0);
   const hovered = reactNativeReanimated.useSharedValue(0);
-  const shouldReduceMotion = chunk6EP3S2PN_js.useShouldReduceMotion();
-  const resolved = chunk6EP3S2PN_js.resolveNamedTransitionProp(transition, chunk6EP3S2PN_js.useNamedTransitions());
+  const shouldReduceMotion = chunk7AOERN53_js.useShouldReduceMotion();
+  const resolved = chunk7AOERN53_js.resolveNamedTransitionProp(transition, chunk7AOERN53_js.useNamedTransitions());
   const setLayer = react.useCallback(
     (sv, layer, target) => {
       const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, resolved) ?? { type: "spring" };
-      sv.value = chunkSFRNO6AW_js.resolveTransition(cfg, target);
+      sv.value = chunkPTRF47DA_js.resolveTransition(cfg, target);
     },
     // The transition is intentionally read on every call rather than cooked
     // into the dep array — a fresh literal each render would otherwise
@@ -34,7 +34,7 @@ function useGesture(transition) {
       onHoverOut: () => setLayer(hovered, "hovered", 0),
       onFocus: () => {
         setLayer(focused, "focused", 1);
-        if (chunk6EP3S2PN_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
+        if (chunk7AOERN53_js.isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
       },
       onBlur: () => {
         setLayer(focused, "focused", 0);
@@ -47,7 +47,7 @@ function useGesture(transition) {
 }
 function layerTransition(layer, transition) {
   if (!transition) return void 0;
-  if (chunkSFRNO6AW_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 

package/dist/chunk-4QGXK6TF.js

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

package/dist/{chunk-WPPLZNM4.mjs → chunk-6SMPIOIC.mjs}

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

package/dist/{chunk-6EP3S2PN.js → chunk-7AOERN53.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkSFRNO6AW_js = require('./chunk-SFRNO6AW.js');
+var chunkPTRF47DA_js = require('./chunk-PTRF47DA.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 var jsxRuntime = require('react/jsx-runtime');
@@ -32,7 +32,7 @@ function MotionConfig({
   children
 }) {
   const parent = useMotionConfig();
-  const transitionsSig = chunkSFRNO6AW_js.stableSig(transitions);
+  const transitionsSig = chunkPTRF47DA_js.stableSig(transitions);
   const value = react.useMemo(
     () => ({
       reducedMotion: reducedMotion ?? parent.reducedMotion,
@@ -66,7 +66,7 @@ function resolveNamedTransitionProp(transition, registry) {
   if (typeof transition === "string") {
     return lookupNamedTransition(transition, registry);
   }
-  if (chunkSFRNO6AW_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
   const map = transition;
   let out = null;
   for (const key in map) {

package/dist/{chunk-6UQ4KA6V.js → chunk-7UDYEFBU.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk6EP3S2PN_js = require('./chunk-6EP3S2PN.js');
-var chunkSFRNO6AW_js = require('./chunk-SFRNO6AW.js');
+var chunk7AOERN53_js = require('./chunk-7AOERN53.js');
+var chunkPTRF47DA_js = require('./chunk-PTRF47DA.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Animated = require('react-native-reanimated');
@@ -111,14 +111,14 @@ function resolveLayoutTransition(layout) {
   if (cfg.type === "no-animation") return void 0;
   if (cfg.type === "timing") {
     let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
-    const easing = chunkSFRNO6AW_js.ensureWorkletEasing(cfg.easing);
+    const easing = chunkPTRF47DA_js.ensureWorkletEasing(cfg.easing);
     if (easing) builder2 = builder2.easing(easing);
     if (cfg.delay) builder2 = builder2.delay(cfg.delay);
     return builder2;
   }
   const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
-  const { stiffness, damping, mass } = chunkSFRNO6AW_js.springToReanimated({
-    ...chunkSFRNO6AW_js.DEFAULT_SPRING,
+  const { stiffness, damping, mass } = chunkPTRF47DA_js.springToReanimated({
+    ...chunkPTRF47DA_js.DEFAULT_SPRING,
     ...spring
   });
   let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
@@ -257,8 +257,8 @@ function applyFlip(args) {
     );
     return;
   }
-  const springCfg = transition?.type === "spring" ? { ...chunkSFRNO6AW_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkSFRNO6AW_js.DEFAULT_SPRING };
-  const springParams = chunkSFRNO6AW_js.springToReanimated(springCfg);
+  const springCfg = transition?.type === "spring" ? { ...chunkPTRF47DA_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkPTRF47DA_js.DEFAULT_SPRING };
+  const springParams = chunkPTRF47DA_js.springToReanimated(springCfg);
   dx.value = Animated.withSequence(
     Animated.withTiming(deltaX, { duration: 0 }),
     Animated.withSpring(0, springParams)
@@ -379,14 +379,14 @@ var DEFAULT_RESTING = {
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkSFRNO6AW_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
   if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
   return transition[prop];
 }
 function gestureLayerTransitionFor(layer, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunkSFRNO6AW_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 function createMotionComponent(Component) {
@@ -411,12 +411,12 @@ function createMotionComponent(Component) {
       onLayout: userOnLayout,
       ...rest
     } = props;
-    const namedTransitions = chunk6EP3S2PN_js.useNamedTransitions();
-    const transition = chunk6EP3S2PN_js.resolveNamedTransitionProp(
+    const namedTransitions = chunk7AOERN53_js.useNamedTransitions();
+    const transition = chunk7AOERN53_js.resolveNamedTransitionProp(
       transitionProp,
       namedTransitions
     );
-    const layout = typeof layoutProp === "string" ? chunk6EP3S2PN_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+    const layout = typeof layoutProp === "string" ? chunk7AOERN53_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
     if (__DEV__ && typeof style === "function") {
       throw new Error(
         "[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
@@ -424,7 +424,7 @@ function createMotionComponent(Component) {
     }
     const presence = usePresence();
     const isExiting = presence !== null && presence.isPresent === false;
-    const shouldReduceMotion = chunk6EP3S2PN_js.useShouldReduceMotion();
+    const shouldReduceMotion = chunk7AOERN53_js.useShouldReduceMotion();
     const onAnimationEndRef = react.useRef(onAnimationEnd);
     onAnimationEndRef.current = onAnimationEnd;
     const variantKey = useControllerKey(controller);
@@ -509,13 +509,13 @@ function createMotionComponent(Component) {
     const gestureSV = Animated.useSharedValue(
       resolveGestureLayers(gesture)
     );
-    const gestureTargetsSig = chunkSFRNO6AW_js.stableSig(gesture);
+    const gestureTargetsSig = chunkPTRF47DA_js.stableSig(gesture);
     react.useEffect(() => {
       gestureSV.value = resolveGestureLayers(gesture);
     }, [gestureTargetsSig]);
     const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-    const baseSig = chunkSFRNO6AW_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-    const transitionSig = chunkSFRNO6AW_js.stableSig(transition);
+    const baseSig = chunkPTRF47DA_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+    const transitionSig = chunkPTRF47DA_js.stableSig(transition);
     const safeToRemoveRef = react.useRef(void 0);
     safeToRemoveRef.current = presence?.safeToRemove;
     react.useEffect(() => {
@@ -563,7 +563,7 @@ function createMotionComponent(Component) {
           isExiting ? onSettle : void 0,
           TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
         );
-        sharedValues[key].value = chunkSFRNO6AW_js.resolveAnimatableValue(
+        sharedValues[key].value = chunkPTRF47DA_js.resolveAnimatableValue(
           target,
           cfg,
           factory
@@ -612,7 +612,7 @@ function createMotionComponent(Component) {
     const sharedLayout = useSharedLayout({
       layoutId,
       userRef: ref,
-      transition: chunkSFRNO6AW_js.isTopLevelTransition(transition) ? transition : void 0,
+      transition: chunkPTRF47DA_js.isTopLevelTransition(transition) ? transition : void 0,
       shouldReduceMotion,
       userOnLayout
     });
@@ -690,7 +690,7 @@ function createMotionComponent(Component) {
       setFocusVisible,
       setHovered
     );
-    const layoutSig = chunkSFRNO6AW_js.stableSig(layout);
+    const layoutSig = chunkPTRF47DA_js.stableSig(layout);
     const layoutTransition = react.useMemo(
       () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -934,7 +934,7 @@ function resolveGestureLayers(gesture) {
   return out;
 }
 function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
-  const layerCfgSig = chunkSFRNO6AW_js.stableSig(gestureLayerTransitionFor(layer, transition));
+  const layerCfgSig = chunkPTRF47DA_js.stableSig(gestureLayerTransitionFor(layer, transition));
   react.useEffect(() => {
     if (!declared) return;
     if (isExiting) {
@@ -943,7 +943,7 @@ function useGestureLayerProgress(progress, active, declared, layer, transition,
     }
     const target = active ? 1 : 0;
     const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
-    progress.value = chunkSFRNO6AW_js.resolveTransition(cfg, target);
+    progress.value = chunkPTRF47DA_js.resolveTransition(cfg, target);
   }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
@@ -967,7 +967,7 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
     if (gesture.focused || gesture.focusVisible) {
       handlers.onFocus = compose(rest.onFocus, () => {
         if (gesture.focused) setFocused(true);
-        if (gesture.focusVisible && chunk6EP3S2PN_js.isFocusVisible()) setFocusVisible(true);
+        if (gesture.focusVisible && chunk7AOERN53_js.isFocusVisible()) setFocusVisible(true);
       });
       handlers.onBlur = compose(rest.onBlur, () => {
         if (gesture.focused) setFocused(false);

package/dist/{chunk-K4KR5BIS.mjs → chunk-ALRHDFZE.mjs}

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

package/dist/{chunk-QQJSBIXV.mjs → chunk-CWLFUYIY.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-I76OC6RX.mjs';
+import { createMotionComponent } from './chunk-DWCLIBYO.mjs';
 import { ScrollView } from 'react-native';
 
 var MotionScrollView = createMotionComponent(ScrollView);

package/dist/{chunk-6FENLMCA.mjs → chunk-CY7Y64C3.mjs}

@@ -1,11 +1,27 @@
 import { isWorkletFunction } from 'react-native-worklets';
 import { withSequence, Easing, withDecay, withTiming, withSpring, withRepeat, withDelay } from 'react-native-reanimated';
 
+// src/transitions/easing.ts
+
+// src/internal/nonWorkletWarning.ts
+var warned = /* @__PURE__ */ new Set();
+function warnNonWorkletOnce(key, message) {
+  if (!__DEV__) return;
+  if (typeof process !== "undefined" && process.env?.JEST_WORKER_ID) return;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(message);
+}
+
 // src/transitions/easing.ts
 function ensureWorkletEasing(easing) {
   if (!easing) return void 0;
   const fn = isEasingFactory(easing) ? easing.factory() : easing;
   if (isWorkletFunction(fn)) return fn;
+  warnNonWorkletOnce(
+    "timing-easing",
+    "[inertia] timing easing: the provided easing function is not a worklet. The fallback wrapper works on web but native builds reject it when the transition runs on the UI thread. Add the 'worklet' directive as the first statement of the easing function, or use Reanimated's Easing.* helpers / inertia's cubicBezier(), which are already worklets."
+  );
   const wrapped = (t) => {
     "worklet";
     return fn(t);
@@ -254,4 +270,4 @@ function stableStringify(v) {
   return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
 }
 
-export { DEFAULT_SPRING, buildReleaseAnimation, cubicBezier, ensureWorkletEasing, isTopLevelTransition, resolveAnimatableValue, resolveTransition, springToReanimated, stableSig };
+export { DEFAULT_SPRING, buildReleaseAnimation, cubicBezier, ensureWorkletEasing, isTopLevelTransition, resolveAnimatableValue, resolveTransition, springToReanimated, stableSig, warnNonWorkletOnce };

package/dist/{chunk-I76OC6RX.mjs → chunk-DWCLIBYO.mjs}

@@ -1,5 +1,5 @@
-import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-L2EVRKSC.mjs';
-import { stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-6FENLMCA.mjs';
+import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-R63GIUNU.mjs';
+import { stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-CY7Y64C3.mjs';
 import { createContext, useContext, useMemo, Children, isValidElement, useState, useRef, useCallback, forwardRef, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';

package/dist/{chunk-IJNVUM5U.mjs → chunk-JVBXPF2G.mjs}

@@ -1,4 +1,4 @@
-import { createMotionComponent } from './chunk-I76OC6RX.mjs';
+import { createMotionComponent } from './chunk-DWCLIBYO.mjs';
 import { Text } from 'react-native';
 
 var MotionText = createMotionComponent(Text);

package/dist/{chunk-OBE7KTMK.mjs → chunk-NXDJZD6A.mjs}

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

package/dist/{chunk-SFRNO6AW.js → chunk-PTRF47DA.js}

@@ -3,11 +3,27 @@
 var reactNativeWorklets = require('react-native-worklets');
 var reactNativeReanimated = require('react-native-reanimated');
 
+// src/transitions/easing.ts
+
+// src/internal/nonWorkletWarning.ts
+var warned = /* @__PURE__ */ new Set();
+function warnNonWorkletOnce(key, message) {
+  if (!__DEV__) return;
+  if (typeof process !== "undefined" && process.env?.JEST_WORKER_ID) return;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(message);
+}
+
 // src/transitions/easing.ts
 function ensureWorkletEasing(easing) {
   if (!easing) return void 0;
   const fn = isEasingFactory(easing) ? easing.factory() : easing;
   if (reactNativeWorklets.isWorkletFunction(fn)) return fn;
+  warnNonWorkletOnce(
+    "timing-easing",
+    "[inertia] timing easing: the provided easing function is not a worklet. The fallback wrapper works on web but native builds reject it when the transition runs on the UI thread. Add the 'worklet' directive as the first statement of the easing function, or use Reanimated's Easing.* helpers / inertia's cubicBezier(), which are already worklets."
+  );
   const wrapped = (t) => {
     "worklet";
     return fn(t);
@@ -265,3 +281,4 @@ exports.resolveAnimatableValue = resolveAnimatableValue;
 exports.resolveTransition = resolveTransition;
 exports.springToReanimated = springToReanimated;
 exports.stableSig = stableSig;
+exports.warnNonWorkletOnce = warnNonWorkletOnce;

package/dist/{chunk-L2EVRKSC.mjs → chunk-R63GIUNU.mjs}

@@ -1,4 +1,4 @@
-import { stableSig, isTopLevelTransition } from './chunk-6FENLMCA.mjs';
+import { stableSig, isTopLevelTransition } from './chunk-CY7Y64C3.mjs';
 import { createContext, useContext, useMemo } from 'react';
 import { useReducedMotion } from 'react-native-reanimated';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-ZQUCQRZT.mjs → chunk-RGNX6UZN.mjs}

@@ -1,5 +1,5 @@
-import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-L2EVRKSC.mjs';
-import { resolveTransition, isTopLevelTransition } from './chunk-6FENLMCA.mjs';
+import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions, isFocusVisible } from './chunk-R63GIUNU.mjs';
+import { resolveTransition, isTopLevelTransition } from './chunk-CY7Y64C3.mjs';
 import { useCallback, useMemo } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 

package/dist/{chunk-OM5FXU4I.js → chunk-TDSO63CJ.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk6UQ4KA6V_js = require('./chunk-6UQ4KA6V.js');
+var chunk7UDYEFBU_js = require('./chunk-7UDYEFBU.js');
 var reactNative = require('react-native');
 
-var MotionPressable = chunk6UQ4KA6V_js.createMotionComponent(reactNative.Pressable);
+var MotionPressable = chunk7UDYEFBU_js.createMotionComponent(reactNative.Pressable);
 
 exports.MotionPressable = MotionPressable;

package/dist/chunk-Z7HIOFKQ.js

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

package/dist/gestureLayer/index.js

@@ -1,25 +1,25 @@
 'use strict';
 
-var chunkQ6ZTMLTI_js = require('../chunk-Q6ZTMLTI.js');
-var chunk6EP3S2PN_js = require('../chunk-6EP3S2PN.js');
-var chunkSFRNO6AW_js = require('../chunk-SFRNO6AW.js');
+var chunk4PEHWDAZ_js = require('../chunk-4PEHWDAZ.js');
+var chunk7AOERN53_js = require('../chunk-7AOERN53.js');
+var chunkPTRF47DA_js = require('../chunk-PTRF47DA.js');
 var react = require('react');
 var reactNativeReanimated = require('react-native-reanimated');
 
 function useGestureLayer(states, options = {}) {
   const { disabled: isDisabled = false, transition: transitionInput } = options;
-  const shouldReduceMotion = chunk6EP3S2PN_js.useShouldReduceMotion();
-  const transition = chunk6EP3S2PN_js.resolveNamedTransitionProp(
+  const shouldReduceMotion = chunk7AOERN53_js.useShouldReduceMotion();
+  const transition = chunk7AOERN53_js.resolveNamedTransitionProp(
     transitionInput,
-    chunk6EP3S2PN_js.useNamedTransitions()
+    chunk7AOERN53_js.useNamedTransitions()
   );
-  const gesture = chunkQ6ZTMLTI_js.useGesture(transition);
+  const gesture = chunk4PEHWDAZ_js.useGesture(transition);
   const disabledProgress = reactNativeReanimated.useSharedValue(0);
-  const transitionSig = chunkSFRNO6AW_js.stableSig(transition);
+  const transitionSig = chunkPTRF47DA_js.stableSig(transition);
   react.useEffect(() => {
     const target = isDisabled ? 1 : 0;
     const cfg = shouldReduceMotion ? { type: "no-animation" } : disabledTransition(transition) ?? { type: "spring" };
-    disabledProgress.value = chunkSFRNO6AW_js.resolveTransition(cfg, target);
+    disabledProgress.value = chunkPTRF47DA_js.resolveTransition(cfg, target);
   }, [isDisabled, shouldReduceMotion, transitionSig, disabledProgress]);
   const meta = react.useMemo(() => {
     const layers = {
@@ -154,7 +154,7 @@ function useGestureLayer(states, options = {}) {
 }
 function disabledTransition(transition) {
   if (!transition) return void 0;
-  if (chunkSFRNO6AW_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
   return void 0;
 }
 

package/dist/gestureLayer/index.mjs

@@ -1,6 +1,6 @@
-import { useGesture } from '../chunk-ZQUCQRZT.mjs';
-import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-L2EVRKSC.mjs';
-import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-6FENLMCA.mjs';
+import { useGesture } from '../chunk-RGNX6UZN.mjs';
+import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-R63GIUNU.mjs';
+import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-CY7Y64C3.mjs';
 import { useEffect, useMemo } from 'react';
 import { useSharedValue, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
 

package/dist/index.d.mts

@@ -250,15 +250,15 @@ 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
- * with `[Reanimated] The easing function is not a worklet` otherwise. The
- * library accepts plain functions on the public surface; this helper wraps
- * them so consumers don't have to think about the worklet boundary.
+ * with `[Reanimated] The easing function is not a worklet` otherwise.
  *
- * If the input is already a worklet (has been processed by the worklets babel
- * plugin), it's returned as-is. Otherwise it's wrapped in a function whose
- * body declares the `'worklet'` directive — when our source is processed by
- * the consumer's worklets babel plugin (the default Expo/RN setup), the
- * wrapper becomes a real worklet that captures the user fn via closure.
+ * Custom easing functions MUST therefore be worklets — put the `'worklet'`
+ * directive as the function's first statement (Reanimated's built-in
+ * `Easing.*` helpers and inertia's `cubicBezier()` already are). A plain
+ * function warns in dev and falls back to a directive-wrapped call-through;
+ * that wrapper works on web (single-threaded) but its closure holds the
+ * opaque plain function, which native builds reject when the transition's
+ * config is serialized to the UI thread.
  *
  * Reanimated 4 changed `Easing.bezier(...)` to return an
  * `EasingFunctionFactory` (`{ factory: () => EasingFunction }`) rather than
@@ -479,9 +479,17 @@ interface UseTransformOptions {
  * const distance = useTransform(() => Math.sqrt(x.value ** 2 + y.value ** 2))
  * ```
  *
- * The transformer must be a worklet (or a plain function we auto-wrap —
- * see the easing wrapper for the rationale). It runs on the UI thread on
- * every frame where any read shared value changes.
+ * The transformer MUST be a worklet — put the `'worklet'` directive as its
+ * first statement so the consumer's Babel plugin captures the shared values
+ * it reads as its closure. It runs on the UI thread on every frame where
+ * any read shared value changes.
+ *
+ * A plain function cannot work here, and the hook warns in dev when it gets
+ * one: the best-effort wrapper it falls back to closes over the opaque
+ * function reference, not the shared values read inside it, so Reanimated
+ * can't track them as dependencies — the derived value only refreshes on
+ * React re-renders, and native builds reject the plain function when the
+ * closure crosses to the UI thread.
  */
 declare function useTransform<T>(transformer: () => T): SharedValue<T>;
 /**
@@ -547,11 +555,42 @@ interface UseScrollResult {
  */
 declare function useScroll(): UseScrollResult;
 
+/**
+ * CSS `box-shadow` parsing + pairing for `useShadow`.
+ *
+ * Design systems store web elevation tokens as CSS `box-shadow` strings
+ * (`'0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)'`).
+ * Like `cubicBezier`, this module makes those tokens directly consumable:
+ * strings are parsed once on the JS thread into flat layer records the
+ * `useShadow` worklet can interpolate without any frame-time string work.
+ *
+ * Invalid input **throws** rather than warning — shadow tokens are
+ * constructed at theme/module setup, and a malformed token should fail
+ * loudly there, not silently render the wrong elevation.
+ */
+/**
+ * One layer of a `box-shadow`, structurally mirroring React Native's
+ * `BoxShadowValue` (RN 0.76+ `boxShadow` style). Lengths are px numbers.
+ */
+interface BoxShadowLayer {
+    offsetX: number;
+    offsetY: number;
+    /** Must be >= 0, per CSS. @default 0 */
+    blurRadius?: number;
+    /** @default 0 */
+    spreadDistance?: number;
+    /** Any color string Reanimated's `interpolateColor` accepts. @default 'black' */
+    color?: string;
+    /** @default false */
+    inset?: boolean;
+}
+
 /**
  * Shape accepted on either end of a `useShadow` tween. Every field is
  * optional — only keys present on at least one side participate in the
  * output style. Mirrors the flat shadow keys on `Motion.View`'s `animate`
- * surface, plus the nested `shadowOffset` source.
+ * surface, plus the nested `shadowOffset` source and the CSS `boxShadow`
+ * surface.
  */
 interface ShadowConfig {
     shadowOpacity?: number;
@@ -563,6 +602,19 @@ interface ShadowConfig {
     /** Android elevation. iOS shadow consumers can leave this off. */
     elevation?: number;
     shadowColor?: string;
+    /**
+     * CSS `box-shadow` — the shadow surface on web (react-native-web passes
+     * it through as CSS) and on React Native 0.76+ new-architecture native.
+     * Accepts the CSS string form design systems store elevation tokens in
+     * (`'0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)'`;
+     * px lengths only) or structured layers. Multi-layer shadows interpolate
+     * per layer; when one side has fewer layers, it is padded with invisible
+     * layers, CSS-transition style. A malformed string **throws** at render
+     * (like `cubicBezier` — token mistakes should fail loudly at setup).
+     * The classic `shadow*`/`elevation` keys don't reach the web renderer —
+     * provide `boxShadow` alongside them when the tween must show up there.
+     */
+    boxShadow?: string | readonly BoxShadowLayer[];
 }
 interface UseShadowOptions {
     /** Shadow state at `progress === 0`. */
@@ -599,6 +651,19 @@ interface UseShadowOptions {
  * `shadowColor`, `{ width: 0, height: 0 }` for `shadowOffset`). This is a
  * pure interpolator — to "animate" the shadow, drive `progress` with a
  * spring, timing, or gesture upstream.
+ *
+ * The classic `shadow*`/`elevation` keys don't render on web. When the
+ * tween must show up there (or on RN 0.76+ new-arch native via the CSS
+ * shadow model), provide `boxShadow` on both ends — CSS string tokens or
+ * structured layers; multi-layer shadows interpolate per layer:
+ *
+ * ```tsx
+ * const shadowStyle = useShadow({
+ *   from: { boxShadow: theme.elevation.level1 }, // '0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)'
+ *   to:   { boxShadow: theme.elevation.level2 },
+ *   progress,
+ * })
+ * ```
  */
 declare function useShadow({ from, to, progress, }: UseShadowOptions): ReturnType<typeof useAnimatedStyle>;
 
@@ -615,4 +680,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, 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 };
+export { AnimatableValue, type BoxShadowLayer, 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 };