@dtsports/design-system 0.2.0

package/src/showcase/page.tsx

@@ -0,0 +1,4216 @@
+"use client";
+
+import * as React from "react";
+import {
+  AlertTriangle,
+  CalendarDays,
+  CalendarPlus,
+  CheckCircle2,
+  ChevronDown,
+  CircleHelp,
+  Edit,
+  Inbox,
+  Info,
+  LayoutDashboard,
+  MapPin,
+  MoreHorizontal,
+  Repeat,
+  Settings,
+  Trash2,
+  Trophy,
+  Users,
+  XCircle,
+  Zap,
+} from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AspectRatio,
+  Calendar,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Combobox,
+  DatePicker,
+  SkeletonList,
+  SkeletonTable,
+  Slider,
+  Toaster,
+  toast,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  CapacityBar,
+  Chip,
+  Container,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  ConfirmAction,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  EmptyState,
+  FormField,
+  Input,
+  Label,
+  LivePill,
+  MetricTile,
+  MoneyBreakdown,
+  NumberInput,
+  Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  ScrollArea,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  SidebarBody,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarSection,
+  Skeleton,
+  Spec,
+  SpecList,
+  Spinner,
+  Stack,
+  StatusPill,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  ThemeToggle,
+  ThreeState,
+  Timestamp,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TopBar,
+  type GameStatus,
+  type ListState,
+} from "..";
+
+// Showcase-only helpers (live in the app, not the design system).
+import { Footer, Hero, LogoCloud, MarketingNav, Prose } from "../marketing";
+import { Swatch } from "./components/swatch";
+import { DocSection, DocSubsection } from "./components/section";
+import { CodeBlock } from "./components/code-block";
+import { Example, PreviewCode } from "./components/example";
+
+type NavItem = { id: string; label: string };
+type NavGroup = { id: string; label: string; items: NavItem[] };
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    id: "group-principles",
+    label: "Principles",
+    items: [
+      { id: "principles-visual", label: "Visual principles" },
+      { id: "principles-ux", label: "UX principles" },
+    ],
+  },
+  {
+    id: "group-foundations",
+    label: "Foundations",
+    items: [
+      { id: "colors", label: "Colors" },
+      { id: "typography", label: "Typography" },
+      { id: "spacing", label: "Spacing" },
+      { id: "radius", label: "Radius" },
+      { id: "elevation", label: "Elevation" },
+      { id: "icons", label: "Iconography" },
+      { id: "motion", label: "Motion" },
+    ],
+  },
+  {
+    id: "group-components",
+    label: "Components",
+    items: [
+      { id: "buttons", label: "Buttons" },
+      { id: "inputs", label: "Inputs" },
+      { id: "checkbox", label: "Checkbox" },
+      { id: "radio", label: "Radio group" },
+      { id: "switch", label: "Switch" },
+      { id: "select", label: "Select" },
+      { id: "combobox", label: "Combobox" },
+      { id: "textarea", label: "Textarea" },
+      { id: "number-input", label: "Number input" },
+      { id: "slider", label: "Slider" },
+      { id: "date-picker", label: "Date picker" },
+      { id: "form-field", label: "Form field" },
+      { id: "alert", label: "Alert" },
+      { id: "badges", label: "Badges" },
+      { id: "chip", label: "Chip" },
+      { id: "status", label: "Status pill" },
+      { id: "cards", label: "Cards" },
+      { id: "metrics", label: "Metric tiles" },
+      { id: "spec", label: "Spec list" },
+      { id: "capacity", label: "Capacity bar" },
+      { id: "tables", label: "Tables" },
+      { id: "pagination", label: "Pagination" },
+      { id: "tabs", label: "Tabs" },
+      { id: "accordion", label: "Accordion" },
+      { id: "collapsible", label: "Collapsible" },
+      { id: "dialog", label: "Dialog" },
+      { id: "drawer", label: "Drawer" },
+      { id: "popover", label: "Popover" },
+      { id: "dropdown", label: "Dropdown menu" },
+      { id: "tooltip", label: "Tooltip" },
+      { id: "separator", label: "Separator" },
+      { id: "toast", label: "Toasts" },
+      { id: "empty", label: "Empty states" },
+      { id: "avatars", label: "Avatars" },
+      { id: "avatar-group", label: "Avatar group" },
+      { id: "skeleton", label: "Skeleton" },
+      { id: "spinner", label: "Spinner" },
+      { id: "progress", label: "Progress" },
+    ],
+  },
+  {
+    id: "group-layout",
+    label: "Layout",
+    items: [
+      { id: "app-shell", label: "App shell" },
+      { id: "sidebar-comp", label: "Sidebar" },
+      { id: "top-bar", label: "Top bar" },
+      { id: "breadcrumb", label: "Breadcrumb" },
+      { id: "container", label: "Container" },
+      { id: "stack", label: "Stack" },
+      { id: "aspect-ratio", label: "Aspect ratio" },
+      { id: "scroll-area", label: "Scroll area" },
+    ],
+  },
+  {
+    id: "group-patterns",
+    label: "Patterns",
+    items: [{ id: "patterns", label: "UX patterns" }],
+  },
+  {
+    id: "group-marketing",
+    label: "Marketing",
+    items: [{ id: "marketing", label: "Marketing tier" }],
+  },
+  {
+    id: "group-reference",
+    label: "Reference",
+    items: [
+      { id: "a11y", label: "Accessibility" },
+      { id: "usage", label: "Using the system" },
+    ],
+  },
+];
+
+export default function DesignSystemPage() {
+  return (
+    <div className="flex min-h-screen">
+      {/* Sidebar — sticky TOC */}
+      <aside
+        aria-label="Design system contents"
+        className="hidden lg:flex flex-col w-56 shrink-0 border-r border-border bg-bg-subtle/40 sticky top-0 h-screen"
+      >
+        <div className="px-5 py-4 border-b border-border">
+          <div className="text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+            DT Sports
+          </div>
+          <div className="text-md font-semibold tracking-[-0.01em] mt-0.5">
+            Design System
+          </div>
+        </div>
+        <nav className="flex-1 overflow-y-auto scrollbar-thin py-3 px-2">
+          {NAV_GROUPS.map((group, gi) => (
+            <div key={group.id} className={gi === 0 ? "" : "mt-4"}>
+              <div className="px-2.5 pb-1 text-[10px] font-semibold uppercase tracking-[0.06em] text-text-subtle">
+                {group.label}
+              </div>
+              <ul className="space-y-0.5">
+                {group.items.map((item) => (
+                  <li key={item.id}>
+                    <a
+                      href={`#${item.id}`}
+                      className="block rounded-sm px-2.5 py-1.5 text-sm text-text-muted hover:bg-bg-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      </aside>
+
+      {/* Main */}
+      <main id="main" className="flex-1 min-w-0">
+        {/* Topbar */}
+        <header className="sticky top-0 z-20 bg-background/95 backdrop-blur border-b border-border">
+          <div className="flex h-12 items-center justify-between px-6 lg:px-8">
+            <div className="flex items-center gap-2 text-sm text-text-muted">
+              <span>Design System</span>
+              <span className="text-text-subtle">/</span>
+              <span className="text-foreground font-medium">v0.1</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="secondary" size="sm" asChild>
+                <a href="/admin">View admin demo →</a>
+              </Button>
+              <Badge variant="forest" size="sm">
+                Exo 2 · 14px base
+              </Badge>
+              <ThemeToggle />
+            </div>
+          </div>
+        </header>
+
+        {/* Page header */}
+        <div className="px-6 lg:px-8 pt-10 pb-6 max-w-5xl">
+          <h1 className="text-3xl font-bold tracking-[-0.01em]">
+            DT Sports — Design System
+          </h1>
+          <p className="mt-2 text-base text-text-muted max-w-2xl">
+            A dense, data-first UI for hosts and players. Sharp corners, small
+            spacing, sports-turf color. Built for tables and dashboards. This
+            page is the living source of truth — every section below is the real
+            component, rendered live.
+          </p>
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Badge variant="lime" size="sm" className="rounded">
+              #B4D334
+            </Badge>
+            <Badge variant="forest" size="sm" className="rounded">
+              #176E3E
+            </Badge>
+            <Badge variant="outline" size="sm" className="rounded">
+              Exo 2
+            </Badge>
+            <Badge variant="outline" size="sm" className="rounded">
+              4px base spacing
+            </Badge>
+            <Badge variant="outline" size="sm" className="rounded">
+              2–6px corners
+            </Badge>
+            <Badge variant="outline" size="sm" className="rounded">
+              WCAG AA
+            </Badge>
+          </div>
+        </div>
+
+        <div className="px-6 lg:px-8 max-w-5xl pb-24">
+          {/* Principles */}
+          <GroupHeader
+            id="group-principles"
+            label="Principles"
+            description="The rules that decide every design call. Visual = what to draw. UX = what to do."
+            first
+          />
+          <VisualPrinciplesSection />
+          <UXPrinciplesSection />
+
+          {/* Foundations */}
+          <GroupHeader
+            id="group-foundations"
+            label="Foundations"
+            description="Design tokens — colors, type, spacing, radius, elevation, icons, motion. Everything else composes from these."
+          />
+          <ColorsSection />
+          <TypographySection />
+          <SpacingSection />
+          <RadiusSection />
+          <ElevationSection />
+          <IconsSection />
+          <MotionSection />
+
+          {/* Components */}
+          <GroupHeader
+            id="group-components"
+            label="Components"
+            description="The building blocks. Each is variant-driven via cva(), accepts className for composition, and ships with a11y baked in."
+          />
+          <ButtonsSection />
+          <InputsSection />
+          <CheckboxSection />
+          <RadioSection />
+          <SwitchSection />
+          <SelectSection />
+          <ComboboxSection />
+          <TextareaSection />
+          <NumberInputSection />
+          <SliderSection />
+          <DatePickerSection />
+          <FormFieldSection />
+          <AlertSection />
+          <BadgesSection />
+          <ChipSection />
+          <StatusSection />
+          <CardsSection />
+          <MetricsSection />
+          <SpecSection />
+          <CapacitySection />
+          <TablesSection />
+          <PaginationSection />
+          <TabsSection />
+          <AccordionSection />
+          <CollapsibleSection />
+          <DialogSection />
+          <DrawerSection />
+          <PopoverSection />
+          <DropdownSection />
+          <TooltipSection />
+          <SeparatorSection />
+          <ToastSection />
+          <EmptyStateSection />
+          <AvatarsSection />
+          <AvatarGroupSection />
+          <SkeletonSection />
+          <SpinnerSection />
+          <ProgressSection />
+
+          {/* Layout */}
+          <GroupHeader
+            id="group-layout"
+            label="Layout"
+            description="Page-level building blocks. AppShell + Sidebar + TopBar compose admin chrome; Container + Stack handle content padding and gaps; AspectRatio + ScrollArea handle bounded regions; Breadcrumb is the standard nav crumb trail."
+          />
+          <AppShellSection />
+          <SidebarComponentSection />
+          <TopBarSection />
+          <BreadcrumbSection />
+          <ContainerSection />
+          <StackSection />
+          <AspectRatioSection />
+          <ScrollAreaSection />
+
+          {/* Patterns */}
+          <GroupHeader
+            id="group-patterns"
+            label="Patterns"
+            description="Composed UX behaviors. Reach for these to honor the §3 UX principles without thinking about it."
+          />
+          <UXPatternsSection />
+
+          {/* Marketing */}
+          <GroupHeader
+            id="group-marketing"
+            label="Marketing"
+            description="The website tier — fluid display type, generous spacing, page-level primitives. Import from @dtsports/design-system/marketing."
+          />
+          <MarketingTierSection />
+
+          {/* Reference */}
+          <GroupHeader
+            id="group-reference"
+            label="Reference"
+            description="How the system is wired up + how to consume it."
+          />
+          <AccessibilitySection />
+          <UsageSection />
+        </div>
+      </main>
+      <Toaster />
+    </div>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Group headers                                                           */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function GroupHeader({
+  id,
+  label,
+  description,
+  first = false,
+}: {
+  id: string;
+  label: string;
+  description?: string;
+  first?: boolean;
+}) {
+  return (
+    <section
+      id={id}
+      aria-label={label}
+      className={first ? "scroll-mt-16" : "scroll-mt-16 pt-12"}
+    >
+      <div className="flex items-center gap-3">
+        <div className="text-xs font-semibold uppercase tracking-[0.08em] text-brand-forest">
+          {label}
+        </div>
+        <div className="flex-1 h-px bg-brand-forest/30" aria-hidden="true" />
+      </div>
+      {description && (
+        <p className="mt-2 text-sm text-text-muted max-w-2xl">{description}</p>
+      )}
+    </section>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Sections                                                                */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function VisualPrinciplesSection() {
+  const principles = [
+    [
+      "Density over decoration",
+      "13–14px body. 4px base. Rows over cards. Show more, click less.",
+    ],
+    [
+      "Borders not shadows",
+      "1px borders separate. Shadows reserved for floating layers.",
+    ],
+    ["Brand as accent", "Lime + forest punctuate. Most chrome stays neutral."],
+    [
+      "One CTA per view",
+      "Lime is the loudest. Use it once for the action that matters.",
+    ],
+    ["Numbers first-class", "Tabular figures, right-aligned, mono for IDs."],
+    [
+      "Status is iconic + colored",
+      "Color never alone. Always pair with text or icon.",
+    ],
+    ["Live > polished", "Skeletons over spinners. Real data fast."],
+    [
+      "Predictable motion",
+      "150ms ease-out, opacity + small translate. No springs.",
+    ],
+  ];
+
+  return (
+    <DocSection
+      id="principles-visual"
+      title="Visual principles"
+      description="What to draw. The eight rules behind the look + feel."
+    >
+      <ul className="grid gap-3 md:grid-cols-2">
+        {principles.map(([title, desc]) => (
+          <li
+            key={title}
+            className="rounded border border-border bg-background p-4"
+          >
+            <div className="text-sm font-semibold">{title}</div>
+            <div className="text-xs text-text-muted mt-1">{desc}</div>
+          </li>
+        ))}
+      </ul>
+    </DocSection>
+  );
+}
+
+function UXPrinciplesSection() {
+  const principles: Array<{
+    n: string;
+    title: string;
+    body: string;
+    example?: string;
+  }> = [
+    {
+      n: "3.1",
+      title: "Two audiences, two mental models",
+      body: "Player optimizes for speed-to-confidence; operator optimizes for scan + act. Every page can name which audience it serves.",
+    },
+    {
+      n: "3.2",
+      title: "Information hierarchy per surface",
+      body: "Pick 3–4 signals that drive the decision. Demote the rest.",
+      example: "Game card: time · venue · price · spots. Period.",
+    },
+    {
+      n: "3.3",
+      title: "Progressive disclosure",
+      body: "Show the minimum to decide. Reveal details on demand — except at the moment of commitment, where consequences are inline.",
+    },
+    {
+      n: "3.4",
+      title: "Latency budgets",
+      body: "Browse < 300ms. Detail < 500ms. Skeletons over 200ms. Refunds are async with explicit timeline.",
+    },
+    {
+      n: "3.5",
+      title: "Optimistic vs pessimistic UI",
+      body: "Reversible no-money actions go optimistic. Money / emails / audits go pessimistic.",
+    },
+    {
+      n: "3.6",
+      title: "Error recovery",
+      body: "What happened · why in plain English · what to do next. Never 'Something went wrong.'",
+    },
+    {
+      n: "3.7",
+      title: "Forgiveness + undo",
+      body: "5s undo toast for cheap reversals. Confirm dialog with concrete consequences for destructive actions.",
+    },
+    {
+      n: "3.8",
+      title: "Smart defaults",
+      body: "Don't ask for things they almost always want. Skill = Mixed. Confirmation email = on. Credit = auto-apply.",
+    },
+    {
+      n: "3.9",
+      title: "State persistence",
+      body: "Filters in URL params. Drafts auto-save. Tables remember sort and column visibility per user.",
+    },
+    {
+      n: "3.10",
+      title: "Affordance + feedback",
+      body: "Visible hover on every interactive surface. Outcome ≤ 150ms via toast / dialog / inline. No silent success or failure.",
+    },
+    {
+      n: "3.11",
+      title: "Confirmation discipline",
+      body: "Confirm only destructive / irreversible. Show concrete consequences: '8 players will be refunded $14 each.'",
+    },
+    {
+      n: "3.12",
+      title: "Live data discipline",
+      body: "Spots + price poll every 30s. Quote locked for 5 min at checkout. Never yank state mid-action.",
+    },
+    {
+      n: "3.13",
+      title: "Mobile-first interactions",
+      body: "32px+ tap targets. No hover-only reveals. Sticky bottom CTA on narrow screens.",
+    },
+    {
+      n: "3.14",
+      title: "Empty / loading / full",
+      body: "Every list designs all three states (plus error). Skeletons echo the final shape.",
+    },
+    {
+      n: "3.15",
+      title: "Money UX",
+      body: "Mandatory pre-charge breakdown. Receipt verbatim matches. No surprise debits.",
+    },
+    {
+      n: "3.16",
+      title: "Time UX",
+      body: "Future events in venue tz; tooltip reveals user tz. Within 24h, show ticker.",
+    },
+    {
+      n: "3.17",
+      title: "One screen, one job",
+      body: "If a page feels like an admin AND a profile, split it. Drawers for secondary tasks.",
+    },
+    {
+      n: "3.18",
+      title: "Onboarding in the flow",
+      body: "First booking IS the onboarding. No tour modal. Inline tooltips at first touch only.",
+    },
+    {
+      n: "3.19",
+      title: "Voice consistency",
+      body: "UI, toasts, emails, SMS, support all sound like one person. Direct, operational, no hype.",
+    },
+  ];
+
+  return (
+    <DocSection
+      id="principles-ux"
+      title="UX principles"
+      description="How the surface behaves. These shape every interaction — flows, defaults, errors, feedback, money, time."
+    >
+      <ul className="grid gap-3 md:grid-cols-2">
+        {principles.map(({ n, title, body, example }) => (
+          <li
+            key={n}
+            className="rounded border border-border bg-background p-4 flex flex-col"
+          >
+            <div className="flex items-baseline gap-2">
+              <span className="text-[10px] font-mono text-text-subtle tabular">
+                §{n}
+              </span>
+              <h4 className="text-sm font-semibold">{title}</h4>
+            </div>
+            <p className="mt-1.5 text-xs text-text-muted">{body}</p>
+            {example && (
+              <p className="mt-2 text-xs text-text-subtle border-t border-border pt-2">
+                <span className="font-medium text-foreground">Example. </span>
+                {example}
+              </p>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <p className="text-xs text-text-muted">
+        See <code className="font-mono">design.md §3</code> for the full
+        treatment with do/don&apos;t tables.
+      </p>
+    </DocSection>
+  );
+}
+
+function ColorsSection() {
+  return (
+    <DocSection
+      id="colors"
+      title="Colors"
+      description="Brand + neutrals + semantic. Verified for WCAG AA contrast. White-on-lime fails AA — never do it."
+    >
+      <DocSubsection title="Brand">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Swatch
+            token="brand-lime"
+            bg="bg-brand-lime"
+            value="#B4D334"
+            textSample="black"
+            contrast="black 11.2:1 ✓ AAA"
+          />
+          <Swatch
+            token="brand-forest"
+            bg="bg-brand-forest"
+            value="#176E3E"
+            textSample="white"
+            contrast="white 6.9:1 ✓ AA"
+          />
+          <Swatch
+            token="foreground"
+            bg="bg-foreground"
+            value="#0A0A0A"
+            textSample="white"
+            contrast="white 19:1 ✓ AAA"
+          />
+          <Swatch
+            token="background"
+            bg="bg-background border-border-strong"
+            value="#FFFFFF"
+            textSample="black"
+            contrast="black 19:1 ✓ AAA"
+          />
+        </div>
+      </DocSubsection>
+
+      <DocSubsection title="Neutrals">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Swatch token="bg-subtle" bg="bg-bg-subtle" value="hsl(0 0% 98%)" />
+          <Swatch token="bg-muted" bg="bg-bg-muted" value="hsl(240 5% 96%)" />
+          <Swatch token="border" bg="bg-border" value="hsl(0 0% 90%)" />
+          <Swatch
+            token="border-strong"
+            bg="bg-border-strong"
+            value="hsl(0 0% 83%)"
+          />
+          <Swatch
+            token="text-muted"
+            bg="bg-text-muted"
+            value="hsl(0 0% 32%)"
+            textSample="white"
+          />
+          <Swatch
+            token="text-subtle"
+            bg="bg-text-subtle"
+            value="hsl(0 0% 45%)"
+            textSample="white"
+          />
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Semantic"
+        description="Use sparingly — these signal state, not decoration."
+      >
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Swatch
+            token="success"
+            bg="bg-success"
+            value="#16A34A"
+            textSample="white"
+          />
+          <Swatch
+            token="warning"
+            bg="bg-warning"
+            value="#F59E0B"
+            textSample="black"
+          />
+          <Swatch
+            token="danger"
+            bg="bg-danger"
+            value="#DC2626"
+            textSample="white"
+          />
+          <Swatch
+            token="info"
+            bg="bg-info"
+            value="#2563EB"
+            textSample="white"
+          />
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Critical contrast rules"
+        description="Use this checklist whenever you place text on a colored background."
+      >
+        <div className="rounded border border-border bg-background overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-bg-subtle border-b border-border">
+              <tr>
+                <th className="text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+                  Pair
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+                  Ratio
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+                  Verdict
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-border">
+                <td className="px-3 py-2">Foreground on background</td>
+                <td className="px-3 py-2 tabular">19:1</td>
+                <td className="px-3 py-2 text-brand-forest font-medium">
+                  AAA ✓
+                </td>
+              </tr>
+              <tr className="border-b border-border">
+                <td className="px-3 py-2">Brand-forest on white</td>
+                <td className="px-3 py-2 tabular">6.1:1</td>
+                <td className="px-3 py-2 text-brand-forest font-medium">
+                  AA ✓
+                </td>
+              </tr>
+              <tr className="border-b border-border">
+                <td className="px-3 py-2">White on brand-forest</td>
+                <td className="px-3 py-2 tabular">6.9:1</td>
+                <td className="px-3 py-2 text-brand-forest font-medium">
+                  AA ✓
+                </td>
+              </tr>
+              <tr className="border-b border-border">
+                <td className="px-3 py-2">Black on brand-lime</td>
+                <td className="px-3 py-2 tabular">11.2:1</td>
+                <td className="px-3 py-2 text-brand-forest font-medium">
+                  AAA ✓
+                </td>
+              </tr>
+              <tr>
+                <td className="px-3 py-2 font-medium">White on brand-lime</td>
+                <td className="px-3 py-2 tabular">1.5:1</td>
+                <td className="px-3 py-2 text-danger font-medium">
+                  FAIL — never use
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+function TypographySection() {
+  const scale: Array<[string, string, string]> = [
+    ["text-xs", "11 / 16", "Table cells (compact), badges, microcopy"],
+    ["text-sm", "13 / 18", "DEFAULT body text, inputs, buttons"],
+    ["text-base", "14 / 20", "Paragraphs, card body"],
+    ["text-md", "15 / 22", "Section headings in cards"],
+    ["text-lg", "17 / 24", "Subsection titles"],
+    ["text-xl", "20 / 28", "Page headings"],
+    ["text-2xl", "24 / 32", "Metric values"],
+    ["text-3xl", "30 / 36", "Hero — rare"],
+  ];
+
+  return (
+    <DocSection
+      id="typography"
+      title="Typography"
+      description="Exo 2. Geometric, slightly sporty, dense at small sizes. Mono fallback for IDs and code."
+    >
+      <DocSubsection title="Scale">
+        <div className="rounded border border-border bg-background divide-y divide-border">
+          {scale.map(([size, lh, use]) => (
+            <div key={size} className="flex items-baseline gap-4 px-4 py-3">
+              <div className="w-28 shrink-0 text-xs font-mono text-text-muted">
+                {size}
+              </div>
+              <div className={`${size} font-medium flex-1`}>
+                The quick brown fox 0123
+              </div>
+              <div className="hidden md:block text-xs text-text-subtle tabular w-16 text-right">
+                {lh}
+              </div>
+              <div className="hidden lg:block text-xs text-text-muted w-72">
+                {use}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DocSubsection>
+
+      <DocSubsection title="Weights">
+        <div className="space-y-1">
+          <p className="text-base font-normal">Regular 400 — body text</p>
+          <p className="text-base font-medium">Medium 500 — emphasis</p>
+          <p className="text-base font-semibold">Semibold 600 — headings</p>
+          <p className="text-base font-bold">Bold 700 — rare, page titles</p>
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Numerals (tabular)"
+        description="Add the .tabular utility to every cell, price, count, or aligned number."
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium uppercase tracking-[0.04em] text-text-muted mb-2">
+              Without (default)
+            </div>
+            <pre className="text-base">{"100\n111\n222\n330"}</pre>
+          </div>
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium uppercase tracking-[0.04em] text-text-muted mb-2">
+              With .tabular
+            </div>
+            <pre className="text-base tabular">{"100\n111\n222\n330"}</pre>
+          </div>
+        </div>
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+function SpacingSection() {
+  const tokens: Array<[string, string]> = [
+    ["0.5", "2px"],
+    ["1", "4px"],
+    ["1.5", "6px"],
+    ["2", "8px"],
+    ["2.5", "10px"],
+    ["3", "12px"],
+    ["4", "16px"],
+    ["5", "20px"],
+    ["6", "24px"],
+    ["8", "32px"],
+    ["10", "40px"],
+    ["12", "48px"],
+  ];
+
+  return (
+    <DocSection
+      id="spacing"
+      title="Spacing"
+      description="4px base. Compact. Default gutters 12–16px, card padding 16–20px, page padding 32px."
+    >
+      <div className="rounded border border-border bg-background p-4 space-y-1.5">
+        {tokens.map(([token, px]) => (
+          <div key={token} className="flex items-center gap-3">
+            <div className="w-14 text-xs font-mono text-text-muted">
+              {token}
+            </div>
+            <div className="w-14 text-xs font-mono text-text-subtle tabular">
+              {px}
+            </div>
+            <div
+              className="h-3 bg-brand-forest rounded-sm"
+              style={{ width: px }}
+            />
+          </div>
+        ))}
+      </div>
+    </DocSection>
+  );
+}
+
+function RadiusSection() {
+  const tokens: Array<[string, string, string]> = [
+    ["none", "0", "rounded-none"],
+    ["sm", "2px", "rounded-sm"],
+    ["DEFAULT", "4px", "rounded"],
+    ["md", "6px", "rounded-md"],
+    ["full", "9999px", "rounded-full"],
+  ];
+
+  return (
+    <DocSection
+      id="radius"
+      title="Corner radius"
+      description="Minimal — sharp, modern. No rounded-xl or rounded-2xl anywhere."
+    >
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        {tokens.map(([name, px, cls]) => (
+          <div key={name} className="flex flex-col items-start gap-2">
+            <div
+              className={`h-16 w-full bg-brand-forest ${cls}`}
+              aria-hidden="true"
+            />
+            <div className="text-xs">
+              <div className="font-medium">{name}</div>
+              <div className="text-text-muted font-mono tabular">{px}</div>
+              <div className="text-text-subtle font-mono">{cls}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </DocSection>
+  );
+}
+
+function ElevationSection() {
+  return (
+    <DocSection
+      id="elevation"
+      title="Elevation"
+      description="Borders first. Shadows only for floating layers."
+    >
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-bg-subtle p-8 rounded">
+          <div className="h-20 rounded border border-border bg-background flex items-center justify-center text-xs text-text-muted">
+            shadow-none (default)
+          </div>
+        </div>
+        <div className="bg-bg-subtle p-8 rounded">
+          <div className="h-20 rounded border border-border bg-background shadow-sm flex items-center justify-center text-xs text-text-muted">
+            shadow-sm (popovers)
+          </div>
+        </div>
+        <div className="bg-bg-subtle p-8 rounded">
+          <div className="h-20 rounded border border-border-strong bg-background shadow-md flex items-center justify-center text-xs text-text-muted">
+            shadow-md (modals)
+          </div>
+        </div>
+        <div className="bg-bg-subtle p-8 rounded">
+          <div className="h-20 rounded border border-border-strong bg-background shadow-lg flex items-center justify-center text-xs text-text-muted">
+            shadow-lg (marketing)
+          </div>
+        </div>
+      </div>
+    </DocSection>
+  );
+}
+
+function IconsSection() {
+  const icons = [
+    { Icon: CalendarPlus, name: "CalendarPlus" },
+    { Icon: MapPin, name: "MapPin" },
+    { Icon: Zap, name: "Zap" },
+    { Icon: CheckCircle2, name: "CheckCircle2" },
+    { Icon: AlertTriangle, name: "AlertTriangle" },
+    { Icon: XCircle, name: "XCircle" },
+    { Icon: Info, name: "Info" },
+    { Icon: CircleHelp, name: "CircleHelp" },
+  ];
+  return (
+    <DocSection
+      id="icons"
+      title="Iconography"
+      description="Lucide icons, stroke 1.75, currentColor. 14–16px inline, 18–20px standalone."
+    >
+      <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
+        {icons.map(({ Icon, name }) => (
+          <div
+            key={name}
+            className="flex flex-col items-center gap-1.5 rounded border border-border bg-background py-3"
+          >
+            <Icon className="h-4 w-4" strokeWidth={1.75} />
+            <div className="text-[10px] font-mono text-text-muted">{name}</div>
+          </div>
+        ))}
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`import { CalendarPlus } from "lucide-react";\n\n<CalendarPlus className="h-4 w-4" strokeWidth={1.75} />`}
+      />
+    </DocSection>
+  );
+}
+
+function ButtonsSection() {
+  return (
+    <DocSection
+      id="buttons"
+      title="Buttons"
+      description="One accent (lime) per view. Forest is the default primary. 32px tap target on default size."
+    >
+      <DocSubsection title="Variants">
+        <PreviewCode
+          preview={
+            <div className="flex flex-wrap gap-2">
+              <Button variant="accent">Book now</Button>
+              <Button variant="primary">Confirm</Button>
+              <Button variant="secondary">Cancel</Button>
+              <Button variant="ghost">More</Button>
+              <Button variant="destructive">Cancel game</Button>
+              <Button variant="link">View receipt</Button>
+            </div>
+          }
+          code={
+            <CodeBlock
+              language="tsx"
+              code={`<Button variant="accent">Book now</Button>
+<Button variant="primary">Confirm</Button>
+<Button variant="secondary">Cancel</Button>
+<Button variant="ghost">More</Button>
+<Button variant="destructive">Cancel game</Button>
+<Button variant="link">View receipt</Button>`}
+            />
+          }
+        />
+      </DocSubsection>
+
+      <DocSubsection title="Sizes">
+        <PreviewCode
+          preview={
+            <div className="flex flex-wrap items-end gap-2">
+              <Button size="xs">XS</Button>
+              <Button size="sm">SM</Button>
+              <Button size="default">Default</Button>
+              <Button size="lg">LG</Button>
+              <Button size="icon" aria-label="Delete">
+                <Trash2 className="h-4 w-4" strokeWidth={1.75} />
+              </Button>
+            </div>
+          }
+          code={
+            <CodeBlock
+              language="tsx"
+              code={`<Button size="xs">XS</Button>
+<Button size="sm">SM</Button>
+<Button size="default">Default</Button>
+<Button size="lg">LG</Button>
+
+{/* Icon-only buttons MUST have aria-label */}
+<Button size="icon" aria-label="Delete">
+  <Trash2 className="h-4 w-4" />
+</Button>`}
+            />
+          }
+        />
+      </DocSubsection>
+
+      <DocSubsection title="With icon + state">
+        <PreviewCode
+          preview={
+            <div className="flex flex-wrap gap-2">
+              <Button variant="accent">
+                <Zap className="h-4 w-4" strokeWidth={1.75} />
+                Go Live
+              </Button>
+              <Button variant="primary" disabled>
+                Disabled
+              </Button>
+            </div>
+          }
+          code={
+            <CodeBlock
+              language="tsx"
+              code={`<Button variant="accent">
+  <Zap className="h-4 w-4" /> Go Live
+</Button>
+<Button disabled>Disabled</Button>`}
+            />
+          }
+        />
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+function InputsSection() {
+  return (
+    <DocSection
+      id="inputs"
+      title="Inputs & Forms"
+      description="Labels above inputs. Required marker is a danger asterisk. Helper text below input; replaced by error text on validation failure."
+    >
+      <Example>
+        <form
+          className="grid gap-4 max-w-md"
+          onSubmit={(e) => {
+            e.preventDefault();
+            toast.success("Form submitted (demo).");
+          }}
+          noValidate
+        >
+          <div className="space-y-1.5">
+            <Label htmlFor="email" required>
+              Email
+            </Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@dtsports.tv"
+              autoComplete="email"
+              required
+              aria-describedby="email-helper"
+            />
+            <p id="email-helper" className="text-xs text-text-muted">
+              We&apos;ll send booking confirmations here.
+            </p>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="phone">Mobile</Label>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="+1 555 123 4567"
+              autoComplete="tel"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="bad" required>
+              Card number
+            </Label>
+            <Input
+              id="bad"
+              type="text"
+              defaultValue="4242 4242 0000"
+              aria-invalid="true"
+              aria-describedby="bad-error"
+            />
+            <p id="bad-error" className="text-xs text-danger">
+              Card number is invalid.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" type="button">
+              Cancel
+            </Button>
+            <Button variant="accent" type="submit">
+              Pay $14.00
+            </Button>
+          </div>
+        </form>
+      </Example>
+    </DocSection>
+  );
+}
+
+function BadgesSection() {
+  return (
+    <DocSection
+      id="badges"
+      title="Badges"
+      description="Uppercase pills used as status markers. Always paired with text. Square shape by default; pill shape reserved for game status."
+    >
+      <PreviewCode
+        preview={
+          <div className="flex flex-wrap gap-2">
+            <Badge>Neutral</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="forest">Forest</Badge>
+            <Badge variant="lime">Lime</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="danger">Danger</Badge>
+            <Badge variant="info">Info</Badge>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Badge>Neutral</Badge>
+<Badge variant="outline">Outline</Badge>
+<Badge variant="forest">Forest</Badge>
+<Badge variant="lime">Lime</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="danger">Danger</Badge>
+<Badge variant="info">Info</Badge>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function StatusSection() {
+  const statuses: GameStatus[] = [
+    "draft",
+    "scheduled",
+    "filling",
+    "sold_out",
+    "live",
+    "completed",
+    "cancelled",
+  ];
+  return (
+    <DocSection
+      id="status"
+      title="Status pill"
+      description="One canonical visualization for the game-status vocabulary. The LIVE state is the only continuously animated element."
+    >
+      <PreviewCode
+        preview={
+          <div className="flex flex-wrap gap-2">
+            {statuses.map((s) => (
+              <StatusPill key={s} status={s} />
+            ))}
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<StatusPill status="draft" />
+<StatusPill status="scheduled" />
+<StatusPill status="filling" />
+<StatusPill status="sold_out" />
+<StatusPill status="live" />
+<StatusPill status="completed" />
+<StatusPill status="cancelled" />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function CardsSection() {
+  return (
+    <DocSection
+      id="cards"
+      title="Cards"
+      description="1px border, 4px radius, no shadow at rest. Compose Header / Content / Footer."
+    >
+      <Card className="max-w-md">
+        <CardHeader>
+          <div>
+            <CardTitle>Astoria Turf · Field A</CardTitle>
+            <CardDescription>5v5 · Saturday, 6:00 pm</CardDescription>
+          </div>
+          <StatusPill status="filling" />
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-3 gap-3 text-sm">
+            <div>
+              <div className="text-xs uppercase tracking-[0.04em] text-text-muted">
+                Price
+              </div>
+              <div className="tabular font-semibold mt-0.5">$14.00</div>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-[0.04em] text-text-muted">
+                Spots
+              </div>
+              <div className="tabular font-semibold mt-0.5">8 / 10</div>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-[0.04em] text-text-muted">
+                Skill
+              </div>
+              <div className="font-semibold mt-0.5">Mixed</div>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="ghost" size="sm">
+            Details
+          </Button>
+          <Button variant="accent" size="sm">
+            Book now
+          </Button>
+        </CardFooter>
+      </Card>
+    </DocSection>
+  );
+}
+
+function MetricsSection() {
+  return (
+    <DocSection
+      id="metrics"
+      title="Metric tiles"
+      description="Three lines exactly: label / value / delta. Use 3–4 across in dashboard rows."
+    >
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <MetricTile label="This week" value="$1,840" delta={12} />
+        <MetricTile label="Bookings" value="124" delta={-3} />
+        <MetricTile label="Fill rate" value="73%" delta={0} />
+        <MetricTile label="Refunds" value="4" delta={50} invertDelta />
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<MetricTile label="This week" value="$1,840" delta={12} />
+<MetricTile label="Bookings"  value="124"    delta={-3} />
+<MetricTile label="Fill rate" value="73%"    delta={0} />
+<MetricTile label="Refunds"   value="4"      delta={50} invertDelta />`}
+      />
+    </DocSection>
+  );
+}
+
+function TablesSection() {
+  const rows = [
+    {
+      date: "Sat May 22",
+      time: "6:00 pm",
+      venue: "Astoria Turf · A",
+      format: "5v5",
+      price: 14,
+      filled: 8,
+      capacity: 10,
+      status: "filling" as GameStatus,
+    },
+    {
+      date: "Sat May 22",
+      time: "7:00 pm",
+      venue: "McCarren · Court 1",
+      format: "3v3",
+      price: 18,
+      filled: 6,
+      capacity: 6,
+      status: "sold_out" as GameStatus,
+    },
+    {
+      date: "Sat May 22",
+      time: "8:00 pm",
+      venue: "Astoria Turf · B",
+      format: "5v5",
+      price: 12,
+      filled: 3,
+      capacity: 10,
+      status: "scheduled" as GameStatus,
+    },
+    {
+      date: "Sat May 22",
+      time: "9:00 pm",
+      venue: "Astoria Turf · A",
+      format: "5v5",
+      price: 16,
+      filled: 10,
+      capacity: 10,
+      status: "live" as GameStatus,
+    },
+  ];
+
+  return (
+    <DocSection
+      id="tables"
+      title="Tables"
+      description="The centerpiece. 36px row height, numeric columns right-aligned with tabular figures. Use this shape for every list of structured data."
+    >
+      <div className="rounded border border-border bg-background overflow-hidden">
+        <Table>
+          <TableCaption className="sr-only">
+            Upcoming pickup games for Saturday, May 22.
+          </TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Date</TableHead>
+              <TableHead>Time</TableHead>
+              <TableHead>Venue</TableHead>
+              <TableHead>Format</TableHead>
+              <TableHead className="text-right">Price</TableHead>
+              <TableHead className="text-right">Spots</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((r, i) => (
+              <TableRow key={i} interactive selected={i === 1}>
+                <TableCell>{r.date}</TableCell>
+                <TableCell>{r.time}</TableCell>
+                <TableCell className="font-medium">{r.venue}</TableCell>
+                <TableCell>{r.format}</TableCell>
+                <TableCell className="text-right tabular">
+                  ${r.price.toFixed(2)}
+                </TableCell>
+                <TableCell className="text-right tabular">
+                  {r.filled} / {r.capacity}
+                </TableCell>
+                <TableCell>
+                  <StatusPill status={r.status} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </DocSection>
+  );
+}
+
+function DialogSection() {
+  return (
+    <DocSection
+      id="dialog"
+      title="Dialog"
+      description="Focus-trapped, escape-to-close, returns focus to trigger. Accent CTA on the right; secondary on the left."
+    >
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="destructive">Cancel game…</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Cancel this game?</DialogTitle>
+            <DialogDescription>
+              8 players will be refunded as credit and notified via email.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <p className="text-sm text-text-muted">
+              This action is logged and cannot be undone. Players will receive a
+              credit of{" "}
+              <span className="tabular font-medium text-foreground">
+                $14.00
+              </span>{" "}
+              each, applied automatically to their next booking.
+            </p>
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="ghost">Keep game</Button>
+            <Button variant="destructive">Cancel + refund all</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocSection>
+  );
+}
+
+function ToastSection() {
+  return (
+    <DocSection
+      id="toast"
+      title="Toasts"
+      description="Top-right, 4s auto-dismiss (persistent for danger). Status communicated via icon + color, never color alone."
+    >
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.success("Booking confirmed.", {
+              description: "Saturday, May 22 · 6:00 pm at Astoria Turf",
+              icon: (
+                <CheckCircle2
+                  className="h-4 w-4 text-success"
+                  strokeWidth={1.75}
+                />
+              ),
+            })
+          }
+        >
+          Show success
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.warning("3 spots left.", {
+              description: "Saturday's 7 pm at McCarren is filling fast.",
+              icon: (
+                <AlertTriangle
+                  className="h-4 w-4 text-warning"
+                  strokeWidth={1.75}
+                />
+              ),
+            })
+          }
+        >
+          Show warning
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast.error("Payment declined.", {
+              description: "Try a different card or contact your bank.",
+              icon: (
+                <XCircle className="h-4 w-4 text-danger" strokeWidth={1.75} />
+              ),
+              duration: 10000,
+            })
+          }
+        >
+          Show danger
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            toast("Stream goes live at 6:00 pm.", {
+              description: "Watch on DT Sports TV from any game page.",
+              icon: <Info className="h-4 w-4 text-info" strokeWidth={1.75} />,
+            })
+          }
+        >
+          Show info
+        </Button>
+      </div>
+    </DocSection>
+  );
+}
+
+function EmptyStateSection() {
+  return (
+    <DocSection
+      id="empty"
+      title="Empty states"
+      description="Center-aligned text-sm. No illustrations. Subtle Lucide icon at most."
+    >
+      <div className="rounded border border-border bg-background">
+        <EmptyState
+          icon={<Inbox className="h-6 w-6" strokeWidth={1.5} />}
+          title="No upcoming games"
+          description="Once you book or host a game, it will show up here."
+          action={
+            <Button size="sm" variant="accent">
+              Browse games
+            </Button>
+          }
+        />
+      </div>
+    </DocSection>
+  );
+}
+
+function AvatarsSection() {
+  return (
+    <DocSection
+      id="avatars"
+      title="Avatars"
+      description="Fallback uses forest background with initials. Status dot indicates check-in state."
+    >
+      <PreviewCode
+        preview={
+          <div className="flex items-end gap-3">
+            <Avatar name="Alex Chen" size="sm" />
+            <Avatar name="Jordan Lee" />
+            <Avatar name="Sam Patel" status="checked-in" />
+            <Avatar name="Maria Garcia" status="booked" />
+            <Avatar name="Danny Tran" size="lg" />
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Avatar name="Alex Chen" size="sm" />
+<Avatar name="Jordan Lee" />
+<Avatar name="Sam Patel"   status="checked-in" />
+<Avatar name="Maria Garcia" status="booked" />
+<Avatar name="Danny Tran"  size="lg" />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function SkeletonSection() {
+  return (
+    <DocSection
+      id="skeleton"
+      title="Skeleton"
+      description="Use over spinners. The placeholder echoes the final layout so the transition feels immediate."
+    >
+      <div className="rounded border border-border bg-background p-5 max-w-md space-y-3">
+        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-3 w-2/3" />
+        <Skeleton className="h-3 w-1/2" />
+        <div className="flex gap-2 pt-2">
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </div>
+      <DocSubsection
+        title="Composites"
+        description="Pre-built placeholders for the two most common list shapes — match rows/columns to the real data so nothing jumps on load."
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium text-text-muted mb-3">
+              SkeletonList rows={"{3}"}
+            </div>
+            <SkeletonList rows={3} />
+          </div>
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium text-text-muted mb-3">
+              SkeletonTable rows={"{3}"} columns={"{4}"}
+            </div>
+            <SkeletonTable rows={3} columns={4} />
+          </div>
+        </div>
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+function UXPatternsSection() {
+  return (
+    <DocSection
+      id="patterns"
+      title="UX patterns"
+      description="The principles above made concrete. These are the components you reach for to honor §3 without thinking about it."
+    >
+      <ThreeStatePatternDemo />
+      <MoneyBreakdownDemo />
+      <TimestampDemo />
+      <ConfirmActionDemo />
+      <UndoToastDemo />
+    </DocSection>
+  );
+}
+
+function ThreeStatePatternDemo() {
+  const [state, setState] = React.useState<ListState<string[]>>({
+    kind: "data",
+    data: ["Game A", "Game B"],
+  });
+
+  const states: Array<{ label: string; value: ListState<string[]> }> = [
+    {
+      label: "Loading",
+      value: { kind: "loading" },
+    },
+    { label: "Empty", value: { kind: "empty" } },
+    {
+      label: "Error",
+      value: {
+        kind: "error",
+        error: new Error("Network unreachable. Check your connection."),
+        retry: () => setState({ kind: "loading" }),
+      },
+    },
+    {
+      label: "Full",
+      value: {
+        kind: "data",
+        data: ["Sat 6pm · Astoria", "Sat 7pm · McCarren"],
+      },
+    },
+  ];
+
+  return (
+    <DocSubsection
+      title="Empty / loading / error / full"
+      description="Every list view uses this wrapper. Forces all four states to exist before merge. (§3.14)"
+    >
+      <div className="flex flex-wrap gap-2 mb-3">
+        {states.map(({ label, value }) => (
+          <Button
+            key={label}
+            size="sm"
+            variant={state.kind === value.kind ? "primary" : "secondary"}
+            onClick={() => setState(value)}
+            aria-pressed={state.kind === value.kind}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      <div className="rounded border border-border bg-background min-h-[160px]">
+        <ThreeState
+          state={state}
+          empty={{
+            icon: <Inbox className="h-6 w-6" strokeWidth={1.5} />,
+            title: "No games this week",
+            description: "Once you book or host one, it'll show up here.",
+            action: (
+              <Button size="sm" variant="accent">
+                Browse games
+              </Button>
+            ),
+          }}
+        >
+          {state.kind === "data" && (
+            <ul className="divide-y divide-border">
+              {state.data.map((row) => (
+                <li
+                  key={row}
+                  className="flex items-center justify-between px-4 py-2.5 text-sm"
+                >
+                  <span>{row}</span>
+                  <StatusPill status="scheduled" />
+                </li>
+              ))}
+            </ul>
+          )}
+        </ThreeState>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<ThreeState
+  state={state}
+  empty={{ title: "No games this week", action: <Button>Browse</Button> }}
+>
+  <RealList items={state.kind === "data" ? state.data : []} />
+</ThreeState>`}
+      />
+    </DocSubsection>
+  );
+}
+
+function MoneyBreakdownDemo() {
+  return (
+    <DocSubsection
+      title="Money breakdown"
+      description="Mandatory before any charge. Every line is named, signed, tabular-aligned. Receipt must match this verbatim. (§3.15)"
+    >
+      <PreviewCode
+        preview={
+          <div className="w-full">
+            <MoneyBreakdown
+              lines={[
+                { label: "Game fee", cents: 1400 },
+                {
+                  label: "Credit applied",
+                  cents: -600,
+                  muted: true,
+                  hint: "From cancelled game on May 18",
+                },
+                { label: "Sales tax (8.875%)", cents: 71, muted: true },
+              ]}
+              totalLabel="Charged to card"
+              totalCents={871}
+            />
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<MoneyBreakdown
+  lines={[
+    { label: "Game fee",       cents: 1400 },
+    { label: "Credit applied", cents: -600, muted: true },
+    { label: "Sales tax",      cents: 71,   muted: true },
+  ]}
+  totalLabel="Charged to card"
+  totalCents={871}
+/>`}
+          />
+        }
+      />
+    </DocSubsection>
+  );
+}
+
+function TimestampDemo() {
+  // Demo times are frozen at first render on purpose — recomputing "now"
+  // on every render would make the labels drift mid-session.
+  const [{ inThreeHours, fiveMinAgo, nextSaturday }] = React.useState(() => {
+    const now = Date.now();
+    const d = new Date(now);
+    d.setDate(d.getDate() + ((6 - d.getDay() + 7) % 7 || 7));
+    d.setHours(18, 0, 0, 0);
+    return {
+      inThreeHours: new Date(now + 3 * 3600 * 1000).toISOString(),
+      fiveMinAgo: new Date(now - 5 * 60 * 1000).toISOString(),
+      nextSaturday: d.toISOString(),
+    };
+  });
+
+  return (
+    <DocSubsection
+      title="Timestamp"
+      description="Future events in venue tz with user-tz tooltip; within 24h show a ticker; past events relative within 7d. (§3.16)"
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center gap-3">
+              <span className="text-text-muted text-xs w-32">In 3 hours</span>
+              <Timestamp
+                iso={inThreeHours}
+                venueTz="America/New_York"
+                relative
+              />
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-text-muted text-xs w-32">5 min ago</span>
+              <Timestamp iso={fiveMinAgo} relative />
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-text-muted text-xs w-32">
+                Next Saturday
+              </span>
+              <Timestamp iso={nextSaturday} venueTz="America/New_York" />
+            </div>
+            <p className="text-xs text-text-subtle pt-2">
+              Hover the timestamps with a different user TZ → tooltip reveals
+              &quot;Your time:&quot; alongside venue time.
+            </p>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Timestamp iso="2026-05-22T22:00:00Z" venueTz="America/New_York" relative />
+<Timestamp iso="2026-05-22T17:55:00Z" relative />
+<Timestamp iso="2026-05-29T22:00:00Z" venueTz="America/New_York" />`}
+          />
+        }
+      />
+    </DocSubsection>
+  );
+}
+
+function ConfirmActionDemo() {
+  return (
+    <DocSubsection
+      title="ConfirmAction"
+      description="One helper for every destructive / irreversible action. Requires concrete consequence text — abstract 'Are you sure?' is rejected by API. (§3.11)"
+    >
+      <div className="flex flex-wrap gap-2">
+        <ConfirmAction
+          title="Cancel this game?"
+          description="This action is logged and cannot be undone."
+          consequence={
+            <>
+              8 players will be refunded{" "}
+              <span className="tabular font-medium text-foreground">
+                $14.00
+              </span>{" "}
+              each as credit and notified via email.
+            </>
+          }
+          confirmLabel="Cancel + refund all"
+          confirmVariant="destructive"
+          onConfirm={async () => {
+            await new Promise((r) => setTimeout(r, 800));
+            toast.success("Game cancelled. 8 refunds issued as credit.");
+          }}
+        >
+          <Button variant="destructive" size="sm">
+            Cancel game…
+          </Button>
+        </ConfirmAction>
+
+        <ConfirmAction
+          title="Refund this booking?"
+          consequence={
+            <>
+              Alex Chen will receive{" "}
+              <span className="tabular font-medium text-foreground">
+                $14.00
+              </span>{" "}
+              back to their card in 3–5 business days.
+            </>
+          }
+          confirmLabel="Refund $14.00"
+          confirmVariant="destructive"
+          onConfirm={async () => {
+            await new Promise((r) => setTimeout(r, 600));
+            toast.success("Refund initiated.");
+          }}
+        >
+          <Button variant="secondary" size="sm">
+            Refund booking…
+          </Button>
+        </ConfirmAction>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<ConfirmAction
+  title="Cancel this game?"
+  consequence="8 players will be refunded $14.00 each as credit and emailed."
+  confirmLabel="Cancel + refund all"
+  confirmVariant="destructive"
+  onConfirm={async () => await cancelGame(id)}
+>
+  <Button variant="destructive">Cancel game…</Button>
+</ConfirmAction>`}
+      />
+    </DocSubsection>
+  );
+}
+
+function UndoToastDemo() {
+  return (
+    <DocSubsection
+      title="Undo toast"
+      description="The right pattern for cheap reversals (delete draft, dismiss notification). 5s window. Money actions don't get undo — they get ConfirmAction. (§3.7)"
+    >
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            const tid = toast("Draft deleted.", {
+              description: "Sat May 22 · 6:00 pm",
+              duration: 5000,
+              action: {
+                label: "Undo",
+                onClick: () => {
+                  toast.success("Draft restored.");
+                },
+              },
+            });
+            return tid;
+          }}
+        >
+          Delete draft
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() =>
+            toast("Notification dismissed.", {
+              duration: 5000,
+              action: {
+                label: "Undo",
+                onClick: () => toast.success("Notification restored."),
+              },
+            })
+          }
+        >
+          Dismiss notification
+        </Button>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`toast("Draft deleted.", {
+  description: "Sat May 22 · 6:00 pm",
+  duration: 5000,
+  action: { label: "Undo", onClick: () => restoreDraft(id) },
+});`}
+      />
+    </DocSubsection>
+  );
+}
+
+function MotionSection() {
+  return (
+    <DocSection
+      id="motion"
+      title="Motion"
+      description="150ms ease-out. No springs, no scale-on-hover, no parallax. The LIVE dot is the only continuously animated element."
+    >
+      <div className="flex flex-wrap items-center gap-6">
+        <LivePill />
+        <span className="text-sm text-text-muted">
+          ← Animation respects{" "}
+          <code className="font-mono">prefers-reduced-motion</code>
+        </span>
+      </div>
+      <CodeBlock
+        language="ts"
+        code={`// tailwind.config.ts (excerpt)
+keyframes: {
+  "live-pulse": {
+    "0%, 100%": { opacity: "1" },
+    "50%":      { opacity: "0.4" },
+  },
+},
+animation: {
+  "live-pulse": "live-pulse 1.5s ease-in-out infinite",
+},`}
+      />
+    </DocSection>
+  );
+}
+
+function AccessibilitySection() {
+  const checks: Array<[string, string]> = [
+    [
+      "Color contrast",
+      "All text ≥ WCAG AA; AAA where possible. White-on-lime is forbidden.",
+    ],
+    [
+      "Focus rings",
+      ":focus-visible across all interactive elements. 2px brand-forest @ 50%, 2px offset.",
+    ],
+    [
+      "Tap targets",
+      "32px+ on default buttons / inputs. Smaller sizes only in dense toolbars.",
+    ],
+    [
+      "Status semantics",
+      "Color never alone — every status badge has text and/or icon.",
+    ],
+    [
+      "Reduced motion",
+      "globals.css disables animations + transitions when prefers-reduced-motion is set.",
+    ],
+    [
+      "Form a11y",
+      "Every input has a Label with htmlFor. Errors use aria-invalid + aria-describedby.",
+    ],
+    [
+      "Dialogs",
+      "Radix handles focus-trap, escape-to-close, focus return. Title + Description wired to aria.",
+    ],
+    [
+      "Tables",
+      "<th scope='col'>. Sortable columns announce sort state via aria-sort.",
+    ],
+    ["Skip link", "First focusable element jumps to <main id='main'>."],
+    [
+      "Icons",
+      "Decorative icons get aria-hidden; meaningful icons get aria-label or accompanying text.",
+    ],
+  ];
+  return (
+    <DocSection
+      id="a11y"
+      title="Accessibility"
+      description="Baked in — every primitive ships with the rules below. Verify with axe DevTools before merging UI changes."
+    >
+      <ul className="rounded border border-border bg-background divide-y divide-border">
+        {checks.map(([label, body]) => (
+          <li key={label} className="flex gap-3 px-4 py-3">
+            <CheckCircle2
+              className="h-4 w-4 mt-0.5 shrink-0 text-brand-forest"
+              strokeWidth={2}
+            />
+            <div>
+              <div className="text-sm font-medium">{label}</div>
+              <div className="text-xs text-text-muted mt-0.5">{body}</div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </DocSection>
+  );
+}
+
+function UsageSection() {
+  return (
+    <DocSection
+      id="usage"
+      title="Using the system"
+      description="How to consume the components, extend variants, and respect the rules."
+    >
+      <DocSubsection
+        title="Import paths"
+        description="Everything ships from one entry. The package is a workspace dep — no build step, source TS is consumed directly via Next's transpilePackages."
+      >
+        <CodeBlock
+          language="tsx"
+          code={`import {
+  Button, Input, Label, Badge,
+  Card, CardHeader, CardTitle, CardContent, CardFooter,
+  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter,
+  LivePill, StatusPill, MetricTile, EmptyState, Avatar, Skeleton,
+  Timestamp, MoneyBreakdown, ThreeState, ConfirmAction,
+  ThemeProvider, useTheme, ThemeToggle,
+  cn,
+  type GameStatus, type ListState,
+} from "@dtsports/design-system";
+
+import { toast } from "@dtsports/design-system";`}
+        />
+      </DocSubsection>
+
+      <DocSubsection
+        title="Composing classes with cn()"
+        description="Use cn() to merge Tailwind classes so callers can override variants without duplication."
+      >
+        <CodeBlock
+          language="tsx"
+          code={`import { cn } from "@dtsports/design-system";
+
+export function MyCard({ className, ...props }) {
+  return (
+    <div
+      className={cn("rounded border border-border bg-background p-4", className)}
+      {...props}
+    />
+  );
+}`}
+        />
+      </DocSubsection>
+
+      <DocSubsection
+        title="Dark mode"
+        description="The ThemeProvider toggles a `dark` class on <html>. All design tokens have a dark counterpart in globals.css. Components don't need any dark: classes — they inherit the variables."
+      >
+        <div className="flex items-center gap-3 text-sm text-text-muted">
+          Try the toggle in the topbar (top right). <ThemeToggle />
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Adding a new variant"
+        description="Edit the variant's cva() call in components/ui/<name>.tsx. Keep new variants minimal — if a use case fits an existing one, prefer that."
+      >
+        <CodeBlock
+          language="tsx"
+          code={`// components/ui/button.tsx
+const buttonVariants = cva(/* base classes */, {
+  variants: {
+    variant: {
+      // existing variants...
+      success: "bg-success text-white hover:bg-success/90", // new
+    },
+  },
+});`}
+        />
+      </DocSubsection>
+
+      <DocSubsection
+        title="Do / don't"
+        description="Quick reference. If in doubt, default to the left column."
+      >
+        <div className="grid md:grid-cols-2 gap-3">
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium uppercase tracking-[0.04em] text-brand-forest mb-2">
+              Do
+            </div>
+            <ul className="text-sm text-foreground space-y-1.5">
+              <li>· Default to text-sm (13px)</li>
+              <li>· Tables for any list of 3+ structured rows</li>
+              <li>· 1px borders for separation</li>
+              <li>· Forest first, lime for the loudest CTA only</li>
+              <li>· Right-align numbers + add .tabular</li>
+              <li>· Skeletons over spinners</li>
+              <li>· Pair status colors with icons or labels</li>
+            </ul>
+          </div>
+          <div className="rounded border border-border bg-background p-4">
+            <div className="text-xs font-medium uppercase tracking-[0.04em] text-danger mb-2">
+              Don&apos;t
+            </div>
+            <ul className="text-sm text-foreground space-y-1.5">
+              <li>· rounded-xl / rounded-2xl anywhere</li>
+              <li>· White text on lime</li>
+              <li>· Multiple accent (lime) buttons on one screen</li>
+              <li>· Emojis in product UI</li>
+              <li>· Scale-on-hover or bouncy animations</li>
+              <li>· Tinted card backgrounds to indicate stacking</li>
+              <li>· Title Case in UI labels</li>
+            </ul>
+          </div>
+        </div>
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch A — Forms                                                          */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function CheckboxSection() {
+  const [marketing, setMarketing] = React.useState<boolean | "indeterminate">(
+    false
+  );
+  return (
+    <DocSection
+      id="checkbox"
+      title="Checkbox"
+      description="Square 16px control. Brand-forest fill when checked. Supports `indeterminate` (e.g., partial selection in a tree). Always pair with a Label or use FormField."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Checkbox id="ck-waiver" defaultChecked />
+              <Label
+                htmlFor="ck-waiver"
+                className="normal-case tracking-normal text-sm font-normal cursor-pointer"
+              >
+                I&apos;ve read and accept the waiver
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="ck-credit" />
+              <Label
+                htmlFor="ck-credit"
+                className="normal-case tracking-normal text-sm font-normal cursor-pointer"
+              >
+                Apply $6.00 credit at checkout
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="ck-ind"
+                checked={marketing}
+                onCheckedChange={setMarketing}
+              />
+              <Label
+                htmlFor="ck-ind"
+                className="normal-case tracking-normal text-sm font-normal cursor-pointer"
+              >
+                Marketing emails (indeterminate when toggled)
+              </Label>
+              <Button
+                size="xs"
+                variant="ghost"
+                onClick={() =>
+                  setMarketing(
+                    marketing === "indeterminate" ? false : "indeterminate"
+                  )
+                }
+              >
+                toggle
+              </Button>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="ck-disabled" disabled defaultChecked />
+              <Label
+                htmlFor="ck-disabled"
+                className="normal-case tracking-normal text-sm font-normal opacity-60"
+              >
+                Disabled (locked in)
+              </Label>
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<div className="flex items-center gap-2">
+  <Checkbox id="ck" defaultChecked />
+  <Label htmlFor="ck">I've read and accept the waiver</Label>
+</div>
+
+{/* Indeterminate state */}
+<Checkbox checked="indeterminate" onCheckedChange={…} />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function RadioSection() {
+  const [skill, setSkill] = React.useState("mixed");
+  return (
+    <DocSection
+      id="radio"
+      title="Radio group"
+      description="Pick one from a small set. Keyboard nav (Arrow / Home / End) handled by Radix. For >5 options, prefer Select."
+    >
+      <PreviewCode
+        preview={
+          <RadioGroup value={skill} onValueChange={setSkill}>
+            {[
+              ["beginner", "Beginner", "Learning the basics"],
+              ["intermediate", "Intermediate", "Comfortable with the rules"],
+              ["mixed", "Mixed skill", "Open to anyone"],
+              ["advanced", "Advanced", "Competitive only"],
+            ].map(([value, title, desc]) => (
+              <div key={value} className="flex items-start gap-2.5">
+                <RadioGroupItem
+                  value={value}
+                  id={`rg-${value}`}
+                  className="mt-0.5"
+                />
+                <Label
+                  htmlFor={`rg-${value}`}
+                  className="normal-case tracking-normal cursor-pointer"
+                >
+                  <span className="block text-sm font-medium text-foreground">
+                    {title}
+                  </span>
+                  <span className="block text-xs text-text-muted mt-0.5">
+                    {desc}
+                  </span>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<RadioGroup value={skill} onValueChange={setSkill}>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="beginner" id="b" />
+    <Label htmlFor="b">Beginner</Label>
+  </div>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="advanced" id="a" />
+    <Label htmlFor="a">Advanced</Label>
+  </div>
+</RadioGroup>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function SwitchSection() {
+  return (
+    <DocSection
+      id="switch"
+      title="Switch"
+      description="For instantly-applied toggles (notifications, quiet hours, theme). Use Checkbox for form fields that need an explicit Save."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3 max-w-md">
+            <div className="flex items-center justify-between gap-3">
+              <Label
+                htmlFor="sw-credits"
+                className="normal-case tracking-normal text-sm font-normal flex-1 cursor-pointer"
+              >
+                Auto-apply credits at checkout
+              </Label>
+              <Switch id="sw-credits" defaultChecked />
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex-1">
+                <Label
+                  htmlFor="sw-quiet"
+                  className="normal-case tracking-normal text-sm font-normal cursor-pointer"
+                >
+                  SMS quiet hours
+                </Label>
+                <p className="text-xs text-text-muted mt-0.5">
+                  No SMS 9 pm – 8 am local
+                </p>
+              </div>
+              <Switch id="sw-quiet" defaultChecked />
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <Label
+                htmlFor="sw-disabled"
+                className="normal-case tracking-normal text-sm font-normal flex-1 opacity-60"
+              >
+                Push notifications (not yet enabled)
+              </Label>
+              <Switch id="sw-disabled" disabled />
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<div className="flex items-center justify-between">
+  <Label htmlFor="sw-credits">Auto-apply credits</Label>
+  <Switch id="sw-credits" defaultChecked />
+</div>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function SelectSection() {
+  const [venue, setVenue] = React.useState("");
+  return (
+    <DocSection
+      id="select"
+      title="Select"
+      description="Keyboard-accessible dropdown. Use for venue/field/sport pickers and other curated lists. Supports groups, labels, separators."
+    >
+      <PreviewCode
+        preview={
+          <div className="max-w-xs">
+            <Select value={venue} onValueChange={setVenue}>
+              <SelectTrigger>
+                <SelectValue placeholder="Pick a venue" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>NYC</SelectLabel>
+                  <SelectItem value="astoria">Astoria Turf</SelectItem>
+                  <SelectItem value="mccarren">McCarren Park</SelectItem>
+                </SelectGroup>
+                <SelectSeparator />
+                <SelectGroup>
+                  <SelectLabel>Coming soon</SelectLabel>
+                  <SelectItem value="williamsburg" disabled>
+                    Williamsburg Field
+                  </SelectItem>
+                  <SelectItem value="bushwick" disabled>
+                    Bushwick Park
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            {venue && (
+              <p className="mt-2 text-xs text-text-muted tabular">
+                Selected: <span className="font-mono">{venue}</span>
+              </p>
+            )}
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Select value={venue} onValueChange={setVenue}>
+  <SelectTrigger>
+    <SelectValue placeholder="Pick a venue" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>NYC</SelectLabel>
+      <SelectItem value="astoria">Astoria Turf</SelectItem>
+      <SelectItem value="mccarren">McCarren Park</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function TextareaSection() {
+  return (
+    <DocSection
+      id="textarea"
+      title="Textarea"
+      description="Multi-line input. Same focus / aria-invalid pattern as Input. Defaults to vertical resize only."
+    >
+      <PreviewCode
+        preview={
+          <Textarea
+            defaultValue={`- Turf shoes or flats only — no metal cleats.
+- Bring two shirt colors (dark / light).
+- Arrive 10 minutes before start.`}
+            placeholder="House rules…"
+            className="max-w-md"
+            rows={5}
+          />
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Textarea
+  placeholder="House rules…"
+  defaultValue="- Turf shoes only…"
+  rows={5}
+/>
+
+{/* Error state */}
+<Textarea aria-invalid="true" />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function NumberInputSection() {
+  const [capacity, setCapacity] = React.useState(10);
+  const [price, setPrice] = React.useState(14);
+  return (
+    <DocSection
+      id="number-input"
+      title="Number input"
+      description="Stepper-style numeric input with +/− buttons. Use for capacity, min-to-run, price, quantity. Always set min/max for safety."
+    >
+      <PreviewCode
+        preview={
+          <div className="flex items-end gap-4">
+            <div>
+              <Label htmlFor="ni-cap">Capacity</Label>
+              <NumberInput
+                id="ni-cap"
+                value={capacity}
+                onChange={setCapacity}
+                min={2}
+                max={22}
+                step={1}
+                className="mt-1.5"
+              />
+            </div>
+            <div>
+              <Label htmlFor="ni-price">Base price ($)</Label>
+              <NumberInput
+                id="ni-price"
+                value={price}
+                onChange={setPrice}
+                min={0}
+                max={100}
+                step={1}
+                className="mt-1.5"
+              />
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setCapacity(10);
+                setPrice(14);
+              }}
+            >
+              Reset
+            </Button>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<NumberInput
+  value={capacity}
+  onChange={setCapacity}
+  min={2}
+  max={22}
+  step={1}
+/>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function FormFieldSection() {
+  return (
+    <DocSection
+      id="form-field"
+      title="Form field"
+      description="Composition wrapper. Auto-generates an id, links the Label, and injects aria-describedby / aria-invalid into the control. Switch between helper and error text via props."
+    >
+      <Example>
+        <form
+          className="grid gap-4 max-w-md"
+          onSubmit={(e) => {
+            e.preventDefault();
+            toast.success("Form submitted (demo).");
+          }}
+          noValidate
+        >
+          <FormField
+            label="Email"
+            required
+            helper="We'll send booking confirmations here."
+          >
+            <Input
+              type="email"
+              placeholder="you@dtsports.tv"
+              autoComplete="email"
+              required
+            />
+          </FormField>
+
+          <FormField
+            label="Skill level"
+            helper="Helps us match you with the right games."
+          >
+            <Select defaultValue="mixed">
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="beginner">Beginner</SelectItem>
+                <SelectItem value="intermediate">Intermediate</SelectItem>
+                <SelectItem value="mixed">Mixed</SelectItem>
+                <SelectItem value="advanced">Advanced</SelectItem>
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          <FormField
+            label="House rules"
+            helper="Markdown, one bullet per rule."
+          >
+            <Textarea
+              rows={4}
+              defaultValue="- Turf shoes only.\n- Bring two shirt colors."
+            />
+          </FormField>
+
+          <FormField
+            label="Card number"
+            required
+            error="Card number is too short."
+          >
+            <Input defaultValue="4242 4242" />
+          </FormField>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" type="button">
+              Cancel
+            </Button>
+            <Button variant="accent" type="submit">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Example>
+      <CodeBlock
+        language="tsx"
+        code={`<FormField
+  label="Email"
+  required
+  helper="We'll send booking confirmations here."
+>
+  <Input type="email" autoComplete="email" />
+</FormField>
+
+{/* Error replaces helper, sets aria-invalid + aria-describedby */}
+<FormField label="Card" required error="Card number is too short.">
+  <Input />
+</FormField>`}
+      />
+    </DocSection>
+  );
+}
+
+function AlertSection() {
+  const [dismissed, setDismissed] = React.useState(false);
+  return (
+    <DocSection
+      id="alert"
+      title="Alert"
+      description="Inline status messages that stay put. Use Toast for transient feedback; use Alert when the message belongs inline. Danger variant uses role='alert' for SR interruption."
+    >
+      <div className="space-y-3 max-w-2xl">
+        <Alert variant="info" title="DT Sports TV streams on YouTube.">
+          Paste any YouTube URL when creating a game — we embed it
+          automatically.
+        </Alert>
+        <Alert variant="warning" title="1 game below minimum to run">
+          Astoria · Field B · 8 pm has 2/6. Promote from waitlist or cancel +
+          refund before 6 pm.
+        </Alert>
+        <Alert variant="danger" title="Payment failed">
+          Your bank declined the charge. Try a different card or contact your
+          bank.
+        </Alert>
+        <Alert variant="success" title="Booking confirmed.">
+          Saturday, May 25 at 6:00 pm at Astoria Turf · Field A.
+        </Alert>
+        {!dismissed && (
+          <Alert
+            variant="info"
+            title="Dismissible"
+            dismissible
+            onDismiss={() => setDismissed(true)}
+          >
+            Set `dismissible` and provide `onDismiss` for a close button.
+          </Alert>
+        )}
+        {dismissed && (
+          <Button size="sm" variant="ghost" onClick={() => setDismissed(false)}>
+            Restore dismissed alert
+          </Button>
+        )}
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Alert variant="warning" title="1 game below minimum">
+  Astoria Field B at 8 pm needs 4 more.
+</Alert>
+
+<Alert variant="info" dismissible onDismiss={() => …}>
+  …
+</Alert>`}
+      />
+    </DocSection>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Mid-page additions                                                       */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function CapacitySection() {
+  return (
+    <DocSection
+      id="capacity"
+      title="Capacity bar"
+      description="The spots-filled visualization used everywhere games appear. Three colors: forest (normal), warning (below minToRun), foreground (full). Includes role='progressbar' and a default aria-label."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3 max-w-md">
+            <CapacityBar filled={3} capacity={10} minToRun={6} />
+            <CapacityBar filled={5} capacity={10} minToRun={6} />
+            <CapacityBar filled={8} capacity={10} minToRun={6} />
+            <CapacityBar filled={10} capacity={10} minToRun={6} />
+            <div className="pt-2">
+              <CapacityBar filled={4} capacity={10} minToRun={6} size="lg" />
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<CapacityBar filled={8} capacity={10} minToRun={6} />
+
+{/* Hide count */}
+<CapacityBar filled={3} capacity={10} showCount={false} />
+
+{/* Larger */}
+<CapacityBar filled={4} capacity={10} size="lg" />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function TabsSection() {
+  return (
+    <DocSection
+      id="tabs"
+      title="Tabs"
+      description="Underline-style horizontal tabs. Keyboard nav (←/→/Home/End) handled by Radix. Use for time-window filters or status filters in dashboards."
+    >
+      <Tabs defaultValue="today" className="w-full">
+        <TabsList>
+          <TabsTrigger value="today">Today</TabsTrigger>
+          <TabsTrigger value="week">
+            This week
+            <Badge variant="neutral" size="xs">
+              12
+            </Badge>
+          </TabsTrigger>
+          <TabsTrigger value="past">Past</TabsTrigger>
+          <TabsTrigger value="cancelled" disabled>
+            Cancelled
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="today">
+          <div className="rounded border border-border bg-background p-4 text-sm text-text-muted">
+            6 games scheduled for today.
+          </div>
+        </TabsContent>
+        <TabsContent value="week">
+          <div className="rounded border border-border bg-background p-4 text-sm text-text-muted">
+            12 games this week across 2 venues.
+          </div>
+        </TabsContent>
+        <TabsContent value="past">
+          <div className="rounded border border-border bg-background p-4 text-sm text-text-muted">
+            Past games would render here.
+          </div>
+        </TabsContent>
+      </Tabs>
+      <CodeBlock
+        language="tsx"
+        code={`<Tabs defaultValue="today">
+  <TabsList>
+    <TabsTrigger value="today">Today</TabsTrigger>
+    <TabsTrigger value="week">This week</TabsTrigger>
+  </TabsList>
+  <TabsContent value="today">…</TabsContent>
+  <TabsContent value="week">…</TabsContent>
+</Tabs>`}
+      />
+    </DocSection>
+  );
+}
+
+function AccordionSection() {
+  return (
+    <DocSection
+      id="accordion"
+      title="Accordion"
+      description="Stacked expandable sections. `type='single' collapsible` for FAQ-style, `type='multiple'` for settings panels. The chevron rotates on open."
+    >
+      <Accordion
+        type="single"
+        collapsible
+        className="max-w-2xl rounded border border-border bg-background px-4"
+      >
+        <AccordionItem value="rules">
+          <AccordionTrigger>House rules — Astoria Turf</AccordionTrigger>
+          <AccordionContent>
+            <ul className="text-sm text-text-muted space-y-1.5">
+              <li>· Turf shoes or flats only — no metal cleats.</li>
+              <li>· Bring two shirt colors (dark / light).</li>
+              <li>· Arrive 10 minutes before start for check-in.</li>
+              <li>· No spectators on the turf — sideline benches only.</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="policy">
+          <AccordionTrigger>Cancellation policy</AccordionTrigger>
+          <AccordionContent>
+            <p className="text-sm text-text-muted">
+              Refunds are issued as DT Sports credit (instant). Cancel 24h+ for
+              full credit, less than 2h for none. DT Sports cancellations are
+              always 100%.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="about">
+          <AccordionTrigger>About this format</AccordionTrigger>
+          <AccordionContent>
+            <p className="text-sm text-text-muted">
+              5v5 turf soccer, 90 minutes, two halves. We balance teams on-site
+              after warm-ups.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <CodeBlock
+        language="tsx"
+        code={`<Accordion type="single" collapsible>
+  <AccordionItem value="rules">
+    <AccordionTrigger>House rules</AccordionTrigger>
+    <AccordionContent>…</AccordionContent>
+  </AccordionItem>
+</Accordion>`}
+      />
+    </DocSection>
+  );
+}
+
+function DrawerSection() {
+  return (
+    <DocSection
+      id="drawer"
+      title="Drawer"
+      description="Side-pushed panel for secondary tasks. Use instead of nested dialogs (per §3.17). Default side is right; `side='bottom'` for mobile filter sheets."
+    >
+      <div className="flex flex-wrap gap-2">
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="secondary">
+              <Edit className="h-4 w-4" strokeWidth={1.75} />
+              Edit game (right)
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent side="right">
+            <DrawerHeader>
+              <DrawerTitle>Edit game</DrawerTitle>
+              <DrawerDescription>
+                Astoria Turf · Field A · Sat May 25, 6:00 pm
+              </DrawerDescription>
+            </DrawerHeader>
+            <DrawerBody>
+              <div className="space-y-4">
+                <FormField label="Capacity">
+                  <NumberInput defaultValue={10} min={2} max={22} />
+                </FormField>
+                <FormField label="Base price">
+                  <NumberInput defaultValue={14} min={0} max={100} />
+                </FormField>
+                <FormField
+                  label="Notes"
+                  helper="Visible to players in confirmation email."
+                >
+                  <Textarea rows={3} placeholder="Optional…" />
+                </FormField>
+              </div>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button variant="ghost" size="sm">
+                Cancel
+              </Button>
+              <Button variant="primary" size="sm">
+                Save changes
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="secondary">Filters (bottom)</Button>
+          </DrawerTrigger>
+          <DrawerContent side="bottom">
+            <DrawerHeader>
+              <DrawerTitle>Filters</DrawerTitle>
+            </DrawerHeader>
+            <DrawerBody>
+              <p className="text-sm text-text-muted">
+                A bottom drawer is the right pattern for mobile filter sheets.
+              </p>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Drawer>
+  <DrawerTrigger asChild><Button>Edit…</Button></DrawerTrigger>
+  <DrawerContent side="right">
+    <DrawerHeader>
+      <DrawerTitle>Edit game</DrawerTitle>
+      <DrawerDescription>Astoria Turf · Field A</DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>…</DrawerBody>
+    <DrawerFooter>
+      <Button variant="ghost">Cancel</Button>
+      <Button>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`}
+      />
+    </DocSection>
+  );
+}
+
+function PopoverSection() {
+  return (
+    <DocSection
+      id="popover"
+      title="Popover"
+      description="Generic click-to-open floating panel. Use for date pickers, mini filter menus, inline 'quick edit' forms. For action menus, use DropdownMenu."
+    >
+      <div className="flex flex-wrap gap-2">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="secondary" size="sm">
+              <Info className="h-4 w-4" strokeWidth={1.75} />
+              Quick add player
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <div className="space-y-3">
+              <div>
+                <h4 className="text-sm font-semibold">Walk-in player</h4>
+                <p className="text-xs text-text-muted mt-0.5">
+                  Add a player who showed up without booking.
+                </p>
+              </div>
+              <FormField label="Name">
+                <Input placeholder="Alex Chen" />
+              </FormField>
+              <FormField label="Charge">
+                <NumberInput defaultValue={14} min={0} max={50} />
+              </FormField>
+              <Button size="sm" variant="accent" className="w-full">
+                Add & charge
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Popover>
+  <PopoverTrigger asChild><Button>Quick add</Button></PopoverTrigger>
+  <PopoverContent>
+    <h4>Walk-in player</h4>
+    …
+  </PopoverContent>
+</Popover>`}
+      />
+    </DocSection>
+  );
+}
+
+function DropdownSection() {
+  const [autoApply, setAutoApply] = React.useState(true);
+  return (
+    <DocSection
+      id="dropdown"
+      title="Dropdown menu"
+      description="Actions menu (kebab on table rows, user avatar menu). Supports labels, separators, checkbox items, sub-menus, keyboard shortcuts. NOT for selecting a value — use Select for that."
+    >
+      <div className="flex flex-wrap gap-3">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="More actions">
+              <MoreHorizontal className="h-4 w-4" strokeWidth={1.75} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuLabel>Game · Astoria · 6 pm</DropdownMenuLabel>
+            <DropdownMenuItem onSelect={() => toast("View roster.")}>
+              <Users className="h-3.5 w-3.5" strokeWidth={1.75} />
+              View roster
+              <DropdownMenuShortcut>⌘R</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => toast("Edit game.")}>
+              <Edit className="h-3.5 w-3.5" strokeWidth={1.75} />
+              Edit
+              <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem
+              checked={autoApply}
+              onCheckedChange={(c) => setAutoApply(!!c)}
+            >
+              Auto-promote waitlist
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-danger focus:text-danger focus:bg-danger/10"
+              onSelect={() => toast.error("Cancel-game flow not built yet.")}
+            >
+              <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
+              Cancel game…
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="secondary" size="sm">
+              <Settings className="h-3.5 w-3.5" strokeWidth={1.75} />
+              Settings
+              <ChevronDown className="h-3 w-3 opacity-60" strokeWidth={1.75} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Profile</DropdownMenuLabel>
+            <DropdownMenuItem>Edit profile</DropdownMenuItem>
+            <DropdownMenuItem>Notification preferences</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-danger focus:text-danger focus:bg-danger/10">
+              Sign out
+              <DropdownMenuShortcut>⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button size="icon"><MoreHorizontal /></Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Game</DropdownMenuLabel>
+    <DropdownMenuItem>View roster</DropdownMenuItem>
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuCheckboxItem checked={auto} onCheckedChange={setAuto}>
+      Auto-promote waitlist
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem className="text-danger">Cancel…</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`}
+      />
+    </DocSection>
+  );
+}
+
+function TooltipSection() {
+  return (
+    <DocSection
+      id="tooltip"
+      title="Tooltip"
+      description="Keyboard-accessible hover hints. Preferred over native title= (mouse-only). The TooltipProvider is already wired into ThemeProvider — no extra setup needed in your app."
+    >
+      <div className="flex items-center gap-3">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="View roster">
+              <Users className="h-4 w-4" strokeWidth={1.75} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>View roster</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="Edit game">
+              <Edit className="h-4 w-4" strokeWidth={1.75} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Edit game · ⌘E</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="Delete">
+              <Trash2 className="h-4 w-4 text-danger" strokeWidth={1.75} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Delete (no undo)</TooltipContent>
+        </Tooltip>
+        <span className="text-xs text-text-muted ml-3">
+          Tab through them — tooltips appear on keyboard focus, not just mouse.
+        </span>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Tooltip>
+  <TooltipTrigger asChild>
+    <Button size="icon" aria-label="View roster">
+      <Users />
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>View roster</TooltipContent>
+</Tooltip>`}
+      />
+    </DocSection>
+  );
+}
+
+function SeparatorSection() {
+  return (
+    <DocSection
+      id="separator"
+      title="Separator"
+      description="Thin divider (<hr> horizontal, vertical bar). Decorative by default; set decorative={false} when it semantically separates groups."
+    >
+      <div className="rounded border border-border bg-background p-4 max-w-md">
+        <div className="space-y-1">
+          <div className="text-sm font-semibold">Saturday&apos;s games</div>
+          <p className="text-xs text-text-muted">3 venues · 6 games</p>
+        </div>
+        <Separator className="my-3" />
+        <div className="flex h-5 items-center gap-3 text-sm">
+          <div className="tabular">6:00 pm</div>
+          <Separator orientation="vertical" />
+          <div>Astoria · Field A</div>
+          <Separator orientation="vertical" />
+          <div className="tabular text-text-muted">8/10</div>
+        </div>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Separator />            {/* horizontal */}
+<Separator orientation="vertical" />`}
+      />
+    </DocSection>
+  );
+}
+
+function SpinnerSection() {
+  return (
+    <DocSection
+      id="spinner"
+      title="Spinner"
+      description="Tiny inline loader for buttons and per-row 'working' state. Prefer Skeleton for full-region loading (per §3.14)."
+    >
+      <PreviewCode
+        preview={
+          <div className="flex items-center gap-3">
+            <Spinner size="sm" />
+            <Spinner />
+            <Spinner size="lg" />
+            <Button variant="primary" disabled>
+              <Spinner size="sm" /> Processing payment…
+            </Button>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Spinner size="sm" />
+<Spinner />
+<Spinner size="lg" />
+
+{/* In a button */}
+<Button disabled>
+  <Spinner size="sm" /> Processing…
+</Button>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function ProgressSection() {
+  const [value, setValue] = React.useState(33);
+  return (
+    <DocSection
+      id="progress"
+      title="Progress"
+      description="For multi-step flows with a known percent (waiver → emergency contact → done; file uploads). For spots filled, use CapacityBar. For unknown duration, use Spinner or Skeleton."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-4 max-w-md">
+            <div>
+              <div className="flex items-center justify-between mb-1.5">
+                <span className="text-xs text-text-muted">
+                  Step 1 of 3 — Profile
+                </span>
+                <span className="text-xs tabular font-medium">{value}%</span>
+              </div>
+              <Progress value={value} />
+            </div>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => setValue(Math.max(0, value - 33))}
+              >
+                Back
+              </Button>
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={() => setValue(Math.min(100, value + 33))}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Progress value={66} />
+
+{/* With label + percent */}
+<div className="flex justify-between text-xs">
+  <span>Step 2 of 3</span>
+  <span>66%</span>
+</div>
+<Progress value={66} />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch C — Data + display additions                                       */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function ChipSection() {
+  const [filters, setFilters] = React.useState<string[]>([
+    "Astoria Turf",
+    "Sat 5/24",
+    "5v5",
+  ]);
+  const remove = (label: string) =>
+    setFilters(filters.filter((f) => f !== label));
+
+  return (
+    <DocSection
+      id="chip"
+      title="Chip"
+      description="Small removable token — use for active filter indicators, applied tags, selected options in a multi-select summary. Distinct from Badge: Chips are interactive."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-text-muted mr-1">
+                Active filters:
+              </span>
+              {filters.length === 0 && (
+                <span className="text-xs text-text-subtle italic">
+                  no filters · click below to add some back
+                </span>
+              )}
+              {filters.map((f) => (
+                <Chip key={f} onRemove={() => remove(f)}>
+                  {f}
+                </Chip>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              <Chip variant="accent">accent</Chip>
+              <Chip variant="neutral">neutral</Chip>
+              <Chip variant="outline">outline</Chip>
+              <Chip variant="accent" onRemove={() => {}}>
+                with × button
+              </Chip>
+            </div>
+            {filters.length < 3 && (
+              <Button
+                size="xs"
+                variant="ghost"
+                onClick={() => setFilters(["Astoria Turf", "Sat 5/24", "5v5"])}
+              >
+                Reset
+              </Button>
+            )}
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Chip onRemove={() => removeFilter("astoria")}>
+  Astoria Turf
+</Chip>
+
+<Chip variant="neutral">Soccer</Chip>
+<Chip variant="outline">5v5</Chip>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function SpecSection() {
+  return (
+    <DocSection
+      id="spec"
+      title="Spec list"
+      description="Semantic key-value display (<dl> / <dt> / <dd>). Use for 'About this game' panels, settings summaries, receipts. Grid columns 1–4."
+    >
+      <PreviewCode
+        preview={
+          <Card className="max-w-2xl">
+            <CardHeader>
+              <CardTitle className="text-sm">About this game</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <SpecList columns={2}>
+                <Spec label="Sport">Soccer</Spec>
+                <Spec label="Format">5v5</Spec>
+                <Spec label="Skill level">Mixed</Spec>
+                <Spec label="Capacity">
+                  <span className="tabular">10 players (6 min to run)</span>
+                </Spec>
+                <Spec label="Venue">Astoria Turf · Field A</Spec>
+                <Spec label="Address">19-04 30th Dr, Astoria, NY</Spec>
+              </SpecList>
+            </CardContent>
+          </Card>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<SpecList columns={2}>
+  <Spec label="Format">5v5</Spec>
+  <Spec label="Capacity">10 players</Spec>
+  <Spec label="Start"><Timestamp iso={…} /></Spec>
+</SpecList>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function PaginationSection() {
+  const [page, setPage] = React.useState(1);
+  return (
+    <DocSection
+      id="pagination"
+      title="Pagination"
+      description="Use when total > 1. For URL-driven pagination per §3.9, wire onPageChange to router.replace(?page=N) — that gives you a shareable + back-button-safe URL."
+    >
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-text-muted tabular">
+            Page {page} of 28
+          </span>
+          <Pagination
+            currentPage={page}
+            totalPages={28}
+            onPageChange={setPage}
+          />
+        </div>
+        <div className="text-xs text-text-subtle">
+          Examples below for different total counts:
+        </div>
+        <div className="space-y-2">
+          <Pagination currentPage={1} totalPages={3} onPageChange={() => {}} />
+          <Pagination currentPage={1} totalPages={10} onPageChange={() => {}} />
+          <Pagination
+            currentPage={50}
+            totalPages={100}
+            onPageChange={() => {}}
+          />
+        </div>
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Pagination
+  currentPage={page}
+  totalPages={totalPages}
+  onPageChange={setPage}
+/>
+
+{/* URL-driven (recommended) */}
+const setPage = (p: number) =>
+  router.replace(\`?page=\${p}\`, { scroll: false });`}
+      />
+    </DocSection>
+  );
+}
+
+function AvatarGroupSection() {
+  return (
+    <DocSection
+      id="avatar-group"
+      title="Avatar group"
+      description="Stacked overlapping avatars with a +N overflow pill. Use for roster previews and 'N people booked' indicators."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3">
+            <AvatarGroup max={4} label="8 players booked">
+              <Avatar name="Alex Chen" />
+              <Avatar name="Jordan Lee" />
+              <Avatar name="Sam Patel" status="checked-in" />
+              <Avatar name="Maria Garcia" />
+              <Avatar name="Danny Tran" />
+              <Avatar name="Priya Singh" />
+              <Avatar name="Ethan Brooks" />
+              <Avatar name="Nina Park" />
+            </AvatarGroup>
+            <div className="flex items-center gap-3">
+              <AvatarGroup max={3} size="sm">
+                <Avatar name="Alex Chen" size="sm" />
+                <Avatar name="Jordan Lee" size="sm" />
+                <Avatar name="Sam Patel" size="sm" />
+                <Avatar name="Maria Garcia" size="sm" />
+                <Avatar name="Danny Tran" size="sm" />
+              </AvatarGroup>
+              <span className="text-xs text-text-muted">
+                Compact size for table rows.
+              </span>
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<AvatarGroup max={4} label="8 players booked">
+  <Avatar name="Alex Chen" />
+  <Avatar name="Jordan Lee" />
+  <Avatar name="Sam Patel" status="checked-in" />
+  …
+</AvatarGroup>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch C — Layout                                                         */
+/* ─────────────────────────────────────────────────────────────────────── */
+
+function AppShellSection() {
+  return (
+    <DocSection
+      id="app-shell"
+      title="App shell"
+      description="The full-height flex frame. AppShell + AppMain compose any sidebar-and-content app. Use sticky TopBar inside AppMain so it pins on scroll. The /admin route uses exactly this pattern."
+    >
+      <CodeBlock
+        language="tsx"
+        code={`<AppShell>
+  <Sidebar>…</Sidebar>
+  <AppMain>
+    <TopBar>
+      <Breadcrumb>…</Breadcrumb>
+    </TopBar>
+    <main className="flex-1 px-6 py-6">
+      {children}
+    </main>
+  </AppMain>
+</AppShell>`}
+      />
+      <p className="text-xs text-text-muted">
+        Live in <code className="font-mono">/admin</code> — the route uses
+        AppShell, Sidebar, and TopBar primitives.
+      </p>
+    </DocSection>
+  );
+}
+
+function SidebarComponentSection() {
+  return (
+    <DocSection
+      id="sidebar-comp"
+      title="Sidebar"
+      description="Composable nav sidebar. Use Sidebar / SidebarHeader / SidebarBody / SidebarFooter for the shell; SidebarSection + SidebarItem for the nav. SidebarItem supports asChild for Next.js Link integration."
+    >
+      <Example label="Sidebar in a 280px frame">
+        <div className="border border-border-strong rounded overflow-hidden h-[420px] flex bg-background">
+          <div className="w-56 shrink-0 bg-bg-subtle/40 border-r border-border flex flex-col">
+            <SidebarHeader>
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-6 w-6 rounded-sm bg-brand-forest grid place-items-center text-brand-forest-foreground font-bold text-xs tabular"
+                  aria-hidden="true"
+                >
+                  DT
+                </div>
+                <div>
+                  <div className="text-[10px] font-medium uppercase tracking-[0.06em] text-text-subtle">
+                    DT Sports
+                  </div>
+                  <div className="text-sm font-semibold leading-none">
+                    Admin
+                  </div>
+                </div>
+              </div>
+            </SidebarHeader>
+            <SidebarBody>
+              <SidebarSection label="Today">
+                <SidebarItem
+                  href="#today"
+                  active
+                  icon={
+                    <LayoutDashboard className="h-4 w-4" strokeWidth={1.75} />
+                  }
+                >
+                  Today
+                </SidebarItem>
+                <SidebarItem
+                  href="#week"
+                  icon={<CalendarDays className="h-4 w-4" strokeWidth={1.75} />}
+                >
+                  This week
+                </SidebarItem>
+              </SidebarSection>
+              <SidebarSection label="Manage">
+                <SidebarItem
+                  href="#games"
+                  icon={<Trophy className="h-4 w-4" strokeWidth={1.75} />}
+                >
+                  Games
+                </SidebarItem>
+                <SidebarItem
+                  href="#series"
+                  icon={<Repeat className="h-4 w-4" strokeWidth={1.75} />}
+                >
+                  Series
+                </SidebarItem>
+                <SidebarItem
+                  href="#players"
+                  icon={<Users className="h-4 w-4" strokeWidth={1.75} />}
+                  badge={
+                    <Badge variant="warning" size="xs">
+                      4
+                    </Badge>
+                  }
+                >
+                  Players
+                </SidebarItem>
+              </SidebarSection>
+            </SidebarBody>
+            <SidebarFooter>
+              <div className="text-[10px] text-text-subtle font-mono tabular">
+                v0.1 · main
+              </div>
+            </SidebarFooter>
+          </div>
+          <div className="flex-1 grid place-items-center text-text-subtle text-xs">
+            (page content)
+          </div>
+        </div>
+      </Example>
+      <CodeBlock
+        language="tsx"
+        code={`<Sidebar>
+  <SidebarHeader><BrandMark /></SidebarHeader>
+  <SidebarBody>
+    <SidebarSection label="Today">
+      <SidebarItem asChild active>
+        <Link href="/admin">
+          <LayoutDashboard className="h-4 w-4" strokeWidth={1.75} />
+          <span className="flex-1 truncate">Today</span>
+        </Link>
+      </SidebarItem>
+    </SidebarSection>
+  </SidebarBody>
+  <SidebarFooter>v0.1</SidebarFooter>
+</Sidebar>`}
+      />
+    </DocSection>
+  );
+}
+
+function TopBarSection() {
+  return (
+    <DocSection
+      id="top-bar"
+      title="Top bar"
+      description="Sticky 48px header. Renders the chrome; content layout is the consumer's. Common pattern: breadcrumb left, search center, actions right."
+    >
+      <Example>
+        <div className="border border-border-strong rounded overflow-hidden bg-background">
+          <TopBar className="static">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Admin</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Today</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <div className="flex-1" />
+            <Badge variant="forest" size="sm">
+              v0.1
+            </Badge>
+            <Button size="sm" variant="ghost" aria-label="Settings">
+              <Settings className="h-4 w-4" strokeWidth={1.75} />
+            </Button>
+          </TopBar>
+          <div className="px-6 py-8 text-text-subtle text-xs">
+            (page content here)
+          </div>
+        </div>
+      </Example>
+      <CodeBlock
+        language="tsx"
+        code={`<TopBar>
+  <Breadcrumb>…</Breadcrumb>
+  <div className="flex-1" />
+  <ThemeToggle />
+  <Avatar name="Danny Tran" size="sm" />
+</TopBar>`}
+      />
+    </DocSection>
+  );
+}
+
+function BreadcrumbSection() {
+  return (
+    <DocSection
+      id="breadcrumb"
+      title="Breadcrumb"
+      description="Semantic <nav aria-label='Breadcrumb'> with ordered list, links, separator, and a non-link page indicator for the current location."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-3">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Admin</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Today</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Admin</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Games</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Astoria Turf</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Field A · Sat 6 pm</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link href="/admin">Admin</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Today</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function ContainerSection() {
+  return (
+    <DocSection
+      id="container"
+      title="Container"
+      description="Max-width page wrapper with consistent horizontal padding (24/32px responsive). Sizes: sm (768) · default (1024) · lg (1280) · full."
+    >
+      <div className="space-y-3">
+        {(["sm", "default", "lg", "full"] as const).map((size) => (
+          <div key={size} className="border border-border rounded">
+            <Container size={size} className="py-4">
+              <div className="rounded bg-bg-subtle border border-border px-3 py-2 text-xs tabular text-text-muted">
+                size=&quot;{size}&quot; — wraps content at the right width
+              </div>
+            </Container>
+          </div>
+        ))}
+      </div>
+      <CodeBlock
+        language="tsx"
+        code={`<Container size="lg">
+  <h1>Page heading</h1>
+  …
+</Container>`}
+      />
+    </DocSection>
+  );
+}
+
+function StackSection() {
+  return (
+    <DocSection
+      id="stack"
+      title="Stack"
+      description="Flexbox with consistent gap. Documents intent (vs raw `flex flex-col gap-3`) and keeps gap tokens consistent. Both vertical and horizontal."
+    >
+      <PreviewCode
+        preview={
+          <div className="space-y-4">
+            <Stack gap={2}>
+              <div className="rounded border border-border bg-background px-3 py-2 text-xs">
+                Vertical · gap=2
+              </div>
+              <div className="rounded border border-border bg-background px-3 py-2 text-xs">
+                Vertical · gap=2
+              </div>
+              <div className="rounded border border-border bg-background px-3 py-2 text-xs">
+                Vertical · gap=2
+              </div>
+            </Stack>
+            <Stack direction="row" gap={3} align="center" justify="between">
+              <span className="text-sm">
+                Row · align=center · justify=between
+              </span>
+              <Button size="sm" variant="primary">
+                Action
+              </Button>
+            </Stack>
+            <Stack direction="row" gap={2} wrap>
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Chip key={i} variant="neutral">
+                  Tag {i + 1}
+                </Chip>
+              ))}
+            </Stack>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Stack gap={2}>…</Stack>
+
+<Stack direction="row" gap={3} align="center" justify="between">
+  <h2>Heading</h2>
+  <Button>Action</Button>
+</Stack>
+
+<Stack direction="row" gap={2} wrap>
+  {tags.map(t => <Chip key={t}>{t}</Chip>)}
+</Stack>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function AspectRatioSection() {
+  return (
+    <DocSection
+      id="aspect-ratio"
+      title="Aspect ratio"
+      description="Locks a region to a given ratio without layout shift. Use for video embeds, image placeholders, banners. Pass `ratio={16 / 9}` etc."
+    >
+      <PreviewCode
+        preview={
+          <div className="grid grid-cols-2 gap-3 max-w-md">
+            <div className="rounded border border-border overflow-hidden">
+              <AspectRatio ratio={16 / 9}>
+                <div className="h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted">
+                  16:9
+                </div>
+              </AspectRatio>
+            </div>
+            <div className="rounded border border-border overflow-hidden">
+              <AspectRatio ratio={1}>
+                <div className="h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted">
+                  1:1
+                </div>
+              </AspectRatio>
+            </div>
+            <div className="rounded border border-border overflow-hidden col-span-2">
+              <AspectRatio ratio={21 / 9}>
+                <div className="h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted">
+                  21:9
+                </div>
+              </AspectRatio>
+            </div>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<AspectRatio ratio={16 / 9}>
+  <iframe src={url} className="h-full w-full" />
+</AspectRatio>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function ScrollAreaSection() {
+  return (
+    <DocSection
+      id="scroll-area"
+      title="Scroll area"
+      description="Styled, consistent custom scrollbars across browsers. Wraps bounded content that needs to scroll. Don't use for full-page scroll — that's the browser's job."
+    >
+      <PreviewCode
+        preview={
+          <ScrollArea className="h-48 w-full max-w-sm rounded border border-border bg-background p-3">
+            <h4 className="text-sm font-semibold mb-2">
+              Roster — Astoria Turf
+            </h4>
+            <ul className="space-y-1.5 text-sm">
+              {[
+                "Alex Chen",
+                "Jordan Lee",
+                "Sam Patel",
+                "Maria Garcia",
+                "Danny Tran",
+                "Priya Singh",
+                "Ethan Brooks",
+                "Nina Park",
+                "Oliver Stone",
+                "Reese Wang",
+                "Sophia Liu",
+                "Tomás Vega",
+                "Uma Patel",
+                "Vince Holloway",
+                "Wei Chen",
+                "Xander Hayes",
+              ].map((name) => (
+                <li key={name} className="flex items-center gap-2">
+                  <Avatar name={name} size="sm" />
+                  <span>{name}</span>
+                </li>
+              ))}
+            </ul>
+          </ScrollArea>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<ScrollArea className="h-48 w-full rounded border">
+  <RosterList players={…} />
+</ScrollArea>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function ComboboxSection() {
+  const [venue, setVenue] = React.useState<string | null>(null);
+  return (
+    <DocSection
+      id="combobox"
+      title="Combobox"
+      description="Searchable single-select. Reach for this over Select once the list is long enough that typing beats scrolling (~10+ options)."
+    >
+      <PreviewCode
+        preview={
+          <div className="max-w-xs">
+            <Combobox
+              aria-label="Venue"
+              placeholder="Select venue…"
+              options={[
+                { value: "astoria", label: "Astoria Turf" },
+                { value: "mccarren", label: "McCarren Park" },
+                { value: "greenpoint", label: "Greenpoint Dome" },
+                { value: "redhook", label: "Red Hook Fields" },
+                { value: "bushwick", label: "Bushwick Park", disabled: true },
+              ]}
+              value={venue}
+              onValueChange={setVenue}
+            />
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Combobox
+  aria-label="Venue"
+  placeholder="Select venue…"
+  options={venues.map(v => ({ value: v.id, label: v.name }))}
+  value={venueId}
+  onValueChange={setVenueId}
+/>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function SliderSection() {
+  const [price, setPrice] = React.useState([20]);
+  return (
+    <DocSection
+      id="slider"
+      title="Slider"
+      description="Range input for bounded numeric choices (max price, distance radius). Arrow keys step; PageUp/Down big-step; Home/End jump to the ends. 44px thumb targets on touch."
+    >
+      <PreviewCode
+        preview={
+          <div className="max-w-xs space-y-2">
+            <Slider
+              aria-label="Max price"
+              min={0}
+              max={50}
+              step={5}
+              value={price}
+              onValueChange={setPrice}
+            />
+            <p className="text-xs text-text-muted tabular">
+              Max price: ${price[0]}
+            </p>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Slider aria-label="Max price" min={0} max={50} step={5}
+        value={price} onValueChange={setPrice} />
+
+{/* Two thumbs = range */}
+<Slider aria-label="Price range" defaultValue={[10, 30]} />`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function DatePickerSection() {
+  const [date, setDate] = React.useState<Date | undefined>(undefined);
+  return (
+    <DocSection
+      id="date-picker"
+      title="Date picker"
+      description="Single-date selection in a popover; closes on pick. The picked Date is midnight LOCAL time — convert against the venue tz before persisting (§3.16). Compose Calendar directly for inline or range use."
+    >
+      <PreviewCode
+        preview={
+          <div className="max-w-xs">
+            <DatePicker
+              aria-label="Game date"
+              value={date}
+              onValueChange={setDate}
+            />
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<DatePicker
+  aria-label="Game date"
+  value={gameDate}
+  onValueChange={setGameDate}
+  disabledDates={{ before: new Date() }}
+/>
+
+{/* Inline calendar */}
+<Calendar mode="single" selected={date} onSelect={setDate} />`}
+          />
+        }
+      />
+      <DocSubsection
+        title="Inline calendar"
+        description="The same Calendar component, embedded (availability views, embedded scheduling)."
+      >
+        <div className="rounded border border-border bg-background inline-block">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </DocSubsection>
+    </DocSection>
+  );
+}
+
+function CollapsibleSection() {
+  return (
+    <DocSection
+      id="collapsible"
+      title="Collapsible"
+      description="One independent disclosure. Accordion is for grouped sections with one-open-at-a-time semantics; Collapsible is a single 'show more'."
+    >
+      <PreviewCode
+        preview={
+          <div className="max-w-md rounded border border-border bg-background p-4">
+            <Collapsible>
+              <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="space-y-2 text-sm text-text-muted">
+                  <p>Waitlist auto-promotion, visibility, and refund rules.</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        }
+        code={
+          <CodeBlock
+            language="tsx"
+            code={`<Collapsible>
+  <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
+  <CollapsibleContent>…</CollapsibleContent>
+</Collapsible>`}
+          />
+        }
+      />
+    </DocSection>
+  );
+}
+
+function MarketingTierSection() {
+  return (
+    <DocSection
+      id="marketing"
+      title="Marketing tier"
+      description="Primitives for the marketing site, sharing the same token source as the app tier. Display type is fluid (clamp 32→96px); spacing extends to 160px; the brand gradient is bg-gradient-brand."
+    >
+      <DocSubsection
+        title="Display typography"
+        description="text-display-sm / text-display / text-display-lg — fluid between phone and desktop. Resize the window to see them scale."
+      >
+        <div className="space-y-4 rounded border border-border bg-background p-6 overflow-hidden">
+          <div className="text-display-lg font-bold">Aa 96</div>
+          <div className="text-display font-bold">Book a game 64</div>
+          <div className="text-display-sm font-bold">
+            Three taps to kickoff 44
+          </div>
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Page composition"
+        description="MarketingNav · Hero · Section · LogoCloud · Footer — a full page in five components. All server-safe except the nav."
+      >
+        <div className="rounded border border-border overflow-hidden">
+          <MarketingNav
+            brand={
+              <a
+                href="#marketing"
+                aria-label="DT Sports home"
+                className="font-bold tracking-[-0.01em]"
+              >
+                DT<span className="text-brand-forest">Sports</span>
+              </a>
+            }
+            links={[
+              { label: "Games", href: "#marketing" },
+              { label: "Venues", href: "#marketing" },
+              { label: "Pricing", href: "#marketing" },
+            ]}
+            cta={<Button variant="accent">Find a game</Button>}
+            className="relative"
+          />
+          <Hero
+            eyebrow="Pickup soccer, organized"
+            title="Book a game in 30 seconds"
+            description="Real fields, fair teams, instant refunds. Every game money-back if it doesn't run."
+            actions={
+              <>
+                <Button variant="accent" size="touch">
+                  Find a game
+                </Button>
+                <Button variant="secondary" size="touch">
+                  Host with us
+                </Button>
+              </>
+            }
+            className="py-16 md:py-16 lg:py-16"
+          />
+          <LogoCloud label="Trusted by leagues across NYC">
+            <span className="text-lg font-bold" aria-label="Astoria League">
+              ASTORIA
+            </span>
+            <span className="text-lg font-bold" aria-label="McCarren FC">
+              McCARREN FC
+            </span>
+            <span className="text-lg font-bold" aria-label="Greenpoint Dome">
+              GP DOME
+            </span>
+          </LogoCloud>
+          <Footer
+            brand={<span className="font-bold">DT Sports</span>}
+            tagline="Pickup sports, organized."
+            columns={[
+              {
+                title: "Product",
+                links: [
+                  { label: "Games", href: "#marketing" },
+                  { label: "Venues", href: "#marketing" },
+                ],
+              },
+              {
+                title: "Company",
+                links: [{ label: "About", href: "#marketing" }],
+              },
+            ]}
+            legal="© 2026 DT Sports"
+          />
+        </div>
+      </DocSubsection>
+
+      <DocSubsection
+        title="Prose"
+        description="Long-form content styling for blog/legal/CMS pages — no typography plugin needed."
+      >
+        <div className="rounded border border-border bg-background p-6">
+          <Prose>
+            <h2>Refund policy</h2>
+            <p>
+              Cancel up to 2 hours before kickoff for a{" "}
+              <a href="#marketing">full credit</a>. Weather cancellations refund
+              automatically.
+            </p>
+            <ul>
+              <li>Host cancellations refund to the original card.</li>
+              <li>Credits never expire.</li>
+            </ul>
+          </Prose>
+        </div>
+      </DocSubsection>
+
+      <CodeBlock
+        language="tsx"
+        code={`import {
+  MarketingNav, Hero, Section, Footer, LogoCloud, Prose,
+} from "@dtsports/design-system/marketing";
+
+<Hero
+  eyebrow="Pickup soccer, organized"
+  title="Book a game in 30 seconds"
+  actions={<Button variant="accent" size="touch">Find a game</Button>}
+/>`}
+      />
+    </DocSection>
+  );
+}