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

package/dist/index.mjs

@@ -1,19 +1,19 @@
-export { useGesture } from './chunk-ZQUCQRZT.mjs';
-import { MotionView } from './chunk-WPPLZNM4.mjs';
-export { MotionView } from './chunk-WPPLZNM4.mjs';
-import { MotionText } from './chunk-IJNVUM5U.mjs';
-export { MotionText } from './chunk-IJNVUM5U.mjs';
-import { MotionImage } from './chunk-K4KR5BIS.mjs';
-export { MotionImage } from './chunk-K4KR5BIS.mjs';
-import { MotionPressable } from './chunk-OBE7KTMK.mjs';
-export { MotionPressable } from './chunk-OBE7KTMK.mjs';
-import { MotionScrollView } from './chunk-QQJSBIXV.mjs';
-export { MotionScrollView } from './chunk-QQJSBIXV.mjs';
-export { Presence, createMotionComponent, usePresence } from './chunk-I76OC6RX.mjs';
-import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-L2EVRKSC.mjs';
-export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-L2EVRKSC.mjs';
-import { stableSig, resolveTransition, springToReanimated } from './chunk-6FENLMCA.mjs';
-export { buildReleaseAnimation, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveTransition } from './chunk-6FENLMCA.mjs';
+export { useGesture } from './chunk-RGNX6UZN.mjs';
+import { MotionView } from './chunk-6SMPIOIC.mjs';
+export { MotionView } from './chunk-6SMPIOIC.mjs';
+import { MotionText } from './chunk-JVBXPF2G.mjs';
+export { MotionText } from './chunk-JVBXPF2G.mjs';
+import { MotionImage } from './chunk-ALRHDFZE.mjs';
+export { MotionImage } from './chunk-ALRHDFZE.mjs';
+import { MotionPressable } from './chunk-NXDJZD6A.mjs';
+export { MotionPressable } from './chunk-NXDJZD6A.mjs';
+import { MotionScrollView } from './chunk-CWLFUYIY.mjs';
+export { MotionScrollView } from './chunk-CWLFUYIY.mjs';
+export { Presence, createMotionComponent, usePresence } from './chunk-DWCLIBYO.mjs';
+import { useShouldReduceMotion, resolveNamedTransition, useNamedTransitions, lookupNamedTransition } from './chunk-R63GIUNU.mjs';
+export { MotionConfig, resolveNamedTransition, useMotionConfig, useNamedTransitions, useShouldReduceMotion } from './chunk-R63GIUNU.mjs';
+import { stableSig, resolveTransition, springToReanimated, warnNonWorkletOnce } from './chunk-CY7Y64C3.mjs';
+export { buildReleaseAnimation, cubicBezier, ensureWorkletEasing, resolveAnimatableValue, resolveTransition } from './chunk-CY7Y64C3.mjs';
 import { useEffect, useMemo, useRef } from 'react';
 import { useSharedValue, withSpring, useAnimatedReaction, useAnimatedStyle, interpolateColor, useDerivedValue, Extrapolation, useAnimatedScrollHandler, interpolate } from 'react-native-reanimated';
 import { isWorkletFunction } from 'react-native-worklets';
