Add PF2e spell description popovers in stat blocks
All checks were successful
CI / check (push) Successful in 2m31s
CI / build-image (push) Successful in 26s

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>
This commit is contained in:
Lukas
2026-04-10 16:18:08 +02:00
parent 9b0cb38897
commit e161645228
17 changed files with 1302 additions and 62 deletions

View File

@@ -134,7 +134,7 @@ export function DndStatBlock({ creature }: Readonly<DndStatBlockProps>) {
{sc.atWill && sc.atWill.length > 0 && (
<div className="pl-2">
<span className="font-semibold">At Will:</span>{" "}
{sc.atWill.join(", ")}
{sc.atWill.map((s) => s.name).join(", ")}
</div>
)}
{sc.daily?.map((d) => (
@@ -143,7 +143,7 @@ export function DndStatBlock({ creature }: Readonly<DndStatBlockProps>) {
{d.uses}/day
{d.each ? " each" : ""}:
</span>{" "}
{d.spells.join(", ")}
{d.spells.map((s) => s.name).join(", ")}
</div>
))}
{sc.restLong?.map((d) => (
@@ -155,7 +155,7 @@ export function DndStatBlock({ creature }: Readonly<DndStatBlockProps>) {
{d.uses}/long rest
{d.each ? " each" : ""}:
</span>{" "}
{d.spells.join(", ")}
{d.spells.map((s) => s.name).join(", ")}
</div>
))}
</div>