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/hooks/use-bestiary.ts

@@ -0,0 +1,62 @@
+import type { Creature, CreatureId } from "@initiative/domain";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { normalizeBestiary } from "../adapters/bestiary-adapter.js";
+
+interface BestiaryHook {
+	search: (query: string) => Creature[];
+	getCreature: (id: CreatureId) => Creature | undefined;
+	allCreatures: Creature[];
+	isLoaded: boolean;
+}
+
+export function useBestiary(): BestiaryHook {
+	const [creatures, setCreatures] = useState<Creature[]>([]);
+	const [isLoaded, setIsLoaded] = useState(false);
+	const creatureMapRef = useRef<Map<string, Creature>>(new Map());
+	const loadAttempted = useRef(false);
+
+	useEffect(() => {
+		if (loadAttempted.current) return;
+		loadAttempted.current = true;
+
+		import("../../../../data/bestiary/xmm.json")
+			// biome-ignore lint/suspicious/noExplicitAny: raw JSON shape varies per entry
+			.then((mod: any) => {
+				const raw = mod.default ?? mod;
+				try {
+					const normalized = normalizeBestiary(raw);
+					const map = new Map<string, Creature>();
+					for (const c of normalized) {
+						map.set(c.id, c);
+					}
+					creatureMapRef.current = map;
+					setCreatures(normalized);
+					setIsLoaded(true);
+				} catch {
+					// Normalization failed — bestiary unavailable
+				}
+			})
+			.catch(() => {
+				// Import failed — bestiary unavailable
+			});
+	}, []);
+
+	const search = useMemo(() => {
+		return (query: string): Creature[] => {
+			if (query.length < 2) return [];
+			const lower = query.toLowerCase();
+			return creatures
+				.filter((c) => c.name.toLowerCase().includes(lower))
+				.sort((a, b) => a.name.localeCompare(b.name))
+				.slice(0, 10);
+		};
+	}, [creatures]);
+
+	const getCreature = useMemo(() => {
+		return (id: CreatureId): Creature | undefined => {
+			return creatureMapRef.current.get(id);
+		};
+	}, []);
+
+	return { search, getCreature, allCreatures: creatures, isLoaded };
+}

apps/web/src/hooks/use-encounter.ts

@@ -15,6 +15,7 @@ import {
 import type {
 	CombatantId,
 	ConditionId,
+	Creature,
 	DomainEvent,
 	Encounter,
 } from "@initiative/domain";
@@ -22,6 +23,7 @@ import {
 	combatantId,
 	createEncounter,
 	isDomainError,
+	resolveCreatureName,
 } from "@initiative/domain";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -74,7 +76,10 @@ export function useEncounter() {
 	const makeStore = useCallback((): EncounterStore => {
 		return {
 			get: () => encounterRef.current,
-			save: (e) => setEncounter(e),
+			save: (e) => {
+				encounterRef.current = e;
+				setEncounter(e);
+			},
 		};
 	}, []);
 
@@ -218,6 +223,57 @@ export function useEncounter() {
 		[makeStore],
 	);
 
+	const addFromBestiary = useCallback(
+		(creature: Creature) => {
+			const store = makeStore();
+			const existingNames = store.get().combatants.map((c) => c.name);
+			const { newName, renames } = resolveCreatureName(
+				creature.name,
+				existingNames,
+			);
+
+			// Apply renames (e.g., "Goblin" → "Goblin 1")
+			for (const { from, to } of renames) {
+				const target = store.get().combatants.find((c) => c.name === from);
+				if (target) {
+					editCombatantUseCase(makeStore(), target.id, to);
+				}
+			}
+
+			// Add combatant with resolved name
+			const id = combatantId(`c-${++nextId.current}`);
+			const addResult = addCombatantUseCase(makeStore(), id, newName);
+			if (isDomainError(addResult)) return;
+
+			// Set HP
+			const hpResult = setHpUseCase(makeStore(), id, creature.hp.average);
+			if (!isDomainError(hpResult)) {
+				setEvents((prev) => [...prev, ...hpResult]);
+			}
+
+			// Set AC
+			if (creature.ac > 0) {
+				const acResult = setAcUseCase(makeStore(), id, creature.ac);
+				if (!isDomainError(acResult)) {
+					setEvents((prev) => [...prev, ...acResult]);
+				}
+			}
+
+			// Set creatureId on the combatant
+			const currentEncounter = store.get();
+			const updated = {
+				...currentEncounter,
+				combatants: currentEncounter.combatants.map((c) =>
+					c.id === id ? { ...c, creatureId: creature.id } : c,
+				),
+			};
+			setEncounter(updated);
+
+			setEvents((prev) => [...prev, ...addResult]);
+		},
+		[makeStore, editCombatant],
+	);
+
 	return {
 		encounter,
 		events,
@@ -232,5 +288,6 @@ export function useEncounter() {
 		setAc,
 		toggleCondition,
 		toggleConcentration,
+		addFromBestiary,
 	} as const;
 }