Add swipe-to-dismiss gesture for mobile stat block drawer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/stat-block-panel.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { getSourceDisplayName } from "../adapters/bestiary-index-adapter.js";
 import type { BulkImportState } from "../hooks/use-bulk-import.js";
+import { useSwipeToDismiss } from "../hooks/use-swipe-to-dismiss.js";
 import { BulkImportPrompt } from "./bulk-import-prompt.js";
 import { SourceFetchPrompt } from "./source-fetch-prompt.js";
 import { StatBlock } from "./stat-block.js";
@@ -176,6 +177,8 @@ function MobileDrawer({
 	onDismiss: () => void;
 	children: ReactNode;
 }) {
+	const { offsetX, isSwiping, handlers } = useSwipeToDismiss(onDismiss);
+
 	return (
 		<div className="fixed inset-0 z-50">
 			<button
@@ -184,7 +187,13 @@ function MobileDrawer({
 				onClick={onDismiss}
 				aria-label="Close stat block"
 			/>
-			<div className="absolute top-0 right-0 bottom-0 w-[85%] max-w-md animate-slide-in-right border-l border-border bg-card shadow-xl">
+			<div
+				className={`absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-l border-border bg-card shadow-xl ${isSwiping ? "" : "animate-slide-in-right"}`}
+				style={
+					isSwiping ? { transform: `translateX(${offsetX}px)` } : undefined
+				}
+				{...handlers}
+			>
 				<div className="flex items-center justify-between border-b border-border px-4 py-2">
 					<button
 						type="button"