Quotation Grid Console

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

:root {
  --background: #F7F0DC;
  --foreground: #10100E;
  --card: #FFF8E7;
  --card-foreground: #10100E;
  --popover: #FFF8E7;
  --popover-foreground: #10100E;
  --primary: #10100E;
  --primary-foreground: #ffffff;
  --secondary: #F2E8CF;
  --secondary-foreground: #111111;
  --muted: #6B665D;
  --muted-foreground: #10100E;
  --accent: #24FF77;
  --accent-foreground: #111111;
  --destructive: #B9271E;
  --border: #171713;
  --input: #171713;
  --ring: #24FF77;
  --chart-1: #10100E;
  --chart-2: #F2E8CF;
  --chart-3: #24FF77;
  --chart-4: #168E4B;
  --chart-5: #D88A16;
  --sidebar: #FFF8E7;
  --sidebar-foreground: #10100E;
  --sidebar-primary: #10100E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #A9A4C8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #171713;
  --sidebar-ring: #24FF77;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #10100E;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #24FF77;
  --accent-foreground: #111111;
  --destructive: #B9271E;
  --border: #303642;
  --input: #303642;
  --ring: #24FF77;
  --chart-1: #10100E;
  --chart-2: #F2E8CF;
  --chart-3: #24FF77;
  --chart-4: #168E4B;
  --chart-5: #D88A16;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #10100E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #24FF77;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #24FF77;
  --radius: 4px;
}

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 QuotationGridConsoleShadcnKit() {
  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">Quotation Grid Console</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",
  "cssVars": {
    "dark": {
      "accent": "#24FF77",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#10100E",
      "chart-2": "#F2E8CF",
      "chart-3": "#24FF77",
      "chart-4": "#168E4B",
      "chart-5": "#D88A16",
      "destructive": "#B9271E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#10100E",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#24FF77",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#24FF77",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#10100E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#24FF77"
    },
    "light": {
      "accent": "#24FF77",
      "accent-foreground": "#111111",
      "background": "#F7F0DC",
      "border": "#171713",
      "card": "#FFF8E7",
      "card-foreground": "#10100E",
      "chart-1": "#10100E",
      "chart-2": "#F2E8CF",
      "chart-3": "#24FF77",
      "chart-4": "#168E4B",
      "chart-5": "#D88A16",
      "destructive": "#B9271E",
      "foreground": "#10100E",
      "input": "#171713",
      "muted": "#6B665D",
      "muted-foreground": "#10100E",
      "popover": "#FFF8E7",
      "popover-foreground": "#10100E",
      "primary": "#10100E",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#24FF77",
      "secondary": "#F2E8CF",
      "secondary-foreground": "#111111",
      "sidebar": "#FFF8E7",
      "sidebar-accent": "#A9A4C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#171713",
      "sidebar-foreground": "#10100E",
      "sidebar-primary": "#10100E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#24FF77"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e89c9-d2b9-7022-9680-119ca833ae97",
    "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"
      ]
    },
    "slug": "quotation-grid-console",
    "source": "katagami"
  },
  "name": "quotation-grid-console",
  "title": "Quotation Grid Console shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Quotation Grid Console

Author: `katagami-agent`

## Intent
Quotation Grid Console translates the native Katagami language into shadcn/ui primitives without inventing a second component system. Use local imports from `@/components/ui/*`, apply the generated registry theme variables, and preserve the black manga-panel grid, aged paper surfaces, terminal command grammar, and mapped Memphis ornament.

## ShadSync visual profile
- Family: editorial terminal manga collage for inspectable agentic software.
- Material: aged paper `#F7F0DC` and `#FFF8E7` with halftone underlays, ink borders, and inverted command strips.
- Typography: `Space Grotesk` masthead headings, `Noto Serif JP` reading text, and `IBM Plex Mono` command labels.
- Contour: squared panels with 0 container corners, 2px-4px controls, tiny metadata lozenges only where labels require them.
- Border: Ink-heavy panel borders; key containers use offset duplicate rules and clipped corner ornaments. Default width 1.5px, accent width 3px.
- Motion/focus: Motion should feel like a printer, stamp, or terminal cursor: short stepped shifts, no floaty easing, no parallax. Use `steps(2, jump-none)` at 140ms with scanline focus, stamp shifts, and inset border changes.
- Signature patterns: Panel quotation stacks: every major card has a black title strip, a secondary caption rail, and a pseudo-element corner mark that quotes print registration.; Operational ornament glyphs: Memphis triangles, checker ticks, hatch bands, and red stamps are mapped to product states instead of sprinkled as decoration.; Terminal manga focus: focused fields and active rows receive CRT-green scanline underlays, command prompts, and stepped inset borders.; Historic window fragments: dialogs, sheets, and toolbars carry tiny close boxes, coordinates, and lavender chrome labels as provenance metadata.

