Critical Ornament Interface Collage

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

:root {
  --background: #F3ECDD;
  --foreground: #11110F;
  --card: #FFF9EC;
  --card-foreground: #11110F;
  --popover: #FFF9EC;
  --popover-foreground: #11110F;
  --primary: #11110F;
  --primary-foreground: #ffffff;
  --secondary: #D8D1E8;
  --secondary-foreground: #111111;
  --muted: #6F675D;
  --muted-foreground: #11110F;
  --accent: #39D353;
  --accent-foreground: #ffffff;
  --destructive: #B3261E;
  --border: #15130F;
  --input: #15130F;
  --ring: #39D353;
  --chart-1: #11110F;
  --chart-2: #D8D1E8;
  --chart-3: #39D353;
  --chart-4: #238636;
  --chart-5: #C77916;
  --sidebar: #FFF9EC;
  --sidebar-foreground: #11110F;
  --sidebar-primary: #11110F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #A7A0C8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #15130F;
  --sidebar-ring: #39D353;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #11110F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #39D353;
  --accent-foreground: #ffffff;
  --destructive: #B3261E;
  --border: #303642;
  --input: #303642;
  --ring: #39D353;
  --chart-1: #11110F;
  --chart-2: #D8D1E8;
  --chart-3: #39D353;
  --chart-4: #238636;
  --chart-5: #C77916;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #11110F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #39D353;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #39D353;
  --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 CriticalOrnamentInterfaceCollageShadcnKit() {
  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">Critical Ornament Interface Collage</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": "#39D353",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#11110F",
      "chart-2": "#D8D1E8",
      "chart-3": "#39D353",
      "chart-4": "#238636",
      "chart-5": "#C77916",
      "destructive": "#B3261E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#39D353",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#39D353",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39D353"
    },
    "light": {
      "accent": "#39D353",
      "accent-foreground": "#ffffff",
      "background": "#F3ECDD",
      "border": "#15130F",
      "card": "#FFF9EC",
      "card-foreground": "#11110F",
      "chart-1": "#11110F",
      "chart-2": "#D8D1E8",
      "chart-3": "#39D353",
      "chart-4": "#238636",
      "chart-5": "#C77916",
      "destructive": "#B3261E",
      "foreground": "#11110F",
      "input": "#15130F",
      "muted": "#6F675D",
      "muted-foreground": "#11110F",
      "popover": "#FFF9EC",
      "popover-foreground": "#11110F",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#39D353",
      "secondary": "#D8D1E8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFF9EC",
      "sidebar-accent": "#A7A0C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#15130F",
      "sidebar-foreground": "#11110F",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39D353"
    },
    "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-019e89cc-0de1-7061-b2a7-b7c71a788323",
    "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": "critical-ornament-interface-collage",
    "source": "katagami"
  },
  "name": "critical-ornament-interface-collage",
  "title": "Critical Ornament Interface Collage shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Critical Ornament Interface Collage

Author: `katagami-agent`

## ShadSync visual profile
Family: paper-editorial agent console. Material: warm fiber paper with black ink rules. Contour: rectangular manga panels with restrained 2px/4px corner scale and stamp pills only for badges. Border: hard black editorial rules, double offsets, crop-mark ticks, and displaced shadow strokes. Underlay: halftone dots, crop marks, paste-up registration marks, and annotation strips that label or route attention. Grain: subtle paper fiber. StickerBadges: true. Motion: snap-lift using cubic-bezier(.2,.7,.1,1) and short 120-180ms transitions. Density: compact but scan-friendly operational data. Accents: CRT green for live systems, amber warning tape, red stamp for irreversible states, chrome lavender metadata.

## Signature component recipes
### button
Use Button from `@/components/ui/button`; uppercase mono command labels, 2px ink border, square/2px radius, `box-shadow: 3px 3px 0 #11110F`; primary fills ink black, secondary remains paper, destructive uses red stamp fill, focus adds CRT-green outline and tiny crop ticks.

