@onlynative/inertia 0.0.1-alpha.7 → 0.0.1-alpha.9

package/README.md

@@ -88,7 +88,7 @@ Plus, on any transition: `delay`, `repeat`. Per-property transitions take preced
 
 Numeric: `opacity`, `translateX`, `translateY`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `width`, `height`, `borderRadius`. Color: `backgroundColor`, `borderColor`, `color`, `tintColor` (Image only — `Motion.View` rejects it at compile time). Layout transforms via `transform: [...]`. Color targets are forwarded straight through `withSpring` / `withTiming`; Reanimated's value setter packs the string to RGBA and interpolates on the UI thread.
 
-SVG path morphing ships in the [`@onlynative/inertia-svg`](../svg) adapter (`MotionPath`). Out of scope for `0.x`: shared-element transitions across screens (Reanimated 4 dropped `sharedTransitionTag`; a measure-based replacement is in design).
+SVG path morphing ships in the [`@onlynative/inertia-svg`](../svg) adapter (`MotionPath`). Shared-element transitions across screens are wired through the `layoutId` prop — pair the same id on a source and target `Motion.*` and Inertia FLIPs between them on mount.
 
 ## When not to use the core package alone
 

package/dist/gestureLayer/index.d.mts

@@ -0,0 +1,119 @@
+import { AnimatedStyle } from 'react-native-reanimated';
+import { U as UseGestureHandlers } from '../useGesture-cimMrzC1.mjs';
+import { T as TransitionConfig, h as GestureLayerTransitions } from '../types-cU43dEmH.mjs';
+import 'react';
+import 'react-native';
+
+/**
+ * A single gesture-layer style — a flat map of style keys to a value. Numeric
+ * values participate in clamped-max composition (the "strongest active layer
+ * wins" model used by MD3 state-layer haloes); string values are treated as
+ * colors and composed via priority cascade with `interpolateColor`.
+ *
+ * The hook does not validate that string values are valid colors — passing
+ * something like `borderStyle: 'solid'` will crash inside the worklet. Keep
+ * string values to color strings.
+ */
+type GestureLayerStyle = {
+    [key: string]: number | string | undefined;
+};
+/**
+ * Per-state style maps. Every key is optional; missing layers default to
+ * `rest` (or `0` / `'transparent'` if `rest` is also absent for that key).
+ *
+ * - `rest` — base values, applied when no other layer is active.
+ * - `hovered` / `focused` / `focusVisible` / `pressed` — gesture-driven
+ *   states tracked via the underlying `useGesture` hook. Each owns an
+ *   independent 0↔1 progress that fades the layer in/out per the configured
+ *   transition.
+ * - `disabled` — gated by the JS-side `options.disabled` flag rather than a
+ *   gesture. Sits at the top of the priority cascade and overrides every
+ *   gesture layer when active.
+ */
+interface GestureLayerStates {
+    rest?: GestureLayerStyle;
+    hovered?: GestureLayerStyle;
+    focused?: GestureLayerStyle;
+    focusVisible?: GestureLayerStyle;
+    pressed?: GestureLayerStyle;
+    disabled?: GestureLayerStyle;
+}
+interface UseGestureLayerOptions {
+    /**
+     * When `true`, the `disabled` layer becomes active (or `rest` if `disabled`
+     * is undefined). Animates via the top-level transition or the library
+     * default spring; per-layer transitions (`GestureLayerTransitions`) do not
+     * apply to `disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Transition forwarded to the underlying `useGesture` hook. Either a single
+     * `TransitionConfig` for every gesture layer, or a `GestureLayerTransitions`
+     * map for per-layer fades. Reduced motion collapses every transition to
+     * `no-animation`.
+     */
+    transition?: TransitionConfig | GestureLayerTransitions;
+}
+interface UseGestureLayerResult {
+    /**
+     * Animated style produced by `useAnimatedStyle` — spread on an
+     * `Animated.View` or pass through `<Motion.View style={...} />`.
+     */
+    style: AnimatedStyle<Record<string, unknown>>;
+    /** Handlers to spread on the receiving `Pressable`. */
+    handlers: UseGestureHandlers;
+}
+/**
+ * A "strongest active layer wins" interactive-feedback primitive. Sits one
+ * step above `useGesture()` — the consumer supplies the per-state target
+ * values, the hook handles the four gesture progress shared values, the
+ * disabled override, the worklet, and the transition.
+ *
+ * Composition model:
+ *
+ * - **Numeric keys** (opacity, scale, borderWidth, etc.) compose via
+ *   clamped-max with `rest` as the floor:
+ *   `out = max(rest, ...for each active gesture layer: lerp(rest, layer, progress))`.
+ *   This matches the MD3 state-layer halo pattern — multiple states active
+ *   simultaneously raise the value to the strongest, not the sum.
+ * - **Color keys** (any string value) compose via priority cascade with
+ *   `interpolateColor`, lowest priority first: `hovered → focused →
+ *   focusVisible → pressed`. Clamped-max doesn't apply to colors; this
+ *   matches the cascade used by the declarative `gesture` prop.
+ * - **Disabled** sits at the top of the cascade for both numeric and color
+ *   keys — when active, it lerps the composed value toward the `disabled`
+ *   target.
+ *
+ * Reach for this when you want MD3 / iOS-translucent state-layer overlays
+ * without rewriting the worklet by hand for every consumer; reach for plain
+ * `useGesture()` when you need a composition model this hook doesn't
+ * express (additive, multiply, per-key custom blends).
+ *
+ * @example MD3 state-layer halo
+ * ```tsx
+ * import { useGestureLayer } from '@onlynative/inertia/gesture-layer'
+ * import Animated from 'react-native-reanimated'
+ * import { Pressable } from 'react-native'
+ *
+ * function SwitchHalo({ disabled }: { disabled?: boolean }) {
+ *   const { style, handlers } = useGestureLayer(
+ *     {
+ *       rest: { opacity: 0, backgroundColor: 'transparent' },
+ *       hovered: { opacity: 0.08, backgroundColor: '#000' },
+ *       focused: { opacity: 0.10, backgroundColor: '#000' },
+ *       pressed: { opacity: 0.12, backgroundColor: '#000' },
+ *     },
+ *     { disabled, transition: { type: 'timing', duration: 150 } },
+ *   )
+ *
+ *   return (
+ *     <Pressable {...handlers}>
+ *       <Animated.View style={style} />
+ *     </Pressable>
+ *   )
+ * }
+ * ```
+ */
+declare function useGestureLayer(states: GestureLayerStates, options?: UseGestureLayerOptions): UseGestureLayerResult;
+
+export { type GestureLayerStates, type GestureLayerStyle, type UseGestureLayerOptions, type UseGestureLayerResult, useGestureLayer };

