@rootnative/inertia 0.0.3 → 0.0.4

package/dist/{chunk-BP3Y2SHQ.js → chunk-MYE5NMXW.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk7AOERN53_js = require('./chunk-7AOERN53.js');
-var chunkPTRF47DA_js = require('./chunk-PTRF47DA.js');
+var chunkWVRCKOPO_js = require('./chunk-WVRCKOPO.js');
+var chunk7A6WTXNK_js = require('./chunk-7A6WTXNK.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Animated = require('react-native-reanimated');
@@ -135,20 +135,189 @@ function PresenceItem({
   );
   return /* @__PURE__ */ jsxRuntime.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;
   if (cfg.type === "no-animation") return void 0;
   if (cfg.type === "timing") {
     let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
-    const easing = chunkPTRF47DA_js.ensureWorkletEasing(cfg.easing);
+    const easing = chunk7A6WTXNK_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 } = chunkPTRF47DA_js.springToReanimated({
-    ...chunkPTRF47DA_js.DEFAULT_SPRING,
+  const { stiffness, damping, mass } = chunk7A6WTXNK_js.springToReanimated({
+    ...chunk7A6WTXNK_js.DEFAULT_SPRING,
     ...spring
   });
   let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
@@ -168,72 +337,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 = Animated.useSharedValue(0);
   const dy = Animated.useSharedValue(0);
   const sx = Animated.useSharedValue(1);
   const sy = Animated.useSharedValue(1);
+  const snapshot = Animated.useSharedValue(null);
+  const carryProgress = Animated.useSharedValue(0);
   const lastRectRef = react.useRef(null);
   const consumedRef = react.useRef(false);
+  const nodeRef = react.useRef(null);
   const transitionRef = react.useRef(transition);
   transitionRef.current = transition;
   const reducedMotionRef = react.useRef(shouldReduceMotion);
   reducedMotionRef.current = shouldReduceMotion;
+  const readStylesRef = react.useRef(readStyles);
+  readStylesRef.current = readStyles;
   const setRef = react.useCallback(
     (node) => {
+      nodeRef.current = node;
       if (typeof userRef === "function") userRef(node);
       else if (userRef) userRef.current = node;
     },
     [userRef]
   );
+  const remeasure = react.useCallback(() => measureWindowRect(nodeRef.current), []);
+  const snapshotStyles = react.useCallback(() => readStylesRef.current?.(), []);
+  const startTransition = react.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 = react.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]
   );
   react.useEffect(() => {
     consumedRef.current = false;
@@ -243,18 +478,49 @@ function useSharedLayout(options) {
       if (!layoutId) return;
       const rect = lastRectRef.current;
       if (!rect) return;
-      releaseLayout(layoutId, rect);
+      releaseLayout(layoutId, rect, snapshotStyles());
     };
-  }, [layoutId]);
+  }, [layoutId, snapshotStyles]);
+  react.useEffect(
+    () => () => {
+      Animated.cancelAnimation(dx);
+      Animated.cancelAnimation(dy);
+      Animated.cancelAnimation(sx);
+      Animated.cancelAnimation(sy);
+      Animated.cancelAnimation(carryProgress);
+    },
+    // The FLIP shared values are identity-stable per hook instance.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return react.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) => Animated.withSequence(
+      Animated.withTiming(from, { duration: 0 }),
+      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);
+  return (from, to) => Animated.withSequence(
+    Animated.withTiming(from, { duration: 0 }),
+    Animated.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;
@@ -265,58 +531,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) {
+  if (shouldSnap(transition, shouldReduceMotion)) {
     dx.value = 0;
     dy.value = 0;
     sx.value = 1;
     sy.value = 1;
     return;
   }
-  if (transition?.type === "no-animation") {
-    dx.value = 0;
-    dy.value = 0;
-    sx.value = 1;
-    sy.value = 1;
-    return;
-  }
-  if (transition?.type === "timing") {
-    const duration = transition.duration ?? 300;
-    dx.value = Animated.withSequence(
-      Animated.withTiming(deltaX, { duration: 0 }),
-      Animated.withTiming(0, { duration })
-    );
-    dy.value = Animated.withSequence(
-      Animated.withTiming(deltaY, { duration: 0 }),
-      Animated.withTiming(0, { duration })
-    );
-    sx.value = Animated.withSequence(
-      Animated.withTiming(scaleX, { duration: 0 }),
-      Animated.withTiming(1, { duration })
-    );
-    sy.value = Animated.withSequence(
-      Animated.withTiming(scaleY, { duration: 0 }),
-      Animated.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" ? { ...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)
-  );
-  dy.value = Animated.withSequence(
-    Animated.withTiming(deltaY, { duration: 0 }),
-    Animated.withSpring(0, springParams)
-  );
-  sx.value = Animated.withSequence(
-    Animated.withTiming(scaleX, { duration: 0 }),
-    Animated.withSpring(1, springParams)
-  );
-  sy.value = Animated.withSequence(
-    Animated.withTiming(scaleY, { duration: 0 }),
-    Animated.withSpring(1, springParams)
-  );
+  snapshot.value = styles;
+  progress.value = legBuilder(transition)(1, 0);
 }
 var alreadyChecked = false;
 function ensureReanimatedInstalled() {
@@ -330,7 +567,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;
     }
@@ -373,15 +610,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",
@@ -416,19 +666,20 @@ 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;
   if (typeof transition === "string") return void 0;
-  if (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
+  if (chunk7A6WTXNK_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 (chunkPTRF47DA_js.isTopLevelTransition(transition)) return transition;
+  if (chunk7A6WTXNK_js.isTopLevelTransition(transition)) return transition;
   return transition[layer];
 }
 function createMotionComponent(Component) {
@@ -478,12 +729,12 @@ function createMotionComponent(Component) {
         onLayout: userOnLayout,
         ...rest
       } = props;
-      const namedTransitions = chunk7AOERN53_js.useNamedTransitions();
-      const transition = chunk7AOERN53_js.resolveNamedTransitionProp(
+      const namedTransitions = chunkWVRCKOPO_js.useNamedTransitions();
+      const transition = chunkWVRCKOPO_js.resolveNamedTransitionProp(
         transitionProp,
         namedTransitions
       );
-      const layout = typeof layoutProp === "string" ? chunk7AOERN53_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
+      const layout = typeof layoutProp === "string" ? chunkWVRCKOPO_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."
@@ -491,7 +742,7 @@ function createMotionComponent(Component) {
       }
       const presence = usePresence();
       const isExiting = presence !== null && presence.isPresent === false;
-      const shouldReduceMotion = chunk7AOERN53_js.useShouldReduceMotion();
+      const shouldReduceMotion = chunkWVRCKOPO_js.useShouldReduceMotion();
       const onAnimationEndRef = react.useRef(onAnimationEnd);
       onAnimationEndRef.current = onAnimationEnd;
       const variantKey = useControllerKey(controller);
@@ -507,6 +758,16 @@ function createMotionComponent(Component) {
       const [focused, setFocused] = react.useState(false);
       const [focusVisible, setFocusVisible] = react.useState(false);
       const [hovered, setHovered] = react.useState(false);
+      const hasLayoutId = layoutId !== void 0;
+      let flatStyle;
+      let flatStyleRead = false;
+      const getFlatStyle = () => {
+        if (!flatStyleRead) {
+          flatStyleRead = true;
+          flatStyle = reactNative.StyleSheet.flatten(style);
+        }
+        return flatStyle;
+      };
       const touched = /* @__PURE__ */ new Set();
       collectTouchedKeys(touched, animateRecord);
       if (initialRecord) collectTouchedKeys(touched, initialRecord);
@@ -528,9 +789,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 = react.useRef(null);
       const hasTransformRef = react.useRef(false);
       const hasShadowOffsetRef = react.useRef(false);
+      const hasBoxShadowRef = react.useRef(false);
       const prevActive = activeKeysRef.current;
       let grew = prevActive === null;
       if (!grew && prevActive) {
@@ -551,6 +822,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")
+        )) {
+          chunk7A6WTXNK_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."
+          );
+        }
       }
       const drivenNow = /* @__PURE__ */ new Set();
       collectTouchedKeys(drivenNow, animateRecord);
@@ -561,17 +841,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 = reactNative.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 = 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
+        };
+      }
       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) {
@@ -588,11 +886,17 @@ function createMotionComponent(Component) {
         }
         return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? styleResting[key] ?? DEFAULT_RESTING[key];
       });