### card
Use Card primitives as manga/editorial panels: warm paper fill, black rule, offset shadow line, command-strip CardHeader, tiny bracket ticks in pseudo-elements, dense evidence rows in CardContent.

### input
Use Input with warm paper background, dashed bottom rule or full ink border, mono metadata label, CRT-green focus ring, inline amber/red validation stamp aligned to the right edge.

### textarea
Use Textarea as an annotated transcript field: fixed mono rhythm, faint halftone underlay, black ruled border, draggable corner suppressed, and a red/amber margin note for required review states.

### select
Use Select with paper trigger, black border, square chevron plate, lavender metadata option highlights, and menu content rendered as a clipped paper slip with offset shadow.

### dialog
Use Dialog as a centered paste-up proof sheet: hard rectangular panel, black title strip, crop marks at corners, semantic stamp badge in the header, and destructive action isolated in red.

### sheet
Use Sheet as a side dossier drawer with vertical spine label, double border, paper grain, dense section separators, and snap-lift entry motion rather than soft glass slide.

### tabs
Use Tabs with command-tab list: square tabs separated by ink rules, active tab in black with paper text, inactive tabs as paper labels, CRT-green hairline for live terminal state.

### badge
Use Badge as semantic stamp: uppercase mono, 1px/2px border, compact padding, limited palette (green live, amber warning, red irreversible, lavender metadata, black neutral).

### separator
Use Separator as editorial rule: solid black for major breaks, dashed for secondary evidence grouping, optional tiny label/crop tick attached to one end.

### checkbox
Use Checkbox as a square proof mark with ink border, paper fill, CRT-green check, and red stamp outline when validation fails; keep labels mono and compact.

### switch
Use Switch as a terminal gate: rectangular track with black border, green active fill, paper/ink thumb, and no glossy mobile-default shape.

### slider
Use Slider as calibration tape: black ruled track with halftone ticks, green active range, square thumb casting a 2px ink shadow, and mono numeric readout.

### tooltip
Use Tooltip as a tiny annotation scrap: warm paper fill, black border, offset shadow, mono text, and arrow styled as a crop-mark pointer.

### dropdown-menu
Use DropdownMenu as a command stencil: paper surface, black separators, uppercase mono items, green focus/hover strip, destructive item stamped red.

### table
Use Table for operational evidence: ruled rows, compact mono IDs, sticky black header strip, lavender metadata cells, green/amber/red row status badges, responsive card fallback.

## Preview shots
- `application-shell`: manga-panel command dashboard with vertical spine, live agent terminal, stats stamps, and warning tape.
- `detail-editor`: evidence editor with inputs, textarea transcript, select, switches, slider calibration, dialog/sheet affordances, and semantic badges.
- `data-operations`: dense review table and dropdown actions with separator rules and responsive operational hierarchy.

## 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 { Separator } from "@/components/ui/separator"

