@waveso/ui 0.16.0 → 0.17.0

package/dist/styles.css

@@ -842,8 +842,12 @@
  * cascade, with NO `!important` (banned — see feedback_security). The
  * resting/enter/exit declarations stay layered so `group-has` still wins.
  *
- * `0.001px` resting blur defeats Lightning CSS's `blur(0) → blur()`
- * minification (which emits invalid CSS); it is visually equivalent to 0. */
+ * The resting state declares NO `filter`. It stays `none`, and `none` blends
+ * with the starting/ending `blur()` as a zero blur (how CSS interpolates
+ * `none` with a filter list), so the transitions still run. Don't add a
+ * resting `blur()`: Lightning CSS minifies `blur(0)` to the invalid `blur()`,
+ * and a stand-in like `blur(0.001px)` is not invisible in WebKit, which draws
+ * any non-zero blur at a minimum radius and softens the whole surface. */
 
 /* `motion-scrim` — opacity only, no blur. For full-screen backdrops: animating
  * blur across the whole viewport janks (a flat dim shows none anyway). The
@@ -865,7 +869,6 @@
  * tier per surface (don't compose — each declares its own unlayered transition).
  * Companion idioms: `motion-color` (controls) and `motion-scrim` (backdrops). */
 @utility motion-scale-sm {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -875,7 +878,6 @@
   }
 }
 @utility motion-scale-md {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -885,7 +887,6 @@
   }
 }
 @utility motion-scale-lg {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -899,7 +900,6 @@
  * trigger's `data-[side]` (Base UI sets it) and settles toward it; default /
  * side=bottom rises up. Opacity + blur + translate (`--offset-*`), NO scale. */
 @utility motion-slide-sm {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -919,7 +919,6 @@
   &[data-side=inline-end][data-ending-style] { translate: var(--offset-sm) 0; }
 }
 @utility motion-slide-md {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -939,7 +938,6 @@
   &[data-side=inline-end][data-ending-style] { translate: var(--offset-md) 0; }
 }
 @utility motion-slide-lg {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -962,7 +960,6 @@
 /* `motion-fade-*` — fade in place: opacity + blur, no transform. The signature
  * blur-fade for content that should appear without moving or scaling. */
 @utility motion-fade-sm {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -970,7 +967,6 @@
   }
 }
 @utility motion-fade-md {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -978,7 +974,6 @@
   }
 }
 @utility motion-fade-lg {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -991,7 +986,6 @@
  * recipe with one transition. Don't try `motion-scale-md motion-slide-md`: their
  * transitions collide and scale won't animate. md only (no sm/lg consumer). */
 @utility motion-pop-md {
-  filter: blur(0.001px);
   scale: 1;
   translate: 0;
   /* Pop from the anchored EDGE, centered along it — symmetric left/right for

package/dist/swipe-deck.d.ts

@@ -0,0 +1,98 @@
+import { ButtonProps } from "./button.js";
+import * as React from "react";
+//#region src/swipe-deck.d.ts
+type SwipeDirection = "left" | "right" | "up" | "down";
+type SwipeDeckLayout = "stack" | "fan" | "cascade" | "pile";
+interface SwipeDeckSwipeDetails {
+  /** The `value` of the card that left. */
+  value: string;
+  /** The direction it left in. */
+  direction: SwipeDirection;
+}
+type SwipeDeckProps = React.ComponentProps<"div"> & {
+  /**
+   * Called once a card has left the deck. Remove it from your list to discard
+   * it, or move it to the end of your list to cycle it to the back.
+   */
+  onSwipe?: (details: SwipeDeckSwipeDetails) => void;
+  /** The directions a card can leave in. Defaults to left and right. */
+  directions?: readonly SwipeDirection[];
+  /** Stops cards leaving by pointer, keyboard or action. */
+  disabled?: boolean;
+  /**
+   * How the cards behind the front one sit: `stack` peeks them above it, `fan`
+   * turns them out like a hand of cards, `cascade` steps them up and to the
+   * side, and `pile` scatters them. Defaults to `stack`.
+   */
+  layout?: SwipeDeckLayout;
+  /** How far the cards behind spread out, from 0 (not at all) to 2. Defaults to 0.5. */
+  spread?: number;
+  /** How much each card behind shrinks, from 0 (not at all) to 1. Defaults to 0.5. */
+  depth?: number;
+  /** How many cards show, the front one included; at least 1. Defaults to 4. */
+  visible?: number;
+};
+type SwipeDeckItemProps = React.ComponentProps<"div"> & {
+  /** Names the card in `onSwipe`. Use the same id as its `key`. */
+  value: string;
+};
+type SwipeDeckEmptyProps = React.ComponentProps<"div">;
+type SwipeDeckActionProps = ButtonProps & {
+  /** The direction the front card leaves in when pressed. */
+  direction: SwipeDirection;
+};
+/**
+ * A pile of cards people swipe away: drag or throw the front card, press an
+ * arrow key while the deck is focused, or use a `SwipeDeckAction`. A let-go
+ * card whose position and throw carry it past a quarter of its width leaves:
+ * it slides out the way it is heading until clear of the stack, held by a
+ * spring that a hard throw runs out against, then fades. Short of that, it
+ * springs back. Your list stays the source of truth — `onSwipe` tells you
+ * which card left and which way, and you remove it or move it to the back.
+ *
+ * End the deck with a `SwipeDeckEmpty`: it lies under the last card, so
+ * dragging that card shows what comes next. The deck carries `data-empty`
+ * once no card is in front (the last one leaving, or none left), for styles
+ * of your own.
+ *
+ * Give the deck an `aria-label`. Screen readers hear the next card after each
+ * swipe: its `aria-label` when it has one, otherwise all of its text.
+ */
+declare function SwipeDeck({ onSwipe, directions, disabled, layout, spread, depth, visible, className, style, onKeyDown, children, ref, ...props }: SwipeDeckProps): React.JSX.Element;
+/**
+ * One card in the deck. It sits in the deck's first grid cell with every other
+ * card, so the deck takes the size of its largest card.
+ *
+ * Styling hooks: `data-front` on the top card, `data-swiping` while it is
+ * dragged, `data-leaving` from the moment it leaves, `data-ending-style` once
+ * it is clear of the stack and fading (the `motion-fade-lg` recipe), and
+ * `data-swipe-direction` for the way it leans or leaves. CSS variables:
+ * `--swipe-deck-index` (its place in the pile, 0 at the front),
+ * `--swipe-deck-place` (that place as it springs from one to the next, less
+ * the lift while the front card is dragged out, as `--swipe-deck-slot`),
+ * `--swipe-deck-movement-x` / `-y` in px, and `--swipe-deck-progress` from 0
+ * at rest to 1 where letting go makes the card leave.
+ *
+ * The card owns its translate, rotate and scale, so its motion recipe can only
+ * be a `motion-fade-*` one: a recipe that transitions those would lag every
+ * drag.
+ */
+declare function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCapture, onDragStart, ...props }: SwipeDeckItemProps): React.JSX.Element;
+/**
+ * What the deck shows once its cards run out: a message, an action (start
+ * over, carry on), anything you put in it. It sits where the cards sit, at
+ * their size, inside a dashed outline of their shape (`data-slot`
+ * `swipe-deck-empty-outline`, to restyle or hide). It is drawn as soon as one
+ * card is left and has come to rest, under that card, so dragging it shows
+ * what comes next; it
+ * can be reached (Tab, clicks) and screen readers hear it (its `aria-label`,
+ * or its text) once that last card has gone too.
+ */
+declare function SwipeDeckEmpty({ className, children, ref, ...props }: SwipeDeckEmptyProps): React.JSX.Element;
+/**
+ * A button that sends the front card off in `direction`: the way to swipe
+ * without dragging. Disabled when the deck is empty or can't go that way.
+ */
+declare function SwipeDeckAction({ direction, disabled, onClick, ...props }: SwipeDeckActionProps): React.JSX.Element;
+//#endregion
+export { SwipeDeck, SwipeDeckAction, type SwipeDeckActionProps, SwipeDeckEmpty, type SwipeDeckEmptyProps, SwipeDeckItem, type SwipeDeckItemProps, type SwipeDeckLayout, type SwipeDeckProps, type SwipeDeckSwipeDetails, type SwipeDirection };

