Neo-RPG Interface Ritual

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #061020;
  --foreground: #F5E8C8;
  --card: #10223E;
  --card-foreground: #F5E8C8;
  --popover: #10223E;
  --popover-foreground: #F5E8C8;
  --primary: #09162B;
  --primary-foreground: #ffffff;
  --secondary: #E9D8B4;
  --secondary-foreground: #111111;
  --muted: #8CA0B8;
  --muted-foreground: #F5E8C8;
  --accent: #37D6A3;
  --accent-foreground: #ffffff;
  --destructive: #E05A5A;
  --border: #C8A96A;
  --input: #C8A96A;
  --ring: #37D6A3;
  --chart-1: #09162B;
  --chart-2: #E9D8B4;
  --chart-3: #37D6A3;
  --chart-4: #37D6A3;
  --chart-5: #F3B64B;
  --sidebar: #10223E;
  --sidebar-foreground: #F5E8C8;
  --sidebar-primary: #09162B;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #68A6FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C8A96A;
  --sidebar-ring: #37D6A3;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #09162B;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #37D6A3;
  --accent-foreground: #ffffff;
  --destructive: #E05A5A;
  --border: #303642;
  --input: #303642;
  --ring: #37D6A3;
  --chart-1: #09162B;
  --chart-2: #E9D8B4;
  --chart-3: #37D6A3;
  --chart-4: #37D6A3;
  --chart-5: #F3B64B;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #09162B;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #37D6A3;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #37D6A3;
  --radius: 0;
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function NeoRpgInterfaceRitualShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Neo-RPG Interface Ritual</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neo-rpg-interface-ritual",
  "type": "registry:theme",
  "title": "Neo-RPG Interface Ritual shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#061020",
      "foreground": "#F5E8C8",
      "card": "#10223E",
      "card-foreground": "#F5E8C8",
      "popover": "#10223E",
      "popover-foreground": "#F5E8C8",
      "primary": "#09162B",
      "primary-foreground": "#ffffff",
      "secondary": "#E9D8B4",
      "secondary-foreground": "#111111",
      "muted": "#8CA0B8",
      "muted-foreground": "#F5E8C8",
      "accent": "#37D6A3",
      "accent-foreground": "#ffffff",
      "destructive": "#E05A5A",
      "border": "#C8A96A",
      "input": "#C8A96A",
      "ring": "#37D6A3",
      "chart-1": "#09162B",
      "chart-2": "#E9D8B4",
      "chart-3": "#37D6A3",
      "chart-4": "#37D6A3",
      "chart-5": "#F3B64B",
      "sidebar": "#10223E",
      "sidebar-foreground": "#F5E8C8",
      "sidebar-primary": "#09162B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#68A6FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C8A96A",
      "sidebar-ring": "#37D6A3",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#09162B",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#37D6A3",
      "accent-foreground": "#ffffff",
      "destructive": "#E05A5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#37D6A3",
      "chart-1": "#09162B",
      "chart-2": "#E9D8B4",
      "chart-3": "#37D6A3",
      "chart-4": "#37D6A3",
      "chart-5": "#F3B64B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#09162B",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#37D6A3",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#37D6A3",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e6c90-91af-7bd1-9ab0-d027b3f8a344",
    "slug": "neo-rpg-interface-ritual",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Neo-RPG Interface Ritual shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the language into shadcn/ui as a serious application shell for allocation, planning, and command workflows. Components should feel like hard-edged RPG interface windows without becoming decorative arcade nostalgia.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use deep navy backgrounds, parchment cards, gold double borders, emerald primary actions, amber warning states, ruby destructive states, sapphire informational states, Cinzel headings, Atkinson body text, and IBM Plex Mono command labels.

## Visual character to preserve
Stepped-corner card silhouettes, 8px lattice spacing, gem-slot status marks, dithered side panels, and cursor-runic focus rails. Avoid glass, blur, arbitrary round corners, and generic neutral dashboards.