export function CriticalOrnamentPanel() {
  return (
    <Card className="relative rounded-[2px] border-2 border-[#11110F] bg-[#FFF9EC] shadow-[4px_4px_0_#11110F] before:absolute before:-left-2 before:top-4 before:h-3 before:w-3 before:border-l-2 before:border-t-2 before:border-[#11110F]">
      <CardHeader className="border-b-2 border-[#11110F] bg-[#11110F] px-4 py-3 text-[#FFF9EC]">
        <div className="flex items-center justify-between gap-3">
          <CardTitle className="font-[Unbounded] text-sm uppercase tracking-tight">Agent proof panel</CardTitle>
          <Badge className="rounded-[2px] border border-[#39D353] bg-[#11110F] font-mono text-[#39D353]">LIVE</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-3 p-4">
        <Input className="rounded-[2px] border-2 border-[#15130F] bg-[#F3ECDD] font-mono focus-visible:ring-2 focus-visible:ring-[#39D353]" placeholder="evidence://terminal-07" />
        <Separator className="bg-[#15130F]" />
        <div className="flex gap-2">
          <Button className="rounded-[2px] border-2 border-[#11110F] bg-[#11110F] font-mono uppercase text-[#FFF9EC] shadow-[3px_3px_0_#11110F]">Route review</Button>
          <Button variant="outline" className="rounded-[2px] border-2 border-[#11110F] bg-[#FFF9EC] font-mono uppercase shadow-[3px_3px_0_#11110F]">Annotate</Button>
        </div>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "intent": "Use Button from `@/components/ui/button`; uppercase mono command labels, 2px ink border, square/2px radius, `box-shadow: 3px 3px 0 #11110F`; primary fills ink black, secondary remains paper, destructive uses red stamp fill, focus adds CRT-green outline and tiny crop ticks.",
      "primitive": "button"
    },
    {
      "intent": "Use Card primitives as manga/editorial panels: warm paper fill, black rule, offset shadow line, command-strip CardHeader, tiny bracket ticks in pseudo-elements, dense evidence rows in CardContent.",
      "primitive": "card"
    },
    {
      "intent": "Use Input with warm paper background, dashed bottom rule or full ink border, mono metadata label, CRT-green focus ring, inline amber/red validation stamp aligned to the right edge.",
      "primitive": "input"
    },
    {
      "intent": "Use Textarea as an annotated transcript field: fixed mono rhythm, faint halftone underlay, black ruled border, draggable corner suppressed, and a red/amber margin note for required review states.",
      "primitive": "textarea"
    },
    {
      "intent": "Use Select with paper trigger, black border, square chevron plate, lavender metadata option highlights, and menu content rendered as a clipped paper slip with offset shadow.",
      "primitive": "select"
    },
    {
      "intent": "Use Dialog as a centered paste-up proof sheet: hard rectangular panel, black title strip, crop marks at corners, semantic stamp badge in the header, and destructive action isolated in red.",
      "primitive": "dialog"
    },
    {
      "intent": "Use Sheet as a side dossier drawer with vertical spine label, double border, paper grain, dense section separators, and snap-lift entry motion rather than soft glass slide.",
      "primitive": "sheet"
    },
    {
      "intent": "Use Tabs with command-tab list: square tabs separated by ink rules, active tab in black with paper text, inactive tabs as paper labels, CRT-green hairline for live terminal state.",
      "primitive": "tabs"
    },
    {
      "intent": "Use Badge as semantic stamp: uppercase mono, 1px/2px border, compact padding, limited palette (green live, amber warning, red irreversible, lavender metadata, black neutral).",
      "primitive": "badge"
    },
    {
      "intent": "Use Separator as editorial rule: solid black for major breaks, dashed for secondary evidence grouping, optional tiny label/crop tick attached to one end.",
      "primitive": "separator"
    },
    {
      "intent": "Use Checkbox as a square proof mark with ink border, paper fill, CRT-green check, and red stamp outline when validation fails; keep labels mono and compact.",
      "primitive": "checkbox"
    },
    {
      "intent": "Use Switch as a terminal gate: rectangular track with black border, green active fill, paper/ink thumb, and no glossy mobile-default shape.",
      "primitive": "switch"
    },
    {
      "intent": "Use Slider as calibration tape: black ruled track with halftone ticks, green active range, square thumb casting a 2px ink shadow, and mono numeric readout.",
      "primitive": "slider"
    },
    {
      "intent": "Use Tooltip as a tiny annotation scrap: warm paper fill, black border, offset shadow, mono text, and arrow styled as a crop-mark pointer.",
      "primitive": "tooltip"
    },
    {
      "intent": "Use DropdownMenu as a command stencil: paper surface, black separators, uppercase mono items, green focus/hover strip, destructive item stamped red.",
      "primitive": "dropdown-menu"
    },
    {
      "intent": "Use Table for operational evidence: ruled rows, compact mono IDs, sticky black header strip, lavender metadata cells, green/amber/red row status badges, responsive card fallback.",
      "primitive": "table"
    }
  ],
  "generatedBy": "katagami-agent",
  "identityNotes": [
    "Keep the interface app-like and usable; ornament must label, group, warn, or route attention.",
    "Major surfaces use warm paper, black ink rules, and crop marks; color is reserved for semantic signage.",
    "Use one coherent shape scale: rectangular containers, square controls, and compact stamp pills."
  ],
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "actions": [
          "Route review",
          "Open sheet",
          "Stamp warning"
        ],
        "description": "A plausible app shell with vertical spine navigation, black editorial panel headers, paper-card regions, live terminal status, and semantic stamps.",
        "eyebrow": "LIVE DOSSIER // AGENT GRID",
        "fields": [
          {
            "label": "Active terminal",
            "value": "CRT-07 evidence stream"
          },
          {
            "label": "Panel language",
            "value": "black ink rules + paper grain"
          }
        ],
        "headline": "Manga-panel command dashboard",
        "rows": [
          {
            "id": "A-104",
            "name": "Terminal transcript",
            "status": "live"
          },
          {
            "id": "B-219",
            "name": "Warning annotation",
            "status": "review"
          }
        ],
        "stats": [
          {
            "label": "live agents",
            "tone": "success",
            "value": "12"
          },
          {
            "label": "queued proofs",
            "tone": "warning",
            "value": "38"
          },
          {
            "label": "critical stamps",
            "tone": "error",
            "value": "04"
          }
        ]
      },
      "title": "Application Shell"
    },
    {
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save annotation",
          "Preview dialog",
          "Open dossier sheet"
        ],
        "description": "A focused editor that demonstrates input, textarea, select, checkbox, switch, slider, tooltip, dialog and sheet affordances without becoming an inventory wall.",
        "eyebrow": "ANNOTATION WORKBENCH",
        "fields": [
          {
            "label": "Evidence URL",
            "value": "evidence://terminal-07"
          },
          {
            "label": "Review lane",
            "value": "Amber tape / needs operator"
          }
        ],
        "headline": "Evidence editor with stamp controls",
        "rows": [
          {
            "id": "field-1",
            "name": "Transcript note",
            "status": "edited"
          },
          {
            "id": "field-2",
            "name": "Irreversible action gate",
            "status": "locked"
          }
        ],
        "stats": [
          {
            "label": "confidence",
            "tone": "success",
            "value": "91%"
          },
          {
            "label": "calibration",
            "tone": "info",
            "value": "0.72"
          }
        ]
      },
      "title": "Detail Editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "actions": [
          "Filter rows",
          "Open dropdown",
          "Export proof"
        ],
        "description": "A table-first screen with ruled rows, dropdown command menus, separators, responsive metadata cards, and color used only for status signage.",
        "eyebrow": "OPS TABLE // QUALITY ROUTING",
        "fields": [
          {
            "label": "Sort",
            "value": "last signal desc"
          },
          {
            "label": "Density",
            "value": "compact editorial rows"
          }
        ],
        "headline": "Dense operational evidence table",
        "rows": [
          {
            "id": "QR-881",
            "name": "Embodiment viewport",
            "status": "passed"
          },
          {
            "id": "QR-914",
            "name": "shadcn recipes",
            "status": "passed"
          },
          {
            "id": "QR-932",
            "name": "registry projection",
            "status": "pending"
          }
        ],
        "stats": [
          {
            "label": "passed",
            "tone": "success",
            "value": "128"
          },
          {
            "label": "blocked",
            "tone": "error",
            "value": "07"
          },
          {
            "label": "warnings",
            "tone": "warning",
            "value": "19"
          }
        ]
      },
      "title": "Data Operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "CRT green live state, amber warnings, red stamp destructive state, chrome lavender metadata",
    "border": "hard black editorial rules with offset shadow strokes, double borders, dashed evidence separators, and crop-mark ticks",
    "contour": "rectangular manga panels with 2px/4px control corners and stamp pills for badges only",
    "density": "compact but scan-friendly operational console",
    "family": "paper-editorial agent console",
    "grain": "subtle paper fiber over warm off-white surfaces",
    "material": "warm fiber paper and black ink",
    "motion": "snap-lift cubic-bezier(.2,.7,.1,1) at 120-180ms",
    "stickerBadges": true,
    "underlay": "halftone dots, registration/crop marks, warning tape strips, and annotation scraps"
  }
}