@rootnative/inertia 0.0.4 → 0.0.6

package/dist/{chunk-MYE5NMXW.js → chunk-767UKZXG.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkWVRCKOPO_js = require('./chunk-WVRCKOPO.js');
-var chunk7A6WTXNK_js = require('./chunk-7A6WTXNK.js');
+var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
+var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Animated = require('react-native-reanimated');
@@ -11,6 +11,30 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 
+// src/internal/color.ts
+var TRANSPARENT = "rgba(0, 0, 0, 0)";
+function normalizeAnimatableColor(value) {
+  return value === "transparent" ? TRANSPARENT : value;
+}
+function normalizeAnimatableColorTarget(target) {
+  if (typeof target === "string") {
+    return normalizeAnimatableColor(target);
+  }
+  if (!Array.isArray(target)) return target;
+  let changed = false;
+  const next = target.map((step) => {
+    if (step === "transparent") {
+      changed = true;
+      return TRANSPARENT;
+    }
+    if (step !== null && typeof step === "object" && step.to === "transparent") {
+      changed = true;
+      return { ...step, to: TRANSPARENT };
+    }
+    return step;
+  });
+  return changed ? next : target;
+}
 var PresenceContext = react.createContext(null);
 function usePresence() {
   return react.useContext(PresenceContext);
@@ -250,7 +274,7 @@ function invisibleLayer(inset) {
     offsetY: 0,
     blurRadius: 0,
     spreadDistance: 0,
-    color: "transparent",
+    color: TRANSPARENT,
     inset
   };
 }
@@ -266,8 +290,8 @@ function coerceLength(value, field) {
   return parseFloat(trimmed);
 }
 function strip(layer) {
-  const { inset: _inset, ...rest } = layer;
-  return rest;
+  const { inset: _inset, color, ...rest } = layer;
+  return { ...rest, color: normalizeAnimatableColor(color) };
 }
 function markInset(insets, i, count) {
   const list = insets ?? new Array(count).fill(false);
@@ -304,20 +328,31 @@ function prepareBoxShadowAnimation(current, target) {
   }
   return { from, to, insets };
 }
+function layersToPayload(layers) {
+  const payload = {};
+  for (let i = 0; i < layers.length; i++) payload[i] = layers[i];
+  return payload;
+}
+function payloadToLayers(payload) {
+  "worklet";
+  const layers = [];
+  for (let i = 0; payload[i] !== void 0; i++) layers.push(payload[i]);
+  return layers;
+}
 function resolveLayoutTransition(layout) {
   if (!layout) return void 0;
   const cfg = layout === true ? { type: "spring" } : layout;
   if (cfg.type === "no-animation") return void 0;
   if (cfg.type === "timing") {
     let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
-    const easing = chunk7A6WTXNK_js.ensureWorkletEasing(cfg.easing);
+    const easing = chunkPM6CVGXJ_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 } = chunk7A6WTXNK_js.springToReanimated({
-    ...chunk7A6WTXNK_js.DEFAULT_SPRING,
+  const { stiffness, damping, mass } = chunkPM6CVGXJ_js.springToReanimated({
+    ...chunkPM6CVGXJ_js.DEFAULT_SPRING,
     ...spring
   });
   let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
@@ -511,8 +546,8 @@ function legBuilder(transition) {
       Animated.withTiming(to, { duration })
     );
   }
-  const springCfg = transition?.type === "spring" ? { ...chunk7A6WTXNK_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunk7A6WTXNK_js.DEFAULT_SPRING };
-  const springParams = chunk7A6WTXNK_js.springToReanimated(springCfg);
+  const springCfg = transition?.type === "spring" ? { ...chunkPM6CVGXJ_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkPM6CVGXJ_js.DEFAULT_SPRING };
+  const springParams = chunkPM6CVGXJ_js.springToReanimated(springCfg);
   return (from, to) => Animated.withSequence(
     Animated.withTiming(from, { duration: 0 }),
     Animated.withSpring(to, springParams)
@@ -600,7 +635,79 @@ var NUMERIC_TOP_LEVEL_KEYS = [
   "borderRadius",
   "shadowOpacity",
   "shadowRadius",
-  "elevation"
+  "elevation",
+  // ─── Added in 0.0.5 ──────────────────────────────────────────────────────
+  //
+  // Every key below rides the generic numeric path: one shared value, resolved
+  // on the JS thread, emitted by the worklet through the same `out[key] = v`
+  // branch as `opacity`. None needs a new interpolation mode, so the cost is
+  // the shared value plus a `DEFAULT_RESTING` entry.
+  //
+  // The load-bearing constraint is the resting default, not the plumbing. A
+  // key declared only in `gesture` / `exit` / a non-active variant rests at
+  // `DEFAULT_RESTING` unless the static `style` names it, and the animated
+  // style merges *after* `style` — so a non-identity default silently stomps
+  // the layout. That is the `0.0.3` P0 class, and it is why the sizing and
+  // spacing keys below default to `0` only in the sense RN itself does (an
+  // unset `padding` *is* 0); `minWidth`/`maxWidth`/`aspectRatio` are
+  // deliberately excluded — their "unset" is not a number, so no default can
+  // stand in for it without changing layout on activation.
+  //
+  // Per-corner radii. Animating one corner is common (a card expanding into a
+  // sheet keeps its top corners and squares off the bottom); `borderRadius`
+  // alone can't express it.
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  // Border widths. `borderWidth` is the common case; the per-edge keys matter
+  // for underline-style focus affordances (`borderBottomWidth` on a field).
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  // Absolute-position insets. Bread-and-butter for drawers, tooltips, and
+  // anything pinned to an edge that slides in.
+  "top",
+  "right",
+  "bottom",
+  "left",
+  // Spacing. Padding animates the box from the inside (a button growing its
+  // hit area on press); margin shifts it within its parent's flow.
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingHorizontal",
+  "paddingVertical",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginHorizontal",
+  "marginVertical",
+  // Flex sizing. `flex` / `flexGrow` interpolate the split between siblings —
+  // the idiomatic RN way to animate a pane resize without measuring.
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  // Text metrics. `TextStyle`-only at the type level (`AnimateStyle<C>` gates
+  // them per primitive), but the runtime table is shared across primitives —
+  // an unused slot is one ref, same as `tintColor` has always been.
+  "fontSize",
+  "letterSpacing",
+  "lineHeight",
+  // Stacking. Integer-valued in practice, and interpolating it mid-flight is
+  // rarely what you want, but a `no-animation` transition on `zIndex` is the
+  // clean way to reorder at a step boundary in a sequence.
+  "zIndex",
+  // Gap. Row/column gaps animate a list's density without touching children.
+  "gap",
+  "rowGap",
+  "columnGap"
 ];
 var COLOR_KEYS = [
   "backgroundColor",
@@ -631,7 +738,7 @@ var COLOR_KEY_SET = new Set(COLOR_KEYS);
 var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
 var STRUCTURED_KEY_SET = new Set(STRUCTURED_KEYS);
 var SHARED_STYLE_KEY_SET = new Set(SHARED_STYLE_KEYS);
-var NO_BOX_SHADOW = Object.freeze([]);
+var NO_BOX_SHADOW = Object.freeze({});
 var GESTURE_LAYER_NAMES = [
   "hovered",
   "focused",
@@ -656,15 +763,69 @@ var DEFAULT_RESTING = {
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0,
-  // 'transparent' is the only safe universal default for colors: it works as
-  // an initial seed for any color animation (no jarring opaque flash on mount
-  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
-  // any opaque target via Reanimated's color util.
-  backgroundColor: "transparent",
-  borderColor: "transparent",
-  color: "transparent",
-  tintColor: "transparent",
-  shadowColor: "transparent",
+  // 0.0.5 keys. Every one of these is 0 because that is RN's own unset value
+  // for it — an element with no `paddingTop` has 0 padding, no `borderWidth`
+  // has none, no `top` is unpinned at 0 within its positioning context. So a
+  // key that reaches its resting default lands where the element already was.
+  //
+  // The exception worth naming: `flex` / `flexGrow` / `flexShrink` do NOT have
+  // 0 as a universal identity (`flexShrink` defaults to 1 on the web, and RN's
+  // own default differs by axis). They are still 0 here, because the style-scan
+  // in the resting pass reads the real value off the static `style` whenever it
+  // is declared — and a consumer animating flex without declaring it is asking
+  // for the from-0 growth, which is the readable interpretation.
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderWidth: 0,
+  borderTopWidth: 0,
+  borderRightWidth: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  padding: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  margin: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexShrink: 0,
+  fontSize: 0,
+  letterSpacing: 0,
+  lineHeight: 0,
+  zIndex: 0,
+  gap: 0,
+  rowGap: 0,
+  columnGap: 0,
+  // Fully transparent black is the only safe universal default for colors: it
+  // works as an initial seed for any color animation (no jarring opaque flash
+  // on mount when `initial` is omitted) and interpolates cleanly into any
+  // opaque target.
+  //
+  // Spelled `rgba(0, 0, 0, 0)` and NOT `'transparent'`, which is not optional.
+  // Reanimated's color-name table maps `transparent` to `undefined`, so it is
+  // the one named color `isColor()` rejects — a slot resting at the keyword
+  // takes the prefix-number-suffix branch on its next animation and produces
+  // `NaN` instead of a color. See `TRANSPARENT` in `internal/boxShadow.ts`.
+  backgroundColor: TRANSPARENT,
+  borderColor: TRANSPARENT,
+  color: TRANSPARENT,
+  tintColor: TRANSPARENT,
+  shadowColor: TRANSPARENT,
   shadowOffsetWidth: 0,
   shadowOffsetHeight: 0,
   boxShadow: NO_BOX_SHADOW
@@ -672,14 +833,14 @@ var DEFAULT_RESTING = {
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
   if (typeof transition === "string") return void 0;
-  if (chunk7A6WTXNK_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPM6CVGXJ_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 (chunk7A6WTXNK_js.isTopLevelTransition(transition)) return transition;
+  if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 function createMotionComponent(Component) {
@@ -729,12 +890,12 @@ function createMotionComponent(Component) {
         onLayout: userOnLayout,
         ...rest
       } = props;
-      const namedTransitions = chunkWVRCKOPO_js.useNamedTransitions();
-      const transition = chunkWVRCKOPO_js.resolveNamedTransitionProp(
+      const namedTransitions = chunkOBRGJAST_js.useNamedTransitions();
+      const transition = chunkOBRGJAST_js.resolveNamedTransitionProp(
         transitionProp,
         namedTransitions
       );
-      const layout = typeof layoutProp === "string" ? chunkWVRCKOPO_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+      const layout = typeof layoutProp === "string" ? chunkOBRGJAST_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."
@@ -742,7 +903,7 @@ function createMotionComponent(Component) {
       }
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
-      const shouldReduceMotion = chunkWVRCKOPO_js.useShouldReduceMotion();
+      const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
       const onAnimationEndRef = react.useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -826,7 +987,7 @@ function createMotionComponent(Component) {
         if (__DEV__ && hasBoxShadowRef.current && activeKeysRef.current.some(
           (k) => k !== "boxShadow" && k.startsWith("shadow")
         )) {
-          chunk7A6WTXNK_js.warnOnce(
+          chunkPM6CVGXJ_js.warnOnce(
             "boxShadow-with-native-shadow",
             "[inertia] `boxShadow` is animated alongside the native `shadow*` keys on the same element, which applies two shadow systems at once. Pick one: `boxShadow` for the cross-platform CSS form, or the native `shadow*` keys."
           );
@@ -851,25 +1012,28 @@ function createMotionComponent(Component) {
               const raw = flat.boxShadow;
               if (raw !== void 0) {
                 styleRestingShadow = normalizeBoxShadow(raw);
-                styleResting.boxShadow = styleRestingShadow.layers;
+                styleResting.boxShadow = layersToPayload(
+                  styleRestingShadow.layers
+                );
               }
               continue;
             }
             const v = styleValueFor(flat, key);
-            if (v !== void 0) styleResting[key] = v;
+            if (v !== void 0) {
+              styleResting[key] = COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(v) : v;
+            }
           }
         }
       }
       const boxShadowSeedRef = react.useRef(null);
       if (boxShadowSeedRef.current === null) {
         const source = initial === false ? animateRecord.boxShadow : initialRecord?.boxShadow ?? animateRecord.boxShadow;
-        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? {
-          layers: [...NO_BOX_SHADOW],
-          insets: null
-        };
+        boxShadowSeedRef.current = source !== void 0 ? normalizeBoxShadow(source) : styleRestingShadow ?? { layers: [], insets: null };
       }
       const sharedValues = useAnimatableSharedValues((key) => {
-        if (key === "boxShadow") return boxShadowSeedRef.current.layers;
+        if (key === "boxShadow") {
+          return layersToPayload(boxShadowSeedRef.current.layers);
+        }
         if (SHADOW_OFFSET_KEY_SET.has(key)) {
           const axis = shadowOffsetAxisFor(key);
           if (initial === false) {
@@ -882,14 +1046,16 @@ function createMotionComponent(Component) {
         }
         if (initial === false) {
           const a = animateRecord[key];
-          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          const seed2 = restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+          return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed2) : seed2;
         }
-        return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        const seed = initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
+        return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed) : seed;
       });
       const boxShadowInsets = Animated.useSharedValue(
         boxShadowSeedRef.current.insets
       );
-      const styleRestingSig = chunk7A6WTXNK_js.stableSig(styleResting);
+      const styleRestingSig = chunkPM6CVGXJ_js.stableSig(styleResting);
       react.useEffect(() => {
         for (const key of activeKeysRef.current) {
           if (everDrivenRef.current.has(key)) continue;
@@ -917,13 +1083,13 @@ function createMotionComponent(Component) {
       const gestureSV = Animated.useSharedValue(
         resolveGestureLayers(gesture)
       );
-      const gestureTargetsSig = chunk7A6WTXNK_js.stableSig(gesture);
+      const gestureTargetsSig = chunkPM6CVGXJ_js.stableSig(gesture);
       react.useEffect(() => {
         gestureSV.value = resolveGestureLayers(gesture);
       }, [gestureTargetsSig]);
       const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-      const baseSig = chunk7A6WTXNK_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-      const transitionSig = chunk7A6WTXNK_js.stableSig(transition);
+      const baseSig = chunkPM6CVGXJ_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+      const transitionSig = chunkPM6CVGXJ_js.stableSig(transition);
       const safeToRemoveRef = react.useRef(void 0);
       safeToRemoveRef.current = presence?.safeToRemove;
       react.useEffect(() => {
@@ -996,8 +1162,8 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = chunk7A6WTXNK_js.resolveAnimatableValue(
-            target,
+          sharedValues[key].value = chunkPM6CVGXJ_js.resolveAnimatableValue(
+            COLOR_KEY_SET.has(key) ? normalizeAnimatableColorTarget(target) : target,
             cfg,
             factory
           );
@@ -1058,7 +1224,7 @@ function createMotionComponent(Component) {
       const sharedLayout = useSharedLayout({
         layoutId,
         userRef: ref,
-        transition: chunk7A6WTXNK_js.isTopLevelTransition(transition) ? transition : void 0,
+        transition: chunkPM6CVGXJ_js.isTopLevelTransition(transition) ? transition : void 0,
         shouldReduceMotion,
         userOnLayout,
         readStyles: readSharedStyles
@@ -1134,14 +1300,14 @@ function createMotionComponent(Component) {
           out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
         }
         if (hasBoxShadow) {
-          const layers2 = sharedValues.boxShadow.value;
+          const payload = sharedValues.boxShadow.value;
           const insets = boxShadowInsets.value;
           if (insets === null) {
-            out.boxShadow = layers2;
+            out.boxShadow = payloadToLayers(payload);
           } else {
             const withInset = [];
-            for (let i = 0; i < layers2.length; i++) {
-              withInset.push({ ...layers2[i], inset: insets[i] });
+            for (let i = 0; payload[i] !== void 0; i++) {
+              withInset.push({ ...payload[i], inset: insets[i] });
             }
             out.boxShadow = withInset;
           }
@@ -1160,7 +1326,7 @@ function createMotionComponent(Component) {
         setFocusVisible,
         setHovered
       );
-      const layoutSig = chunk7A6WTXNK_js.stableSig(layout);
+      const layoutSig = chunkPM6CVGXJ_js.stableSig(layout);
       const layoutTransition = react.useMemo(
         () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1208,64 +1374,15 @@ function hasMotionProps(props) {
   return false;
 }
 function useAnimatableSharedValues(init) {
-  const translateX = Animated.useSharedValue(init("translateX"));
-  const translateY = Animated.useSharedValue(init("translateY"));
-  const scale = Animated.useSharedValue(init("scale"));
-  const scaleX = Animated.useSharedValue(init("scaleX"));
-  const scaleY = Animated.useSharedValue(init("scaleY"));
-  const rotate = Animated.useSharedValue(init("rotate"));
-  const rotateX = Animated.useSharedValue(init("rotateX"));
-  const rotateY = Animated.useSharedValue(init("rotateY"));
-  const opacity = Animated.useSharedValue(init("opacity"));
-  const width = Animated.useSharedValue(init("width"));
-  const height = Animated.useSharedValue(init("height"));
-  const borderRadius = Animated.useSharedValue(init("borderRadius"));
-  const shadowOpacity = Animated.useSharedValue(
-    init("shadowOpacity")
-  );
-  const shadowRadius = Animated.useSharedValue(init("shadowRadius"));
-  const elevation = Animated.useSharedValue(init("elevation"));
-  const backgroundColor = Animated.useSharedValue(
-    init("backgroundColor")
-  );
-  const borderColor = Animated.useSharedValue(init("borderColor"));
-  const color = Animated.useSharedValue(init("color"));
-  const tintColor = Animated.useSharedValue(init("tintColor"));
-  const shadowColor = Animated.useSharedValue(init("shadowColor"));
-  const shadowOffsetWidth = Animated.useSharedValue(
-    init("shadowOffsetWidth")
-  );
-  const shadowOffsetHeight = Animated.useSharedValue(
-    init("shadowOffsetHeight")
-  );
-  const boxShadow = Animated.useSharedValue(init("boxShadow"));
+  const entries = [];
+  for (const key of ALL_KEYS) {
+    entries.push([key, Animated.useSharedValue(init(key))]);
+  }
   const ref = react.useRef(null);
   if (ref.current === null) {
-    ref.current = {
-      translateX,
-      translateY,
-      scale,
-      scaleX,
-      scaleY,
-      rotate,
-      rotateX,
-      rotateY,
-      opacity,
-      width,
-      height,
-      borderRadius,
-      shadowOpacity,
-      shadowRadius,
-      elevation,
-      backgroundColor,
-      borderColor,
-      color,
-      tintColor,
-      shadowColor,
-      shadowOffsetWidth,
-      shadowOffsetHeight,
-      boxShadow
-    };
+    const map2 = {};
+    for (const [key, sv] of entries) map2[key] = sv;
+    ref.current = map2;
   }
   const map = ref.current;
   react.useEffect(
@@ -1306,6 +1423,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
     }
     const reportedIteration = state.iteration;
     if (phase === "sequence" || phase === "repeat") state.iteration++;
+    const reportedValue = key === "boxShadow" && value !== void 0 ? payloadToLayers(value) : value;
     const fn = onAnimationEndRef.current;
     if (fn) {
       if (isTransformKey && transformGroup && phase === "animation") {
@@ -1314,7 +1432,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
           fn({
             key: "transform",
             finished,
-            value,
+            value: reportedValue,
             target,
             phase,
             step,
@@ -1325,7 +1443,7 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
         fn({
           key,
           finished,
-          value,
+          value: reportedValue,
           target,
           phase,
           step,
@@ -1350,16 +1468,16 @@ function shadowOffsetAxisValue(source, axis) {
   return source?.[axis];
 }
 function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
-  const currentLayers = Array.isArray(slot.value) ? slot.value : NO_BOX_SHADOW;
+  const currentLayers = payloadToLayers(slot.value);
   const { from, to, insets } = prepareBoxShadowAnimation(
-    { layers: [...currentLayers], insets: insetSlot.value },
+    { layers: currentLayers, insets: insetSlot.value },
     target
   );
   insetSlot.value = insets;
-  if (from.length !== currentLayers.length) slot.value = from;
-  slot.value = chunk7A6WTXNK_js.resolveTransition(
+  if (from.length !== currentLayers.length) slot.value = layersToPayload(from);
+  slot.value = chunkPM6CVGXJ_js.resolveTransition(
     cfg,
-    to,
+    layersToPayload(to),
     factory?.("animation", void 0)
   );
 }
@@ -1481,7 +1599,7 @@ function resolveGestureLayers(gesture) {
     for (const key of ALL_KEYS) {
       if (STRUCTURED_KEY_SET.has(key)) {
         if (__DEV__ && subState[key] !== void 0) {
-          chunk7A6WTXNK_js.warnOnce(
+          chunkPM6CVGXJ_js.warnOnce(
             `gesture-structured-${layer}-${key}`,
             `[inertia] \`${key}\` is not supported inside \`gesture.${layer}\` and will be ignored. Drive it from \`animate\` (optionally via a variant keyed off the same state), or interpolate it yourself with \`useShadow\`.`
           );
@@ -1505,7 +1623,7 @@ function resolveGestureLayers(gesture) {
   return out;
 }
 function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
-  const layerCfgSig = chunk7A6WTXNK_js.stableSig(gestureLayerTransitionFor(layer, transition));
+  const layerCfgSig = chunkPM6CVGXJ_js.stableSig(gestureLayerTransitionFor(layer, transition));
   react.useEffect(() => {
     if (!declared) return;
     if (isExiting) {
@@ -1514,7 +1632,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 = chunk7A6WTXNK_js.resolveTransition(cfg, target);
+    progress.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
   }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
@@ -1538,7 +1656,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 && chunkWVRCKOPO_js.isFocusVisible()) setFocusVisible(true);
+        if (gesture.focusVisible && chunkOBRGJAST_js.isFocusVisible()) setFocusVisible(true);
       });
       handlers.onBlur = compose(rest.onBlur, () => {
         if (gesture.focused) setFocused(false);
@@ -1578,6 +1696,7 @@ function compose(user, ours) {
 }
 
 exports.Presence = Presence;
+exports.TRANSPARENT = TRANSPARENT;
 exports.createMotionComponent = createMotionComponent;
 exports.pairBoxShadowLayers = pairBoxShadowLayers;
 exports.resolveBoxShadowInput = resolveBoxShadowInput;

package/dist/{chunk-NAOXQJ7U.mjs → chunk-BAAQI37F.mjs}

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

package/dist/{chunk-RF7J5FRM.mjs → chunk-C3EDC5ZW.mjs}

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

package/dist/{chunk-YKGY22SB.mjs → chunk-CMHVF6F4.mjs}

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

package/dist/{chunk-4ASOELLA.mjs → chunk-F7LJX56B.mjs}

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

package/dist/chunk-FWWVHLXB.js

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

package/dist/chunk-K5SI6VXS.js

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