package/dist/gestureLayer/index.d.ts

@@ -0,0 +1,119 @@
+import { AnimatedStyle } from 'react-native-reanimated';
+import { U as UseGestureHandlers } from '../useGesture-B7A_1DVg.js';
+import { T as TransitionConfig, h as GestureLayerTransitions } from '../types-cU43dEmH.js';
+import 'react';
+import 'react-native';
+
+/**
+ * A single gesture-layer style — a flat map of style keys to a value. Numeric
+ * values participate in clamped-max composition (the "strongest active layer
+ * wins" model used by MD3 state-layer haloes); string values are treated as
+ * colors and composed via priority cascade with `interpolateColor`.
+ *
+ * The hook does not validate that string values are valid colors — passing
+ * something like `borderStyle: 'solid'` will crash inside the worklet. Keep
+ * string values to color strings.
+ */
+type GestureLayerStyle = {
+    [key: string]: number | string | undefined;
+};
+/**
+ * Per-state style maps. Every key is optional; missing layers default to
+ * `rest` (or `0` / `'transparent'` if `rest` is also absent for that key).
+ *
+ * - `rest` — base values, applied when no other layer is active.
+ * - `hovered` / `focused` / `focusVisible` / `pressed` — gesture-driven
+ *   states tracked via the underlying `useGesture` hook. Each owns an
+ *   independent 0↔1 progress that fades the layer in/out per the configured
+ *   transition.
+ * - `disabled` — gated by the JS-side `options.disabled` flag rather than a
+ *   gesture. Sits at the top of the priority cascade and overrides every
+ *   gesture layer when active.
+ */
+interface GestureLayerStates {
+    rest?: GestureLayerStyle;
+    hovered?: GestureLayerStyle;
+    focused?: GestureLayerStyle;
+    focusVisible?: GestureLayerStyle;
+    pressed?: GestureLayerStyle;
+    disabled?: GestureLayerStyle;
+}
+interface UseGestureLayerOptions {
+    /**
+     * When `true`, the `disabled` layer becomes active (or `rest` if `disabled`
+     * is undefined). Animates via the top-level transition or the library
+     * default spring; per-layer transitions (`GestureLayerTransitions`) do not
+     * apply to `disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Transition forwarded to the underlying `useGesture` hook. Either a single
+     * `TransitionConfig` for every gesture layer, or a `GestureLayerTransitions`
+     * map for per-layer fades. Reduced motion collapses every transition to
+     * `no-animation`.
+     */
+    transition?: TransitionConfig | GestureLayerTransitions;
+}
+interface UseGestureLayerResult {
+    /**
+     * Animated style produced by `useAnimatedStyle` — spread on an
+     * `Animated.View` or pass through `<Motion.View style={...} />`.
+     */
+    style: AnimatedStyle<Record<string, unknown>>;
+    /** Handlers to spread on the receiving `Pressable`. */
+    handlers: UseGestureHandlers;
+}
+/**
+ * A "strongest active layer wins" interactive-feedback primitive. Sits one
+ * step above `useGesture()` — the consumer supplies the per-state target
+ * values, the hook handles the four gesture progress shared values, the
+ * disabled override, the worklet, and the transition.
+ *
+ * Composition model:
+ *
+ * - **Numeric keys** (opacity, scale, borderWidth, etc.) compose via
+ *   clamped-max with `rest` as the floor:
+ *   `out = max(rest, ...for each active gesture layer: lerp(rest, layer, progress))`.
+ *   This matches the MD3 state-layer halo pattern — multiple states active
+ *   simultaneously raise the value to the strongest, not the sum.
+ * - **Color keys** (any string value) compose via priority cascade with
+ *   `interpolateColor`, lowest priority first: `hovered → focused →
+ *   focusVisible → pressed`. Clamped-max doesn't apply to colors; this
+ *   matches the cascade used by the declarative `gesture` prop.
+ * - **Disabled** sits at the top of the cascade for both numeric and color
+ *   keys — when active, it lerps the composed value toward the `disabled`
+ *   target.
+ *
+ * Reach for this when you want MD3 / iOS-translucent state-layer overlays
+ * without rewriting the worklet by hand for every consumer; reach for plain
+ * `useGesture()` when you need a composition model this hook doesn't
+ * express (additive, multiply, per-key custom blends).
+ *
+ * @example MD3 state-layer halo
+ * ```tsx
+ * import { useGestureLayer } from '@onlynative/inertia/gesture-layer'
+ * import Animated from 'react-native-reanimated'
+ * import { Pressable } from 'react-native'
+ *
+ * function SwitchHalo({ disabled }: { disabled?: boolean }) {
+ *   const { style, handlers } = useGestureLayer(
+ *     {
+ *       rest: { opacity: 0, backgroundColor: 'transparent' },
+ *       hovered: { opacity: 0.08, backgroundColor: '#000' },
+ *       focused: { opacity: 0.10, backgroundColor: '#000' },
+ *       pressed: { opacity: 0.12, backgroundColor: '#000' },
+ *     },
+ *     { disabled, transition: { type: 'timing', duration: 150 } },
+ *   )
+ *
+ *   return (
+ *     <Pressable {...handlers}>
+ *       <Animated.View style={style} />
+ *     </Pressable>
+ *   )
+ * }
+ * ```
+ */
+declare function useGestureLayer(states: GestureLayerStates, options?: UseGestureLayerOptions): UseGestureLayerResult;
+
+export { type GestureLayerStates, type GestureLayerStyle, type UseGestureLayerOptions, type UseGestureLayerResult, useGestureLayer };