-      const styleRestingSig = chunkPTRF47DA_js.stableSig(styleResting);
+      const boxShadowInsets = Animated.useSharedValue(
+        boxShadowSeedRef.current.insets
+      );
+      const styleRestingSig = chunk7A6WTXNK_js.stableSig(styleResting);
       react.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 = Animated.useSharedValue(0);
@@ -613,13 +917,13 @@ function createMotionComponent(Component) {
       const gestureSV = Animated.useSharedValue(
         resolveGestureLayers(gesture)
       );
-      const gestureTargetsSig = chunkPTRF47DA_js.stableSig(gesture);
+      const gestureTargetsSig = chunk7A6WTXNK_js.stableSig(gesture);
       react.useEffect(() => {
         gestureSV.value = resolveGestureLayers(gesture);
       }, [gestureTargetsSig]);
       const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
-      const baseSig = chunkPTRF47DA_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
-      const transitionSig = chunkPTRF47DA_js.stableSig(transition);
+      const baseSig = chunk7A6WTXNK_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
+      const transitionSig = chunk7A6WTXNK_js.stableSig(transition);
       const safeToRemoveRef = react.useRef(void 0);
       safeToRemoveRef.current = presence?.safeToRemove;
       react.useEffect(() => {
@@ -649,6 +953,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)
@@ -668,7 +996,7 @@ function createMotionComponent(Component) {
             isExiting ? onSettle : void 0,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
           );
-          sharedValues[key].value = chunkPTRF47DA_js.resolveAnimatableValue(
+          sharedValues[key].value = chunk7A6WTXNK_js.resolveAnimatableValue(
             target,
             cfg,
             factory
@@ -714,19 +1042,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: chunkPTRF47DA_js.isTopLevelTransition(transition) ? transition : void 0,
+        transition: chunk7A6WTXNK_js.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 = Animated.useAnimatedStyle(() => {
         const activeKeys2 = activeKeysRef.current;
         const hasTransform = hasTransformRef.current;
         const hasShadowOffset = hasShadowOffsetRef.current;
+        const hasBoxShadow = hasBoxShadowRef.current;
         const out = {};
         const transform = [];
         let shadowOffsetW = 0;
@@ -735,12 +1078,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) {
@@ -759,6 +1105,12 @@ function createMotionComponent(Component) {
             const t = pressedLayer[key];
             v = isColor ? Animated.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 ? Animated.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 }
@@ -781,6 +1133,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 = react.useMemo(
@@ -795,7 +1160,7 @@ function createMotionComponent(Component) {
         setFocusVisible,
         setHovered
       );
-      const layoutSig = chunkPTRF47DA_js.stableSig(layout);
+      const layoutSig = chunk7A6WTXNK_js.stableSig(layout);
       const layoutTransition = react.useMemo(
         () => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -855,7 +1220,9 @@ function useAnimatableSharedValues(init) {
   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 shadowOpacity = Animated.useSharedValue(
+    init("shadowOpacity")
+  );
   const shadowRadius = Animated.useSharedValue(init("shadowRadius"));
   const elevation = Animated.useSharedValue(init("elevation"));
   const backgroundColor = Animated.useSharedValue(
@@ -871,6 +1238,7 @@ function useAnimatableSharedValues(init) {
   const shadowOffsetHeight = Animated.useSharedValue(
     init("shadowOffsetHeight")
   );
+  const boxShadow = Animated.useSharedValue(init("boxShadow"));
   const ref = react.useRef(null);
   if (ref.current === null) {
     ref.current = {
@@ -895,7 +1263,8 @@ function useAnimatableSharedValues(init) {
       tintColor,
       shadowColor,
       shadowOffsetWidth,
-      shadowOffsetHeight
+      shadowOffsetHeight,
+      boxShadow
     };
   }
   const map = ref.current;
@@ -980,6 +1349,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 = chunk7A6WTXNK_js.resolveTransition(
+    cfg,
+    to,
+    factory?.("animation", void 0)
+  );
+}
 function styleValueFor(flat, key) {
   if (SHADOW_OFFSET_KEY_SET.has(key)) {
     return shadowOffsetAxisValue(
@@ -1096,6 +1479,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) {
+          chunk7A6WTXNK_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\`.`
+          );
+        }
+        continue;
+      }
       if (SHADOW_OFFSET_KEY_SET.has(key)) {
         const axis = shadowOffsetAxisFor(key);
         const so = subState.shadowOffset;
@@ -1113,7 +1505,7 @@ function resolveGestureLayers(gesture) {
   return out;
 }
 function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
-  const layerCfgSig = chunkPTRF47DA_js.stableSig(gestureLayerTransitionFor(layer, transition));
+  const layerCfgSig = chunk7A6WTXNK_js.stableSig(gestureLayerTransitionFor(layer, transition));
   react.useEffect(() => {
     if (!declared) return;
     if (isExiting) {
@@ -1122,7 +1514,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 = chunkPTRF47DA_js.resolveTransition(cfg, target);
+    progress.value = chunk7A6WTXNK_js.resolveTransition(cfg, target);
   }, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
 }
 function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
@@ -1146,7 +1538,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 && chunk7AOERN53_js.isFocusVisible()) setFocusVisible(true);
+        if (gesture.focusVisible && chunkWVRCKOPO_js.isFocusVisible()) setFocusVisible(true);
       });
       handlers.onBlur = compose(rest.onBlur, () => {
         if (gesture.focused) setFocused(false);
@@ -1187,4 +1579,6 @@ function compose(user, ours) {
 
 exports.Presence = Presence;
 exports.createMotionComponent = createMotionComponent;
+exports.pairBoxShadowLayers = pairBoxShadowLayers;
+exports.resolveBoxShadowInput = resolveBoxShadowInput;
 exports.usePresence = usePresence;