@rootnative/inertia 0.0.3 → 0.0.4

package/dist/{chunk-CSODMRJ7.mjs → chunk-55W7BNO2.mjs}

@@ -1,5 +1,5 @@
-import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-R63GIUNU.mjs';
-import { stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-CY7Y64C3.mjs';
+import { useNamedTransitions, resolveNamedTransitionProp, lookupNamedTransition, useShouldReduceMotion, isFocusVisible } from './chunk-QKC3APP4.mjs';
+import { warnOnce, stableSig, resolveAnimatableValue, isTopLevelTransition, resolveTransition, ensureWorkletEasing, springToReanimated, DEFAULT_SPRING } from './chunk-TU2XFPAK.mjs';
 import { createContext, useContext, useMemo, Children, isValidElement, useState, useRef, useCallback, forwardRef, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import Animated, { useSharedValue, cancelAnimation, useAnimatedStyle, interpolateColor, reanimatedVersion, runOnJS, LinearTransition, withSequence, withTiming, withSpring } from 'react-native-reanimated';
@@ -129,6 +129,175 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsx(PresenceContext.Provider, { value, children });
 }
+
+// src/internal/boxShadow.ts
+var LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i;
+var UNIT_LIKE = /^[+-]?(\d+\.?\d*|\.\d+)[a-z%]+$/i;
+function invalid(input, reason) {
+  return new Error(
+    `[inertia] parseBoxShadow: ${reason} in ${JSON.stringify(input)}. Expected CSS box-shadow syntax with px lengths: '[inset] <offset-x> <offset-y> [blur] [spread] [color], ...'`
+  );
+}
+function splitLayers(input) {
+  const layers = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) {
+      layers.push(input.slice(start, i));
+      start = i + 1;
+    }
+  }
+  layers.push(input.slice(start));
+  return layers;
+}
+function tokenize(layer) {
+  const tokens = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of layer) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    if (depth === 0 && /\s/.test(ch)) {
+      if (current) tokens.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function parseBoxShadow(input) {
+  const trimmed = input.trim();
+  if (trimmed === "") throw invalid(input, "empty string");
+  if (trimmed.toLowerCase() === "none") return [];
+  return splitLayers(trimmed).map((layerString) => {
+    const tokens = tokenize(layerString.trim());
+    if (tokens.length === 0) throw invalid(input, "empty layer");
+    const lengths = [];
+    let color;
+    let inset = false;
+    for (const token of tokens) {
+      if (token.toLowerCase() === "inset") {
+        if (inset) throw invalid(input, "duplicate 'inset'");
+        inset = true;
+      } else if (LENGTH.test(token)) {
+        lengths.push(parseFloat(token));
+      } else if (UNIT_LIKE.test(token)) {
+        throw invalid(input, `unsupported unit in ${JSON.stringify(token)}`);
+      } else {
+        if (color !== void 0) throw invalid(input, "multiple colors");
+        color = token;
+      }
+    }
+    if (lengths.length < 2 || lengths.length > 4) {
+      throw invalid(input, `expected 2-4 lengths, got ${lengths.length}`);
+    }
+    const [offsetX = 0, offsetY = 0, blurRadius = 0, spreadDistance = 0] = lengths;
+    if (blurRadius < 0) throw invalid(input, "negative blur radius");
+    return {
+      offsetX,
+      offsetY,
+      blurRadius,
+      spreadDistance,
+      color: color ?? "black",
+      inset
+    };
+  });
+}
+function resolveBoxShadowInput(input) {
+  if (input === void 0) return [];
+  if (typeof input === "string") return parseBoxShadow(input);
+  return input.map((layer) => ({
+    offsetX: coerceLength(layer.offsetX, "offsetX"),
+    offsetY: coerceLength(layer.offsetY, "offsetY"),
+    blurRadius: coerceLength(layer.blurRadius, "blurRadius"),
+    spreadDistance: coerceLength(layer.spreadDistance, "spreadDistance"),
+    color: layer.color ?? "black",
+    inset: layer.inset ?? false
+  }));
+}
+function pairBoxShadowLayers(from, to) {
+  const count = Math.max(from.length, to.length);
+  const pairs = [];
+  for (let i = 0; i < count; i++) {
+    const a = from[i];
+    const b = to[i];
+    const fromLayer = a ?? invisibleLayer(b.inset);
+    const toLayer = b ?? invisibleLayer(a.inset);
+    if (fromLayer.inset !== toLayer.inset) {
+      throw new Error(
+        `[inertia] useShadow: boxShadow layer ${i} is 'inset' on one side but not the other \u2014 inset cannot be interpolated. Give both sides the same inset-ness (pad with a transparent layer if needed).`
+      );
+    }
+    pairs.push({ from: fromLayer, to: toLayer });
+  }
+  return pairs;
+}
+function invisibleLayer(inset) {
+  return {
+    offsetX: 0,
+    offsetY: 0,
+    blurRadius: 0,
+    spreadDistance: 0,
+    color: "transparent",
+    inset
+  };
+}
+function coerceLength(value, field) {
+  if (value === void 0) return 0;
+  if (typeof value === "number") return value;
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  if (!LENGTH.test(trimmed)) {
+    throw new Error(
+      `[inertia] boxShadow: ${field} must be a number or a px length, got ${JSON.stringify(value)}.`
+    );
+  }
+  return parseFloat(trimmed);
+}
+function strip(layer) {
+  const { inset: _inset, ...rest } = layer;
+  return rest;
+}
+function markInset(insets, i, count) {
+  const list = insets ?? new Array(count).fill(false);
+  list[i] = true;
+  return list;
+}
+function normalizeBoxShadow(input) {
+  const resolved = resolveBoxShadowInput(input);
+  const layers = [];
+  let insets = null;
+  for (let i = 0; i < resolved.length; i++) {
+    const layer = resolved[i];
+    layers.push(strip(layer));
+    if (layer.inset) insets = markInset(insets, i, resolved.length);
+  }
+  return { layers, insets };
+}
+function prepareBoxShadowAnimation(current, target) {
+  const pairs = pairBoxShadowLayers(
+    current.layers.map((layer, i) => ({
+      ...layer,
+      inset: current.insets?.[i] ?? false
+    })),
+    resolveBoxShadowInput(target)
+  );
+  const from = [];
+  const to = [];
+  let insets = null;
+  for (let i = 0; i < pairs.length; i++) {
+    const pair = pairs[i];
+    from.push(strip(pair.from));
+    to.push(strip(pair.to));
+    if (pair.to.inset) insets = markInset(insets, i, pairs.length);
+  }
+  return { from, to, insets };
+}
 function resolveLayoutTransition(layout) {
   if (!layout) return void 0;
   const cfg = layout === true ? { type: "spring" } : layout;
@@ -162,72 +331,138 @@ function sweepExpired(at) {
     if (entry.expiresAt < at) REGISTRY.delete(id);
   }
 }
-function registerLayout(id, rect) {
+function registerLayout(id, rect, remeasure, readStyles) {
   const at = now();
   sweepExpired(at);
-  REGISTRY.set(id, { rect, expiresAt: at + SHARED_LAYOUT_TTL_MS });
+  REGISTRY.set(id, {
+    rect,
+    expiresAt: at + SHARED_LAYOUT_TTL_MS,
+    remeasure,
+    readStyles
+  });
 }
-function releaseLayout(id, rect) {
+function releaseLayout(id, rect, styles) {
   const at = now();
   sweepExpired(at);
-  REGISTRY.set(id, { rect, expiresAt: at + SHARED_LAYOUT_TTL_MS });
+  REGISTRY.set(id, { rect, expiresAt: at + SHARED_LAYOUT_TTL_MS, styles });
 }
 function consumeLayout(id) {
   const entry = REGISTRY.get(id);
   if (!entry) return void 0;
   REGISTRY.delete(id);
   if (entry.expiresAt < now()) return void 0;
-  return entry.rect;
+  return {
+    rect: entry.rect,
+    remeasure: entry.remeasure,
+    styles: entry.styles,
+    readStyles: entry.readStyles
+  };
+}
+
+// src/layout/measureWindow.ts
+var defaultMeasurer = (node) => {
+  const measure = node?.measureInWindow;
+  if (typeof measure !== "function") return void 0;
+  let result;
+  let returned = false;
+  try {
+    measure.call(node, (x, y, width, height) => {
+      if (returned) return;
+      result = { x, y, width, height };
+    });
+  } catch {
+    returned = true;
+    return void 0;
+  }
+  returned = true;
+  return result;
+};
+var measurer = defaultMeasurer;
+function usable(rect) {
+  const { x, y, width, height } = rect;
+  for (const v of [x, y, width, height]) {
+    if (typeof v !== "number" || !Number.isFinite(v)) return false;
+  }
+  return width !== 0 || height !== 0;
+}
+function measureWindowRect(node) {
+  const measured = measurer(node);
+  if (!measured || !usable(measured)) return void 0;
+  return toSharedRect(measured, "window");
+}
+function toSharedRect(rect, space) {
+  return { ...rect, space };
 }
 function useSharedLayout(options) {
-  const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
+  const {
+    layoutId,
+    userRef,
+    transition,
+    shouldReduceMotion,
+    userOnLayout,
+    readStyles
+  } = options;
   const dx = useSharedValue(0);
   const dy = useSharedValue(0);
   const sx = useSharedValue(1);
   const sy = useSharedValue(1);
+  const snapshot = useSharedValue(null);
+  const carryProgress = useSharedValue(0);
   const lastRectRef = useRef(null);
   const consumedRef = useRef(false);
+  const nodeRef = useRef(null);
   const transitionRef = useRef(transition);
   transitionRef.current = transition;
   const reducedMotionRef = useRef(shouldReduceMotion);
   reducedMotionRef.current = shouldReduceMotion;
+  const readStylesRef = useRef(readStyles);
+  readStylesRef.current = readStyles;
   const setRef = useCallback(
     (node) => {
+      nodeRef.current = node;
       if (typeof userRef === "function") userRef(node);
       else if (userRef) userRef.current = node;
     },
     [userRef]
   );
+  const remeasure = useCallback(() => measureWindowRect(nodeRef.current), []);
+  const snapshotStyles = useCallback(() => readStylesRef.current?.(), []);
+  const startTransition = useCallback(
+    (source, sourceRect, target) => {
+      if (sourceRect.space !== target.space) return;
+      const shared = {
+        transition: transitionRef.current,
+        shouldReduceMotion: reducedMotionRef.current
+      };
+      applyFlip({ source: sourceRect, target, dx, dy, sx, sy, ...shared });
+      applyStyleCarry({
+        snapshot,
+        progress: carryProgress,
+        // Prefer a live read for the same reason the rect is re-measured: a
+        // still-mounted source may have moved on since its last layout.
+        styles: source.readStyles?.() ?? source.styles,
+        ...shared
+      });
+    },
+    [dx, dy, sx, sy, snapshot, carryProgress]
+  );
   const onLayout = useCallback(
     (event) => {
       userOnLayout?.(event);
       if (!layoutId) return;
       const { x, y, width, height } = event.nativeEvent.layout;
-      const rect = { x, y, width, height };
-      lastRectRef.current = rect;
       let source;
       if (!consumedRef.current) {
         consumedRef.current = true;
         source = consumeLayout(layoutId);
       }
-      registerLayout(layoutId, rect);
-      if (source) {
-        applyFlip({
-          source,
-          target: rect,
-          dx,
-          dy,
-          sx,
-          sy,
-          transition: transitionRef.current,
-          shouldReduceMotion: reducedMotionRef.current
-        });
-      }
+      const rect = measureWindowRect(nodeRef.current) ?? { x, y, width, height, space: "parent" };
+      lastRectRef.current = rect;
+      registerLayout(layoutId, rect, remeasure, snapshotStyles);
+      if (!source) return;
+      startTransition(source, source.remeasure?.() ?? source.rect, rect);
     },
-    // dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
-    // exhaustive-deps would flag them — including them is harmless and
-    // silences the warning.
-    [layoutId, userOnLayout, dx, dy, sx, sy]
+    [layoutId, userOnLayout, remeasure, snapshotStyles, startTransition]
   );
   useEffect(() => {
     consumedRef.current = false;
@@ -237,18 +472,49 @@ function useSharedLayout(options) {
       if (!layoutId) return;
       const rect = lastRectRef.current;
       if (!rect) return;
-      releaseLayout(layoutId, rect);
+      releaseLayout(layoutId, rect, snapshotStyles());
     };
-  }, [layoutId]);
+  }, [layoutId, snapshotStyles]);
+  useEffect(
+    () => () => {
+      cancelAnimation(dx);
+      cancelAnimation(dy);
+      cancelAnimation(sx);
+      cancelAnimation(sy);
+      cancelAnimation(carryProgress);
+    },
+    // The FLIP shared values are identity-stable per hook instance.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return useMemo(
     () => ({
       flip: { dx, dy, sx, sy },
+      carry: { snapshot, progress: carryProgress },
       setRef,
       onLayout
     }),
-    [dx, dy, sx, sy, setRef, onLayout]
+    [dx, dy, sx, sy, snapshot, carryProgress, setRef, onLayout]
   );
 }
+function legBuilder(transition) {
+  if (transition?.type === "timing") {
+    const duration = transition.duration ?? 300;
+    return (from, to) => withSequence(
+      withTiming(from, { duration: 0 }),
+      withTiming(to, { duration })
+    );
+  }
+  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { type: "spring", ...DEFAULT_SPRING };
+  const springParams = springToReanimated(springCfg);
+  return (from, to) => withSequence(
+    withTiming(from, { duration: 0 }),
+    withSpring(to, springParams)
+  );
+}
+function shouldSnap(transition, shouldReduceMotion) {
+  return shouldReduceMotion || transition?.type === "no-animation";
+}
 function applyFlip(args) {
   const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
   const sourceCenterX = source.x + source.width / 2;
@@ -259,58 +525,29 @@ function applyFlip(args) {
   const deltaY = sourceCenterY - targetCenterY;
   const scaleX = target.width > 0 ? source.width / target.width : 1;
   const scaleY = target.height > 0 ? source.height / target.height : 1;
-  if (shouldReduceMotion) {
-    dx.value = 0;
-    dy.value = 0;
-    sx.value = 1;
-    sy.value = 1;
-    return;
-  }
-  if (transition?.type === "no-animation") {
+  if (shouldSnap(transition, shouldReduceMotion)) {
     dx.value = 0;
     dy.value = 0;
     sx.value = 1;
     sy.value = 1;
     return;
   }
-  if (transition?.type === "timing") {
-    const duration = transition.duration ?? 300;
-    dx.value = withSequence(
-      withTiming(deltaX, { duration: 0 }),
-      withTiming(0, { duration })
-    );
-    dy.value = withSequence(
-      withTiming(deltaY, { duration: 0 }),
-      withTiming(0, { duration })
-    );
-    sx.value = withSequence(
-      withTiming(scaleX, { duration: 0 }),
-      withTiming(1, { duration })
-    );
-    sy.value = withSequence(
-      withTiming(scaleY, { duration: 0 }),
-      withTiming(1, { duration })
-    );
+  const leg = legBuilder(transition);
+  dx.value = leg(deltaX, 0);
+  dy.value = leg(deltaY, 0);
+  sx.value = leg(scaleX, 1);
+  sy.value = leg(scaleY, 1);
+}
+function applyStyleCarry(args) {
+  const { snapshot, progress, styles, transition, shouldReduceMotion } = args;
+  if (!styles) return;
+  if (shouldSnap(transition, shouldReduceMotion)) {
+    snapshot.value = null;
+    progress.value = 0;
     return;
   }
-  const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { type: "spring", ...DEFAULT_SPRING };
-  const springParams = springToReanimated(springCfg);
-  dx.value = withSequence(
-    withTiming(deltaX, { duration: 0 }),
-    withSpring(0, springParams)
-  );
-  dy.value = withSequence(
-    withTiming(deltaY, { duration: 0 }),
-    withSpring(0, springParams)
-  );
-  sx.value = withSequence(
-    withTiming(scaleX, { duration: 0 }),
-    withSpring(1, springParams)
-  );
-  sy.value = withSequence(
-    withTiming(scaleY, { duration: 0 }),
-    withSpring(1, springParams)
-  );
+  snapshot.value = styles;
+  progress.value = legBuilder(transition)(1, 0);
 }
 var alreadyChecked = false;
 function ensureReanimatedInstalled() {
@@ -324,7 +561,7 @@ function ensureReanimatedInstalled() {
     const major = parseInt(version.split(".")[0] ?? "0", 10);
     if (major < 4) {
       console.error(
-        `[inertia] react-native-reanimated v${version} is installed, but @rootnative/inertia requires v4.0.0 or later. Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`
+        `[inertia] react-native-reanimated ${version} is installed, but @rootnative/inertia requires 4.0.0 or later. Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`
       );
       return;
     }
@@ -367,15 +604,28 @@ var COLOR_KEYS = [
   "shadowColor"
 ];
 var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
+var STRUCTURED_KEYS = ["boxShadow"];
+var SHARED_STYLE_KEYS = [
+  "opacity",
+  "borderRadius",
+  "backgroundColor",
+  "borderColor",
+  "color",
+  "tintColor"
+];
 var ALL_KEYS = [
   ...TRANSFORM_KEYS,
   ...NUMERIC_TOP_LEVEL_KEYS,
   ...COLOR_KEYS,
-  ...SHADOW_OFFSET_KEYS
+  ...SHADOW_OFFSET_KEYS,
+  ...STRUCTURED_KEYS
 ];
 var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
 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 GESTURE_LAYER_NAMES = [
   "hovered",
   "focused",
@@ -410,7 +660,8 @@ var DEFAULT_RESTING = {
   tintColor: "transparent",
   shadowColor: "transparent",
   shadowOffsetWidth: 0,
-  shadowOffsetHeight: 0
+  shadowOffsetHeight: 0,
+  boxShadow: NO_BOX_SHADOW
 };
 function transitionFor(prop, transition) {
   if (!transition) return void 0;
@@ -501,6 +752,16 @@ function createMotionComponent(Component) {
       const [focused, setFocused] = useState(false);
       const [focusVisible, setFocusVisible] = useState(false);
       const [hovered, setHovered] = useState(false);
+      const hasLayoutId = layoutId !== void 0;
+      let flatStyle;
+      let flatStyleRead = false;
+      const getFlatStyle = () => {
+        if (!flatStyleRead) {
+          flatStyleRead = true;
+          flatStyle = StyleSheet.flatten(style);
+        }
+        return flatStyle;
+      };
       const touched = /* @__PURE__ */ new Set();
       collectTouchedKeys(touched, animateRecord);
       if (initialRecord) collectTouchedKeys(touched, initialRecord);
@@ -522,9 +783,19 @@ function createMotionComponent(Component) {
         }
       }
       if (exitRecord) collectTouchedKeys(touched, exitRecord);
+      if (hasLayoutId) {
+        const flat = getFlatStyle();
+        if (flat) {
+          for (const key of SHARED_STYLE_KEYS) {
+            if (touched.has(key)) continue;
+            if (styleValueFor(flat, key) !== void 0) touched.add(key);
+          }
+        }
+      }
       const activeKeysRef = useRef(null);
       const hasTransformRef = useRef(false);
       const hasShadowOffsetRef = useRef(false);
+      const hasBoxShadowRef = useRef(false);
       const prevActive = activeKeysRef.current;
       let grew = prevActive === null;
       if (!grew && prevActive) {
@@ -545,6 +816,15 @@ function createMotionComponent(Component) {
         hasShadowOffsetRef.current = activeKeysRef.current.some(
           (k) => SHADOW_OFFSET_KEY_SET.has(k)
         );
+        hasBoxShadowRef.current = activeKeysRef.current.includes("boxShadow");
+        if (__DEV__ && hasBoxShadowRef.current && activeKeysRef.current.some(
+          (k) => k !== "boxShadow" && k.startsWith("shadow")
+        )) {
+          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."
+          );
+        }
       }
       const drivenNow = /* @__PURE__ */ new Set();
       collectTouchedKeys(drivenNow, animateRecord);
@@ -555,17 +835,35 @@ function createMotionComponent(Component) {
       const activeKeys = activeKeysRef.current;
       const everDriven = everDrivenRef.current;
       const styleResting = {};
+      let styleRestingShadow = null;
       if (activeKeys.some((k) => !everDriven.has(k))) {
-        const flat = StyleSheet.flatten(style);
+        const flat = getFlatStyle();
         if (flat) {
           for (const key of activeKeys) {
             if (everDriven.has(key)) continue;
+            if (key === "boxShadow") {
+              const raw = flat.boxShadow;
+              if (raw !== void 0) {
+                styleRestingShadow = normalizeBoxShadow(raw);
+                styleResting.boxShadow = styleRestingShadow.layers;
+              }
+              continue;
+            }
             const v = styleValueFor(flat, key);
             if (v !== void 0) styleResting[key] = v;
           }
         }
       }
+      const boxShadowSeedRef = 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
+        };
+      }
       const sharedValues = useAnimatableSharedValues((key) => {
+        if (key === "boxShadow") return boxShadowSeedRef.current.layers;
         if (SHADOW_OFFSET_KEY_SET.has(key)) {
           const axis = shadowOffsetAxisFor(key);
           if (initial === false) {
@@ -582,11 +880,17 @@ function createMotionComponent(Component) {
         }
         return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
       });
+      const boxShadowInsets = useSharedValue(
+        boxShadowSeedRef.current.insets
+      );
       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];
+          if (key === "boxShadow") {
+            boxShadowInsets.value = styleRestingShadow?.insets ?? null;
+          }
         }
       }, [styleRestingSig]);
       const pressedProgress = useSharedValue(0);
@@ -643,6 +947,30 @@ function createMotionComponent(Component) {
         }
         const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
         for (const key of ALL_KEYS) {
+          if (key === "boxShadow") {
+            const shadowTarget = baseRecord.boxShadow;
+            if (shadowTarget === void 0) continue;
+            const cfg2 = configFor("boxShadow");
+            if (isExiting && reachesTerminalPhase(cfg2)) pending++;
+            driveBoxShadow(
+              sharedValues.boxShadow,
+              boxShadowInsets,
+              shadowTarget,
+              cfg2,
+              makeKeyCallbackFactory(
+                "boxShadow",
+                sharedValues.boxShadow,
+                // The declared target, not the padded one — the padding is an
+                // implementation detail of getting Reanimated to interpolate.
+                shadowTarget,
+                onAnimationEndRef,
+                { stepCount: 1, totalIterations: totalIterationsOf(cfg2) },
+                isExiting ? onSettle : void 0,
+                void 0
+              )
+            );
+            continue;
+          }
           const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
             baseRecord.shadowOffset,
             shadowOffsetAxisFor(key)
@@ -708,19 +1036,34 @@ function createMotionComponent(Component) {
         isExiting,
         shouldReduceMotion
       );
+      const readSharedStyles = () => {
+        if (!hasLayoutId) return void 0;
+        const out = {};
+        let any = false;
+        for (const key of activeKeysRef.current) {
+          if (!SHARED_STYLE_KEY_SET.has(key)) continue;
+          const v = sharedValues[key].value;
+          if (typeof v !== "number" && typeof v !== "string") continue;
+          out[key] = v;
+          any = true;
+        }
+        return any ? out : void 0;
+      };
       const sharedLayout = useSharedLayout({
         layoutId,
         userRef: ref,
         transition: isTopLevelTransition(transition) ? transition : void 0,
         shouldReduceMotion,
-        userOnLayout
+        userOnLayout,
+        readStyles: readSharedStyles
       });
       const flip = sharedLayout.flip;
-      const hasLayoutId = layoutId !== void 0;
+      const carry = sharedLayout.carry;
       const animatedStyle = useAnimatedStyle(() => {
         const activeKeys2 = activeKeysRef.current;
         const hasTransform = hasTransformRef.current;
         const hasShadowOffset = hasShadowOffsetRef.current;
+        const hasBoxShadow = hasBoxShadowRef.current;
         const out = {};
         const transform = [];
         let shadowOffsetW = 0;
@@ -729,12 +1072,15 @@ function createMotionComponent(Component) {
         const pf = focusedProgress.value;
         const pfv = focusVisibleProgress.value;
         const pp = pressedProgress.value;
+        const carried = carry.snapshot.value;
+        const pc = carry.progress.value;
         const layers = gestureSV.value;
         const hoveredLayer = layers ? layers.hovered : null;
         const focusedLayer = layers ? layers.focused : null;
         const focusVisibleLayer = layers ? layers.focusVisible : null;
         const pressedLayer = layers ? layers.pressed : null;
         for (const key of activeKeys2) {
+          if (key === "boxShadow") continue;
           let v = sharedValues[key].value;
           const isColor = COLOR_KEY_SET.has(key);
           if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
@@ -753,6 +1099,12 @@ function createMotionComponent(Component) {
             const t = pressedLayer[key];
             v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
           }
+          if (carried !== null && pc > 0) {
+            const s = carried[key];
+            if (s !== void 0) {
+              v = isColor ? interpolateColor(pc, [0, 1], [v, s]) : v + (s - v) * pc;
+            }
+          }
           if (TRANSFORM_KEY_SET.has(key)) {
             transform.push(
               ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
@@ -775,6 +1127,19 @@ function createMotionComponent(Component) {
         if (hasShadowOffset) {
           out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
         }
+        if (hasBoxShadow) {
+          const layers2 = sharedValues.boxShadow.value;
+          const insets = boxShadowInsets.value;
+          if (insets === null) {
+            out.boxShadow = layers2;
+          } else {
+            const withInset = [];
+            for (let i = 0; i < layers2.length; i++) {
+              withInset.push({ ...layers2[i], inset: insets[i] });
+            }
+            out.boxShadow = withInset;
+          }
+        }
         return out;
       });
       const mergedStyle = useMemo(
@@ -849,7 +1214,9 @@ function useAnimatableSharedValues(init) {
   const width = useSharedValue(init("width"));
   const height = useSharedValue(init("height"));
   const borderRadius = useSharedValue(init("borderRadius"));
-  const shadowOpacity = useSharedValue(init("shadowOpacity"));
+  const shadowOpacity = useSharedValue(
+    init("shadowOpacity")
+  );
   const shadowRadius = useSharedValue(init("shadowRadius"));
   const elevation = useSharedValue(init("elevation"));
   const backgroundColor = useSharedValue(
@@ -865,6 +1232,7 @@ function useAnimatableSharedValues(init) {
   const shadowOffsetHeight = useSharedValue(
     init("shadowOffsetHeight")
   );
+  const boxShadow = useSharedValue(init("boxShadow"));
   const ref = useRef(null);
   if (ref.current === null) {
     ref.current = {
@@ -889,7 +1257,8 @@ function useAnimatableSharedValues(init) {
       tintColor,
       shadowColor,
       shadowOffsetWidth,
-      shadowOffsetHeight
+      shadowOffsetHeight,
+      boxShadow
     };
   }
   const map = ref.current;
@@ -974,6 +1343,20 @@ function shadowOffsetAxisFor(key) {
 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 { from, to, insets } = prepareBoxShadowAnimation(
+    { layers: [...currentLayers], insets: insetSlot.value },
+    target
+  );
+  insetSlot.value = insets;
+  if (from.length !== currentLayers.length) slot.value = from;
+  slot.value = resolveTransition(
+    cfg,
+    to,
+    factory?.("animation", void 0)
+  );
+}
 function styleValueFor(flat, key) {
   if (SHADOW_OFFSET_KEY_SET.has(key)) {
     return shadowOffsetAxisValue(
@@ -1090,6 +1473,15 @@ function resolveGestureLayers(gesture) {
     if (!subState) continue;
     const resolved = {};
     for (const key of ALL_KEYS) {
+      if (STRUCTURED_KEY_SET.has(key)) {
+        if (__DEV__ && subState[key] !== void 0) {
+          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\`.`
+          );
+        }
+        continue;
+      }
       if (SHADOW_OFFSET_KEY_SET.has(key)) {
         const axis = shadowOffsetAxisFor(key);
         const so = subState.shadowOffset;
@@ -1179,4 +1571,4 @@ function compose(user, ours) {
   };
 }
 
-export { Presence, createMotionComponent, usePresence };
+export { Presence, createMotionComponent, pairBoxShadowLayers, resolveBoxShadowInput, usePresence };