Add Pathfinder 2e game system mode

Implements PF2e as an alternative game system alongside D&D 5e/5.5e.
Settings modal "Game System" selector switches conditions, bestiary,
stat block layout, and initiative calculation between systems.

- Valued conditions with increment/decrement UX (Clumsy 2, Frightened 3)
- 2,502 PF2e creatures from bundled search index (77 sources)
- PF2e stat block: level, traits, Perception, Fort/Ref/Will, ability mods
- Perception-based initiative rolling
- System-scoped source cache (D&D and PF2e sources don't collide)
- Backwards-compatible condition rehydration (ConditionId[] → ConditionEntry[])
- Difficulty indicator hidden in PF2e mode (excluded from MVP)

Closes dostulata/initiative#19

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/condition-picker.tsx

@@ -1,8 +1,10 @@
 import {
+	type ConditionEntry,
 	type ConditionId,
 	getConditionDescription,
 	getConditionsForEdition,
 } from "@initiative/domain";
+import { Check, Minus, Plus } from "lucide-react";
 import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
@@ -16,8 +18,9 @@ import { Tooltip } from "./ui/tooltip.js";
 
 interface ConditionPickerProps {
 	anchorRef: React.RefObject<HTMLElement | null>;
-	activeConditions: readonly ConditionId[] | undefined;
+	activeConditions: readonly ConditionEntry[] | undefined;
 	onToggle: (conditionId: ConditionId) => void;
+	onSetValue: (conditionId: ConditionId, value: number) => void;
 	onClose: () => void;
 }
 
@@ -25,6 +28,7 @@ export function ConditionPicker({
 	anchorRef,
 	activeConditions,
 	onToggle,
+	onSetValue,
 	onClose,
 }: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
@@ -34,6 +38,11 @@ export function ConditionPicker({
 		maxHeight: number;
 	} | null>(null);
 
+	const [editing, setEditing] = useState<{
+		id: ConditionId;
+		value: number;
+	} | null>(null);
+
 	useLayoutEffect(() => {
 		const anchor = anchorRef.current;
 		const el = ref.current;
@@ -59,7 +68,9 @@ export function ConditionPicker({
 
 	const { edition } = useRulesEditionContext();
 	const conditions = getConditionsForEdition(edition);
-	const active = new Set(activeConditions ?? []);
+	const activeMap = new Map(
+		(activeConditions ?? []).map((e) => [e.id, e.value]),
+	);
 
 	return createPortal(
 		<div
@@ -74,35 +85,112 @@ export function ConditionPicker({
 			{conditions.map((def) => {
 				const Icon = CONDITION_ICON_MAP[def.iconName];
 				if (!Icon) return null;
-				const isActive = active.has(def.id);
+				const isActive = activeMap.has(def.id);
+				const activeValue = activeMap.get(def.id);
+				const isEditing = editing?.id === def.id;
 				const colorClass =
 					CONDITION_COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+
+				const handleClick = () => {
+					if (def.valued && edition === "pf2e") {
+						const current = activeMap.get(def.id);
+						setEditing({
+							id: def.id,
+							value: current ?? 1,
+						});
+					} else {
+						onToggle(def.id);
+					}
+				};
+
 				return (
 					<Tooltip
 						key={def.id}
 						content={getConditionDescription(def, edition)}
 						className="block"
 					>
-						<button
-							type="button"
+						<div
 							className={cn(
-								"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-hover-neutral-bg",
-								isActive && "bg-card/50",
+								"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors",
+								(isActive || isEditing) && "bg-card/50",
 							)}
-							onClick={() => onToggle(def.id)}
 						>
-							<Icon
-								size={14}
-								className={isActive ? colorClass : "text-muted-foreground"}
-							/>
-							<span
-								className={
-									isActive ? "text-foreground" : "text-muted-foreground"
-								}
+							<button
+								type="button"
+								className="flex flex-1 items-center gap-2"
+								onClick={handleClick}
 							>
-								{def.label}
-							</span>
-						</button>
+								<Icon
+									size={14}
+									className={
+										isActive || isEditing ? colorClass : "text-muted-foreground"
+									}
+								/>
+								<span
+									className={
+										isActive || isEditing
+											? "text-foreground"
+											: "text-muted-foreground"
+									}
+								>
+									{def.label}
+								</span>
+							</button>
+							{isActive && def.valued && edition === "pf2e" && !isEditing && (
+								<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground text-xs">
+									{activeValue}
+								</span>
+							)}
+							{isEditing && (
+								<div className="flex items-center gap-0.5">
+									<button
+										type="button"
+										className="rounded p-0.5 text-foreground hover:bg-accent/40"
+										onMouseDown={(e) => e.preventDefault()}
+										onClick={(e) => {
+											e.stopPropagation();
+											if (editing.value > 1) {
+												setEditing({
+													...editing,
+													value: editing.value - 1,
+												});
+											}
+										}}
+									>
+										<Minus className="h-3 w-3" />
+									</button>
+									<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground text-xs">
+										{editing.value}
+									</span>
+									<button
+										type="button"
+										className="rounded p-0.5 text-foreground hover:bg-accent/40"
+										onMouseDown={(e) => e.preventDefault()}
+										onClick={(e) => {
+											e.stopPropagation();
+											setEditing({
+												...editing,
+												value: editing.value + 1,
+											});
+										}}
+									>
+										<Plus className="h-3 w-3" />
+									</button>
+									<button
+										type="button"
+										className="ml-0.5 rounded p-0.5 text-foreground hover:bg-accent/40"
+										onMouseDown={(e) => e.preventDefault()}
+										onClick={(e) => {
+											e.stopPropagation();
+											onSetValue(editing.id, editing.value);
+											setEditing(null);
+										}}
+									>
+										<Check className="h-3.5 w-3.5" />
+									</button>
+								</div>
+							)}
+						</div>
 					</Tooltip>
 				);
 			})}