## ShadSync visual profile
family: neo-rpg-interface; material: navy-parchment-bitmap; contour: stepped-corner; border: double-gold-2px; underlay: scanline-grid; grain: restrained-dither; stickerBadges: false; motion: stepped-cursor-shift; density: moderately-dense; accents: emerald, amber, ruby, sapphire gems.

## Signature component recipes
- button: square control with 2px navy or gold border, IBM Plex Mono uppercase label, 4px hard offset shadow; primary uses emerald fill and snaps up one grid cell on hover/focus.
- card: use Card as a stepped parchment or navy window; add corner socket pseudo-elements and inner 1px rule; never use soft radius.
- input: command-line field on navy with gold border, mono text, emerald focus rail at left, and placeholder phrased as slash command.
- textarea: parchment note well for dialogue or quest text; keep line-height generous and border double.
- select: compact command selector with square chevron cell and sapphire selected-state gem.
- dialog: centered dialogue box with speaker eyebrow, parchment body, navy footer command row, and stepped-corner clipping.
- sheet: inventory drawer using navy dither background and 8px slot matrix for secondary actions.
- tabs: chapter tabs as connected inventory cells; active tab gains emerald gem and one-cell shadow.
- badge: small gem-state capsules with 2px border; use semantic gem colors only.
- separator: 2px gold rule with an 8px square socket at the start.
- checkbox: 18px square slot; checked state fills with rotated emerald diamond.
- switch: two-cell toggle track; thumb jumps in steps, not smooth sliding.
- slider: segmented meter built from 8px ticks; filled ticks use gem color.
- tooltip: miniature navy dialogue plaque with mono eyebrow and gold border.
- dropdown-menu: command list panel where focused items receive the cursor-runic left rail.
- table: route ledger rows with mono coordinates, gem badges, and 1px inner grid lines.

