New /events page rendering the full game event ledger (system + narrative events) with type/target/source/date filtering, backed by a shared shadcn table component.
- Add showCloseButton prop to DialogContent for modal workflows
- Add line variant to TabsList via class-variance-authority
- Add arrowClassName prop to TooltipContent for arrow styling
- Add optional title prop to CommandDialog for accessibility
The shadcn component update pulled sidebar.tsx using Tailwind v3-style
bare-bracket custom property syntax (w-[--sidebar-width]). Under Tailwind
v4 this compiles to invalid CSS (width: --sidebar-width) which the browser
ignores, so width fell back to auto and the fixed sidebar blew out to its
content's intrinsic width (the 1372px logo header ~ half the page). The
empty spacer div was equally broken, reserving zero space and leaving the
inset m-2 margin as a stray left gap.
Three fixes:
- sidebar.tsx: wrap all 7 bare-bracket custom properties in var() so they
compile to width: var(--sidebar-width) / var(--sidebar-width-icon) /
max-width: var(--skeleton-width). The calc(var(...)) rules were already
valid; only the bare forms were broken.
- layout.tsx: replace the raw <main className="min-h-full bg-background
w-full"> with <SidebarInset>. AppSidebar uses variant="inset", whose
peer styling (md:peer-data-[variant=inset]:m-2 / :rounded-xl / :shadow)
only applies to a SidebarInset sibling, so the inset gap/rounding/shadow
were silently dropped.
- SiteHeader.tsx: replace the raw <div> + border-gray-800 + p-4 with the
standard shadcn <header className="flex h-16 shrink-0 items-center gap-2
border-b px-4"> using semantic border-b, plus -ml-1 on SidebarTrigger
and an ml-auto wrapper for NotificationsBell (which takes no className).
Verified via the running dev server: SSR HTML carries
data-variant="inset", a single <main> with the peer-data-[variant=inset]
classes, <header ... border-b>, and zero border-gray-800 occurrences.
tsc --noEmit clean for the changed files.
- Add arrowClassName prop to TooltipContent component
- Pass bg-popover fill-popover to wardrobe tooltip arrow
- Arrow now matches the dark tooltip body instead of being white
- NarrativeEvents collection redesigned with flowData JSON (React Flow format)
- Custom admin field component: NarrativeFlowEditor with @xyflow/react
- Three node types: NarrativeBeat (blue), Choice (amber), Outcome (emerald)
- NodeEditDialog with type-specific forms replacing prompt() editing
- Right-click context menu (Delete node/edge with Radix primitives)
- Dynamic handles on Choice nodes (one per option)
- Dark-themed canvas with MiniMap, Controls, and animated edges
- All changes sync bidirectionally with Payload form state
- AGENTS.md updated with architecture docs
- Added Google Fonts import for `Geist` and `Geist Mono` to `styles.css`.
- Aligned, cleaned styling variables and properties consistently.
- Updated `seedUsers.ts` to include a developer role.
- Introduced `bun.lock` file for dependency management.
