Add PF2e equipment display with detail popovers in stat blocks

Extract shared DetailPopover shell from spell popovers. Normalize
weapon/consumable/equipment/armor items from Foundry data into
mundane (Items line) and detailed (Equipment section with clickable
popovers). Scrolls/wands show embedded spell info. Bump IDB cache v7.

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

apps/web/src/components/__tests__/equipment-detail-popover.test.tsx

@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { EquipmentItem } from "@initiative/domain";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { EquipmentDetailPopover } from "../equipment-detail-popover.js";
+
+afterEach(cleanup);
+
+const POISON: EquipmentItem = {
+	name: "Giant Wasp Venom",
+	level: 7,
+	category: "poison",
+	traits: ["consumable", "poison", "injury"],
+	description: "A deadly poison extracted from giant wasps.",
+};
+
+const SCROLL: EquipmentItem = {
+	name: "Scroll of Teleport",
+	level: 11,
+	category: "scroll",
+	traits: ["consumable", "magical", "scroll"],
+	description: "A scroll containing Teleport.",
+	spellName: "Teleport",
+	spellRank: 6,
+};
+
+const ANCHOR: DOMRect = new DOMRect(100, 100, 50, 20);
+const SCROLL_SPELL_REGEX = /Teleport \(Rank 6\)/;
+const DIALOG_LABEL_REGEX = /Equipment details: Giant Wasp Venom/;
+
+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(),
+		})),
+	});
+});
+
+describe("EquipmentDetailPopover", () => {
+	it("renders item name, level, traits, and description", () => {
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText("Giant Wasp Venom")).toBeInTheDocument();
+		expect(screen.getByText("7")).toBeInTheDocument();
+		expect(screen.getByText("consumable")).toBeInTheDocument();
+		expect(screen.getByText("poison")).toBeInTheDocument();
+		expect(screen.getByText("injury")).toBeInTheDocument();
+		expect(
+			screen.getByText("A deadly poison extracted from giant wasps."),
+		).toBeInTheDocument();
+	});
+
+	it("renders scroll/wand spell info", () => {
+		render(
+			<EquipmentDetailPopover
+				item={SCROLL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText(SCROLL_SPELL_REGEX)).toBeInTheDocument();
+	});
+
+	it("calls onClose when Escape is pressed", () => {
+		const onClose = vi.fn();
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={onClose}
+			/>,
+		);
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("uses the dialog role with the item name as label", () => {
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(
+			screen.getByRole("dialog", {
+				name: DIALOG_LABEL_REGEX,
+			}),
+		).toBeInTheDocument();
+	});
+});

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

@@ -31,6 +31,7 @@ const RK_DC_25_REGEX = /DC 25/;
 const RK_HUMANOID_SOCIETY_REGEX = /Humanoid \(Society\)/;
 const RK_UNDEAD_RELIGION_REGEX = /Undead \(Religion\)/;
 const RK_BEAST_SKILLS_REGEX = /Beast \(Arcana\/Nature\)/;
+const SCROLL_NAME_REGEX = /Scroll of Teleport/;
 
 const GOBLIN_WARRIOR: Pf2eCreature = {
 	system: "pf2e",
@@ -338,6 +339,79 @@ describe("Pf2eStatBlock", () => {
 		});
 	});
 
