Add PF2e weak/elite creature adjustments with stat block toggle

Weak/Normal/Elite toggle in PF2e stat block header applies standard
adjustments (level, AC, HP, saves, Perception, attacks, damage) to
individual combatants. Adjusted stats are highlighted blue (elite) or
red (weak). Persisted via creatureAdjustment field on Combatant.

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

apps/web/src/hooks/use-side-panel-state.ts

@@ -1,15 +1,16 @@
-import type { CreatureId } from "@initiative/domain";
+import type { CombatantId, CreatureId } from "@initiative/domain";
 import { useCallback, useEffect, useState } from "react";
 
 type PanelView =
 	| { mode: "closed" }
-	| { mode: "creature"; creatureId: CreatureId }
+	| { mode: "creature"; creatureId: CreatureId; combatantId?: CombatantId }
 	| { mode: "bulk-import" }
 	| { mode: "source-manager" };
 
 interface SidePanelState {
 	panelView: PanelView;
 	selectedCreatureId: CreatureId | null;
+	selectedCombatantId: CombatantId | null;
 	bulkImportMode: boolean;
 	sourceManagerMode: boolean;
 	isRightPanelCollapsed: boolean;
@@ -18,8 +19,8 @@ interface SidePanelState {
 }
 
 interface SidePanelActions {
-	showCreature: (creatureId: CreatureId) => void;
-	updateCreature: (creatureId: CreatureId) => void;
+	showCreature: (creatureId: CreatureId, combatantId?: CombatantId) => void;
+	updateCreature: (creatureId: CreatureId, combatantId?: CombatantId) => void;
 	showBulkImport: () => void;
 	showSourceManager: () => void;
 	dismissPanel: () => void;
@@ -48,14 +49,23 @@ export function useSidePanelState(): SidePanelState & SidePanelActions {
 	const selectedCreatureId =
 		panelView.mode === "creature" ? panelView.creatureId : null;
 
-	const showCreature = useCallback((creatureId: CreatureId) => {
-		setPanelView({ mode: "creature", creatureId });
-		setIsRightPanelCollapsed(false);
-	}, []);
+	const selectedCombatantId =
+		panelView.mode === "creature" ? (panelView.combatantId ?? null) : null;
 
-	const updateCreature = useCallback((creatureId: CreatureId) => {
-		setPanelView({ mode: "creature", creatureId });
-	}, []);
+	const showCreature = useCallback(
+		(creatureId: CreatureId, combatantId?: CombatantId) => {
+			setPanelView({ mode: "creature", creatureId, combatantId });
+			setIsRightPanelCollapsed(false);
+		},
+		[],
+	);
+
+	const updateCreature = useCallback(
+		(creatureId: CreatureId, combatantId?: CombatantId) => {
+			setPanelView({ mode: "creature", creatureId, combatantId });
+		},
+		[],
+	);
 
 	const showBulkImport = useCallback(() => {
 		setPanelView({ mode: "bulk-import" });
@@ -90,6 +100,7 @@ export function useSidePanelState(): SidePanelState & SidePanelActions {
 	return {
 		panelView,
 		selectedCreatureId,
+		selectedCombatantId,
 		bulkImportMode: panelView.mode === "bulk-import",
 		sourceManagerMode: panelView.mode === "source-manager",
 		isRightPanelCollapsed,