Decorated Terminal Shed

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

:root {
  --background: #F8F6EF;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #F4F1E8;
  --secondary-foreground: #111111;
  --muted: #6F6A60;
  --muted-foreground: #0A0A0A;
  --accent: #FF2FB3;
  --accent-foreground: #ffffff;
  --destructive: #D82020;
  --border: #0A0A0A;
  --input: #0A0A0A;
  --ring: #FF2FB3;
  --chart-1: #111111;
  --chart-2: #F4F1E8;
  --chart-3: #FF2FB3;
  --chart-4: #16824A;
  --chart-5: #F0B400;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #285CFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #0A0A0A;
  --sidebar-ring: #FF2FB3;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF2FB3;
  --accent-foreground: #ffffff;
  --destructive: #D82020;
  --border: #303642;
  --input: #303642;
  --ring: #FF2FB3;
  --chart-1: #111111;
  --chart-2: #F4F1E8;
  --chart-3: #FF2FB3;
  --chart-4: #16824A;
  --chart-5: #F0B400;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF2FB3;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF2FB3;
  --radius: 2px;
}

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 DecoratedTerminalShedShadcnKit() {
  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">Decorated Terminal Shed</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": "#FF2FB3",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#111111",
      "chart-2": "#F4F1E8",
      "chart-3": "#FF2FB3",
      "chart-4": "#16824A",
      "chart-5": "#F0B400",
      "destructive": "#D82020",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF2FB3",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#FF2FB3",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF2FB3"
    },
    "light": {
      "accent": "#FF2FB3",
      "accent-foreground": "#ffffff",
      "background": "#F8F6EF",
      "border": "#0A0A0A",
      "card": "#FFFFFF",
      "card-foreground": "#0A0A0A",
      "chart-1": "#111111",
      "chart-2": "#F4F1E8",
      "chart-3": "#FF2FB3",
      "chart-4": "#16824A",
      "chart-5": "#F0B400",
      "destructive": "#D82020",
      "foreground": "#0A0A0A",
      "input": "#0A0A0A",
      "muted": "#6F6A60",
      "muted-foreground": "#0A0A0A",
      "popover": "#FFFFFF",
      "popover-foreground": "#0A0A0A",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF2FB3",
      "secondary": "#F4F1E8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#285CFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#0A0A0A",
      "sidebar-foreground": "#0A0A0A",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF2FB3"
    },
    "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-019e8a07-1eda-76f2-88c6-015b480e5241",
    "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": "decorated-terminal-shed",
    "source": "katagami"
  },
  "name": "decorated-terminal-shed",
  "title": "Decorated Terminal Shed shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Decorated Terminal Shed

Author: `katagami-agent`

## ShadSync visual profile
- Family: decorated-terminal-shed
- Material: warm paper panels, black ink architecture, sparse acid green state indicators.
- Contour: rectilinear components with square registration corners; badges may use small route-chip radius only.
- Border: 2px black structural outlines, doubled seams on important panels, 4px acid-green active rails.
- Grain and underlay: subtle paper grain and terminal-grid underlays behind product content.

## Signature component recipes
### button
Use Button with uppercase mono route prefix, black border, paper fill, hard 3px black shadow; primary adds acid-green left rail and active route code.

### card
Use Card as a plain shed wall: paper background, 2px black outline, square corner ticks, route label in CardHeader, black offset shadow, optional abstract stamp in a corner.

### input
Use Input with white/paper fill, 2px black border, mono inset label, acid-green focus ring, and no browser-default blue glow.

### textarea
Use Textarea as a dispatch log panel with mono row code, paper fill, black border, and acid-green focus edge.

### select
Use SelectTrigger with compact route code, chevron inside a boxed black cell, selected state marked with acid-green underline.

### dialog
Use DialogContent as a terminal notice board: thick black frame, route-badge header, hard shadow, abstract safety-mark background.

### sheet
Use Sheet as a sliding service bay with vertical route tabs, black seam border, paper grain, and fixed-width operational actions.

### tabs
Use TabsList as track signage; TabsTrigger uses mono route IDs, black separators, and acid-green active top bar.

### badge
Use Badge for route chips, stamp labels, and state tags; keep black outline and paper fill, acid green only for live states.

### separator
Use Separator as architectural seam; 2px black or dotted registration line with optional small square endpoints.

### checkbox
Use Checkbox with black square frame and acid-green checked fill plus black mark, no rounded default softness.

### switch
Use Switch as a rail signal: rectangular track, black border, acid-green active track, square-ish thumb.

### slider
Use Slider as route capacity rail with black track, acid-green filled range, square handles with registration ticks.

### tooltip
Use TooltipContent as a small route placard, paper fill, black outline, mono label, no translucent glass.

### dropdown-menu
Use DropdownMenuContent as stacked terminal signage, black dividers, hover row with acid-green edge marker.

### table
Use Table with strong black row rules, mono station IDs, acid-green selected row rail, and abstract stamp in empty states.

## Preview shots
- `application-shell`: dashboard route board with sidebar signs and live operations cards.
- `detail-editor`: record editor with dispatch fields, warning badges, and abstract terminal stamp.
- `data-operations`: table-heavy queue with filters, dropdown actions, capacity slider, and state chips.

## 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"

