solid-drift 0.19.0 → 0.20.0

package/README.md

@@ -412,6 +412,32 @@ const { x, y, status } = createDrag(() => card, {
 
 Returns `{ x, y, status }`: the drag offset in pixels and `status` (`"idle"`, `"dragging"`, `"settling"`). SSR-safe: everything rests at 0. Under reduced motion the drag still tracks the pointer (direct manipulation is not animation) but release snaps instantly to the constrained target with no glide.
 
+### `createSwipe(ref, options?)`
+
+Touch swipe gesture recognition: swipe-to-dismiss, carousels. While `createDrag` tracks the pointer continuously, `createSwipe` makes the discrete decision: was that gesture a swipe, and which way? On pointerup it compares travel, duration, and velocity against the thresholds and fires the matching callbacks plus the `lastSwipe` signal. Pointer Events give touch parity for free: mouse, touch, and pen run through the same path. For touch, set `touch-action: pan-y` on a horizontal swipe surface (or `pan-x` for vertical) so the browser does not hijack the gesture; use `none` when recognizing both axes.
+
+```tsx
+import { createSwipe } from "solid-drift"
+
+let deck!: HTMLDivElement
+const { lastSwipe } = createSwipe(() => deck, {
+  onSwipeLeft: () => dismiss(),
+  onSwipeRight: () => keep(),
+})
+<div ref={deck} style={{ "touch-action": "pan-y" }}>card</div>
+```
+
+| Option         | Default | Description                                                              |
+| -------------- | ------- | ------------------------------------------------------------------------ |
+| `threshold`    | `48`    | Minimum travel in px to count as a swipe                                 |
+| `maxDuration`  | `800`   | Maximum gesture duration in ms                                           |
+| `minVelocity`  | `0.4`   | Minimum velocity in px/ms; a fast flick below `threshold` still counts    |
+| `axis`         | `"both"`| `"x"`, `"y"`, or `"both"`                                                |
+| `onSwipe`      | none    | Called for every recognized swipe with `{ direction, distance, velocity, duration, from, to }` |
+| `onSwipeLeft` / `onSwipeRight` / `onSwipeUp` / `onSwipeDown` | none | Per-direction callbacks |
+
+Returns `{ lastSwipe, reset }`. A swipe counts when travel passes `threshold` inside `maxDuration`, or velocity passes `minVelocity`; slow long drags are not swipes. Recognition is not animation, so it works identically under reduced motion; the host decides how to animate the response. SSR-safe: `lastSwipe()` stays null and callbacks never fire.
+
 ### `createTrail(source, options?)`
 
 A signal that replays another signal's past: it returns the value the source had `delay` milliseconds ago, interpolated between samples. Chain trails off one source for follower effects (a cursor with a comet tail, cascading highlights), or trail a scroll progress for a delayed echo of the page. The trail catches up and parks exactly on the latest value when the source rests. The follow loop runs only while the trail is behind.

package/dist/gesture.d.ts

@@ -105,4 +105,86 @@ export interface DragControls {
  * ```
  */
 export declare function createDrag(ref: MaybeElement, options?: DragOptions): DragControls;
+/** Cardinal direction of a recognized swipe. */
+export type SwipeDirection = "left" | "right" | "up" | "down";
+/** Snapshot delivered for a recognized swipe. */
+export interface SwipeDetails {
+    direction: SwipeDirection;
+    /** Primary-axis travel in px. Always positive. */
+    distance: number;
+    /** Primary-axis velocity in px/ms. Always positive. */
+    velocity: number;
+    /** Gesture duration in ms. */
+    duration: number;
+    /** Pointer path endpoints in client pixels. */
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+}
+export interface SwipeOptions {
+    /** Minimum travel in px to count as a swipe. Default 48. */
+    threshold?: number;
+    /** Maximum gesture duration in ms. Default 800. */
+    maxDuration?: number;
+    /**
+     * Minimum primary-axis velocity in px/ms. A fast flick shorter than
+     * `threshold` still counts as a swipe. Default 0.4.
+     */
+    minVelocity?: number;
+    /** Lock recognition to an axis. Default "both". */
+    axis?: DragAxis;
+    /** Called for every recognized swipe. */
+    onSwipe?: (details: SwipeDetails) => void;
+    /** Called for a leftward swipe. */
+    onSwipeLeft?: (details: SwipeDetails) => void;
+    /** Called for a rightward swipe. */
+    onSwipeRight?: (details: SwipeDetails) => void;
+    /** Called for an upward swipe. */
+    onSwipeUp?: (details: SwipeDetails) => void;
+    /** Called for a downward swipe. */
+    onSwipeDown?: (details: SwipeDetails) => void;
+}
+export interface SwipeControls {
+    /** The most recent recognized swipe, or null if none yet. */
+    lastSwipe: Accessor<SwipeDetails | null>;
+    /** Clear the last swipe. */
+    reset: () => void;
+}
+/**
+ * Touch swipe gesture recognition: swipe-to-dismiss, carousels.
+ *
+ * While `createDrag` tracks the pointer continuously, `createSwipe`
+ * makes the discrete decision: was that gesture a swipe, and which
+ * way? On pointerup it compares travel, duration, and velocity
+ * against the thresholds and fires the matching callbacks plus the
+ * `lastSwipe` signal.
+ *
+ * Pointer Events give touch parity for free: mouse, touch, and pen
+ * run through the same path. For touch, set `touch-action: pan-y` on
+ * a horizontal swipe surface (or `pan-x` for vertical) so the browser
+ * does not hijack the gesture; use `none` when recognizing both axes.
+ *
+ * A swipe counts when travel passes `threshold` inside `maxDuration`,
+ * or when velocity passes `minVelocity` (a fast flick). Slow long
+ * drags are not swipes; they belong to `createDrag`.
+ *
+ * Recognition is not animation, so it works identically under
+ * reduced motion; the host decides how to animate the response.
+ * SSR-safe: `lastSwipe()` stays null and callbacks never fire.
+ *
+ * ```tsx
+ * let deck!: HTMLDivElement
+ * const { lastSwipe } = createSwipe(() => deck, {
+ *   onSwipeLeft: () => dismiss(),
+ *   onSwipeRight: () => keep(),
+ * })
+ * <div ref={deck} style={{ "touch-action": "pan-y" }}>card</div>
+ * ```
+ */
+export declare function createSwipe(ref: MaybeElement, options?: SwipeOptions): SwipeControls;
 export {};

package/dist/gesture.js

@@ -205,3 +205,110 @@ export function createDrag(ref, options = {}) {
     onCleanup(() => stopSettle());
     return { x, y, status };
 }
+/**
+ * Touch swipe gesture recognition: swipe-to-dismiss, carousels.
+ *
+ * While `createDrag` tracks the pointer continuously, `createSwipe`
+ * makes the discrete decision: was that gesture a swipe, and which
+ * way? On pointerup it compares travel, duration, and velocity
+ * against the thresholds and fires the matching callbacks plus the
+ * `lastSwipe` signal.
+ *
+ * Pointer Events give touch parity for free: mouse, touch, and pen
+ * run through the same path. For touch, set `touch-action: pan-y` on
+ * a horizontal swipe surface (or `pan-x` for vertical) so the browser
+ * does not hijack the gesture; use `none` when recognizing both axes.
+ *
+ * A swipe counts when travel passes `threshold` inside `maxDuration`,
+ * or when velocity passes `minVelocity` (a fast flick). Slow long
+ * drags are not swipes; they belong to `createDrag`.
+ *
+ * Recognition is not animation, so it works identically under
+ * reduced motion; the host decides how to animate the response.
+ * SSR-safe: `lastSwipe()` stays null and callbacks never fire.
+ *
+ * ```tsx
+ * let deck!: HTMLDivElement
+ * const { lastSwipe } = createSwipe(() => deck, {
+ *   onSwipeLeft: () => dismiss(),
+ *   onSwipeRight: () => keep(),
+ * })
+ * <div ref={deck} style={{ "touch-action": "pan-y" }}>card</div>
+ * ```
+ */
+export function createSwipe(ref, options = {}) {
+    const none = () => null;
+    if (typeof window === "undefined") {
+        return { lastSwipe: none, reset: () => { } };
+    }
+    const { threshold = 48, maxDuration = 800, minVelocity = 0.4, axis = "both", onSwipe, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, } = options;
+    const [lastSwipe, setLastSwipe] = createSignal(null);
+    const fire = (details) => {
+        setLastSwipe(details);
+        onSwipe?.(details);
+        if (details.direction === "left")
+            onSwipeLeft?.(details);
+        else if (details.direction === "right")
+            onSwipeRight?.(details);
+        else if (details.direction === "up")
+            onSwipeUp?.(details);
+        else
+            onSwipeDown?.(details);
+    };
+    const onDown = (event) => {
+        if (event.isPrimary === false)
+            return;
+        const el = ref();
+        if (!el)
+            return;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startT = now();
+        const up = (ev) => {
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", cancel);
+            const dx = ev.clientX - startX;
+            const dy = ev.clientY - startY;
+            const dt = Math.max(now() - startT, 1);
+            // Primary axis, honoring the axis lock.
+            const horizontal = axis === "x" || (axis === "both" && Math.abs(dx) >= Math.abs(dy));
+            const travel = horizontal ? dx : dy;
+            const distance = Math.abs(travel);
+            const velocity = distance / dt;
+            const isSwipe = (distance >= threshold && dt <= maxDuration) ||
+                velocity >= minVelocity;
+            if (!isSwipe || distance === 0)
+                return;
+            const direction = horizontal
+                ? travel > 0
+                    ? "right"
+                    : "left"
+                : travel > 0
+                    ? "down"
+                    : "up";
+            fire({
+                direction,
+                distance,
+                velocity,
+                duration: dt,
+                from: { x: startX, y: startY },
+                to: { x: ev.clientX, y: ev.clientY },
+            });
+        };
+        const cancel = () => {
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", cancel);
+        };
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", cancel);
+    };
+    // Late-bound refs (Solid assigns `ref` after mount) still get the grab.
+    createEffect(() => {
+        const el = ref();
+        if (!el)
+            return;
+        el.addEventListener("pointerdown", onDown);
+        onCleanup(() => el.removeEventListener("pointerdown", onDown));
+    });
+    return { lastSwipe, reset: () => setLastSwipe(null) };
+}

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { createFontSwap, type FontSwapOptions, type FontSwapResult, createTyping
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, type Easing, type EasingName, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
 export type { KineticTypeFrom, KineticTypeOptions, KineticTypeStatus, KineticTypeControls, MotionScene, ScenePlayerStatus, ScenePlayerControls, ShowreelScene, ShowreelSceneKind, CameraKeyframe, CameraOptions, ColorShiftOptions, ColorShiftStatus, ColorShiftControls, TransitionType, TransitionDirection, TransitionOptions, TransitionLayerStyle, TransitionStatus, TransitionControls, BeatOptions, BeatStatus, BeatControls, BeatCutOptions, } from "./motion.js";
-export { createDrag, type DragStatus, type DragAxis, type DragConstraints, type DragEndInfo, type DragOptions, type DragControls, } from "./gesture.js";
+export { createDrag, type DragStatus, type DragAxis, type DragConstraints, type DragEndInfo, type DragOptions, type DragControls, createSwipe, type SwipeDirection, type SwipeDetails, type SwipeOptions, type SwipeControls, } from "./gesture.js";
 export { createStreamReveal, createAgentState, parseDriftSpec, createSpecPlayer, DriftSpecError, } from "./ai.js";
 export type { StreamRevealStatus, StreamRevealOptions, StreamRevealControls, AgentState, AgentStateTransition, AgentStateOptions, AgentStateControls, DriftSpecPrimitive, DriftSpecStep, DriftSpec, SpecPlayerStatus, SpecPlayerHooks, SpecPlayerControls, } from "./ai.js";
 export { createTxLifecycle, createTicker, createMintReveal, createConnectButton, createAgentTx, } from "./web3.js";

package/dist/index.js

@@ -29,7 +29,7 @@ export { createGravity, createPendulum, createFling, } from "./physics.js";
 export { createFontSwap, createTyping, createTextPhysics, createTextTunnel, createTextCutout, createTextGradient, createTextScramble, createTextWave, createCountUp, } from "./typography.js";
 export { easings, cubicBezier, linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeOutExpo, easeOutBack, easeInBack, easeInOutBack, easeOutElastic, easeOutBounce, resolveEasing, } from "./easing.js";
 export { createKineticType, createScenePlayer, createShowreel, createCamera, createColorShift, createTransition, createBeat, createBeatCuts, } from "./motion.js";
-export { createDrag, } from "./gesture.js";
+export { createDrag, createSwipe, } from "./gesture.js";
 export { createStreamReveal, createAgentState, parseDriftSpec, createSpecPlayer, DriftSpecError, } from "./ai.js";
 export { createTxLifecycle, createTicker, createMintReveal, createConnectButton, createAgentTx, } from "./web3.js";
 export { createPoll, shortenAddress, isAddress, formatUnits, parseUnits, CHAINS, createChain, createTokenPrice, createPriceChange, createPriceCompare, createGasPrice, createBalance, createTxReceipt, createBlockNumber, createChainlinkPrice, createNFTMetadata, createENS, createIdenticon, } from "./web3data.js";

package/package.json

@@ -43,5 +43,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.19.0"
+  "version": "0.20.0"
 }