@waveso/ui 0.17.0 → 0.18.0

package/dist/swipe-deck.js

@@ -13,8 +13,21 @@ const KEY_DIRECTIONS = {
 	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. */
@@ -24,7 +37,7 @@ const VELOCITY_WINDOW = 100;
 * 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. */
+/** 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",
@@ -41,7 +54,7 @@ const EXIT_SPRING = {
 	stiffness: 650,
 	damping: 42
 };
-/** A leaving card fades once clear of the stack and slowed below this (px/s). */
+/** 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 = {
@@ -49,6 +62,12 @@ const PLACE_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. */
@@ -57,6 +76,36 @@ const ENTER_LEAD = .15;
 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;
@@ -64,16 +113,41 @@ const OUTLINE_GAP = 6;
 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. */
+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-none";
-	return horizontal ? "touch-pan-y" : "touch-pan-x";
+	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);
@@ -92,6 +166,29 @@ function transitionsEnd(element) {
 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.
@@ -118,30 +215,51 @@ function sizeOf(element) {
 		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 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 stack's edge: the nearer of the side edges and the top or bottom edge.
+* the pile's edge: the nearer of the side edges and the top or bottom edge.
 */
-function exitPoint(x, y, [dx, dy], size) {
+function exitPoint(x, y, [dx, dy], extents) {
 	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 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) {
-	switch (direction) {
-		case "right": return x;
-		case "left": return -x;
-		case "down": return y;
-		case "up": return -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
@@ -171,6 +289,9 @@ function releaseVelocity(samples, time) {
 	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);
@@ -180,25 +301,43 @@ function useSwipeDeckContext(part) {
 /**
 * 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
+* 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. 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.
+* 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. The deck carries `data-empty`
-* once no card is in front (the last one leaving, or none left), for styles
-* of your own.
+* 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, directions = DEFAULT_DIRECTIONS, disabled = false, layout = "stack", spread = .5, depth = .5, visible = 4, className, style, onKeyDown, children, ref, ...props }) {
+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 finishedRef = 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);
@@ -206,32 +345,60 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 	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);
-	React.useEffect(() => {
+	const onSwipeCompleteRef = React.useRef(onSwipeComplete);
+	React.useLayoutEffect(() => {
 		onSwipeRef.current = onSwipe;
+		onSwipeCompleteRef.current = onSwipeComplete;
 	});
-	const readOrder = React.useCallback(() => [...itemsRef.current].sort(([, a], [, b]) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([value]) => value), []);
+	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(() => {
-		const items = itemsRef.current;
+		if (!rootRef.current) return;
 		const next = readOrder();
+		noteMovedBack(next);
 		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);
-			}
+		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) => items.has(value) && !answered.has(value));
+			const kept = previous.filter((value) => itemsRef.current.has(value));
 			return kept.length === previous.length ? previous : kept;
 		});
-	}, [readOrder]);
+	}, [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();
 	});
@@ -259,50 +426,143 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 	}, []);
 	React.useEffect(() => () => sizeObserverRef.current?.disconnect(), []);
 	const register = React.useCallback((value, record) => {
-		itemsRef.current.set(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);
-		syncOrder();
+		syncSoon();
 		return () => {
-			if (itemsRef.current.get(value) === record) {
-				itemsRef.current.delete(value);
+			valuesRef.current.delete(record.element);
+			if (items.get(value) === record) {
+				items.delete(value);
 				sizeObserverRef.current?.unobserve(record.element);
-				syncOrder();
 			}
+			syncSoon();
 		};
-	}, [sizeObserver, syncOrder]);
+	}, [sizeObserver, syncSoon]);
 	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 send = React.useCallback((details, cause) => {
+		if (sentRef.current.has(details.value)) return false;
 		const current = readOrder();
-		finishedRef.current.set(details.value, current.slice(current.indexOf(details.value) + 1));
-		onSwipeRef.current?.(details);
-	}, [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));
-	const swipeFront = React.useCallback((direction) => {
-		if (disabled || front === void 0 || !directions.includes(direction)) return;
-		itemsRef.current.get(front)?.swipe(direction);
+	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,
-		front
+		readOrder
 	]);
-	const announcedRef = React.useRef(void 0);
+	const announcedRef = React.useRef(null);
 	React.useEffect(() => {
+		if (!isReady) return;
 		const previous = announcedRef.current;
-		announcedRef.current = front;
+		announcedRef.current = { front };
 		const status = statusRef.current;
-		if (previous === void 0 || previous === front || !status) return;
+		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]);
+	}, [front, isReady]);
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
 		if (event.defaultPrevented || event.target !== event.currentTarget) return;
@@ -310,7 +570,11 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 		const direction = KEY_DIRECTIONS[event.key];
 		if (!direction || disabled || !directions.includes(direction)) return;
 		event.preventDefault();
-		swipeFront(direction);
+		if (event.repeat) return;
+		swipeFront(direction, {
+			reason: "keyboard",
+			event: event.nativeEvent
+		});
 	};
 	const context = React.useMemo(() => ({
 		directions,
@@ -319,11 +583,16 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 		front,
 		positions,
 		leaving,
+		leavingOrder: leavingList,
 		count: order.length,
+		visible: visibleCount,
 		lift,
 		register,
-		leave,
-		finish,
+		send,
+		isMovedBack,
+		rejoin,
+		complete,
+		exitExtents,
 		swipeFront,
 		isEmpty: isReady && front === void 0,
 		emptyRef,
@@ -337,11 +606,16 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 		front,
 		positions,
 		leaving,
+		leavingList,
 		order.length,
+		visibleCount,
 		lift,
 		register,
-		leave,
-		finish,
+		send,
+		isMovedBack,
+		rejoin,
+		complete,
+		exitExtents,
 		swipeFront,
 		focusDeck,
 		settledFront
@@ -357,11 +631,11 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 			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),
+			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": Math.round(within(visible, 1, Infinity, 4)),
+				"--swipe-deck-visible": visibleCount,
 				...style
 			},
 			onKeyDown: handleKeyDown,
@@ -376,37 +650,46 @@ function SwipeDeck({ onSwipe, directions = DEFAULT_DIRECTIONS, disabled = false,
 	});
 }
 /**
-* 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.
+* 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-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`),
+* 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 and scale, so its motion recipe can only
-* be a `motion-fade-*` one: a recipe that transitions those would lag every
-* drag.
+* 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, leave, finish } = deck;
+	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({
@@ -416,15 +699,16 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 	const draggedRef = React.useRef(false);
 	const [isSwiping, setIsSwiping] = React.useState(false);
 	const [isFading, setIsFading] = React.useState(false);
-	const [isStarting, setIsStarting] = React.useState(true);
+	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.useEffect(() => {
+	React.useLayoutEffect(() => {
 		directionsRef.current = directions;
 		disabledRef.current = deck.disabled;
 		reducedMotionRef.current = prefersReducedMotion;
@@ -440,34 +724,74 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 			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));
-		});
+		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 () => {
-			stopX();
-			stopY();
-			stopPlace();
-			stopEnterScale();
+			for (const stop of stops) stop();
 			if (dragRef.current) releaseLift(deck.lift, reducedMotionRef.current);
 			endDragRef.current?.();
 			stopWatchingRef.current?.();
-			x.stop();
-			y.stop();
-			place.stop();
-			enterScale.stop();
+			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);
@@ -487,35 +811,72 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		x,
 		y
 	]);
-	const fling = React.useCallback((to, [vx, vy] = [0, 0]) => {
+	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;
-		leave(value);
 		setDirection(to);
 		drivesLiftRef.current = false;
 		releaseLift(deck.lift, prefersReducedMotion);
+		settleFace();
 		setIsStarting(false);
-		if (prefersReducedMotion) {
+		const element = elementRef.current;
+		if (prefersReducedMotion || !element) {
 			setIsFading(true);
 			return;
 		}
-		const size = sizeRef.current;
+		const extents = exitExtents(value, element, x.get(), y.get());
 		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 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];
-		const fade = () => {
+		let isOut = false;
+		const leaveSight = () => {
+			if (isOut) return;
+			isOut = true;
+			exitRef.current = null;
 			stopWatchingRef.current?.();
 			stopWatchingRef.current = null;
-			setIsFading(true);
+			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(), size) && outward <= CAUGHT_SPEED) fade();
+			if (isClear(x.get(), y.get(), extents, [ux, uy]) && outward <= CAUGHT_SPEED) leaveSight();
 		};
 		stopWatchingRef.current?.();
 		const stopX = x.on("change", check);
@@ -528,36 +889,47 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		animate(x, targetX, {
 			...EXIT_SPRING,
 			velocity: vx,
-			onComplete: isMainX ? fade : void 0
+			onComplete: isMainX ? leaveSight : void 0
 		});
 		animate(y, targetY, {
 			...EXIT_SPRING,
 			velocity: vy,
-			onComplete: isMainX ? void 0 : fade
+			onComplete: isMainX ? void 0 : leaveSight
 		});
 	}, [
 		deck.lift,
-		leave,
+		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) => {
+			swipe: (to, cause) => {
 				sizeRef.current = sizeOf(element);
-				fling(to);
+				swipeRef.current(to, cause);
 			}
 		});
-	}, [
-		fling,
-		register,
-		value
-	]);
+	}, [register, value]);
 	React.useEffect(() => {
 		const element = elementRef.current;
 		const to = leftTowardRef.current;
@@ -568,7 +940,7 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 				if (isCancelled) return;
 				x.stop();
 				y.stop();
-				finish({
+				complete({
 					value,
 					direction: to
 				});
@@ -579,7 +951,7 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 			cancelAnimationFrame(frame);
 		};
 	}, [
-		finish,
+		complete,
 		isFading,
 		value,
 		x,
@@ -587,33 +959,68 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 	]);
 	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) {
-			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);
+			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
 	]);
-	const enterAtRef = React.useRef(null);
+	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 delay = prefersReducedMotion || position === 0 ? 0 : ENTER_LEAD + (position - 1) * ENTER_STAGGER;
+			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 (delay > 0) {
+			if (isBehind) {
 				enterScale.jump(ENTER_SCALE);
 				animate(enterScale, 1, {
 					...PLACE_SPRING,
@@ -631,12 +1038,12 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 			cancelAnimationFrame(frame);
 		};
 	}, [
+		deck.visible,
 		enterScale,
 		isStarting,
 		position,
 		prefersReducedMotion
 	]);
-	const { settle } = deck;
 	React.useEffect(() => {
 		const element = elementRef.current;
 		if (!isFront || isStarting || !element) return;
@@ -659,10 +1066,14 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		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);
 	}, [
@@ -670,9 +1081,11 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		deck.lift,
 		isFront,
 		prefersReducedMotion,
+		settleFace,
 		snapBack
 	]);
 	const release = (drag, event) => {
+		settleFace();
 		if (!drag.moved) {
 			snapBack();
 			return;
@@ -687,13 +1100,14 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 			y: event.clientY,
 			time: event.timeStamp
 		});
-		const velocity = releaseVelocity(drag.samples, 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) {
-				fling(ahead.direction, velocity);
-				return;
-			}
+			if (ahead.direction && ahead.share >= 1 && swipe(ahead.direction, {
+				reason: "swipe",
+				event
+			}, velocity)) return;
 		}
 		snapBack(velocity);
 	};
@@ -706,40 +1120,60 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		deck.lift.stop();
 		x.stop();
 		y.stop();
-		sizeRef.current = sizeOf(element);
+		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: x.get(),
-			originY: y.get(),
+			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;
-				element.setPointerCapture(drag.pointerId);
+				try {
+					element.setPointerCapture(drag.pointerId);
+				} catch {}
 				setIsSwiping(true);
 			}
-			x.set(drag.originX + dx);
-			y.set(drag.originY + dy);
+			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(directionsRef.current, x.get(), y.get(), sizeRef.current).direction);
+			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;
@@ -747,6 +1181,7 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 			release(drag, endEvent);
 		};
 		const endDrag = () => {
+			window.clearTimeout(drag.idle);
 			window.removeEventListener("pointermove", handleMove);
 			window.removeEventListener("pointerup", handleEnd);
 			window.removeEventListener("pointercancel", handleEnd);
@@ -767,7 +1202,7 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		}
 		onClickCapture?.(event);
 	};
-	const zIndex = isLeaving ? deck.count + 1 : position === void 0 ? void 0 : deck.count - position;
+	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",
@@ -778,8 +1213,8 @@ function SwipeDeckItem({ value, className, style, ref, onPointerDown, onClickCap
 		"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),
+		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,
@@ -873,10 +1308,11 @@ function DashedOutline() {
 		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-shade fill-none"
+			className: "stroke-contour fill-none"
 		})
 	});
 }
@@ -886,9 +1322,8 @@ function DashedOutline() {
 * 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.
+* 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");
@@ -910,9 +1345,10 @@ function SwipeDeckEmpty({ className, children, ref, ...props }) {
 }
 /**
 * 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.
+* 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, ...props }) {
+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, {
@@ -922,7 +1358,14 @@ function SwipeDeckAction({ direction, disabled, onClick, ...props }) {
 		focusableWhenDisabled: true,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented) deck.swipeFront(direction);
+			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
 	});