## Preview shots
application-shell: Moon Vault allocation shell with command rail, dominant quest card, inventory sheet, and route ledger. detail-editor: relic edit dialog with fields, tabs, slider meter, switch and tooltip. data-operations: convoy table with filters, dropdown actions, checkboxes, badges, and sheet summary.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Preserve the stepped-corner geometry with wrapper classes or CSS variables around shadcn primitives. Keep components accessible, keyboard-visible, and responsive.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export function RelicCommandCard() {
  return (
    <Card className="clip-stepped border-2 border-[#C8A96A] bg-[#E9D8B4] text-[#09162B] shadow-[8px_8px_0_rgba(2,8,19,.82)] rounded-none">
      <CardHeader>
        <div className="font-mono text-xs uppercase tracking-widest text-[#6b5b38]">Archivist command</div>
        <CardTitle className="font-serif">Assign ward stone</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-none border-2 border-[#C8A96A] bg-[#061020] font-mono text-[#F5E8C8] focus-visible:ring-0 focus-visible:border-[#37D6A3]" value="/assign emerald ward" readOnly />
        <div className="flex gap-2"><Badge className="rounded-none border-2 border-[#37D6A3] bg-transparent text-[#37D6A3]">SAFE</Badge><Button className="rounded-none bg-[#37D6A3] font-mono uppercase text-[#061020] shadow-[4px_4px_0_rgba(9,22,43,.35)]">Commit</Button></div>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "card",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "input",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "textarea",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "select",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "dialog",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "sheet",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "tabs",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "badge",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "separator",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "checkbox",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "switch",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "slider",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "tooltip",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    },
    {
      "component": "table",
      "recipe": "Render as a stepped-corner RPG interface primitive on the 8px lattice, with gold or gem-colored borders, mono state labels, and cursor-runic focus treatment."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "equal card wall",
        "soft rounded SaaS shell",
        "decorative sprites without state meaning"
      ],
      "composition": "Three-zone allocation shell: command rail, dominant parchment quest card, and navy inventory ledger sidebar.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with emerald gem",
        "primary button hover-ready hard shadow",
        "route badges in safe toll fast states"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "badge",
        "separator",
        "tabs",
        "table",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Commit Loadout",
          "Simulate Risk",
          "Open Codex"
        ],
        "description": "Assign relics to convoy routes before the archive gate closes.",
        "eyebrow": "Moon Vault Quartermaster",
        "headline": "Relic Allocation Rite",
        "rows": [
          {
            "gem": "emerald",
            "route": "North Fen",
            "state": "SAFE"
          },
          {
            "gem": "amber",
            "route": "Ash Bridge",
            "state": "TOLL"
          },
          {
            "gem": "sapphire",
            "route": "Glass Well",
            "state": "FAST"
          }
        ],
        "stats": [
          {
            "label": "Ward stability",
            "value": "72%"
          },
          {
            "label": "Lantern reserve",
            "value": "46%"
          },
          {
            "label": "Route secrecy",
            "value": "88%"
          }
        ]
      }
    },
    {
      "avoid": [
        "modal blur glass",
        "generic form spacing",
        "smooth pill toggles"
      ],
      "composition": "Centered parchment dialogue editor over navy scanline underlay, with speaker eyebrow and command footer.",
      "id": "detail-editor",
      "mustShowStates": [
        "open dialog",
        "focused command field",
        "segmented slider meter",
        "switch in two-cell track"
      ],
      "primitives": [
        "dialog",
        "textarea",
        "select",
        "switch",
        "slider",
        "tooltip",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save Rune",
          "Test Pulse"
        ],
        "description": "Tune a relic before assigning it to a convoy slot.",
        "eyebrow": "Archivist Iona",
        "fields": [
          {
            "label": "Relic name",
            "value": "Emerald Ward"
          },
          {
            "label": "Route affinity",
            "value": "North Fen"
          },
          {
            "label": "Risk note",
            "value": "Stabilizes fragile cargo but slows bridge crossing."
          }
        ],
        "headline": "Edit ward stone behavior",
        "stats": [
          {
            "label": "Pulse strength",
            "value": "64%"
          },
          {
            "label": "Auto-bind",
            "value": "On"
          }
        ]
      }
    },
    {
      "avoid": [
        "plain spreadsheet defaults",
        "overuse of gem colors",
        "unstructured dense data"
      ],
      "composition": "Dense convoy operations table with selectable rows and an inventory sheet summary docked to the right.",
      "id": "data-operations",
      "mustShowStates": [
        "checked square slots",
        "dropdown command focus",
        "warning and danger badges",
        "sheet inventory matrix"
      ],
      "primitives": [
        "table",
        "checkbox",
        "dropdown-menu",
        "sheet",
        "card",
        "badge",
        "separator",
        "button",
        "input"
      ],
      "scene": {
        "actions": [
          "Open Satchel",
          "Batch Assign"
        ],
        "description": "Review route risk, select cargo rows, and open the inventory sheet for batch assignment.",
        "eyebrow": "Route Ledger",
        "headline": "Convoy operations queue",
        "rows": [
          {
            "cargo": "Glass vials",
            "id": "CV-01",
            "risk": "SAFE",
            "route": "North Fen"
          },
          {
            "cargo": "Lantern oil",
            "id": "CV-02",
            "risk": "TOLL",
            "route": "Ash Bridge"
          },
          {
            "cargo": "Ruby seals",
            "id": "CV-03",
            "risk": "DANGER",
            "route": "Red Quarry"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "emerald-gem",
      "amber-warning",
      "ruby-danger",
      "sapphire-info"
    ],
    "border": "double-gold-2px",
    "contour": "stepped-corner",
    "density": "moderately-dense",
    "family": "neo-rpg-interface",
    "grain": "restrained-dither",
    "material": "navy-parchment-bitmap",
    "motion": "stepped-cursor-shift",
    "stickerBadges": false,
    "underlay": "scanline-grid"
  }
}