+	describe("equipment section", () => {
+		const CREATURE_WITH_EQUIPMENT: Pf2eCreature = {
+			...GOBLIN_WARRIOR,
+			id: creatureId("test:equipped"),
+			name: "Equipped NPC",
+			items: "longsword, leather armor",
+			equipment: [
+				{
+					name: "Giant Wasp Venom",
+					level: 7,
+					category: "poison",
+					traits: ["consumable", "poison"],
+					description: "A deadly poison extracted from giant wasps.",
+				},
+				{
+					name: "Scroll of Teleport",
+					level: 11,
+					category: "scroll",
+					traits: ["consumable", "magical", "scroll"],
+					description: "A scroll containing Teleport.",
+					spellName: "Teleport",
+					spellRank: 6,
+				},
+				{
+					name: "Plain Talisman",
+					level: 1,
+					traits: ["magical"],
+				},
+			],
+		};
+
+		it("renders Equipment section with item names", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.getByRole("heading", { name: "Equipment" }),
+			).toBeInTheDocument();
+			expect(screen.getByText("Giant Wasp Venom")).toBeInTheDocument();
+		});
+
+		it("renders scroll name as-is from Foundry data", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(screen.getByText(SCROLL_NAME_REGEX)).toBeInTheDocument();
+		});
+
+		it("does not render Equipment section when creature has no equipment", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(
+				screen.queryByRole("heading", { name: "Equipment" }),
+			).not.toBeInTheDocument();
+		});
+
+		it("renders equipment items with descriptions as clickable buttons", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.getByRole("button", { name: "Giant Wasp Venom" }),
+			).toBeInTheDocument();
+		});
+
+		it("renders equipment items without descriptions as plain text", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.queryByRole("button", { name: "Plain Talisman" }),
+			).not.toBeInTheDocument();
+			expect(screen.getByText("Plain Talisman")).toBeInTheDocument();
+		});
+
+		it("renders Items line with mundane item names", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(screen.getByText("Items")).toBeInTheDocument();
+			expect(screen.getByText("longsword, leather armor")).toBeInTheDocument();
+		});
+	});
+
 	describe("clickable spells", () => {
 		const SPELLCASTER: Pf2eCreature = {
 			...NAUNET,

apps/web/src/components/detail-popover.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useClickOutside } from "../hooks/use-click-outside.js";
+import { useSwipeToDismissDown } from "../hooks/use-swipe-to-dismiss.js";
+import { cn } from "../lib/utils.js";
+
+interface DetailPopoverProps {
+	readonly anchorRect: DOMRect;
+	readonly onClose: () => void;
+	readonly ariaLabel: string;
+	readonly children: ReactNode;
+}
+
+function DesktopPanel({
+	anchorRect,
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<DetailPopoverProps>) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const popover = el.getBoundingClientRect();
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+		// Prefer placement to the LEFT of the anchor (panel is on the right edge)
+		let left = anchorRect.left - popover.width - 8;
+		if (left < 8) {
+			left = anchorRect.right + 8;
+		}
+		if (left + popover.width > vw - 8) {
+			left = vw - popover.width - 8;
+		}
+		let top = anchorRect.top;
+		if (top + popover.height > vh - 8) {
+			top = vh - popover.height - 8;
+		}
+		if (top < 8) top = 8;
+		setPos({ top, left });
+	}, [anchorRect]);
+
+	useClickOutside(ref, onClose);
+
+	return (
+		<div
+			ref={ref}
+			className="card-glow fixed z-50 max-h-[calc(100vh-16px)] w-80 max-w-[calc(100vw-16px)] overflow-y-auto rounded-lg border border-border bg-card p-4 shadow-lg"
+			style={pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }}
+			role="dialog"
+			aria-label={ariaLabel}
+		>
+			{children}
+		</div>
+	);
+}
+
+function MobileSheet({
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<Omit<DetailPopoverProps, "anchorRect">>) {
+	const { offsetY, isSwiping, handlers } = useSwipeToDismissDown(onClose);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [onClose]);
+
+	return (
+		<div className="fixed inset-0 z-50">
+			<button
+				type="button"
+				className="fade-in absolute inset-0 animate-in bg-black/50"
+				onClick={onClose}
+				aria-label="Close details"
+			/>
+			<div
+				className={cn(
+					"panel-glow absolute right-0 bottom-0 left-0 max-h-[80vh] rounded-t-2xl border-border border-t bg-card",
+					!isSwiping && "animate-slide-in-bottom",
+				)}
+				style={
+					isSwiping ? { transform: `translateY(${offsetY}px)` } : undefined
+				}
+				{...handlers}
+				role="dialog"
+				aria-label={ariaLabel}
+			>
+				<div className="flex justify-center pt-2 pb-1">
+					<div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
+				</div>
+				<div className="max-h-[calc(80vh-24px)] overflow-y-auto p-4">
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function DetailPopover({
+	anchorRect,
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<DetailPopoverProps>) {
+	const [isDesktop, setIsDesktop] = useState(
+		() => globalThis.matchMedia("(min-width: 1024px)").matches,
+	);
+
+	useEffect(() => {
+		const mq = globalThis.matchMedia("(min-width: 1024px)");
+		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	// Portal to document.body to escape any CSS transforms on ancestors
+	// (the side panel uses translate-x for collapse animation, which would
+	// otherwise become the containing block for fixed-positioned children).
+	const content = isDesktop ? (
+		<DesktopPanel
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={ariaLabel}
+		>
+			{children}
+		</DesktopPanel>
+	) : (
+		<MobileSheet onClose={onClose} ariaLabel={ariaLabel}>
+			{children}
+		</MobileSheet>
+	);
+	return createPortal(content, document.body);
+}

apps/web/src/components/equipment-detail-popover.tsx

@@ -0,0 +1,72 @@
+import type { EquipmentItem } from "@initiative/domain";
+import { DetailPopover } from "./detail-popover.js";
+import { RichDescription } from "./rich-description.js";
+
+interface EquipmentDetailPopoverProps {
+	readonly item: EquipmentItem;
+	readonly anchorRect: DOMRect;
+	readonly onClose: () => void;
+}
+
+function EquipmentDetailContent({ item }: Readonly<{ item: EquipmentItem }>) {
+	return (
+		<div className="space-y-2 text-sm">
+			<h3 className="font-bold text-lg text-stat-heading">{item.name}</h3>
+			{item.traits && item.traits.length > 0 && (
+				<div className="flex flex-wrap gap-1">
+					{item.traits.map((t) => (
+						<span
+							key={t}
+							className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
+						>
+							{t}
+						</span>
+					))}
+				</div>
+			)}
+			<div className="space-y-0.5 text-xs">
+				<div>
+					<span className="font-semibold">Level</span> {item.level}
+				</div>
+				{item.category ? (
+					<div>
+						<span className="font-semibold">Category</span>{" "}
+						{item.category.charAt(0).toUpperCase() + item.category.slice(1)}
+					</div>
+				) : null}
+				{item.spellName ? (
+					<div>
+						<span className="font-semibold">Spell</span> {item.spellName}
+						{item.spellRank === undefined ? "" : ` (Rank ${item.spellRank})`}
+					</div>
+				) : null}
+			</div>
+			{item.description ? (
+				<RichDescription
+					text={item.description}
+					className="whitespace-pre-line text-foreground"
+				/>
+			) : (
+				<p className="text-muted-foreground italic">
+					No description available.
+				</p>
+			)}
+		</div>
+	);
+}
+
+export function EquipmentDetailPopover({
+	item,
+	anchorRect,
+	onClose,
+}: Readonly<EquipmentDetailPopoverProps>) {
+	return (
+		<DetailPopover
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={`Equipment details: ${item.name}`}
+		>
+			<EquipmentDetailContent item={item} />
+		</DetailPopover>
+	);
+}

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

@@ -1,6 +1,11 @@
-import type { Pf2eCreature, SpellReference } from "@initiative/domain";
+import type {
+	EquipmentItem,
+	Pf2eCreature,
+	SpellReference,
+} from "@initiative/domain";
 import { formatInitiativeModifier, recallKnowledge } from "@initiative/domain";
 import { useCallback, useRef, useState } from "react";
+import { EquipmentDetailPopover } from "./equipment-detail-popover.js";
 import { SpellDetailPopover } from "./spell-detail-popover.js";
 import {
 	PropertyLine,
@@ -102,6 +107,35 @@ function SpellListLine({
 	);
 }
 
+interface EquipmentLinkProps {
+	readonly item: EquipmentItem;
+	readonly onOpen: (item: EquipmentItem, rect: DOMRect) => void;
+}
+
+function EquipmentLink({ item, onOpen }: Readonly<EquipmentLinkProps>) {
+	const ref = useRef<HTMLButtonElement>(null);
+	const handleClick = useCallback(() => {
+		if (!item.description) return;
+		const rect = ref.current?.getBoundingClientRect();
+		if (rect) onOpen(item, rect);
+	}, [item, onOpen]);
+
+	if (!item.description) {
+		return <span>{item.name}</span>;
+	}
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			onClick={handleClick}
+			className="cursor-pointer text-foreground underline decoration-dotted underline-offset-2 hover:text-hover-neutral"
+		>
+			{item.name}
+		</button>
+	);
+}
+
 export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 	const [openSpell, setOpenSpell] = useState<{
 		spell: SpellReference;
@@ -112,6 +146,15 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 		[],
 	);
 	const handleCloseSpell = useCallback(() => setOpenSpell(null), []);
+	const [openEquipment, setOpenEquipment] = useState<{
+		item: EquipmentItem;
+		rect: DOMRect;
+	} | null>(null);
+	const handleOpenEquipment = useCallback(
+		(item: EquipmentItem, rect: DOMRect) => setOpenEquipment({ item, rect }),
+		[],
+	);
+	const handleCloseEquipment = useCallback(() => setOpenEquipment(null), []);
 
 	const rk = recallKnowledge(creature.level, creature.traits);
 
@@ -256,6 +299,19 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 					))}
 				</>
 			)}