package/dist/swipe-deck.js

@@ -0,0 +1,931 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { Button } from "./button.js";
+import { mergeRefs } from "./lib/merge-refs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { animate, useMotionValue, useReducedMotion } from "motion/react";
+//#region src/swipe-deck.tsx
+const DEFAULT_DIRECTIONS = ["left", "right"];
+const KEY_DIRECTIONS = {
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	ArrowUp: "up",
+	ArrowDown: "down"
+};
+/** How far (px) a press moves before it becomes a drag, so taps stay clicks. */
+const DRAG_SLOP = 6;
+/** A card leaves when it comes to rest past this share of its width (or height). */
+const LEAVE_SHARE = .25;
+/** Only pointer samples this recent (ms) set the release speed. */
+const VELOCITY_WINDOW = 100;
+/**
+* How much a throw counts: its release speed adds this many seconds' worth of
+* travel to where the card is, to decide whether it leaves and which way.
+*/
+const THROW_TIME = .25;
+/** A leaving card's exit point is this far (px) past the stack's edge, shadow and all. */
+const CLEARANCE = 16;
+const RETURN_SPRING = {
+	type: "spring",
+	stiffness: 400,
+	damping: 32
+};
+/**
+* Carries a leaving card to its exit point. A slow card slides out on it; a
+* thrown one brings its speed and runs out against it, so the harder the
+* throw, the harder the pull back: a limit, not a coast to anywhere.
+*/
+const EXIT_SPRING = {
+	type: "spring",
+	stiffness: 650,
+	damping: 42
+};
+/** A leaving card fades once clear of the stack and slowed below this (px/s). */
+const CAUGHT_SPEED = 200;
+/** Moves a card from one place in the pile to the next. */
+const PLACE_SPRING = {
+	type: "spring",
+	stiffness: 260,
+	damping: 24
+};
+/** How far (in places) the cards behind lift toward the front as it's dragged out. */
+const LIFT = .4;
+/** On mount, the cards behind wait this long (s) for the front card to fade in. */
+const ENTER_LEAD = .15;
+/** Then each card behind comes this long (s) after the one before. */
+const ENTER_STAGGER = .06;
+/** And grows in from this size, the zoom recipes' md step (`--scale-md`). */
+const ENTER_SCALE = .9;
+/** Dash and gap (px) of `SwipeDeckEmpty`'s outline. */
+const OUTLINE_DASH = 8;
+const OUTLINE_GAP = 6;
+/** Points drawn per corner of that outline. */
+const OUTLINE_CORNER_STEPS = 24;
+/** Presses on these inside a card stay theirs: a slider's thumb, a text box. */
+const FIELD_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [role=slider]";
+/** Keeps the browser's own panning on the axis the deck doesn't swipe along. */
+function touchAction(directions) {
+	const horizontal = directions.some(isHorizontal);
+	const vertical = directions.some((direction) => !isHorizontal(direction));
+	if (horizontal && vertical) return "touch-none";
+	return horizontal ? "touch-pan-y" : "touch-pan-x";
+}
+function isHorizontal(direction) {
+	return direction === "left" || direction === "right";
+}
+/** Lets the cards behind settle back from a lift. */
+function releaseLift(lift, isInstant) {
+	if (isInstant) lift.jump(0);
+	else animate(lift, 0, PLACE_SPRING);
+}
+/**
+* Resolves once an element's running transitions and animations end. jsdom
+* has no Web Animations, and an endless animation of your own would never
+* end, so neither is waited for.
+*/
+function transitionsEnd(element) {
+	const animations = typeof element.getAnimations === "function" ? element.getAnimations().filter((animation) => animation.effect?.getComputedTiming().endTime !== Infinity) : [];
+	return Promise.allSettled(animations.map((animation) => animation.finished));
+}
+/** `value` kept within `min`–`max`, or `fallback` when it isn't a number. */
+function within(value, min, max, fallback) {
+	return Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback;
+}
+/**
+* Three steady numbers in [-0.5, 0.5] from a card's value: where it lies in a
+* `pile`, the same on every render and server.
+*/
+function scatterOf(value) {
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index++) hash = Math.imul(hash ^ value.charCodeAt(index), 16777619);
+	const next = () => {
+		hash ^= hash << 13;
+		hash ^= hash >>> 17;
+		hash ^= hash << 5;
+		return (hash >>> 0) % 1e3 / 1e3 - .5;
+	};
+	return [
+		next(),
+		next(),
+		next()
+	];
+}
+/** Layout size, without the transform a moving card carries. */
+function sizeOf(element) {
+	return {
+		width: element.offsetWidth,
+		height: element.offsetHeight
+	};
+}
+/** Whether a card moved by (x, y) is off the stack. */
+function isClear(x, y, size) {
+	return Math.abs(x) >= size.width || Math.abs(y) >= size.height;
+}
+/**
+* Where a card at (x, y), heading along (dx, dy), first sits `CLEARANCE` past
+* the stack's edge: the nearer of the side edges and the top or bottom edge.
+*/
+function exitPoint(x, y, [dx, dy], size) {
+	const length = Math.hypot(dx, dy);
+	const ux = dx / length;
+	const uy = dy / length;
+	const steps = [ux === 0 ? Infinity : (Math.sign(ux) * (size.width + CLEARANCE) - x) / ux, uy === 0 ? Infinity : (Math.sign(uy) * (size.height + CLEARANCE) - y) / uy];
+	const step = Math.max(0, Math.min(...steps));
+	return [x + step * ux, y + step * uy];
+}
+/** How far a movement goes toward a direction; negative when it goes away. */
+function reach(direction, x, y) {
+	switch (direction) {
+		case "right": return x;
+		case "left": return -x;
+		case "down": return y;
+		case "up": return -y;
+	}
+}
+/**
+* The allowed direction a movement leans furthest into, and how far it goes
+* there as a share of the distance that makes a card leave (1 or more leaves).
+*/
+function lean(directions, x, y, size) {
+	let best = {
+		direction: void 0,
+		share: 0
+	};
+	for (const direction of directions) {
+		const length = isHorizontal(direction) ? size.width : size.height;
+		const share = reach(direction, x, y) / Math.max(length * LEAVE_SHARE, 1);
+		if (share > best.share) best = {
+			direction,
+			share
+		};
+	}
+	return best;
+}
+/** Pointer speed (px/s) over the samples taken just before `time`. */
+function releaseVelocity(samples, time) {
+	const recent = samples.filter((sample) => time - sample.time <= VELOCITY_WINDOW);
+	const first = recent[0];
+	const last = recent.at(-1);
+	if (!first || !last || last.time <= first.time) return [0, 0];
+	const elapsed = (last.time - first.time) / 1e3;
+	return [(last.x - first.x) / elapsed, (last.y - first.y) / elapsed];
+}
+const SwipeDeckContext = React.createContext(null);
+function useSwipeDeckContext(part) {
+	const context = React.useContext(SwipeDeckContext);
+	if (!context) throw new Error(`${part} must be used within a SwipeDeck.`);
+	return context;
+}
+/**
+* A pile of cards people swipe away: drag or throw the front card, press an
+* arrow key while the deck is focused, or use a `SwipeDeckAction`. A let-go
+* card whose position and throw carry it past a quarter of its width leaves:
+* it slides out the way it is heading until clear of the stack, held by a
+* spring that a hard throw runs out against, then fades. Short of that, it
+* springs back. Your list stays the source of truth — `onSwipe` tells you
+* which card left and which way, and you remove it or move it to the back.
+*
+* End the deck with a `SwipeDeckEmpty`: it lies under the last card, so
+* dragging that card shows what comes next. The deck carries `data-empty`
+* once no card is in front (the last one leaving, or none left), for styles
+* of your own.
+*
+* Give the deck an `aria-label`. Screen readers hear the next card after each
+* swipe: its `aria-label` when it has one, otherwise all of its text.
+*/
+function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false, layout = "stack", spread = .5, depth = .5, visible = 4, className, style, onKeyDown, children, ref, ...props }) {
+	const rootRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(rootRef, ref), [ref]);
+	const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+	const finishedRef = React.useRef(/* @__PURE__ */ new Map());
+	const statusRef = React.useRef(null);
+	const emptyRef = React.useRef(null);
+	const sizeObserverRef = React.useRef(null);
+	const lift = useMotionValue(0);
+	const [order, setOrder] = React.useState([]);
+	const [leavingList, setLeavingList] = React.useState([]);
+	const [isReady, setIsReady] = React.useState(false);
+	const onSwipeRef = React.useRef(onSwipe);
+	React.useEffect(() => {
+		onSwipeRef.current = onSwipe;
+	});
+	const readOrder = React.useCallback(() => [...itemsRef.current].sort(([, a], [, b]) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([value]) => value), []);
+	const syncOrder = React.useCallback(() => {
+		const items = itemsRef.current;
+		const next = readOrder();
+		setOrder((previous) => previous.length === next.length && previous.every((value, index) => value === next[index]) ? previous : next);
+		const answered = /* @__PURE__ */ new Set();
+		for (const [value, followers] of finishedRef.current) {
+			const index = next.indexOf(value);
+			const hasMoved = followers.some((follower) => {
+				const followerIndex = next.indexOf(follower);
+				return followerIndex !== -1 && followerIndex < index;
+			});
+			if (index === -1 || hasMoved) {
+				answered.add(value);
+				finishedRef.current.delete(value);
+			}
+		}
+		setLeavingList((previous) => {
+			const kept = previous.filter((value) => items.has(value) && !answered.has(value));
+			return kept.length === previous.length ? previous : kept;
+		});
+	}, [readOrder]);
+	React.useLayoutEffect(() => {
+		syncOrder();
+	});
+	React.useLayoutEffect(() => {
+		setIsReady(true);
+	}, []);
+	React.useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const observer = new MutationObserver(syncOrder);
+		observer.observe(root, { childList: true });
+		return () => observer.disconnect();
+	}, [syncOrder]);
+	const sizeObserver = React.useCallback(() => {
+		sizeObserverRef.current ??= new ResizeObserver(() => {
+			const root = rootRef.current;
+			const cards = [...itemsRef.current.values()];
+			if (!root || cards.length === 0) return;
+			const width = Math.max(...cards.map(({ element }) => element.offsetWidth));
+			const height = Math.max(...cards.map(({ element }) => element.offsetHeight));
+			root.style.setProperty("--swipe-deck-card-width", `${width}px`);
+			root.style.setProperty("--swipe-deck-card-height", `${height}px`);
+		});
+		return sizeObserverRef.current;
+	}, []);
+	React.useEffect(() => () => sizeObserverRef.current?.disconnect(), []);
+	const register = React.useCallback((value, record) => {
+		itemsRef.current.set(value, record);
+		sizeObserver().observe(record.element);
+		syncOrder();
+		return () => {
+			if (itemsRef.current.get(value) === record) {
+				itemsRef.current.delete(value);
+				sizeObserverRef.current?.unobserve(record.element);
+				syncOrder();
+			}
+		};
+	}, [sizeObserver, syncOrder]);
+	const focusDeck = React.useCallback(() => rootRef.current?.focus(), []);
+	const [settledFront, setSettledFront] = React.useState();
+	React.useEffect(() => lift.on("change", (latest) => {
+		rootRef.current?.style.setProperty("--swipe-deck-lift", String(latest));
+	}), [lift]);
+	const leave = React.useCallback((value) => {
+		setLeavingList((previous) => previous.includes(value) ? previous : [...previous, value]);
+	}, []);
+	const finish = React.useCallback((details) => {
+		const current = readOrder();
+		finishedRef.current.set(details.value, current.slice(current.indexOf(details.value) + 1));
+		onSwipeRef.current?.(details);
+	}, [readOrder]);
+	const leaving = React.useMemo(() => new Set(leavingList), [leavingList]);
+	const positions = React.useMemo(() => new Map(order.filter((value) => !leaving.has(value)).map((value, index) => [value, index])), [order, leaving]);
+	const front = order.find((value) => !leaving.has(value));
+	const swipeFront = React.useCallback((direction) => {
+		if (disabled || front === void 0 || !directions.includes(direction)) return;
+		itemsRef.current.get(front)?.swipe(direction);
+	}, [
+		directions,
+		disabled,
+		front
+	]);
+	const announcedRef = React.useRef(void 0);
+	React.useEffect(() => {
+		const previous = announcedRef.current;
+		announcedRef.current = front;
+		const status = statusRef.current;
+		if (previous === void 0 || previous === front || !status) return;
+		const element = front === void 0 ? emptyRef.current : itemsRef.current.get(front)?.element;
+		status.textContent = element ? element.getAttribute("aria-label") ?? (element.innerText || element.textContent || "") : "";
+	}, [front]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const direction = KEY_DIRECTIONS[event.key];
+		if (!direction || disabled || !directions.includes(direction)) return;
+		event.preventDefault();
+		swipeFront(direction);
+	};
+	const context = React.useMemo(() => ({
+		directions,
+		disabled,
+		isReady,
+		front,
+		positions,
+		leaving,
+		count: order.length,
+		lift,
+		register,
+		leave,
+		finish,
+		swipeFront,
+		isEmpty: isReady && front === void 0,
+		emptyRef,
+		focusDeck,
+		settledFront,
+		settle: setSettledFront
+	}), [
+		directions,
+		disabled,
+		isReady,
+		front,
+		positions,
+		leaving,
+		order.length,
+		lift,
+		register,
+		leave,
+		finish,
+		swipeFront,
+		focusDeck,
+		settledFront
+	]);
+	return /* @__PURE__ */ jsx(SwipeDeckContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: mergedRef,
+			"data-slot": "swipe-deck",
+			"data-layout": layout,
+			"data-empty": context.isEmpty ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			role: "group",
+			tabIndex: 0,
+			"aria-disabled": disabled || void 0,
+			className: cn("group/swipe-deck relative isolate grid outline-hidden", "ring-focus/50 rounded-lg focus-visible:not-has-data-front:ring-3", className),
+			style: {
+				"--swipe-deck-spread": within(spread, 0, 2, .5),
+				"--swipe-deck-depth": within(depth, 0, 1, .5),
+				"--swipe-deck-visible": Math.round(within(visible, 1, Infinity, 4)),
+				...style
+			},
+			onKeyDown: handleKeyDown,
+			...props,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				ref: statusRef,
+				"data-slot": "swipe-deck-status",
+				role: "status",
+				className: "sr-only"
+			})]
+		})
+	});
+}
+/**
+* One card in the deck. It sits in the deck's first grid cell with every other
+* card, so the deck takes the size of its largest card.
+*
+* Styling hooks: `data-front` on the top card, `data-swiping` while it is
+* dragged, `data-leaving` from the moment it leaves, `data-ending-style` once
+* it is clear of the stack and fading (the `motion-fade-lg` recipe), and
+* `data-swipe-direction` for the way it leans or leaves. CSS variables:
+* `--swipe-deck-index` (its place in the pile, 0 at the front),
+* `--swipe-deck-place` (that place as it springs from one to the next, less
+* the lift while the front card is dragged out, as `--swipe-deck-slot`),
+* `--swipe-deck-movement-x` / `-y` in px, and `--swipe-deck-progress` from 0
+* at rest to 1 where letting go makes the card leave.
+*
+* The card owns its translate, rotate and scale, so its motion recipe can only
+* be a `motion-fade-*` one: a recipe that transitions those would lag every
+* drag.
+*/
+function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCapture, onDragStart, ...props }) {
+	const deck = useSwipeDeckContext("SwipeDeckItem");
+	const { directions, register, leave, finish } = deck;
+	const prefersReducedMotion = useReducedMotion();
+	const elementRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(elementRef, ref), [ref]);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const place = useMotionValue(0);
+	const enterScale = useMotionValue(1);
+	const drivesLiftRef = React.useRef(false);
+	const scatter = React.useMemo(() => scatterOf(value), [value]);
+	const leftTowardRef = React.useRef(null);
+	const stopWatchingRef = React.useRef(null);
+	const dragRef = React.useRef(null);
+	const endDragRef = React.useRef(null);
+	const sizeRef = React.useRef({
+		width: 0,
+		height: 0
+	});
+	const draggedRef = React.useRef(false);
+	const [isSwiping, setIsSwiping] = React.useState(false);
+	const [isFading, setIsFading] = React.useState(false);
+	const [isStarting, setIsStarting] = React.useState(true);
+	const [direction, setDirection] = React.useState();
+	const position = deck.positions.get(value);
+	const isLeaving = deck.leaving.has(value);
+	const isFront = deck.front === value;
+	const directionsRef = React.useRef(directions);
+	const disabledRef = React.useRef(deck.disabled);
+	const reducedMotionRef = React.useRef(prefersReducedMotion);
+	React.useEffect(() => {
+		directionsRef.current = directions;
+		disabledRef.current = deck.disabled;
+		reducedMotionRef.current = prefersReducedMotion;
+		drivesLiftRef.current = isFront && !isLeaving;
+	});
+	React.useEffect(() => {
+		const write = () => {
+			const element = elementRef.current;
+			if (!element) return;
+			const { share } = lean(directionsRef.current, x.get(), y.get(), sizeRef.current);
+			element.style.setProperty("--swipe-deck-movement-x", `${x.get()}px`);
+			element.style.setProperty("--swipe-deck-movement-y", `${y.get()}px`);
+			element.style.setProperty("--swipe-deck-progress", String(Math.min(share, 1)));
+			if (drivesLiftRef.current) deck.lift.set(Math.min(share, 1) * LIFT);
+		};
+		const stopX = x.on("change", write);
+		const stopY = y.on("change", write);
+		const stopPlace = place.on("change", (latest) => {
+			elementRef.current?.style.setProperty("--swipe-deck-place", String(latest));
+		});
+		const stopEnterScale = enterScale.on("change", (latest) => {
+			elementRef.current?.style.setProperty("--swipe-deck-enter-scale", String(latest));
+		});
+		return () => {
+			stopX();
+			stopY();
+			stopPlace();
+			stopEnterScale();
+			if (dragRef.current) releaseLift(deck.lift, reducedMotionRef.current);
+			endDragRef.current?.();
+			stopWatchingRef.current?.();
+			x.stop();
+			y.stop();
+			place.stop();
+			enterScale.stop();
+		};
+	}, [
+		deck.lift,
+		enterScale,
+		place,
+		x,
+		y
+	]);
+	const snapBack = React.useCallback(([vx, vy] = [0, 0]) => {
+		if (prefersReducedMotion) {
+			x.set(0);
+			y.set(0);
+			return;
+		}
+		animate(x, 0, {
+			...RETURN_SPRING,
+			velocity: vx
+		});
+		animate(y, 0, {
+			...RETURN_SPRING,
+			velocity: vy
+		});
+	}, [
+		prefersReducedMotion,
+		x,
+		y
+	]);
+	const fling = React.useCallback((to, [vx, vy] = [0, 0]) => {
+		endDragRef.current?.();
+		setIsSwiping(false);
+		leftTowardRef.current = to;
+		leave(value);
+		setDirection(to);
+		drivesLiftRef.current = false;
+		releaseLift(deck.lift, prefersReducedMotion);
+		setIsStarting(false);
+		if (prefersReducedMotion) {
+			setIsFading(true);
+			return;
+		}
+		const size = sizeRef.current;
+		const aheadX = x.get() + vx * THROW_TIME;
+		const aheadY = y.get() + vy * THROW_TIME;
+		const sign = to === "right" || to === "down" ? 1 : -1;
+		const heading = Math.hypot(aheadX, aheadY) >= 1 ? [aheadX, aheadY] : isHorizontal(to) ? [sign, 0] : [0, sign];
+		const [targetX, targetY] = exitPoint(x.get(), y.get(), heading, size);
+		const headingLength = Math.hypot(...heading);
+		const [ux, uy] = [heading[0] / headingLength, heading[1] / headingLength];
+		const fade = () => {
+			stopWatchingRef.current?.();
+			stopWatchingRef.current = null;
+			setIsFading(true);
+		};
+		const check = () => {
+			const outward = x.getVelocity() * ux + y.getVelocity() * uy;
+			if (isClear(x.get(), y.get(), size) && outward <= CAUGHT_SPEED) fade();
+		};
+		stopWatchingRef.current?.();
+		const stopX = x.on("change", check);
+		const stopY = y.on("change", check);
+		stopWatchingRef.current = () => {
+			stopX();
+			stopY();
+		};
+		const isMainX = Math.abs(targetX - x.get()) >= Math.abs(targetY - y.get());
+		animate(x, targetX, {
+			...EXIT_SPRING,
+			velocity: vx,
+			onComplete: isMainX ? fade : void 0
+		});
+		animate(y, targetY, {
+			...EXIT_SPRING,
+			velocity: vy,
+			onComplete: isMainX ? void 0 : fade
+		});
+	}, [
+		deck.lift,
+		leave,
+		prefersReducedMotion,
+		value,
+		x,
+		y
+	]);
+	React.useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		return register(value, {
+			element,
+			swipe: (to) => {
+				sizeRef.current = sizeOf(element);
+				fling(to);
+			}
+		});
+	}, [
+		fling,
+		register,
+		value
+	]);
+	React.useEffect(() => {
+		const element = elementRef.current;
+		const to = leftTowardRef.current;
+		if (!isFading || !element || !to) return;
+		let isCancelled = false;
+		const frame = requestAnimationFrame(() => {
+			transitionsEnd(element).then(() => {
+				if (isCancelled) return;
+				x.stop();
+				y.stop();
+				finish({
+					value,
+					direction: to
+				});
+			});
+		});
+		return () => {
+			isCancelled = true;
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		finish,
+		isFading,
+		value,
+		x,
+		y
+	]);
+	const wasLeavingRef = React.useRef(false);
+	const isPlacedRef = React.useRef(false);
+	React.useEffect(() => {
+		const target = isLeaving ? 0 : position;
+		if (target === void 0) return;
+		if (wasLeavingRef.current && !isLeaving) {
+			x.jump(0);
+			y.jump(0);
+			place.jump(target);
+			setIsFading(false);
+		} else if (prefersReducedMotion || !isPlacedRef.current) place.jump(target);
+		else animate(place, target, PLACE_SPRING);
+		isPlacedRef.current = true;
+		wasLeavingRef.current = isLeaving;
+	}, [
+		isLeaving,
+		place,
+		position,
+		prefersReducedMotion,
+		x,
+		y
+	]);
+	const enterAtRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!isStarting || position === void 0) return;
+		if (enterAtRef.current === null) {
+			const delay = prefersReducedMotion || position === 0 ? 0 : ENTER_LEAD + (position - 1) * ENTER_STAGGER;
+			enterAtRef.current = performance.now() + delay * 1e3;
+			if (delay > 0) {
+				enterScale.jump(ENTER_SCALE);
+				animate(enterScale, 1, {
+					...PLACE_SPRING,
+					delay
+				});
+			}
+		} else if (position === 0) animate(enterScale, 1, PLACE_SPRING);
+		const wait = position === 0 ? 0 : Math.max(0, enterAtRef.current - performance.now());
+		let frame = 0;
+		const timer = window.setTimeout(() => {
+			frame = requestAnimationFrame(() => setIsStarting(false));
+		}, wait);
+		return () => {
+			window.clearTimeout(timer);
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		enterScale,
+		isStarting,
+		position,
+		prefersReducedMotion
+	]);
+	const { settle } = deck;
+	React.useEffect(() => {
+		const element = elementRef.current;
+		if (!isFront || isStarting || !element) return;
+		let isCancelled = false;
+		const report = () => {
+			transitionsEnd(element).then(() => {
+				if (!isCancelled) settle(value);
+			});
+		};
+		const stopListening = place.on("animationComplete", report);
+		if (!place.isAnimating()) report();
+		return () => {
+			isCancelled = true;
+			stopListening();
+		};
+	}, [
+		isFront,
+		isStarting,
+		place,
+		settle,
+		value
+	]);
+	React.useEffect(() => {
+		if (isFront && !deck.disabled || !dragRef.current) return;
+		endDragRef.current?.();
+		setIsSwiping(false);
+		snapBack();
+		if (!isFront) releaseLift(deck.lift, prefersReducedMotion);
+	}, [
+		deck.disabled,
+		deck.lift,
+		isFront,
+		prefersReducedMotion,
+		snapBack
+	]);
+	const release = (drag, event) => {
+		if (!drag.moved) {
+			snapBack();
+			return;
+		}
+		setIsSwiping(false);
+		draggedRef.current = true;
+		window.setTimeout(() => {
+			draggedRef.current = false;
+		});
+		if (event.type === "pointerup") drag.samples.push({
+			x: event.clientX,
+			y: event.clientY,
+			time: event.timeStamp
+		});
+		const velocity = releaseVelocity(drag.samples, event.timeStamp);
+		if (event.type === "pointerup" && !disabledRef.current) {
+			const ahead = lean(directionsRef.current, x.get() + velocity[0] * THROW_TIME, y.get() + velocity[1] * THROW_TIME, sizeRef.current);
+			if (ahead.direction && ahead.share >= 1) {
+				fling(ahead.direction, velocity);
+				return;
+			}
+		}
+		snapBack(velocity);
+	};
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || event.button !== 0 || !isFront || deck.disabled || dragRef.current) return;
+		const element = event.currentTarget;
+		const field = event.target instanceof Element ? event.target.closest(FIELD_SELECTOR) : null;
+		if (field && element.contains(field)) return;
+		deck.lift.stop();
+		x.stop();
+		y.stop();
+		sizeRef.current = sizeOf(element);
+		const drag = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			originX: x.get(),
+			originY: y.get(),
+			moved: false,
+			samples: [{
+				x: event.clientX,
+				y: event.clientY,
+				time: event.timeStamp
+			}]
+		};
+		dragRef.current = drag;
+		const handleMove = (moveEvent) => {
+			if (moveEvent.pointerId !== drag.pointerId) return;
+			const dx = moveEvent.clientX - drag.startX;
+			const dy = moveEvent.clientY - drag.startY;
+			if (!drag.moved) {
+				if (Math.hypot(dx, dy) < DRAG_SLOP) return;
+				drag.moved = true;
+				element.setPointerCapture(drag.pointerId);
+				setIsSwiping(true);
+			}
+			x.set(drag.originX + dx);
+			y.set(drag.originY + dy);
+			drag.samples.push({
+				x: moveEvent.clientX,
+				y: moveEvent.clientY,
+				time: moveEvent.timeStamp
+			});
+			if (drag.samples.length > 20) drag.samples.shift();
+			setDirection(lean(directionsRef.current, x.get(), y.get(), sizeRef.current).direction);
+		};
+		const handleEnd = (endEvent) => {
+			if (endEvent.pointerId !== drag.pointerId) return;
+			endDrag();
+			release(drag, endEvent);
+		};
+		const endDrag = () => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleEnd);
+			window.removeEventListener("pointercancel", handleEnd);
+			dragRef.current = null;
+			endDragRef.current = null;
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", handleEnd);
+		window.addEventListener("pointercancel", handleEnd);
+		endDragRef.current = endDrag;
+	};
+	const handleClickCapture = (event) => {
+		if (draggedRef.current) {
+			draggedRef.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClickCapture?.(event);
+	};
+	const zIndex = isLeaving ? deck.count + 1 : position === void 0 ? void 0 : deck.count - position;
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergedRef,
+		"data-slot": "swipe-deck-item",
+		role: "group",
+		"data-front": isFront ? "" : void 0,
+		"data-swiping": isSwiping ? "" : void 0,
+		"data-leaving": isLeaving ? "" : void 0,
+		"data-starting-style": isStarting ? "" : void 0,
+		"data-ending-style": isFading ? "" : void 0,
+		"data-swipe-direction": isSwiping || isLeaving ? direction : void 0,
+		inert: isLeaving || position !== void 0 && position > 0,
+		className: cn("motion-fade-lg relative col-start-1 row-start-1 rounded-lg select-none", "[--swipe-deck-slot:calc(var(--swipe-deck-place,0)_-_min(var(--swipe-deck-place,0),1)_*_var(--swipe-deck-lift,0))]", "[--swipe-deck-layout-slot:min(var(--swipe-deck-slot),calc(var(--swipe-deck-visible,4)_-_1))]", "[translate:calc(var(--swipe-deck-movement-x,0px)_+_var(--swipe-deck-layout-x,0px))_calc(var(--swipe-deck-movement-y,0px)_+_var(--swipe-deck-layout-y,0px))]", "[rotate:var(--swipe-deck-layout-rotate,0deg)] [scale:calc(var(--swipe-deck-layout-scale,1)_*_var(--swipe-deck-enter-scale,1))]", "[opacity:clamp(0,calc(var(--swipe-deck-visible,4)_-_var(--swipe-deck-slot)),1)]", "group-data-[layout=stack]/swipe-deck:origin-top", "group-data-[layout=stack]/swipe-deck:[--swipe-deck-layout-y:calc(var(--swipe-deck-layout-slot)_*_var(--swipe-deck-spread,0.5)_*_-32px)]", "group-data-[layout=stack]/swipe-deck:[--swipe-deck-layout-scale:max(0,calc(1_-_var(--swipe-deck-layout-slot)_*_var(--swipe-deck-depth,0.5)_*_0.1))]", "group-data-[layout=fan]/swipe-deck:origin-[90%_90%]", "group-data-[layout=fan]/swipe-deck:[--swipe-deck-layout-rotate:calc(var(--swipe-deck-layout-slot)_*_var(--swipe-deck-spread,0.5)_*_8deg)]", "group-data-[layout=fan]/swipe-deck:[--swipe-deck-layout-scale:max(0,calc(1_-_var(--swipe-deck-layout-slot)_*_var(--swipe-deck-depth,0.5)_*_0.12))]", "group-data-[layout=cascade]/swipe-deck:[--swipe-deck-layout-x:calc(var(--swipe-deck-layout-slot)_*_var(--swipe-deck-spread,0.5)_*_-28px)]", "group-data-[layout=cascade]/swipe-deck:[--swipe-deck-layout-y:calc(var(--swipe-deck-layout-slot)_*_var(--swipe-deck-spread,0.5)_*_-28px)]", "group-data-[layout=cascade]/swipe-deck:[--swipe-deck-layout-scale:max(0,calc(1_-_var(--swipe-deck-layout-slot)_*_var(--swipe-deck-depth,0.5)_*_0.07))]", "group-data-[layout=pile]/swipe-deck:[--swipe-deck-layout-x:calc(var(--swipe-deck-scatter-x)_*_var(--swipe-deck-spread,0.5)_*_56px)]", "group-data-[layout=pile]/swipe-deck:[--swipe-deck-layout-y:calc(var(--swipe-deck-scatter-y)_*_var(--swipe-deck-spread,0.5)_*_44px)]", "group-data-[layout=pile]/swipe-deck:[--swipe-deck-layout-rotate:calc(var(--swipe-deck-scatter-rotate)_*_var(--swipe-deck-spread,0.5)_*_40deg)]", "group-data-[layout=pile]/swipe-deck:[--swipe-deck-layout-scale:max(0,calc(1_-_var(--swipe-deck-layout-slot)_*_var(--swipe-deck-depth,0.5)_*_0.03))]", "ring-focus/50 group-focus-visible/swipe-deck:data-front:ring-3", "data-front:cursor-grab data-swiping:cursor-grabbing group-data-disabled/swipe-deck:data-front:cursor-auto", touchAction(directions), className),
+		style: {
+			zIndex,
+			"--swipe-deck-index": isLeaving ? 0 : position,
+			"--swipe-deck-scatter-x": scatter[0],
+			"--swipe-deck-scatter-y": scatter[1],
+			"--swipe-deck-scatter-rotate": scatter[2],
+			...style
+		},
+		onPointerDown: handlePointerDown,
+		onClickCapture: handleClickCapture,
+		onDragStart: (event) => {
+			onDragStart?.(event);
+			event.preventDefault();
+		},
+		...props
+	});
+}
+/**
+* A rounded rectangle, inset half a pixel so a 1px line sits inside the box as
+* a border would, with corners that are superellipses of `exponent` (2 is a
+* circular arc, 4 a squircle). Returns the path and its length.
+*/
+function outlinePath(width, height, radius, exponent) {
+	const inset = .5;
+	const r = Math.max(0, Math.min(radius, width / 2, height / 2) - inset);
+	const [left, top] = [inset, inset];
+	const [right, bottom] = [width - inset, height - inset];
+	const corners = [
+		[
+			right - r,
+			top + r,
+			-Math.PI / 2
+		],
+		[
+			right - r,
+			bottom - r,
+			0
+		],
+		[
+			left + r,
+			bottom - r,
+			Math.PI / 2
+		],
+		[
+			left + r,
+			top + r,
+			Math.PI
+		]
+	];
+	const points = [];
+	for (const [cx, cy, start] of corners) for (let step = 0; step <= OUTLINE_CORNER_STEPS; step++) {
+		const angle = start + step / OUTLINE_CORNER_STEPS * (Math.PI / 2);
+		const [cos, sin] = [Math.cos(angle), Math.sin(angle)];
+		points.push([cx + r * Math.sign(cos) * Math.abs(cos) ** (2 / exponent), cy + r * Math.sign(sin) * Math.abs(sin) ** (2 / exponent)]);
+	}
+	const length = points.reduce((total, [x, y], index) => {
+		const [px, py] = points[(index + points.length - 1) % points.length];
+		return total + Math.hypot(x - px, y - py);
+	}, 0);
+	return {
+		d: `M ${points.map(([x, y]) => `${x.toFixed(2)} ${y.toFixed(2)}`).join(" L ")} Z`,
+		length
+	};
+}
+/**
+* A 1px dashed outline with long dashes on the box it sits in. CSS ties a
+* dashed border's dash length to its width, so this one is drawn, on the same
+* corners as the cards: squircles where the browser draws them, arcs elsewhere.
+*/
+function DashedOutline() {
+	const svgRef = React.useRef(null);
+	const [outline, setOutline] = React.useState({
+		d: "",
+		length: 0
+	});
+	React.useLayoutEffect(() => {
+		const box = svgRef.current?.parentElement;
+		if (!box) return;
+		const exponent = CSS.supports("corner-shape", "squircle") ? 4 : 2;
+		const draw = () => setOutline(outlinePath(box.offsetWidth, box.offsetHeight, parseFloat(getComputedStyle(box).borderTopLeftRadius), exponent));
+		draw();
+		const observer = new ResizeObserver(draw);
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, []);
+	const period = 14;
+	const pathLength = Math.max(1, Math.round(outline.length / period)) * period;
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "swipe-deck-empty-outline",
+		ref: svgRef,
+		className: "pointer-events-none absolute inset-0 size-full overflow-visible",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: outline.d,
+			pathLength,
+			strokeDasharray: `${OUTLINE_DASH} ${OUTLINE_GAP}`,
+			className: "stroke-shade fill-none"
+		})
+	});
+}
+/**
+* What the deck shows once its cards run out: a message, an action (start
+* over, carry on), anything you put in it. It sits where the cards sit, at
+* their size, inside a dashed outline of their shape (`data-slot`
+* `swipe-deck-empty-outline`, to restyle or hide). It is drawn as soon as one
+* card is left and has come to rest, under that card, so dragging it shows
+* what comes next; it
+* can be reached (Tab, clicks) and screen readers hear it (its `aria-label`,
+* or its text) once that last card has gone too.
+*/
+function SwipeDeckEmpty({ className, children, ref, ...props }) {
+	const deck = useSwipeDeckContext("SwipeDeckEmpty");
+	const { emptyRef, focusDeck, isEmpty } = deck;
+	const isDrawn = deck.isReady && (deck.positions.size === 0 || deck.positions.size === 1 && deck.settledFront === deck.front);
+	const elementRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(elementRef, emptyRef, ref), [emptyRef, ref]);
+	React.useLayoutEffect(() => {
+		if (!isEmpty && elementRef.current?.contains(document.activeElement)) focusDeck();
+	}, [focusDeck, isEmpty]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergedRef,
+		"data-slot": "swipe-deck-empty",
+		inert: !isEmpty,
+		className: cn("text-muted relative col-start-1 row-start-1 flex min-h-(--swipe-deck-card-height) min-w-(--swipe-deck-card-width) flex-col items-center justify-center gap-3 rounded-lg p-6 text-center text-sm", !isDrawn && "invisible", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(DashedOutline, {}), children]
+	});
+}
+/**
+* A button that sends the front card off in `direction`: the way to swipe
+* without dragging. Disabled when the deck is empty or can't go that way.
+*/
+function SwipeDeckAction({ direction, disabled, onClick, ...props }) {
+	const deck = useSwipeDeckContext("SwipeDeckAction");
+	const unavailable = deck.disabled || deck.isReady && deck.front === void 0 || !deck.directions.includes(direction);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "swipe-deck-action",
+		"data-swipe-direction": direction,
+		disabled: disabled || unavailable,
+		focusableWhenDisabled: true,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) deck.swipeFront(direction);
+		},
+		...props
+	});
+}
+//#endregion
+export { SwipeDeck, SwipeDeckAction, SwipeDeckEmpty, SwipeDeckItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [