Implement the 032-inline-confirm-buttons feature that replaces single-click destructive actions with a reusable ConfirmButton component providing inline two-step confirmation (click to arm, click to execute), applied to the remove combatant and clear encounter buttons, with CSS scale pulse animation, 5-second auto-revert, click-outside/Escape/blur dismissal, full keyboard accessibility, and 13 unit tests via @testing-library/react

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

apps/web/src/components/turn-navigation.tsx

@@ -2,6 +2,7 @@ import type { Encounter } from "@initiative/domain";
 import { Settings, StepBack, StepForward, Trash2 } from "lucide-react";
 import { D20Icon } from "./d20-icon";
 import { Button } from "./ui/button";
+import { ConfirmButton } from "./ui/confirm-button";
 
 interface TurnNavigationProps {
 	encounter: Encounter;
@@ -74,15 +75,13 @@ export function TurnNavigation({
 					>
 						<Settings className="h-5 w-5" />
 					</Button>
-					<Button
-						variant="ghost"
-						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-destructive"
-						onClick={onClearEncounter}
+					<ConfirmButton
+						icon={<Trash2 className="h-5 w-5" />}
+						label="Clear encounter"
+						onConfirm={onClearEncounter}
 						disabled={!hasCombatants}
-					>
-						<Trash2 className="h-5 w-5" />
-					</Button>
+						className="h-8 w-8 text-muted-foreground"
+					/>
 				</div>
 				<Button
 					variant="outline"