+			{creature.equipment && creature.equipment.length > 0 && (
+				<>
+					<SectionDivider />
+					<h3 className="font-bold text-base text-stat-heading">Equipment</h3>
+					<div className="space-y-1 text-sm">
+						{creature.equipment.map((item) => (
+							<div key={item.name}>
+								<EquipmentLink item={item} onOpen={handleOpenEquipment} />
+							</div>
+						))}
+					</div>
+				</>
+			)}
 			{openSpell ? (
 				<SpellDetailPopover
 					spell={openSpell.spell}
@@ -263,6 +319,13 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 					onClose={handleCloseSpell}
 				/>
 			) : null}
+			{openEquipment ? (
+				<EquipmentDetailPopover
+					item={openEquipment.item}
+					anchorRect={openEquipment.rect}
+					onClose={handleCloseEquipment}
+				/>
+			) : null}
 		</div>
 	);
 }

apps/web/src/components/rich-description.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../lib/utils.js";
+
+/**
+ * Renders text containing safe HTML formatting tags (strong, em, ul, ol, li)
+ * preserved by the stripFoundryTags pipeline. All other HTML is already
+ * stripped before reaching this component.
+ */
+export function RichDescription({
+	text,
+	className,
+}: Readonly<{ text: string; className?: string }>) {
+	const props = {
+		className: cn(
+			"[&_ol]:list-decimal [&_ol]:pl-4 [&_ul]:list-disc [&_ul]:pl-4",
+			className,
+		),
+		dangerouslySetInnerHTML: { __html: text },
+	};
+	return <div {...props} />;
+}

