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/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);
 }