export function TerminalShedPanel() {
  return (
    <Card className="rounded-[2px] border-2 border-black bg-[var(--card)] shadow-[6px_6px_0_#111]">
      <CardHeader className="border-b-2 border-black">
        <Badge className="w-fit rounded-[2px] border border-black bg-[var(--accent)] font-mono text-black">R-07 LIVE</Badge>
        <CardTitle className="font-black uppercase tracking-tight">Dispatch Route Board</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-4">
        <Input className="rounded-[2px] border-2 border-black font-mono focus-visible:ring-[var(--accent)]" defaultValue="GATE / LOAD / VERIFY" />
        <Button className="rounded-[2px] border-2 border-black bg-black font-mono text-[var(--accent)] shadow-[3px_3px_0_#B7FF2A]">COMMIT ROUTE</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use Button with uppercase mono route prefix, black border, paper fill, hard 3px black shadow; primary adds acid-green left rail and active route code.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "card",
      "recipe": "Use Card as a plain shed wall: paper background, 2px black outline, square corner ticks, route label in CardHeader, black offset shadow, optional abstract stamp in a corner.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "input",
      "recipe": "Use Input with white/paper fill, 2px black border, mono inset label, acid-green focus ring, and no browser-default blue glow.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "textarea",
      "recipe": "Use Textarea as a dispatch log panel with mono row code, paper fill, black border, and acid-green focus edge.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "select",
      "recipe": "Use SelectTrigger with compact route code, chevron inside a boxed black cell, selected state marked with acid-green underline.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "dialog",
      "recipe": "Use DialogContent as a terminal notice board: thick black frame, route-badge header, hard shadow, abstract safety-mark background.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "sheet",
      "recipe": "Use Sheet as a sliding service bay with vertical route tabs, black seam border, paper grain, and fixed-width operational actions.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "tabs",
      "recipe": "Use TabsList as track signage; TabsTrigger uses mono route IDs, black separators, and acid-green active top bar.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "badge",
      "recipe": "Use Badge for route chips, stamp labels, and state tags; keep black outline and paper fill, acid green only for live states.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "separator",
      "recipe": "Use Separator as architectural seam; 2px black or dotted registration line with optional small square endpoints.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "checkbox",
      "recipe": "Use Checkbox with black square frame and acid-green checked fill plus black mark, no rounded default softness.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "switch",
      "recipe": "Use Switch as a rail signal: rectangular track, black border, acid-green active track, square-ish thumb.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "slider",
      "recipe": "Use Slider as route capacity rail with black track, acid-green filled range, square handles with registration ticks.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "tooltip",
      "recipe": "Use TooltipContent as a small route placard, paper fill, black outline, mono label, no translucent glass.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use DropdownMenuContent as stacked terminal signage, black dividers, hover row with acid-green edge marker.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    },
    {
      "component": "table",
      "recipe": "Use Table with strong black row rules, mono station IDs, acid-green selected row rail, and abstract stamp in empty states.",
      "shapeScale": "rectilinear controls, 0-4px radius; route badges may be compact chips",
      "usesShadcnPrimitive": true
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "actions": [
          "Commit route",
          "Open bay sheet"
        ],
        "description": "A rectilinear product shell with signage rails, hard black card borders, abstract stamp marks, and one acid-green active route.",
        "eyebrow": "ROUTE R-07 / LIVE",
        "fields": [
          {
            "label": "Search route",
            "value": "terminal-shed"
          },
          {
            "label": "Mode",
            "value": "dispatch"
          }
        ],
        "headline": "Operations terminal for service dispatch",
        "stats": [
          {
            "label": "Active gates",
            "value": "18"
          },
          {
            "label": "Delayed loads",
            "value": "03"
          },
          {
            "label": "Signal health",
            "value": "97%"
          }
        ]
      },
      "title": "Application Shell"
    },
    {
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save manifest",
          "Escalate warning"
        ],
        "description": "Form controls sit inside a paper notice-board frame with boxed labels, black seams, and acid-green focus state.",
        "eyebrow": "EDIT BAY / MANIFEST",
        "fields": [
          {
            "label": "Route code",
            "value": "R-07"
          },
          {
            "label": "Dock note",
            "value": "Verify cold-chain seal"
          },
          {
            "label": "Operator",
            "value": "Kata-13"
          }
        ],
        "headline": "Route manifest detail editor",
        "stats": [
          {
            "label": "Warnings",
            "value": "2"
          },
          {
            "label": "Fields locked",
            "value": "5"
          }
        ]
      },
      "title": "Detail Editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "actions": [
          "Filter queue",
          "Export route sheet"
        ],
        "description": "Tables, dropdown actions, badges, sliders, switches, and separators form a plausible operations screen rather than a component inventory wall.",
        "eyebrow": "QUEUE / TABLE",
        "headline": "Terminal queue with component controls",
        "rows": [
          {
            "id": "ST-104",
            "load": "82%",
            "route": "North Shed",
            "state": "live"
          },
          {
            "id": "ST-118",
            "load": "41%",
            "route": "Cold Gate",
            "state": "hold"
          },
          {
            "id": "ST-221",
            "load": "63%",
            "route": "Express Rail",
            "state": "ready"
          }
        ],
        "stats": [
          {
            "label": "Rows selected",
            "value": "12"
          },
          {
            "label": "Capacity",
            "value": "68%"
          }
        ]
      },
      "title": "Data Operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "acid-green active routes",
      "black terminal labels",
      "abstract system glyph stamps"
    ],
    "border": "2px black outlines, occasional doubled route seams, 4px acid-green active edge",
    "contour": "rectilinear shed panels with square registration corners",
    "density": "moderately dense operational signage",
    "family": "decorated-terminal-shed",
    "grain": true,
    "material": "warm paper interface with black ink architecture",
    "motion": "short mechanical snap, no soft drift",
    "stickerBadges": true,
    "underlay": true
  }
}