package/dist/gestureLayer/index.js

@@ -0,0 +1,346 @@
+'use strict';
+
+var react = require('react');
+var reactNativeReanimated = require('react-native-reanimated');
+var reactNativeWorklets = require('react-native-worklets');
+var reactNative = require('react-native');
+
+// src/gestureLayer/useGestureLayer.ts
+var DEFAULT_MOTION_CONFIG = {
+  reducedMotion: "user"
+};
+var MotionConfigContext = react.createContext(
+  DEFAULT_MOTION_CONFIG
+);
+function useMotionConfig() {
+  return react.useContext(MotionConfigContext);
+}
+function useShouldReduceMotion() {
+  const { reducedMotion } = useMotionConfig();
+  const osReduced = reactNativeReanimated.useReducedMotion();
+  if (reducedMotion === "never") return false;
+  if (reducedMotion === "always") return true;
+  return osReduced;
+}
+function ensureWorkletEasing(easing) {
+  if (!easing) return void 0;
+  const fn = isEasingFactory(easing) ? easing.factory() : easing;
+  if (reactNativeWorklets.isWorkletFunction(fn)) return fn;
+  const wrapped = (t) => {
+    "worklet";
+    return fn(t);
+  };
+  return wrapped;
+}
+function isEasingFactory(value) {
+  return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
+}
+
+// src/transitions/spring.ts
+var DEFAULT_SPRING = {
+  tension: 170,
+  friction: 26,
+  mass: 1
+};
+function springToReanimated(t) {
+  "worklet";
+  return {
+    stiffness: t.tension ?? DEFAULT_SPRING.tension,
+    damping: t.friction ?? DEFAULT_SPRING.friction,
+    mass: t.mass ?? DEFAULT_SPRING.mass,
+    velocity: t.velocity,
+    restSpeedThreshold: t.restSpeedThreshold,
+    restDisplacementThreshold: t.restDisplacementThreshold
+  };
+}
+
+// src/transitions/resolve.ts
+var DEFAULT_TIMING_DURATION = 250;
+function buildSpring(cfg, toValue, cb) {
+  return reactNativeReanimated.withSpring(toValue, springToReanimated(cfg), cb);
+}
+function buildTiming(cfg, toValue, cb) {
+  return reactNativeReanimated.withTiming(
+    toValue,
+    {
+      duration: cfg.duration ?? DEFAULT_TIMING_DURATION,
+      easing: ensureWorkletEasing(cfg.easing) ?? reactNativeReanimated.Easing.inOut(reactNativeReanimated.Easing.ease)
+    },
+    cb
+  );
+}
+function buildDecay(cfg, cb) {
+  return reactNativeReanimated.withDecay(
+    {
+      velocity: cfg.velocity ?? 0,
+      deceleration: cfg.deceleration,
+      clamp: cfg.clamp
+    },
+    cb
+  );
+}
+function buildOne(cfg, toValue, cb) {
+  if (cfg.type === "no-animation") {
+    return toValue;
+  }
+  if (cfg.type === "decay") return buildDecay(cfg, cb);
+  if (cfg.type === "timing") return buildTiming(cfg, toValue, cb);
+  return buildSpring(cfg, toValue, cb);
+}
+function applyRepeat(animation, repeat) {
+  if (repeat === void 0) return animation;
+  if (repeat === "infinite") {
+    return reactNativeReanimated.withRepeat(animation, -1, true);
+  }
+  if (typeof repeat === "number") {
+    return reactNativeReanimated.withRepeat(animation, repeat, true);
+  }
+  const count = repeat.count === "infinite" ? -1 : repeat.count;
+  const alternate = repeat.alternate ?? true;
+  return reactNativeReanimated.withRepeat(animation, count, alternate);
+}
+function applyDelay(animation, delay) {
+  if (!delay || delay <= 0) return animation;
+  return reactNativeReanimated.withDelay(delay, animation);
+}
+function resolveTransition(config, toValue, callback) {
+  const cfg = config ?? { type: "spring" };
+  const base = buildOne(cfg, toValue, callback);
+  const repeated = applyRepeat(base, repeatOf(cfg));
+  return applyDelay(repeated, delayOf(cfg));
+}
+function repeatOf(cfg) {
+  if (cfg.type === "no-animation" || cfg.type === "decay") return void 0;
+  return cfg.repeat;
+}
+function delayOf(cfg) {
+  if (cfg.type === "no-animation") return void 0;
+  return cfg.delay;
+}
+
+// src/transitions/keys.ts
+var TRANSITION_CONFIG_KEYS = /* @__PURE__ */ new Set([
+  "type",
+  "tension",
+  "friction",
+  "mass",
+  "velocity",
+  "restSpeedThreshold",
+  "restDisplacementThreshold",
+  "duration",
+  "easing",
+  "delay",
+  "repeat",
+  "deceleration",
+  "clamp"
+]);
+function isTopLevelTransition(t) {
+  if (t === null || typeof t !== "object") return false;
+  const keys = Object.keys(t);
+  if (keys.length === 0) return false;
+  return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
+}
+var modality = "keyboard";
+var installed = false;
+function setKeyboard() {
+  modality = "keyboard";
+}
+function setPointer() {
+  modality = "pointer";
+}
+function ensureInstalled() {
+  if (installed) return;
+  if (reactNative.Platform.OS !== "web") return;
+  if (typeof document === "undefined") return;
+  document.addEventListener("keydown", setKeyboard, true);
+  document.addEventListener("mousedown", setPointer, true);
+  document.addEventListener("pointerdown", setPointer, true);
+  document.addEventListener("touchstart", setPointer, true);
+  installed = true;
+}
+function isFocusVisible() {
+  if (reactNative.Platform.OS !== "web") return true;
+  ensureInstalled();
+  return modality === "keyboard";
+}
+
+// src/values/useGesture.ts
+function useGesture(transition) {
+  const pressed = reactNativeReanimated.useSharedValue(0);
+  const focused = reactNativeReanimated.useSharedValue(0);
+  const focusVisible = reactNativeReanimated.useSharedValue(0);
+  const hovered = reactNativeReanimated.useSharedValue(0);
+  const shouldReduceMotion = useShouldReduceMotion();
+  const setLayer = react.useCallback(
+    (sv, layer, target) => {
+      const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, transition) ?? { type: "spring" };
+      sv.value = resolveTransition(cfg, target);
+    },
+    // The transition is intentionally read on every call rather than cooked
+    // into the dep array — a fresh literal each render would otherwise
+    // rebuild the handler bag and break composing consumers that key off
+    // handler identity. `transition` is read inside the callback closure;
+    // shared values are stable so the only dep that matters is the reduce-
+    // motion flag.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [shouldReduceMotion]
+  );
+  const handlers = react.useMemo(
+    () => ({
+      onPressIn: () => setLayer(pressed, "pressed", 1),
+      onPressOut: () => setLayer(pressed, "pressed", 0),
+      onHoverIn: () => setLayer(hovered, "hovered", 1),
+      onHoverOut: () => setLayer(hovered, "hovered", 0),
+      onFocus: () => {
+        setLayer(focused, "focused", 1);
+        if (isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
+      },
+      onBlur: () => {
+        setLayer(focused, "focused", 0);
+        setLayer(focusVisible, "focusVisible", 0);
+      }
+    }),
+    [setLayer, pressed, focused, focusVisible, hovered]
+  );
+  return { pressed, focused, focusVisible, hovered, handlers };
+}
+function layerTransition(layer, transition) {
+  if (!transition) return void 0;
+  if (isTopLevelTransition(transition)) return transition;
+  return transition[layer];
+}
+
+// src/gestureLayer/useGestureLayer.ts
+function useGestureLayer(states, options = {}) {
+  const { disabled: isDisabled = false, transition } = options;
+  const shouldReduceMotion = useShouldReduceMotion();
+  const gesture = useGesture(transition);
+  const disabledProgress = reactNativeReanimated.useSharedValue(0);
+  react.useEffect(() => {
+    const target = isDisabled ? 1 : 0;
+    const cfg = shouldReduceMotion ? { type: "no-animation" } : disabledTransition(transition) ?? { type: "spring" };
+    disabledProgress.value = resolveTransition(cfg, target);
+  }, [isDisabled, shouldReduceMotion, transition, disabledProgress]);
+  const meta = react.useMemo(() => {
+    const layers = {
+      rest: states.rest,
+      hovered: states.hovered,
+      focused: states.focused,
+      focusVisible: states.focusVisible,
+      pressed: states.pressed,
+      disabled: states.disabled
+    };
+    const sources = [
+      layers.rest,
+      layers.hovered,
+      layers.focused,
+      layers.focusVisible,
+      layers.pressed,
+      layers.disabled
+    ];
+    const keySet = /* @__PURE__ */ new Set();
+    for (const src of sources) {
+      if (!src) continue;
+      for (const k in src) if (src[k] !== void 0) keySet.add(k);
+    }
+    const keys = Array.from(keySet);
+    const types = {};
+    const restValues = {};
+    for (const k of keys) {
+      let firstDefined;
+      for (const src of sources) {
+        if (src && src[k] !== void 0) {
+          firstDefined = src[k];
+          break;
+        }
+      }
+      const isColor = typeof firstDefined === "string";
+      types[k] = isColor ? "color" : "number";
+      const restRaw = layers.rest ? layers.rest[k] : void 0;
+      restValues[k] = restRaw !== void 0 ? restRaw : isColor ? "transparent" : 0;
+    }
+    return { layers, keys, types, restValues };
+  }, [
+    states.rest,
+    states.hovered,
+    states.focused,
+    states.focusVisible,
+    states.pressed,
+    states.disabled
+  ]);
+  const style = reactNativeReanimated.useAnimatedStyle(() => {
+    const { layers, keys, types, restValues } = meta;
+    const ph = gesture.hovered.value;
+    const pf = gesture.focused.value;
+    const pfv = gesture.focusVisible.value;
+    const pp = gesture.pressed.value;
+    const pd = disabledProgress.value;
+    const hoveredLayer = layers.hovered;
+    const focusedLayer = layers.focused;
+    const focusVisibleLayer = layers.focusVisible;
+    const pressedLayer = layers.pressed;
+    const disabledLayer = layers.disabled;
+    const out = {};
+    for (let i = 0; i < keys.length; i++) {
+      const k = keys[i];
+      const isColor = types[k] === "color";
+      const rest = restValues[k];
+      if (isColor) {
+        let v = rest;
+        if (hoveredLayer && ph > 0 && hoveredLayer[k] !== void 0) {
+          v = reactNativeReanimated.interpolateColor(ph, [0, 1], [v, hoveredLayer[k]]);
+        }
+        if (focusedLayer && pf > 0 && focusedLayer[k] !== void 0) {
+          v = reactNativeReanimated.interpolateColor(pf, [0, 1], [v, focusedLayer[k]]);
+        }
+        if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[k] !== void 0) {
+          v = reactNativeReanimated.interpolateColor(pfv, [0, 1], [v, focusVisibleLayer[k]]);
+        }
+        if (pressedLayer && pp > 0 && pressedLayer[k] !== void 0) {
+          v = reactNativeReanimated.interpolateColor(pp, [0, 1], [v, pressedLayer[k]]);
+        }
+        if (disabledLayer && pd > 0 && disabledLayer[k] !== void 0) {
+          v = reactNativeReanimated.interpolateColor(pd, [0, 1], [v, disabledLayer[k]]);
+        }
+        out[k] = v;
+      } else {
+        const base = rest;
+        let m = base;
+        if (hoveredLayer && ph > 0 && hoveredLayer[k] !== void 0) {
+          const c = base + (hoveredLayer[k] - base) * ph;
+          if (c > m) m = c;
+        }
+        if (focusedLayer && pf > 0 && focusedLayer[k] !== void 0) {
+          const c = base + (focusedLayer[k] - base) * pf;
+          if (c > m) m = c;
+        }
+        if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[k] !== void 0) {
+          const c = base + (focusVisibleLayer[k] - base) * pfv;
+          if (c > m) m = c;
+        }
+        if (pressedLayer && pp > 0 && pressedLayer[k] !== void 0) {
+          const c = base + (pressedLayer[k] - base) * pp;
+          if (c > m) m = c;
+        }
+        if (disabledLayer && pd > 0 && disabledLayer[k] !== void 0) {
+          m = m + (disabledLayer[k] - m) * pd;
+        }
+        out[k] = m;
+      }
+    }
+    return out;
+  });
+  return {
+    style,
+    handlers: gesture.handlers
+  };
+}
+function disabledTransition(transition) {
+  if (!transition) return void 0;
+  if (isTopLevelTransition(transition)) return transition;
+  return void 0;
+}
+
+exports.useGestureLayer = useGestureLayer;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map