## Required primitives
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`. Import only from `@/components/ui/*`.

## Signature component recipes
### button
Use `<Button>` as a terminal command plate: square/2px radius, ink border, uppercase mono prefix such as `RUN //`, offset hard shadow, green accent for primary, amber/red only for stateful risk. Hover shifts shadow by 2px; focus adds CRT-green scanline outline.

### card
Use `<Card>` for manga panels: surface paper fill, black title strip in `<CardHeader>`, secondary caption rail, double border via wrapper/pseudo element, corner registration mark, hard stamp shadow, no blur.

### input
Use `<Input>` with mono command prompt label, squared inset border, paper fill, scanline focus underlay, and coordinate helper text. Avoid pill fields.

### textarea
Use `<Textarea>` as an evidence transcript cell with line-number rail, monospaced prompt hints, halftone inactive background, and stepped focus border.

### select
Use `<Select>` trigger as a small historic window control with lavender chrome label, black dropdown border, checker tick for selected item, and no glass shadow.

### dialog
Use `<Dialog>` as a quoted OS fragment: title bar with close boxes/coordinates, heavy ink frame, paper body, red stamp badge for destructive states, and strict grid alignment.

### sheet
Use `<Sheet>` as a provenance rail sliding over the right edge; keep the title strip black, body dense, and use hatch masks for inactive audit sections.

### tabs
Use `<Tabs>` as manga chapter tabs: rectangular tabs with inverted active title strip, mono prefixes, tiny registration dots, and green scanline for focus.

### badge
Use `<Badge>` for mapped ornament only: lavender metadata lozenge, red stamp, amber warning tag, green verified checker. Never scatter decorative badges without state meaning.

### separator
Use `<Separator>` as a double-rule gutter or dashed quotation divider; pair with small coordinate text when separating evidence groups.

### checkbox
Use `<Checkbox>` as a square checker-cell with ink border and checker tick; checked state may use green fill or black/white pattern.

### switch
Use `<Switch>` sparingly as a terminal toggle: rectangular track, stepped thumb movement, green active strip, no soft pill gloss.

### slider
Use `<Slider>` as a calibration rail with tick marks, squared thumb, amber threshold segments, and mono numeric readout.

### tooltip
Use `<Tooltip>` as a clipped caption note with paper fill, black border, small coordinate marker, and no floating blur.

### dropdown-menu
Use `<DropdownMenu>` as a command menu: mono labels, left glyph rail for state triangles/checkers, black border, hard shadow, and active scanline row.

### table
Use `<Table>` for dense evidence ledgers with caption rail, zebra halftone rows, checker verified cells, red stamp exceptions, sticky mono header, and readable 12-14px rhythm.

## Preview shots
- `application-shell`: command spine, manga work board, and provenance rail for an agent operations console.
- `detail-editor`: transcript/editor view with prompt fields, audit stamps, dialog/sheet fragments, and mapped state badges.
- `data-operations`: dense table operations screen with filters, dropdown command menu, sliders, switches, tooltips, and status ornament.

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

export function QuotationGridPanel() {
  return (
    <Card className="relative rounded-none border-[1.5px] border-[hsl(var(--border))] bg-[hsl(var(--card))] shadow-[4px_4px_0_hsl(var(--border))] before:absolute before:right-2 before:top-2 before:h-3 before:w-3 before:border before:border-[hsl(var(--border))]">
      <CardHeader className="border-b border-[hsl(var(--border))] bg-[hsl(var(--foreground))] px-3 py-2 text-[hsl(var(--background))]">
        <CardTitle className="font-mono text-xs uppercase tracking-[0.18em]">RUN // Evidence board</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 p-4 [background-image:radial-gradient(hsl(var(--muted))_1px,transparent_1px)] [background-size:12px_12px]">
        <Badge className="w-fit rounded-[2px] border border-[hsl(var(--border))] bg-[hsl(var(--accent))] font-mono text-[hsl(var(--accent-foreground))]">VERIFIED / CHK</Badge>
        <Input className="rounded-[2px] border-2 border-[hsl(var(--border))] bg-[hsl(var(--background))] font-mono focus-visible:ring-2 focus-visible:ring-[hsl(var(--accent))]" placeholder="$ inspect quotation grid" />
        <Tabs defaultValue="queue"><TabsList className="rounded-none border border-[hsl(var(--border))] bg-[hsl(var(--muted))]"><TabsTrigger value="queue">QUEUE</TabsTrigger><TabsTrigger value="audit">AUDIT</TabsTrigger></TabsList><TabsContent value="queue"><Button className="rounded-[2px] border border-[hsl(var(--border))] font-mono shadow-[2px_2px_0_hsl(var(--border))]">RUN // Commit panel</Button></TabsContent></Tabs>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "primitives": [
        "@/components/ui/button"
      ],
      "recipe": "Use `<Button>` as a terminal command plate: square/2px radius, ink border, uppercase mono prefix such as `RUN //`, offset hard shadow, green accent for primary, amber/red only for stateful risk. Hover shifts shadow by 2px; focus adds CRT-green scanline outline."
    },
    {
      "component": "card",
      "primitives": [
        "@/components/ui/card"
      ],
      "recipe": "Use `<Card>` for manga panels: surface paper fill, black title strip in `<CardHeader>`, secondary caption rail, double border via wrapper/pseudo element, corner registration mark, hard stamp shadow, no blur."
    },
    {
      "component": "input",
      "primitives": [
        "@/components/ui/input"
      ],
      "recipe": "Use `<Input>` with mono command prompt label, squared inset border, paper fill, scanline focus underlay, and coordinate helper text. Avoid pill fields."
    },
    {
      "component": "textarea",
      "primitives": [
        "@/components/ui/textarea"
      ],
      "recipe": "Use `<Textarea>` as an evidence transcript cell with line-number rail, monospaced prompt hints, halftone inactive background, and stepped focus border."
    },
    {
      "component": "select",
      "primitives": [
        "@/components/ui/select"
      ],
      "recipe": "Use `<Select>` trigger as a small historic window control with lavender chrome label, black dropdown border, checker tick for selected item, and no glass shadow."
    },
    {
      "component": "dialog",
      "primitives": [
        "@/components/ui/dialog"
      ],
      "recipe": "Use `<Dialog>` as a quoted OS fragment: title bar with close boxes/coordinates, heavy ink frame, paper body, red stamp badge for destructive states, and strict grid alignment."
    },
    {
      "component": "sheet",
      "primitives": [
        "@/components/ui/sheet"
      ],
      "recipe": "Use `<Sheet>` as a provenance rail sliding over the right edge; keep the title strip black, body dense, and use hatch masks for inactive audit sections."
    },
    {
      "component": "tabs",
      "primitives": [
        "@/components/ui/tabs"
      ],
      "recipe": "Use `<Tabs>` as manga chapter tabs: rectangular tabs with inverted active title strip, mono prefixes, tiny registration dots, and green scanline for focus."
    },
    {
      "component": "badge",
      "primitives": [
        "@/components/ui/badge"
      ],
      "recipe": "Use `<Badge>` for mapped ornament only: lavender metadata lozenge, red stamp, amber warning tag, green verified checker. Never scatter decorative badges without state meaning."
    },
    {
      "component": "separator",
      "primitives": [
        "@/components/ui/separator"
      ],
      "recipe": "Use `<Separator>` as a double-rule gutter or dashed quotation divider; pair with small coordinate text when separating evidence groups."
    },
    {
      "component": "checkbox",
      "primitives": [
        "@/components/ui/checkbox"
      ],
      "recipe": "Use `<Checkbox>` as a square checker-cell with ink border and checker tick; checked state may use green fill or black/white pattern."
    },
    {
      "component": "switch",
      "primitives": [
        "@/components/ui/switch"
      ],
      "recipe": "Use `<Switch>` sparingly as a terminal toggle: rectangular track, stepped thumb movement, green active strip, no soft pill gloss."
    },
    {
      "component": "slider",
      "primitives": [
        "@/components/ui/slider"
      ],
      "recipe": "Use `<Slider>` as a calibration rail with tick marks, squared thumb, amber threshold segments, and mono numeric readout."
    },
    {
      "component": "tooltip",
      "primitives": [
        "@/components/ui/tooltip"
      ],
      "recipe": "Use `<Tooltip>` as a clipped caption note with paper fill, black border, small coordinate marker, and no floating blur."
    },
    {
      "component": "dropdown-menu",
      "primitives": [
        "@/components/ui/dropdown-menu"
      ],
      "recipe": "Use `<DropdownMenu>` as a command menu: mono labels, left glyph rail for state triangles/checkers, black border, hard shadow, and active scanline row."
    },
    {
      "component": "table",
      "primitives": [
        "@/components/ui/table"
      ],
      "recipe": "Use `<Table>` for dense evidence ledgers with caption rail, zebra halftone rows, checker verified cells, red stamp exceptions, sticky mono header, and readable 12-14px rhythm."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "RUN // Reconcile queue",
          "STAMP exception"
        ],
        "description": "A left terminal command spine controls a central black-ink work board while the right rail records provenance stamps and coordinates.",
        "eyebrow": "RUN // quotation console",
        "headline": "Manga-frame agent operations board",
        "rows": [
          {
            "glyph": "checker tick",
            "id": "Q-104",
            "state": "verified",
            "task": "trace source quote"
          },
          {
            "glyph": "amber triangle",
            "id": "Q-118",
            "state": "warning",
            "task": "resolve overlapping claim"
          },
          {
            "glyph": "lavender lozenge",
            "id": "Q-133",
            "state": "queued",
            "task": "publish audit fragment"
          }
        ],
        "stats": [
          {
            "label": "verified panels",
            "tone": "success",
            "value": "42"
          },
          {
            "label": "risk stamps",
            "tone": "warning",
            "value": "7"
          },
          {
            "label": "pending glyphs",
            "tone": "accent",
            "value": "13"
          }
        ]
      },
      "title": "Command spine operations shell"
    },
    {
      "components": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "badge"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "SAVE // Quote fragment",
          "OPEN provenance sheet"
        ],
        "description": "Dense prompt fields, textarea transcript, and a provenance sheet use scanline focus, title bars, red stamps, and mapped Memphis state badges.",
        "eyebrow": "EDIT // panel fragment",
        "fields": [
          {
            "label": "Command prompt",
            "value": "$ inspect --source manga-frame"
          },
          {
            "label": "Coordinate",
            "value": "COL-06 / ROW-14"
          },
          {
            "label": "Risk mode",
            "value": "stamp required"
          }
        ],
        "headline": "Transcript cell with historic window controls",
        "stats": [
          {
            "label": "citations",
            "tone": "info",
            "value": "18"
          },
          {
            "label": "unchecked boxes",
            "tone": "warning",
            "value": "3"
          }
        ]
      },
      "title": "Evidence detail editor"
    },
    {
      "components": [
        "table",
        "dropdown-menu",
        "slider",
        "switch",
        "tooltip",
        "separator",
        "button",
        "card"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "FILTER // Active risks",
          "EXPORT ledger"
        ],
        "description": "A sticky mono table header, zebra halftone rows, calibration slider, rectangular switch, and command dropdown keep ornament tied to operational state.",
        "eyebrow": "OPS // data ledger",
        "headline": "Halftone evidence table with command menu",
        "rows": [
          {
            "confidence": "92%",
            "source": "Archive A",
            "state": "verified"
          },
          {
            "confidence": "72%",
            "source": "Console B",
            "state": "review"
          },
          {
            "confidence": "41%",
            "source": "Scanline C",
            "state": "exception"
          }
        ],
        "stats": [
          {
            "label": "rows audited",
            "tone": "success",
            "value": "1,284"
          },
          {
            "label": "threshold",
            "tone": "accent",
            "value": "72%"
          },
          {
            "label": "exceptions",
            "tone": "error",
            "value": "29"
          }
        ]
      },
      "title": "Dense ledger operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "terminal-green command strips",
      "amber warning stamps",
      "lavender chrome metadata",
      "red exception stamps"
    ],
    "border": "double-rule-ink-and-dashed-quotation",
    "contour": "squared-panels-tiny-control-radius",
    "density": "high-readable-editorial",
    "family": "editorial-terminal-manga-collage",
    "grain": true,
    "material": "aged-paper-halftone-ink",
    "motion": "stepped-stamp-scanline",
    "stickerBadges": true,
    "underlay": true
  }
}