@@ -112,10 +112,18 @@ function useTransform(arg1, inputRange, outputRange, options) {
   let producer;
   if (typeof arg1 === "function") {
     const userFn = arg1;
-    producer = isWorkletFunction(userFn) ? userFn : () => {
-      "worklet";
-      return userFn();
-    };
+    if (isWorkletFunction(userFn)) {
+      producer = userFn;
+    } else {
+      warnNonWorkletOnce(
+        "useTransform-transformer",
+        "[inertia] useTransform: the transformer is not a worklet, so the shared values it reads can't be tracked as dependencies \u2014 the derived value will only refresh on React re-renders, and native builds reject plain functions on the UI thread. Add the 'worklet' directive as the first statement of the transformer."
+      );
+      producer = () => {
+        "worklet";
+        return userFn();
+      };
+    }
   } else {
     const source = arg1;
     const input = inputRange;
@@ -163,6 +171,127 @@ function useScroll() {
     onScroll: handler
   };
 }
+
+// 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: layer.offsetX,
+    offsetY: layer.offsetY,
+    blurRadius: layer.blurRadius ?? 0,
+    spreadDistance: layer.spreadDistance ?? 0,
+    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
+  };
+}
+
+// src/values/useShadow.ts
 function useShadow({
   from,
   to,
@@ -173,6 +302,10 @@ function useShadow({
   const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
   const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
   const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
+  const boxShadowPairs = from.boxShadow !== void 0 || to.boxShadow !== void 0 ? pairBoxShadowLayers(
+    resolveBoxShadowInput(from.boxShadow),
+    resolveBoxShadowInput(to.boxShadow)
+  ) : [];
   const opacityFrom = from.shadowOpacity ?? 0;
   const opacityTo = to.shadowOpacity ?? 0;
   const radiusFrom = from.shadowRadius ?? 0;
@@ -207,6 +340,31 @@ function useShadow({
         height: interpolate(t, [0, 1], [offsetHFrom, offsetHTo])
       };
     }
+    if (boxShadowPairs.length > 0) {
+      let css = "";
+      let first = true;
+      for (const pair of boxShadowPairs) {
+        const x = interpolate(t, [0, 1], [pair.from.offsetX, pair.to.offsetX]);
+        const y = interpolate(t, [0, 1], [pair.from.offsetY, pair.to.offsetY]);
+        const blur = Math.max(
+          0,
+          interpolate(t, [0, 1], [pair.from.blurRadius, pair.to.blurRadius])
+        );
+        const spread = interpolate(
+          t,
+          [0, 1],
+          [pair.from.spreadDistance, pair.to.spreadDistance]
+        );
+        const color = interpolateColor(
+          t,
+          [0, 1],
+          [pair.from.color, pair.to.color]
+        );
+        css += (first ? "" : ", ") + (pair.from.inset ? "inset " : "") + `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+        first = false;
+      }
+      out.boxShadow = css;
+    }
     return out;
   });
 }

package/dist/motion/Image.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkNDKVHL3N_js = require('../chunk-NDKVHL3N.js');
-require('../chunk-6UQ4KA6V.js');
-require('../chunk-6EP3S2PN.js');
-require('../chunk-SFRNO6AW.js');
+var chunk3UTJJ4A3_js = require('../chunk-3UTJJ4A3.js');
+require('../chunk-7UDYEFBU.js');
+require('../chunk-7AOERN53.js');
+require('../chunk-PTRF47DA.js');
 
 
 
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunkNDKVHL3N_js.MotionImage; }
+  get: function () { return chunk3UTJJ4A3_js.MotionImage; }
 });

package/dist/motion/Image.mjs

@@ -1,4 +1,4 @@
-export { MotionImage } from '../chunk-K4KR5BIS.mjs';
-import '../chunk-I76OC6RX.mjs';
-import '../chunk-L2EVRKSC.mjs';
-import '../chunk-6FENLMCA.mjs';
+export { MotionImage } from '../chunk-ALRHDFZE.mjs';
+import '../chunk-DWCLIBYO.mjs';
+import '../chunk-R63GIUNU.mjs';
+import '../chunk-CY7Y64C3.mjs';

package/dist/motion/Pressable.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkOM5FXU4I_js = require('../chunk-OM5FXU4I.js');
-require('../chunk-6UQ4KA6V.js');
-require('../chunk-6EP3S2PN.js');
-require('../chunk-SFRNO6AW.js');
+var chunkTDSO63CJ_js = require('../chunk-TDSO63CJ.js');
+require('../chunk-7UDYEFBU.js');
+require('../chunk-7AOERN53.js');
+require('../chunk-PTRF47DA.js');
 
 
 
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunkOM5FXU4I_js.MotionPressable; }
+  get: function () { return chunkTDSO63CJ_js.MotionPressable; }
 });

package/dist/motion/Pressable.mjs

@@ -1,4 +1,4 @@
-export { MotionPressable } from '../chunk-OBE7KTMK.mjs';
-import '../chunk-I76OC6RX.mjs';
-import '../chunk-L2EVRKSC.mjs';
-import '../chunk-6FENLMCA.mjs';
+export { MotionPressable } from '../chunk-NXDJZD6A.mjs';
+import '../chunk-DWCLIBYO.mjs';
+import '../chunk-R63GIUNU.mjs';
+import '../chunk-CY7Y64C3.mjs';

package/dist/motion/ScrollView.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk5I3G43XA_js = require('../chunk-5I3G43XA.js');
-require('../chunk-6UQ4KA6V.js');
-require('../chunk-6EP3S2PN.js');
-require('../chunk-SFRNO6AW.js');
+var chunk2HYD2ZBK_js = require('../chunk-2HYD2ZBK.js');
+require('../chunk-7UDYEFBU.js');
+require('../chunk-7AOERN53.js');
+require('../chunk-PTRF47DA.js');
 
 
 
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunk5I3G43XA_js.MotionScrollView; }
+  get: function () { return chunk2HYD2ZBK_js.MotionScrollView; }
 });

package/dist/motion/ScrollView.mjs

@@ -1,4 +1,4 @@
-export { MotionScrollView } from '../chunk-QQJSBIXV.mjs';
-import '../chunk-I76OC6RX.mjs';
-import '../chunk-L2EVRKSC.mjs';
-import '../chunk-6FENLMCA.mjs';
+export { MotionScrollView } from '../chunk-CWLFUYIY.mjs';
+import '../chunk-DWCLIBYO.mjs';
+import '../chunk-R63GIUNU.mjs';
+import '../chunk-CY7Y64C3.mjs';

package/dist/motion/Text.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkWZGMAXKC_js = require('../chunk-WZGMAXKC.js');
-require('../chunk-6UQ4KA6V.js');
-require('../chunk-6EP3S2PN.js');
-require('../chunk-SFRNO6AW.js');
+var chunkZ7HIOFKQ_js = require('../chunk-Z7HIOFKQ.js');
+require('../chunk-7UDYEFBU.js');
+require('../chunk-7AOERN53.js');
+require('../chunk-PTRF47DA.js');
 
 
 
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunkWZGMAXKC_js.MotionText; }
+  get: function () { return chunkZ7HIOFKQ_js.MotionText; }
 });

package/dist/motion/Text.mjs

@@ -1,4 +1,4 @@
-export { MotionText } from '../chunk-IJNVUM5U.mjs';
-import '../chunk-I76OC6RX.mjs';
-import '../chunk-L2EVRKSC.mjs';
-import '../chunk-6FENLMCA.mjs';
+export { MotionText } from '../chunk-JVBXPF2G.mjs';
+import '../chunk-DWCLIBYO.mjs';
+import '../chunk-R63GIUNU.mjs';
+import '../chunk-CY7Y64C3.mjs';

package/dist/motion/View.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkSCTX5Z7I_js = require('../chunk-SCTX5Z7I.js');
-require('../chunk-6UQ4KA6V.js');
-require('../chunk-6EP3S2PN.js');
-require('../chunk-SFRNO6AW.js');
+var chunk4QGXK6TF_js = require('../chunk-4QGXK6TF.js');
+require('../chunk-7UDYEFBU.js');
+require('../chunk-7AOERN53.js');
+require('../chunk-PTRF47DA.js');
 
 
 
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunkSCTX5Z7I_js.MotionView; }
+  get: function () { return chunk4QGXK6TF_js.MotionView; }
 });

package/dist/motion/View.mjs

@@ -1,4 +1,4 @@
-export { MotionView } from '../chunk-WPPLZNM4.mjs';
-import '../chunk-I76OC6RX.mjs';
-import '../chunk-L2EVRKSC.mjs';
-import '../chunk-6FENLMCA.mjs';
+export { MotionView } from '../chunk-6SMPIOIC.mjs';
+import '../chunk-DWCLIBYO.mjs';
+import '../chunk-R63GIUNU.mjs';
+import '../chunk-CY7Y64C3.mjs';

package/dist/touch/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkSFRNO6AW_js = require('../chunk-SFRNO6AW.js');
+var chunkPTRF47DA_js = require('../chunk-PTRF47DA.js');
 var react = require('react');
 var reactNative = require('react-native');
 var reactNativeReanimated = require('react-native-reanimated');
@@ -48,14 +48,14 @@ function useTouchDrag(options = {}) {
         if (result) {
           if (result.x && lockX) {
             const toX = "to" in result.x ? result.x.to : x;
-            dragX.value = chunkSFRNO6AW_js.buildReleaseAnimation(
+            dragX.value = chunkPTRF47DA_js.buildReleaseAnimation(
               result.x,
               toX
             );
           }
           if (result.y && lockY) {
             const toY = "to" in result.y ? result.y.to : y;
-            dragY.value = chunkSFRNO6AW_js.buildReleaseAnimation(
+            dragY.value = chunkPTRF47DA_js.buildReleaseAnimation(
               result.y,
               toY
             );

package/dist/touch/index.mjs

@@ -1,4 +1,4 @@
-import { buildReleaseAnimation } from '../chunk-6FENLMCA.mjs';
+import { buildReleaseAnimation } from '../chunk-CY7Y64C3.mjs';
 import { useMemo } from 'react';
 import { PanResponder } from 'react-native';
 import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

package/llms.txt

@@ -51,7 +51,7 @@ import { MotionScrollView } from '@rootnative/inertia/scroll-view'
 - `useSpring(target, config?)` — spring-only shorthand. Animates a `SharedValue<number>` toward `target` with react-spring vocab (or a spring-typed registered `TransitionName`; non-spring names warn and fall back to the default spring). `target` may be a plain number (effect-driven) or a `SharedValue<number>` (UI-thread reaction); the latter is the gesture-smoothing path.
 - `useBooleanSpring(active, config?)` — sugar over `useSpring` for the recurring "spring 0↔1 progress from a boolean" shape (checkbox checks, accordion expansions, drawer open/closed). Identical mechanics to `useSpring(active ? 1 : 0, config)` — the named form so the call site reads as the boolean it represents.
 - `useTransform(value, inputRange, outputRange, options?)` / `useTransform(transformer)` — interpolate a numeric shared value onto a number or color range, or derive any value from any number of shared values via a worklet. Non-worklet transformers are auto-wrapped.
-- `useShadow({ from, to, progress })` — pure value-layer interpolator between two `ShadowConfig`s (`shadowOpacity` / `shadowRadius` / `shadowOffset` / `elevation` / `shadowColor`) driven by a `SharedValue<number>` (0→1). Returns an animated style fragment to spread onto `style`; only emits keys present on either side, absent sides default to natural zero. The hook does not animate on its own — drive `progress` with a spring, a scroll-derived `useTransform`, or any other shared value source.
+- `useShadow({ from, to, progress })` — pure value-layer interpolator between two `ShadowConfig`s (`shadowOpacity` / `shadowRadius` / `shadowOffset` / `elevation` / `shadowColor`, plus `boxShadow` as a CSS string or `BoxShadowLayer[]` — the shadow surface on web and RN 0.76+ new-arch; multi-layer, CSS-transition padding semantics, malformed strings throw at setup) driven by a `SharedValue<number>` (0→1). Returns an animated style fragment to spread onto `style`; only emits keys present on either side, absent sides default to natural zero. The hook does not animate on its own — drive `progress` with a spring, a scroll-derived `useTransform`, or any other shared value source.
 - `useColorTransition(progress, [from, to], options?)` — pure value-layer interpolator for a single color channel, driven by a `SharedValue<number>` (0→1). Returns an animated style fragment with one color key (default `backgroundColor`; configurable via `options.key` to `color` / `borderColor` / `tintColor` / `shadowColor` / per-side border colors). For raw `SharedValue<string>` output, use `useTransform(progress, [0, 1], [from, to])` instead.
 - `useScroll()` — returns `{ scrollX, scrollY, onScroll }` for use with `Motion.ScrollView`. Scroll events fire on the UI thread.
 - `createMotionComponent<C>(C)` — wrap any component with the same Motion prop surface, inferring style from `C`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia",
-  "version": "0.0.0-alpha.4",
+  "version": "0.0.0-alpha.6",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",
@@ -142,7 +142,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
     "test": "jest",
     "size": "size-limit",
     "size:why": "size-limit --why",

package/src/index.ts

@@ -52,6 +52,7 @@ export {
   useVariants,
 } from './values'
 export type {
+  BoxShadowLayer,
   ColorStyleKey,
   ExtrapolationMode,
   ShadowConfig,

package/src/internal/boxShadow.ts

@@ -0,0 +1,204 @@
+/**
+ * CSS `box-shadow` parsing + pairing for `useShadow`.
+ *
+ * Design systems store web elevation tokens as CSS `box-shadow` strings
+ * (`'0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)'`).
+ * Like `cubicBezier`, this module makes those tokens directly consumable:
+ * strings are parsed once on the JS thread into flat layer records the
+ * `useShadow` worklet can interpolate without any frame-time string work.
+ *
+ * Invalid input **throws** rather than warning — shadow tokens are
+ * constructed at theme/module setup, and a malformed token should fail
+ * loudly there, not silently render the wrong elevation.
+ */
+
+/**
+ * One layer of a `box-shadow`, structurally mirroring React Native's
+ * `BoxShadowValue` (RN 0.76+ `boxShadow` style). Lengths are px numbers.
+ */
+export interface BoxShadowLayer {
+  offsetX: number
+  offsetY: number
+  /** Must be >= 0, per CSS. @default 0 */
+  blurRadius?: number
+  /** @default 0 */
+  spreadDistance?: number
+  /** Any color string Reanimated's `interpolateColor` accepts. @default 'black' */
+  color?: string
+  /** @default false */
+  inset?: boolean
+}
+
+/** A layer with every field resolved to a concrete value. */
+export interface ResolvedBoxShadowLayer {
+  offsetX: number
+  offsetY: number
+  blurRadius: number
+  spreadDistance: number
+  color: string
+  inset: boolean
+}
+
+const LENGTH = /^[+-]?(\d+\.?\d*|\.\d+)(px)?$/i
+const UNIT_LIKE = /^[+-]?(\d+\.?\d*|\.\d+)[a-z%]+$/i
+
+function invalid(input: string, reason: string): Error {
+  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], ...'",
+  )
+}
+
+/**
+ * Split a box-shadow string into layer strings on top-level commas —
+ * commas inside color functions (`rgba(0, 0, 0, 0.3)`) don't split.
+ */
+function splitLayers(input: string): string[] {
+  const layers: string[] = []
+  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
+}
+
+/**
+ * Split one layer into whitespace-separated tokens, keeping color
+ * functions (which may contain spaces: `rgb(0 0 0 / 40%)`) as one token.
+ */
+function tokenize(layer: string): string[] {
+  const tokens: string[] = []
+  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
+}
+
+/**
+ * Parse a CSS `box-shadow` string into resolved layers. `'none'` parses to
+ * an empty list. Only px (and unitless) lengths are supported — other units
+ * depend on font/viewport context that a style value can't resolve.
+ */
+export function parseBoxShadow(input: string): ResolvedBoxShadowLayer[] {
+  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: number[] = []
+    let color: string | undefined
+    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 !== undefined) throw invalid(input, 'multiple colors')
+        color = token
+      }
+    }
+
+    if (lengths.length < 2 || lengths.length > 4) {
+      throw invalid(input, `expected 2-4 lengths, got ${lengths.length}`)
+    }
+    // The `= 0` on the offsets never fires (length >= 2 is validated
+    // above); it's here for noUncheckedIndexedAccess.
+    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,
+    }
+  })
+}
+
+/** Resolve either input form (CSS string or structured layers) to layers. */
+export function resolveBoxShadowInput(
+  input: string | readonly BoxShadowLayer[] | undefined,
+): ResolvedBoxShadowLayer[] {
+  if (input === undefined) return []
+  if (typeof input === 'string') return parseBoxShadow(input)
+  return input.map((layer) => ({
+    offsetX: layer.offsetX,
+    offsetY: layer.offsetY,
+    blurRadius: layer.blurRadius ?? 0,
+    spreadDistance: layer.spreadDistance ?? 0,
+    color: layer.color ?? 'black',
+    inset: layer.inset ?? false,
+  }))
+}
+
+/**
+ * Pair up `from`/`to` layer lists for interpolation, CSS-transition style:
+ * the shorter list is padded with an invisible layer (all lengths 0,
+ * transparent color) matching the counterpart's `inset` flag. A genuine
+ * `inset` mismatch between paired layers is not interpolable and throws.
+ */
+export function pairBoxShadowLayers(
+  from: ResolvedBoxShadowLayer[],
+  to: ResolvedBoxShadowLayer[],
+): Array<{ from: ResolvedBoxShadowLayer; to: ResolvedBoxShadowLayer }> {
+  const count = Math.max(from.length, to.length)
+  const pairs: Array<{
+    from: ResolvedBoxShadowLayer
+    to: ResolvedBoxShadowLayer
+  }> = []
+  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 — 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: boolean): ResolvedBoxShadowLayer {
+  return {
+    offsetX: 0,
+    offsetY: 0,
+    blurRadius: 0,
+    spreadDistance: 0,
+    color: 'transparent',
+    inset,
+  }
+}