Add PF2e spell description popovers in stat blocks

Clicking a spell name in a PF2e creature's stat block now opens a
popover (desktop) or bottom sheet (mobile) showing full spell details:
description, traits, rank, range, target, area, duration, defense,
action cost icons, and heightening rules. All data is sourced from
the embedded Foundry VTT spell items already in the bestiary cache.

- Add SpellReference type replacing bare string spell arrays
- Extract full spell data in pf2e-bestiary-adapter (description,
  traits, traditions, range, target, area, duration, defense,
  action cost, heightening, overlays)
- Strip inline heightening text from descriptions to avoid duplication
- Bold save outcome labels (Critical Success/Failure) in descriptions
- Bump DB_VERSION to 6 for cache invalidation
- Add useSwipeToDismissDown hook for mobile bottom sheet
- Portal popover to document.body to escape transformed ancestors

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

apps/web/src/components/__tests__/pf2e-stat-block.test.tsx

@@ -4,11 +4,14 @@ import "@testing-library/jest-dom/vitest";
 import type { Pf2eCreature } from "@initiative/domain";
 import { creatureId } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Pf2eStatBlock } from "../pf2e-stat-block.js";
 
 afterEach(cleanup);
 
+const USES_PER_DAY_REGEX = /×3/;
+const HEAL_DESCRIPTION_REGEX = /channel positive energy/;
 const PERCEPTION_SENSES_REGEX = /\+2.*Darkvision/;
 const SKILLS_REGEX = /Acrobatics \+5.*Stealth \+5/;
 const SAVE_CONDITIONAL_REGEX = /\+12.*\+1 status to all saves vs\. magic/;
@@ -90,9 +93,13 @@ const NAUNET: Pf2eCreature = {
 			name: "Divine Innate Spells",
 			headerText: "DC 25, attack +17",
 			daily: [
-				{ uses: 4, each: true, spells: ["Unfettered Movement (Constant)"] },
+				{
+					uses: 4,
+					each: true,
+					spells: [{ name: "Unfettered Movement (Constant)" }],
+				},
 			],
-			atWill: ["Detect Magic"],
+			atWill: [{ name: "Detect Magic" }],
 		},
 	],
 };
@@ -277,4 +284,87 @@ describe("Pf2eStatBlock", () => {
 			expect(screen.queryByText(CANTRIPS_REGEX)).not.toBeInTheDocument();
 		});
 	});
+
+	describe("clickable spells", () => {
+		const SPELLCASTER: Pf2eCreature = {
+			...NAUNET,
+			id: creatureId("test:spellcaster"),
+			name: "Spellcaster",
+			spellcasting: [
+				{
+					name: "Divine Innate Spells",
+					headerText: "DC 30, attack +20",
+					atWill: [{ name: "Detect Magic", rank: 1 }],
+					daily: [
+						{
+							uses: 4,
+							each: true,
+							spells: [
+								{
+									name: "Heal",
+									description: "You channel positive energy to heal.",
+									rank: 4,
+									usesPerDay: 3,
+								},
+								{ name: "Restoration", rank: 4 },
+							],
+						},
+					],
+				},
+			],
+		};
+
+		beforeEach(() => {
+			Object.defineProperty(globalThis, "matchMedia", {
+				writable: true,
+				configurable: true,
+				value: vi.fn().mockImplementation(() => ({
+					matches: true,
+					media: "(min-width: 1024px)",
+					onchange: null,
+					addEventListener: vi.fn(),
+					removeEventListener: vi.fn(),
+					addListener: vi.fn(),
+					removeListener: vi.fn(),
+					dispatchEvent: vi.fn(),
+				})),
+			});
+		});
+
+		it("renders a spell with a description as a clickable button", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(screen.getByRole("button", { name: "Heal" })).toBeInTheDocument();
+		});
+
+		it("renders a spell without description as plain text (not a button)", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(
+				screen.queryByRole("button", { name: "Restoration" }),
+			).not.toBeInTheDocument();
+			expect(screen.getByText("Restoration")).toBeInTheDocument();
+		});
+
+		it("renders usesPerDay as plain text alongside the spell button", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(screen.getByText(USES_PER_DAY_REGEX)).toBeInTheDocument();
+		});
+
+		it("opens the spell popover when a spell button is clicked", async () => {
+			const user = userEvent.setup();
+			renderStatBlock(SPELLCASTER);
+			await user.click(screen.getByRole("button", { name: "Heal" }));
+			expect(screen.getByText(HEAL_DESCRIPTION_REGEX)).toBeInTheDocument();
+		});
+
+		it("closes the popover when Escape is pressed", async () => {
+			const user = userEvent.setup();
+			renderStatBlock(SPELLCASTER);
+			await user.click(screen.getByRole("button", { name: "Heal" }));
+			expect(screen.getByText(HEAL_DESCRIPTION_REGEX)).toBeInTheDocument();
+			await user.keyboard("{Escape}");
+			expect(
+				screen.queryByText(HEAL_DESCRIPTION_REGEX),
+			).not.toBeInTheDocument();
+		});
+	});
 });