apps/web/src/components/spell-detail-popover.tsx

@@ -1,9 +1,6 @@
 import type { ActivityCost, SpellReference } from "@initiative/domain";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { useClickOutside } from "../hooks/use-click-outside.js";
-import { useSwipeToDismissDown } from "../hooks/use-swipe-to-dismiss.js";
-import { cn } from "../lib/utils.js";
+import { DetailPopover } from "./detail-popover.js";
+import { RichDescription } from "./rich-description.js";
 import { ActivityIcon } from "./stat-block-parts.js";
 
 interface SpellDetailPopoverProps {
@@ -138,24 +135,6 @@ function SpellMeta({ spell }: Readonly<{ spell: SpellReference }>) {
 	);
 }
 
-const SAVE_OUTCOME_REGEX =
-	/(Critical Success|Critical Failure|Success|Failure)/g;
-
-function SpellDescription({ text }: Readonly<{ text: string }>) {
-	const parts = text.split(SAVE_OUTCOME_REGEX);
-	const elements: React.ReactNode[] = [];
-	let offset = 0;
-	for (const part of parts) {
-		if (SAVE_OUTCOME_REGEX.test(part)) {
-			elements.push(<strong key={`b-${offset}`}>{part}</strong>);
-		} else if (part) {
-			elements.push(<span key={`t-${offset}`}>{part}</span>);
-		}
-		offset += part.length;
-	}
-	return <p className="whitespace-pre-line text-foreground">{elements}</p>;
-}
-
 function SpellDetailContent({ spell }: Readonly<{ spell: SpellReference }>) {
 	return (
 		<div className="space-y-2 text-sm">
@@ -163,134 +142,37 @@ function SpellDetailContent({ spell }: Readonly<{ spell: SpellReference }>) {
 			<SpellTraits traits={spell.traits ?? []} />
 			<SpellMeta spell={spell} />
 			{spell.description ? (
-				<SpellDescription text={spell.description} />
+				<RichDescription
+					text={spell.description}
+					className="whitespace-pre-line text-foreground"
+				/>
 			) : (
 				<p className="text-muted-foreground italic">
 					No description available.
 				</p>
 			)}
 			{spell.heightening ? (
-				<p className="whitespace-pre-line text-foreground text-xs">
-					{spell.heightening}
-				</p>
+				<RichDescription
+					text={spell.heightening}
+					className="whitespace-pre-line text-foreground text-xs"
+				/>
 			) : null}
 		</div>
 	);
 }
 
-function DesktopPopover({
-	spell,
-	anchorRect,
-	onClose,
-}: Readonly<SpellDetailPopoverProps>) {
-	const ref = useRef<HTMLDivElement>(null);
-	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
-
-	useLayoutEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		const popover = el.getBoundingClientRect();
-		const vw = document.documentElement.clientWidth;
-		const vh = document.documentElement.clientHeight;
-		// Prefer placement to the LEFT of the anchor (panel is on the right edge)
-		let left = anchorRect.left - popover.width - 8;
-		if (left < 8) {
-			left = anchorRect.right + 8;
-		}
-		if (left + popover.width > vw - 8) {
-			left = vw - popover.width - 8;
-		}
-		let top = anchorRect.top;
-		if (top + popover.height > vh - 8) {
-			top = vh - popover.height - 8;
-		}
-		if (top < 8) top = 8;
-		setPos({ top, left });
-	}, [anchorRect]);
-
-	useClickOutside(ref, onClose);
-
-	return (
-		<div
-			ref={ref}
-			className="card-glow fixed z-50 max-h-[calc(100vh-16px)] w-80 max-w-[calc(100vw-16px)] overflow-y-auto rounded-lg border border-border bg-card p-4 shadow-lg"
-			style={pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }}
-			role="dialog"
-			aria-label={`Spell details: ${spell.name}`}
-		>
-			<SpellDetailContent spell={spell} />
-		</div>
-	);
-}
-
-function MobileSheet({
-	spell,
-	onClose,
-}: Readonly<{ spell: SpellReference; onClose: () => void }>) {
-	const { offsetY, isSwiping, handlers } = useSwipeToDismissDown(onClose);
-
-	useEffect(() => {
-		const handler = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onClose();
-		};
-		document.addEventListener("keydown", handler);
-		return () => document.removeEventListener("keydown", handler);
-	}, [onClose]);
-
-	return (
-		<div className="fixed inset-0 z-50">
-			<button
-				type="button"
-				className="fade-in absolute inset-0 animate-in bg-black/50"
-				onClick={onClose}
-				aria-label="Close spell details"
-			/>
-			<div
-				className={cn(
-					"panel-glow absolute right-0 bottom-0 left-0 max-h-[80vh] rounded-t-2xl border-border border-t bg-card",
-					!isSwiping && "animate-slide-in-bottom",
-				)}
-				style={
-					isSwiping ? { transform: `translateY(${offsetY}px)` } : undefined
-				}
-				{...handlers}
-				role="dialog"
-				aria-label={`Spell details: ${spell.name}`}
-			>
-				<div className="flex justify-center pt-2 pb-1">
-					<div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
-				</div>
-				<div className="max-h-[calc(80vh-24px)] overflow-y-auto p-4">
-					<SpellDetailContent spell={spell} />
-				</div>
-			</div>
-		</div>
-	);
-}
-
 export function SpellDetailPopover({
 	spell,
 	anchorRect,
 	onClose,
 }: Readonly<SpellDetailPopoverProps>) {
-	const [isDesktop, setIsDesktop] = useState(
-		() => globalThis.matchMedia("(min-width: 1024px)").matches,
+	return (
+		<DetailPopover
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={`Spell details: ${spell.name}`}
+		>
+			<SpellDetailContent spell={spell} />
+		</DetailPopover>
 	);
-
-	useEffect(() => {
-		const mq = globalThis.matchMedia("(min-width: 1024px)");
-		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, []);
-
-	// Portal to document.body to escape any CSS transforms on ancestors
-	// (the side panel uses translate-x for collapse animation, which would
-	// otherwise become the containing block for fixed-positioned children).
-	const content = isDesktop ? (
-		<DesktopPopover spell={spell} anchorRect={anchorRect} onClose={onClose} />
-	) : (
-		<MobileSheet spell={spell} onClose={onClose} />
-	);
-	return createPortal(content, document.body);
 }

apps/web/src/components/stat-block-parts.tsx

@@ -3,6 +3,7 @@ import type {
 	TraitBlock,
 	TraitSegment,
 } from "@initiative/domain";
+import { RichDescription } from "./rich-description.js";
 
 export function PropertyLine({
 	label,
@@ -39,20 +40,22 @@ function TraitSegments({
 			{segments.map((seg, i) => {
 				if (seg.type === "text") {
 					return (
-						<span key={segmentKey(seg)}>
-							{i === 0 ? ` ${seg.value}` : seg.value}
-						</span>
+						<RichDescription
+							key={segmentKey(seg)}
+							text={i === 0 ? ` ${seg.value}` : seg.value}
+							className="inline whitespace-pre-line"
+						/>
 					);
 				}
 				return (
 					<div key={segmentKey(seg)} className="mt-1 space-y-0.5">
 						{seg.items.map((item) => (
-							<p key={item.label ?? item.text}>
+							<div key={item.label ?? item.text}>
 								{item.label != null && (
 									<span className="font-semibold">{item.label}. </span>
 								)}
-								{item.text}
-							</p>
+								<RichDescription text={item.text} className="inline" />
+							</div>
 						))}
 					</div>
 				);