Implement the 021-bestiary-statblock feature that adds a searchable D&D 2024 Monster Manual creature library with inline autocomplete suggestions, full stat block display in a fixed side panel, auto-numbering of duplicate creature names, HP/AC pre-fill from bestiary data, and automatic stat block display on turn change for wide viewports

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

apps/web/src/components/bestiary-search.tsx

@@ -0,0 +1,129 @@
+import type { Creature } from "@initiative/domain";
+import { Search, X } from "lucide-react";
+import {
+	type KeyboardEvent,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { Input } from "./ui/input.js";
+
+interface BestiarySearchProps {
+	onSelectCreature: (creature: Creature) => void;
+	onClose: () => void;
+	searchFn: (query: string) => Creature[];
+}
+
+export function BestiarySearch({
+	onSelectCreature,
+	onClose,
+	searchFn,
+}: BestiarySearchProps) {
+	const [query, setQuery] = useState("");
+	const [highlightIndex, setHighlightIndex] = useState(-1);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const results = query.length >= 2 ? searchFn(query) : [];
+
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+
+	useEffect(() => {
+		setHighlightIndex(-1);
+	}, [query]);
+
+	useEffect(() => {
+		function handleClickOutside(e: MouseEvent) {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(e.target as Node)
+			) {
+				onClose();
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [onClose]);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				onClose();
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setHighlightIndex((i) => (i < results.length - 1 ? i + 1 : 0));
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setHighlightIndex((i) => (i > 0 ? i - 1 : results.length - 1));
+				return;
+			}
+			if (e.key === "Enter" && highlightIndex >= 0) {
+				e.preventDefault();
+				onSelectCreature(results[highlightIndex]);
+			}
+		},
+		[results, highlightIndex, onClose, onSelectCreature],
+	);
+
+	return (
+		<div ref={containerRef} className="relative w-full max-w-sm">
+			<div className="flex items-center gap-2">
+				<Search className="h-4 w-4 text-muted-foreground" />
+				<Input
+					ref={inputRef}
+					type="text"
+					value={query}
+					onChange={(e) => setQuery(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Search bestiary..."
+					className="flex-1"
+				/>
+				<button
+					type="button"
+					onClick={onClose}
+					className="text-muted-foreground hover:text-foreground"
+				>
+					<X className="h-4 w-4" />
+				</button>
+			</div>
+
+			{query.length >= 2 && (
+				<div className="absolute bottom-full z-50 mb-1 w-full rounded-md border border-border bg-card shadow-lg">
+					{results.length === 0 ? (
+						<div className="px-3 py-2 text-sm text-muted-foreground">
+							No creatures found
+						</div>
+					) : (
+						<ul className="max-h-60 overflow-y-auto py-1">
+							{results.map((creature, i) => (
+								<li key={creature.id}>
+									<button
+										type="button"
+										className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+											i === highlightIndex
+												? "bg-accent/20 text-foreground"
+												: "text-foreground hover:bg-accent/10"
+										}`}
+										onClick={() => onSelectCreature(creature)}
+										onMouseEnter={() => setHighlightIndex(i)}
+									>
+										<span>{creature.name}</span>
+										<span className="text-xs text-muted-foreground">
+											{creature.sourceDisplayName}
+										</span>
+									</button>
+								</li>
+							))}
+						</ul>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}