@waveso/ui 0.16.0 → 0.18.0

package/dist/swipe-deck.js

@@ -0,0 +1,1374 @@
+"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"
+};
+/** One step each way, in screen axes (y grows downward). */
+const DIRECTION_VECTORS = {
+	left: [-1, 0],
+	right: [1, 0],
+	up: [0, -1],
+	down: [0, 1]
+};
+/** How far (px) a press moves before it becomes a drag, so taps stay clicks. */
+const DRAG_SLOP = 6;
+/**
+* How hard a card resists being pulled toward a side it can't leave by: the
+* factor in iOS's rubber band, under which a pull moves it less and less,
+* never past its own length.
+*/
+const RUBBER_BAND = .55;
+/** 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 pile'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 pile 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
+};
+/** Brings a card your list moved to the back from its exit point under the pile. */
+const TUCK_SPRING = {
+	type: "spring",
+	stiffness: 240,
+	damping: 28
+};
+/** 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;
+/** A pressed card lifts to this size, under the pointer. */
+const PRESS_SCALE = 1.035;
+const PRESS_SPRING = {
+	type: "spring",
+	stiffness: 420,
+	damping: 34
+};
+/** How far (deg) a dragged card tilts toward the viewer at most. */
+const TILT = 30;
+/** And how far (deg) it turns in its own plane, carried sideways. */
+const SPIN = 6;
+/** The pointer speed (px/s) that tilts a card all the way. */
+const LEAN_SPEED = 1300;
+/** The drag (px) that tilts and turns a card all the way. */
+const LEAN_REACH = 260;
+/** A still pointer stops tilting the card after this long (ms). */
+const LEAN_IDLE = 70;
+/** The depth (px) the tilt is seen from. */
+const PERSPECTIVE = 800;
+const LEAN_SPRING = {
+	type: "spring",
+	stiffness: 240,
+	damping: 28
+};
+/** Lays a card flat and lowers it once it's let go. */
+const FACE_SPRING = {
+	type: "spring",
+	stiffness: 240,
+	damping: 30
+};
+/** 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]";
+const ITEM_SELECTOR = "[data-slot=swipe-deck-item]";
+/**
+* Keeps the browser's own panning on the axis the deck doesn't swipe along,
+* and its pinch zoom everywhere.
+*/
+function touchAction(directions) {
+	const horizontal = directions.some(isHorizontal);
+	const vertical = directions.some((direction) => !isHorizontal(direction));
+	if (horizontal && vertical) return "touch-pinch-zoom";
+	return horizontal ? "touch-pan-y touch-pinch-zoom" : "touch-pan-x touch-pinch-zoom";
+}
+function isHorizontal(direction) {
+	return direction === "left" || direction === "right";
+}
+/** Whether `offset` on an axis is on a side the card can leave by. */
+function isOpenSide(directions, horizontal, offset) {
+	if (offset === 0) return true;
+	const toward = horizontal ? offset > 0 ? "right" : "left" : offset > 0 ? "down" : "up";
+	return directions.includes(toward);
+}
+/** Where a pull of `offset` toward a closed side leaves the card. */
+function resist(offset, length) {
+	if (length <= 0) return 0;
+	return Math.sign(offset) * (1 - 1 / (Math.abs(offset) * RUBBER_BAND / length + 1)) * length;
+}
+/** The pull that `resist` turns into `offset`, to catch a resisted card. */
+function unresist(offset, length) {
+	if (length <= 0) return 0;
+	const share = Math.min(Math.abs(offset) / length, .99);
+	return Math.sign(offset) * (1 / (1 - share) - 1) * length / RUBBER_BAND;
+}
+/** A drag's offset on one axis, resisted when it points to a closed side. */
+function follow(directions, horizontal, pull, length) {
+	return isOpenSide(directions, horizontal, pull) ? pull : resist(pull, length);
+}
+/** 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;
+}
+function isThenable(value) {
+	return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
+function createSwipeEventDetails(cause) {
+	let isCanceled = false;
+	return {
+		...cause,
+		cancel: () => {
+			isCanceled = true;
+		},
+		get isCanceled() {
+			return isCanceled;
+		}
+	};
+}
+const subscribeToNothing = () => () => {};
+/**
+* False while React renders on the server or hydrates what the server sent,
+* true for a render made in the browser.
+*/
+function useIsClientRender() {
+	return React.useSyncExternalStore(subscribeToNothing, () => true, () => false);
+}
+/**
+* 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
+	};
+}
+/**
+* Where a pointer at (clientX, clientY) is on a card, in px from its transform
+* origin, the card's own turn and size taken back out: the middle of its
+* bounding box is where its middle is drawn, however it is turned.
+*/
+function grabPoint(element, clientX, clientY, size) {
+	const box = element.getBoundingClientRect();
+	const style = getComputedStyle(element);
+	const angle = (Number.parseFloat(style.rotate) || 0) * Math.PI / 180;
+	const [scaleX = 1, scaleY = scaleX] = style.scale && style.scale !== "none" ? style.scale.split(" ").map((part) => Number.parseFloat(part) || 1) : [];
+	const dx = clientX - (box.left + box.width / 2);
+	const dy = clientY - (box.top + box.height / 2);
+	const [cos, sin] = [Math.cos(-angle), Math.sin(-angle)];
+	const [originX = 0, originY = 0] = style.transformOrigin.split(" ").map((part) => Number.parseFloat(part) || 0);
+	return [within(size.width / 2 + (dx * cos - dy * sin) / scaleX, 0, size.width, 0) - originX, within(size.height / 2 + (dx * sin + dy * cos) / scaleY, 0, size.height, 0) - originY];
+}
+/** Whether a card's press and tilt have settled, its pose drawn as `none`. */
+function isPoseAtRest(press, spin, tiltX, tiltY) {
+	return Math.abs(press.get() - 1) < 1e-4 && Math.abs(spin.get()) < .001 && Math.abs(tiltX.get()) < .001 && Math.abs(tiltY.get()) < .001;
+}
+/**
+* Whether a card moved by (x, y) is off the pile on the side it's heading for
+* (ux, uy): one dragged out to the right and sent left still has to cross it.
+*/
+function isClear(x, y, extents, [ux, uy]) {
+	return ux > 0 && x >= extents.right || ux < 0 && -x >= extents.left || uy > 0 && y >= extents.down || uy < 0 && -y >= extents.up;
+}
+/**
+* Where a card at (x, y), heading along (dx, dy), first sits `CLEARANCE` past
+* the pile's edge: the nearer of the side edges and the top or bottom edge.
+*/
+function exitPoint(x, y, [dx, dy], extents) {
+	const length = Math.hypot(dx, dy);
+	const ux = dx / length;
+	const uy = dy / length;
+	const edgeX = ux > 0 ? extents.right + CLEARANCE : -extents.left - CLEARANCE;
+	const edgeY = uy > 0 ? extents.down + CLEARANCE : -extents.up - CLEARANCE;
+	const steps = [ux === 0 ? Infinity : (edgeX - x) / ux, uy === 0 ? Infinity : (edgeY - 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) {
+	const [dx, dy] = DIRECTION_VECTORS[direction];
+	return x * dx + y * dy;
+}
+/**
+* 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];
+}
+function clampUnit(value) {
+	return Math.min(1, Math.max(-1, value));
+}
+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 (or of
+* its height, up and down) leaves:
+* it slides out the way it is heading until clear of the pile, held by a
+* spring that a hard throw runs out against, then fades. Short of that, it
+* springs back. Pressed, a card lifts under the pointer; dragged, it tilts
+* with the throw.
+*
+* Your list stays the source of truth. `onSwipe` comes the moment a card is
+* sent off: count it there, or cancel to keep it. `onSwipeComplete` comes once
+* it has gone: remove it from your list then, not in `onSwipe`, where removing
+* it would cut its exit short. To cycle the deck instead, move the card to
+* the end of your list in `onSwipe`, and it slides back under the pile. To
+* undo a swipe, put the card back at the start of your list.
+*
+* The cards are the deck's own children, in your list's order. A long list
+* needn't be rendered whole: the deck shows `visible` cards, so the next few
+* dozen are plenty.
+*
+* End the deck with a `SwipeDeckEmpty`: it lies under the last card, so
+* dragging that card shows what comes next.
+*
+* Styling hooks: `data-layout`, `data-disabled`, and `data-empty` once no
+* card is in front (the last one leaving, or none left). CSS variables:
+* `--swipe-deck-card-width` / `-height`, the size of the largest card.
+*
+* 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, onSwipeComplete, directions = DEFAULT_DIRECTIONS, disabled = false, layout = "fan", 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 valuesRef = React.useRef(/* @__PURE__ */ new WeakMap());
+	const sentRef = React.useRef(/* @__PURE__ */ new Map());
+	const leavesRef = React.useRef(0);
+	const followersRef = React.useRef(/* @__PURE__ */ new Map());
+	const movedBackRef = React.useRef(/* @__PURE__ */ new Set());
+	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 visibleCount = Math.round(within(visible, 1, Infinity, 4));
+	const onSwipeRef = React.useRef(onSwipe);
+	const onSwipeCompleteRef = React.useRef(onSwipeComplete);
+	React.useLayoutEffect(() => {
+		onSwipeRef.current = onSwipe;
+		onSwipeCompleteRef.current = onSwipeComplete;
+	});
+	const readOrder = React.useCallback(() => {
+		const root = rootRef.current;
+		if (!root) return [];
+		const read = (elements) => {
+			const next = [];
+			for (const element of elements) {
+				const value = valuesRef.current.get(element);
+				if (value !== void 0) next.push(value);
+			}
+			return next;
+		};
+		const next = read(root.children);
+		return next.length === itemsRef.current.size ? next : read(root.querySelectorAll(ITEM_SELECTOR));
+	}, []);
+	const noteMovedBack = React.useCallback((current) => {
+		if (followersRef.current.size === 0) return;
+		const indexes = new Map(current.map((card, index) => [card, index]));
+		for (const [value, followers] of followersRef.current) {
+			const own = indexes.get(value);
+			if (own !== void 0 && followers.some((follower) => (indexes.get(follower) ?? Infinity) < own)) movedBackRef.current.add(value);
+		}
+	}, []);
+	const syncOrder = React.useCallback(() => {
+		if (!rootRef.current) return;
+		const next = readOrder();
+		noteMovedBack(next);
+		setOrder((previous) => previous.length === next.length && previous.every((value, index) => value === next[index]) ? previous : next);
+		for (const value of sentRef.current.keys()) {
+			if (itemsRef.current.has(value)) continue;
+			sentRef.current.delete(value);
+			followersRef.current.delete(value);
+			movedBackRef.current.delete(value);
+		}
+		setLeavingList((previous) => {
+			const kept = previous.filter((value) => itemsRef.current.has(value));
+			return kept.length === previous.length ? previous : kept;
+		});
+	}, [noteMovedBack, readOrder]);
+	const isSyncQueuedRef = React.useRef(false);
+	const syncSoon = React.useCallback(() => {
+		if (isSyncQueuedRef.current) return;
+		isSyncQueuedRef.current = true;
+		queueMicrotask(() => {
+			isSyncQueuedRef.current = false;
+			syncOrder();
+		});
+	}, [syncOrder]);
+	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) => {
+		const items = itemsRef.current;
+		const existing = items.get(value);
+		if (process.env.NODE_ENV === "development" && existing && existing.element !== record.element) console.warn(`SwipeDeck: more than one card has the value "${value}". Give each SwipeDeckItem its own value, the same as its key.`);
+		items.set(value, record);
+		valuesRef.current.set(record.element, value);
+		sizeObserver().observe(record.element);
+		syncSoon();
+		return () => {
+			valuesRef.current.delete(record.element);
+			if (items.get(value) === record) {
+				items.delete(value);
+				sizeObserverRef.current?.unobserve(record.element);
+			}
+			syncSoon();
+		};
+	}, [sizeObserver, syncSoon]);
+	const focusDeck = React.useCallback(() => rootRef.current?.focus(), []);
+	const [settledFront, setSettledFront] = React.useState();
+	const send = React.useCallback((details, cause) => {
+		if (sentRef.current.has(details.value)) return false;
+		const current = readOrder();
+		const followers = current.slice(current.indexOf(details.value) + 1);
+		const eventDetails = createSwipeEventDetails(cause);
+		onSwipeRef.current?.(details, eventDetails);
+		if (eventDetails.isCanceled) return false;
+		leavesRef.current += 1;
+		sentRef.current.set(details.value, leavesRef.current);
+		followersRef.current.set(details.value, followers);
+		if ((itemsRef.current.get(details.value)?.element)?.contains(document.activeElement)) focusDeck();
+		setLeavingList((previous) => previous.includes(details.value) ? previous : [...previous, details.value]);
+		return true;
+	}, [focusDeck, readOrder]);
+	const isMovedBack = React.useCallback((value) => {
+		noteMovedBack(readOrder());
+		return movedBackRef.current.has(value);
+	}, [noteMovedBack, readOrder]);
+	const returnNow = React.useCallback((leaves) => {
+		const back = /* @__PURE__ */ new Set();
+		for (const [value, leave] of leaves) {
+			if (sentRef.current.get(value) !== leave) continue;
+			back.add(value);
+			sentRef.current.delete(value);
+			followersRef.current.delete(value);
+			movedBackRef.current.delete(value);
+		}
+		if (back.size === 0) return;
+		setLeavingList((previous) => {
+			const kept = previous.filter((value) => !back.has(value));
+			return kept.length === previous.length ? previous : kept;
+		});
+	}, []);
+	const rejoin = React.useCallback((value) => {
+		const leave = sentRef.current.get(value);
+		if (leave !== void 0) returnNow(/* @__PURE__ */ new Map([[value, leave]]));
+	}, [returnNow]);
+	const answeredRef = React.useRef(/* @__PURE__ */ new Map());
+	const [answers, setAnswers] = React.useState(0);
+	const endLeave = React.useCallback((value, leave) => {
+		answeredRef.current.set(value, leave);
+		React.startTransition(() => setAnswers((count) => count + 1));
+	}, []);
+	React.useLayoutEffect(() => {
+		if (answeredRef.current.size === 0) return;
+		const answered = answeredRef.current;
+		answeredRef.current = /* @__PURE__ */ new Map();
+		returnNow(answered);
+	}, [answers, returnNow]);
+	const complete = React.useCallback((details) => {
+		const leave = sentRef.current.get(details.value);
+		if (leave === void 0) {
+			onSwipeCompleteRef.current?.(details);
+			return;
+		}
+		let answer;
+		try {
+			answer = onSwipeCompleteRef.current?.(details);
+		} finally {
+			if (isThenable(answer)) Promise.resolve(answer).finally(() => endLeave(details.value, leave));
+			else endLeave(details.value, leave);
+		}
+	}, [endLeave]);
+	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));
+	React.useLayoutEffect(() => {
+		setSettledFront(void 0);
+	}, [front]);
+	const positionsRef = React.useRef(positions);
+	const visibleRef = React.useRef(visibleCount);
+	React.useLayoutEffect(() => {
+		positionsRef.current = positions;
+		visibleRef.current = visibleCount;
+	});
+	const exitExtents = React.useCallback((value, element, x, y) => {
+		const own = element.getBoundingClientRect();
+		const home = {
+			left: own.left - x,
+			right: own.right - x,
+			top: own.top - y,
+			bottom: own.bottom - y
+		};
+		const pile = { ...home };
+		for (const [card, record] of itemsRef.current) {
+			const position = positionsRef.current.get(card);
+			if (card === value || position === void 0 || position >= visibleRef.current) continue;
+			const box = record.element.getBoundingClientRect();
+			pile.left = Math.min(pile.left, box.left);
+			pile.right = Math.max(pile.right, box.right);
+			pile.top = Math.min(pile.top, box.top);
+			pile.bottom = Math.max(pile.bottom, box.bottom);
+		}
+		return {
+			right: pile.right - home.left,
+			left: home.right - pile.left,
+			down: pile.bottom - home.top,
+			up: home.bottom - pile.top
+		};
+	}, []);
+	const swipeFront = React.useCallback((direction, cause) => {
+		if (disabled || !directions.includes(direction)) return;
+		const next = readOrder().find((value) => !sentRef.current.has(value));
+		if (next !== void 0) itemsRef.current.get(next)?.swipe(direction, cause);
+	}, [
+		directions,
+		disabled,
+		readOrder
+	]);
+	const announcedRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!isReady) return;
+		const previous = announcedRef.current;
+		announcedRef.current = { front };
+		const status = statusRef.current;
+		if (!previous || previous.front === 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, isReady]);
+	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();
+		if (event.repeat) return;
+		swipeFront(direction, {
+			reason: "keyboard",
+			event: event.nativeEvent
+		});
+	};
+	const context = React.useMemo(() => ({
+		directions,
+		disabled,
+		isReady,
+		front,
+		positions,
+		leaving,
+		leavingOrder: leavingList,
+		count: order.length,
+		visible: visibleCount,
+		lift,
+		register,
+		send,
+		isMovedBack,
+		rejoin,
+		complete,
+		exitExtents,
+		swipeFront,
+		isEmpty: isReady && front === void 0,
+		emptyRef,
+		focusDeck,
+		settledFront,
+		settle: setSettledFront
+	}), [
+		directions,
+		disabled,
+		isReady,
+		front,
+		positions,
+		leaving,
+		leavingList,
+		order.length,
+		visibleCount,
+		lift,
+		register,
+		send,
+		isMovedBack,
+		rejoin,
+		complete,
+		exitExtents,
+		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 focus-visible:outline-hidden", "[--swipe-deck-side:1] rtl:[--swipe-deck-side:-1]", "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": visibleCount,
+				...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, a direct child of it. 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-starting-style`
+* while it comes in and `data-ending-style` once it is clear of the pile and
+* fading (the `motion-fade-lg` recipe), and `data-swipe-direction` for the
+* way it leans or leaves. CSS variables, which what's inside the card can
+* read too: `--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),
+* `--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, scale and transform, 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, send, complete, rejoin, isMovedBack, exitExtents, focusDeck, settle } = deck;
+	const prefersReducedMotion = useReducedMotion();
+	const isHydrating = !useIsClientRender();
+	const wasHydratedRef = React.useRef(isHydrating);
+	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 press = useMotionValue(1);
+	const tiltX = useMotionValue(0);
+	const tiltY = useMotionValue(0);
+	const spin = useMotionValue(0);
+	const grabRef = React.useRef([0, 0]);
+	const drivesLiftRef = React.useRef(false);
+	const scatter = React.useMemo(() => scatterOf(value), [value]);
+	const leftTowardRef = React.useRef(null);
+	const stopWatchingRef = React.useRef(null);
+	const exitRef = React.useRef(null);
+	const isTuckingRef = React.useRef(false);
+	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(!isHydrating);
+	const [direction, setDirection] = React.useState();
+	const position = deck.positions.get(value);
+	const isLeaving = deck.leaving.has(value);
+	const isFront = deck.front === value;
+	const isInert = isLeaving || position !== void 0 && position > 0;
+	const directionsRef = React.useRef(directions);
+	const disabledRef = React.useRef(deck.disabled);
+	const reducedMotionRef = React.useRef(prefersReducedMotion);
+	React.useLayoutEffect(() => {
+		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 writePose = () => {
+			const element = elementRef.current;
+			if (!element) return;
+			const [grabX, grabY] = grabRef.current;
+			element.style.setProperty("--swipe-deck-pose", isPoseAtRest(press, spin, tiltX, tiltY) ? "none" : `translate(${grabX}px, ${grabY}px) perspective(${PERSPECTIVE}px) scale(${press.get()}) rotate(${spin.get()}deg) rotateX(${tiltX.get()}deg) rotateY(${tiltY.get()}deg) translate(${-grabX}px, ${-grabY}px)`);
+		};
+		const writeNumber = (name) => (latest) => {
+			elementRef.current?.style.setProperty(name, String(latest));
+		};
+		const stops = [
+			x.on("change", write),
+			y.on("change", write),
+			place.on("change", writeNumber("--swipe-deck-place")),
+			enterScale.on("change", writeNumber("--swipe-deck-enter-scale")),
+			press.on("change", writePose),
+			spin.on("change", writePose),
+			tiltX.on("change", writePose),
+			tiltY.on("change", writePose)
+		];
+		const exit = exitRef.current;
+		if (exit) {
+			exitRef.current = null;
+			x.jump(exit[0]);
+			y.jump(exit[1]);
+			setIsFading(true);
+		}
+		return () => {
+			for (const stop of stops) stop();
+			if (dragRef.current) releaseLift(deck.lift, reducedMotionRef.current);
+			endDragRef.current?.();
+			stopWatchingRef.current?.();
+			for (const motionValue of [
+				x,
+				y,
+				place,
+				enterScale,
+				press,
+				spin,
+				tiltX,
+				tiltY
+			]) motionValue.stop();
+		};
+	}, [
+		deck.lift,
+		enterScale,
+		place,
+		press,
+		spin,
+		tiltX,
+		tiltY,
+		x,
+		y
+	]);
+	React.useEffect(() => {
+		const element = elementRef.current;
+		if (!element || position === void 0 || position > deck.visible) return;
+		const writeLift = (latest) => element.style.setProperty("--swipe-deck-lift", String(latest));
+		writeLift(deck.lift.get());
+		const stop = deck.lift.on("change", writeLift);
+		return () => {
+			stop();
+			element.style.removeProperty("--swipe-deck-lift");
+		};
+	}, [
+		deck.lift,
+		deck.visible,
+		position
+	]);
+	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 settleFace = React.useCallback(() => {
+		for (const [motionValue, rest] of [
+			[press, 1],
+			[spin, 0],
+			[tiltX, 0],
+			[tiltY, 0]
+		]) if (reducedMotionRef.current) motionValue.jump(rest);
+		else animate(motionValue, rest, FACE_SPRING);
+	}, [
+		press,
+		spin,
+		tiltX,
+		tiltY
+	]);
+	const tilt = React.useCallback((vx, vy) => {
+		if (reducedMotionRef.current) return;
+		const sideways = clampUnit(vx / LEAN_SPEED) * .7 + clampUnit(x.get() / LEAN_REACH) * .3;
+		const upward = clampUnit(-vy / LEAN_SPEED) * .7 + clampUnit(-y.get() / LEAN_REACH) * .3;
+		animate(tiltY, sideways * TILT, LEAN_SPRING);
+		animate(tiltX, upward * TILT, LEAN_SPRING);
+		animate(spin, clampUnit(x.get() / LEAN_REACH) * SPIN, LEAN_SPRING);
+	}, [
+		spin,
+		tiltX,
+		tiltY,
+		x,
+		y
+	]);
+	const fling = React.useCallback((to, velocity) => {
+		const [vx, vy] = velocity ?? [0, 0];
+		endDragRef.current?.();
+		setIsSwiping(false);
+		leftTowardRef.current = to;
+		setDirection(to);
+		drivesLiftRef.current = false;
+		releaseLift(deck.lift, prefersReducedMotion);
+		settleFace();
+		setIsStarting(false);
+		const element = elementRef.current;
+		if (prefersReducedMotion || !element) {
+			setIsFading(true);
+			return;
+		}
+		const extents = exitExtents(value, element, x.get(), y.get());
+		const aheadX = x.get() + vx * THROW_TIME;
+		const aheadY = y.get() + vy * THROW_TIME;
+		const heading = velocity && Math.hypot(aheadX, aheadY) >= 1 ? [aheadX, aheadY] : DIRECTION_VECTORS[to];
+		const [targetX, targetY] = exitPoint(x.get(), y.get(), heading, extents);
+		exitRef.current = [targetX, targetY];
+		const headingLength = Math.hypot(...heading);
+		const [ux, uy] = [heading[0] / headingLength, heading[1] / headingLength];
+		let isOut = false;
+		const leaveSight = () => {
+			if (isOut) return;
+			isOut = true;
+			exitRef.current = null;
+			stopWatchingRef.current?.();
+			stopWatchingRef.current = null;
+			if (isMovedBack(value)) {
+				isTuckingRef.current = true;
+				rejoin(value);
+			} else setIsFading(true);
+		};
+		const check = () => {
+			const outward = x.getVelocity() * ux + y.getVelocity() * uy;
+			if (isClear(x.get(), y.get(), extents, [ux, uy]) && outward <= CAUGHT_SPEED) leaveSight();
+		};
+		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 ? leaveSight : void 0
+		});
+		animate(y, targetY, {
+			...EXIT_SPRING,
+			velocity: vy,
+			onComplete: isMainX ? void 0 : leaveSight
+		});
+	}, [
+		deck.lift,
+		exitExtents,
+		isMovedBack,
+		prefersReducedMotion,
+		rejoin,
+		settleFace,
+		value,
+		x,
+		y
+	]);
+	const swipe = (to, cause, velocity) => {
+		if (!send({
+			value,
+			direction: to
+		}, cause)) return false;
+		fling(to, velocity);
+		return true;
+	};
+	const swipeRef = React.useRef(swipe);
+	React.useEffect(() => {
+		swipeRef.current = swipe;
+	});
+	React.useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		return register(value, {
+			element,
+			swipe: (to, cause) => {
+				sizeRef.current = sizeOf(element);
+				swipeRef.current(to, cause);
+			}
+		});
+	}, [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();
+				complete({
+					value,
+					direction: to
+				});
+			});
+		});
+		return () => {
+			isCancelled = true;
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		complete,
+		isFading,
+		value,
+		x,
+		y
+	]);
+	const wasLeavingRef = React.useRef(false);
+	const isPlacedRef = React.useRef(false);
+	const springPlace = React.useCallback((target, spring) => {
+		const shown = Math.min(target, deck.visible);
+		animate(place, shown, {
+			...spring,
+			onComplete: shown === target ? void 0 : () => place.jump(target)
+		});
+	}, [deck.visible, place]);
+	const enterAtRef = React.useRef(null);
+	const isReenteringRef = React.useRef(false);
+	React.useEffect(() => {
+		const target = isLeaving ? 0 : position;
+		if (target === void 0) return;
+		if (wasLeavingRef.current && !isLeaving) {
+			stopWatchingRef.current?.();
+			stopWatchingRef.current = null;
+			exitRef.current = null;
+			if (isTuckingRef.current) {
+				isTuckingRef.current = false;
+				animate(x, 0, TUCK_SPRING);
+				animate(y, 0, TUCK_SPRING);
+				springPlace(target, TUCK_SPRING);
+				const to = leftTowardRef.current;
+				if (to) complete({
+					value,
+					direction: to
+				});
+			} else {
+				x.jump(0);
+				y.jump(0);
+				place.jump(target);
+				setIsFading(false);
+				enterAtRef.current = null;
+				isReenteringRef.current = true;
+				setIsStarting(true);
+			}
+		} else if (prefersReducedMotion || !isPlacedRef.current || place.get() > deck.visible && target > deck.visible) place.jump(target);
+		else springPlace(target, PLACE_SPRING);
+		isPlacedRef.current = true;
+		wasLeavingRef.current = isLeaving;
+	}, [
+		complete,
+		deck.visible,
+		isLeaving,
+		place,
+		position,
+		prefersReducedMotion,
+		springPlace,
+		value,
+		x,
+		y
+	]);
+	React.useLayoutEffect(() => {
+		if (wasHydratedRef.current && elementRef.current?.matches(`${ITEM_SELECTOR} ~ *`)) setIsStarting(true);
+	}, []);
+	React.useEffect(() => {
+		if (!isStarting || position === void 0) return;
+		if (enterAtRef.current === null) {
+			const isBehind = !prefersReducedMotion && position > 0 && position < deck.visible;
+			const delay = isBehind && !isReenteringRef.current ? ENTER_LEAD + (position - 1) * ENTER_STAGGER : 0;
+			isReenteringRef.current = false;
+			enterAtRef.current = performance.now() + delay * 1e3;
+			if (isBehind) {
+				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);
+		};
+	}, [
+		deck.visible,
+		enterScale,
+		isStarting,
+		position,
+		prefersReducedMotion
+	]);
+	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.useLayoutEffect(() => {
+		if (isInert && elementRef.current?.contains(document.activeElement)) focusDeck();
+	}, [focusDeck, isInert]);
+	React.useEffect(() => {
+		if (isFront && !deck.disabled || !dragRef.current) return;
+		endDragRef.current?.();
+		setIsSwiping(false);
+		settleFace();
+		snapBack();
+		if (!isFront) releaseLift(deck.lift, prefersReducedMotion);
+	}, [
+		deck.disabled,
+		deck.lift,
+		isFront,
+		prefersReducedMotion,
+		settleFace,
+		snapBack
+	]);
+	const release = (drag, event) => {
+		settleFace();
+		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 [pointerVx, pointerVy] = releaseVelocity(drag.samples, event.timeStamp);
+		const velocity = [isOpenSide(directionsRef.current, true, x.get()) ? pointerVx : 0, isOpenSide(directionsRef.current, false, y.get()) ? pointerVy : 0];
+		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 && swipe(ahead.direction, {
+				reason: "swipe",
+				event
+			}, 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();
+		const size = sizeOf(element);
+		sizeRef.current = size;
+		if (isPoseAtRest(press, spin, tiltX, tiltY)) grabRef.current = grabPoint(element, event.clientX, event.clientY, size);
+		if (!prefersReducedMotion) animate(press, PRESS_SCALE, PRESS_SPRING);
+		const openAtPress = directionsRef.current;
+		const drag = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			originX: isOpenSide(openAtPress, true, x.get()) ? x.get() : unresist(x.get(), size.width),
+			originY: isOpenSide(openAtPress, false, y.get()) ? y.get() : unresist(y.get(), size.height),
+			moved: false,
+			samples: [{
+				x: event.clientX,
+				y: event.clientY,
+				time: event.timeStamp
+			}],
+			idle: void 0
+		};
+		dragRef.current = drag;
+		const handleMove = (moveEvent) => {
+			if (moveEvent.pointerId !== drag.pointerId) return;
+			if (moveEvent.buttons === 0) {
+				endDrag();
+				release(drag, moveEvent);
+				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;
+				try {
+					element.setPointerCapture(drag.pointerId);
+				} catch {}
+				setIsSwiping(true);
+			}
+			const allowed = directionsRef.current;
+			const { width, height } = sizeRef.current;
+			x.set(follow(allowed, true, drag.originX + dx, width));
+			y.set(follow(allowed, false, drag.originY + dy, height));
+			drag.samples.push({
+				x: moveEvent.clientX,
+				y: moveEvent.clientY,
+				time: moveEvent.timeStamp
+			});
+			if (drag.samples.length > 20) drag.samples.shift();
+			setDirection(lean(allowed, x.get(), y.get(), sizeRef.current).direction);
+			const [pointerVx, pointerVy] = releaseVelocity(drag.samples, moveEvent.timeStamp);
+			tilt(isOpenSide(allowed, true, x.get()) ? pointerVx : 0, isOpenSide(allowed, false, y.get()) ? pointerVy : 0);
+			window.clearTimeout(drag.idle);
+			drag.idle = window.setTimeout(() => {
+				if (dragRef.current === drag) tilt(0, 0);
+			}, LEAN_IDLE);
+		};
+		const handleEnd = (endEvent) => {
+			if (endEvent.pointerId !== drag.pointerId) return;
+			endDrag();
+			release(drag, endEvent);
+		};
+		const endDrag = () => {
+			window.clearTimeout(drag.idle);
+			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 + deck.leavingOrder.length - deck.leavingOrder.indexOf(value) : 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: isInert,
+		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))]", "[transform:var(--swipe-deck-pose,none)]", "[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:rtl:origin-[10%_90%]", "group-data-[layout=fan]/swipe-deck:[--swipe-deck-layout-rotate:calc(var(--swipe-deck-layout-slot)_*_var(--swipe-deck-spread,0.5)_*_8deg_*_var(--swipe-deck-side,1))]", "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_*_var(--swipe-deck-side,1))]", "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))]", "group-focus-visible/swipe-deck:data-front: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", "[-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]", !deck.isReady && "[&:is([data-slot=swipe-deck-item]~*)]:invisible [&:is([data-slot=swipe-deck-item]~*)]:opacity-0", 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", {
+			"data-slot": "swipe-deck-empty-outline-path",
+			d: outline.d,
+			pathLength,
+			strokeDasharray: `${OUTLINE_DASH} ${OUTLINE_GAP}`,
+			className: "stroke-contour 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 (and still focusable) when the deck is disabled,
+* has no card in front, or can't go that way.
+*/
+function SwipeDeckAction({ direction, disabled, onClick, onKeyDown, ...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, {
+				reason: "action-press",
+				event: event.nativeEvent
+			});
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.repeat && event.key === "Enter") event.preventDefault();
+		},
+		...props
+	});
+}
+//#endregion
+export { SwipeDeck, SwipeDeckAction, SwipeDeckEmpty, SwipeDeckItem };