Implement the 011-quick-hp-input feature that adds an inline damage/heal numeric input per combatant row with mode toggle, keyboard workflow, and visual distinction

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

apps/web/src/components/combatant-row.tsx

@@ -2,6 +2,7 @@ import type { CombatantId } from "@initiative/domain";
 import { X } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "../lib/utils";
+import { QuickHpInput } from "./quick-hp-input";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 
@@ -228,6 +229,9 @@ export function CombatantRow({
 					<span className="text-sm tabular-nums text-muted-foreground">/</span>
 				)}
 				<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
+				{maxHp !== undefined && (
+					<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
+				)}
 			</div>
 
 			{/* Actions */}

apps/web/src/components/quick-hp-input.tsx

@@ -0,0 +1,100 @@
+import type { CombatantId } from "@initiative/domain";
+import { Heart, Sword } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+type Mode = "damage" | "heal";
+
+interface QuickHpInputProps {
+	readonly combatantId: CombatantId;
+	readonly disabled?: boolean;
+	readonly onAdjustHp: (id: CombatantId, delta: number) => void;
+}
+
+export function QuickHpInput({
+	combatantId,
+	disabled,
+	onAdjustHp,
+}: QuickHpInputProps) {
+	const [mode, setMode] = useState<Mode>("damage");
+	const [inputValue, setInputValue] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const apply = useCallback(() => {
+		if (inputValue === "") return;
+		const n = Number.parseInt(inputValue, 10);
+		if (Number.isNaN(n) || n <= 0) return;
+		const delta = mode === "damage" ? -n : n;
+		onAdjustHp(combatantId, delta);
+		setInputValue("");
+	}, [inputValue, mode, combatantId, onAdjustHp]);
+
+	const toggleMode = useCallback(() => {
+		setMode((m) => (m === "damage" ? "heal" : "damage"));
+	}, []);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				apply();
+			} else if (e.key === "Escape") {
+				setInputValue("");
+			} else if (e.key === "Tab") {
+				e.preventDefault();
+				toggleMode();
+			}
+		},
+		[apply, toggleMode],
+	);
+
+	const isDamage = mode === "damage";
+
+	return (
+		<div className="flex items-center gap-0.5">
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				disabled={disabled}
+				className={cn(
+					"h-7 w-7 shrink-0",
+					isDamage
+						? "text-red-400 hover:bg-red-950 hover:text-red-300"
+						: "text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300",
+				)}
+				onClick={toggleMode}
+				title={
+					isDamage
+						? "Damage mode (click to switch to heal)"
+						: "Heal mode (click to switch to damage)"
+				}
+				aria-label={isDamage ? "Switch to heal mode" : "Switch to damage mode"}
+			>
+				{isDamage ? <Sword size={14} /> : <Heart size={14} />}
+			</Button>
+			<Input
+				ref={inputRef}
+				type="text"
+				inputMode="numeric"
+				disabled={disabled}
+				value={inputValue}
+				placeholder={isDamage ? "Dmg" : "Heal"}
+				className={cn(
+					"h-7 w-[7ch] text-center text-sm tabular-nums",
+					isDamage
+						? "focus-visible:ring-red-500/50"
+						: "focus-visible:ring-emerald-500/50",
+				)}
+				onChange={(e) => {
+					const v = e.target.value;
+					if (v === "" || /^\d+$/.test(v)) {
+						setInputValue(v);
+					}
+				}}
+				onKeyDown={handleKeyDown}
+			/>
+		</div>
+	);
+}