Chromatic Probe Console

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

:root {
  --background: #081018;
  --foreground: #E7F4FF;
  --card: #111B27;
  --card-foreground: #E7F4FF;
  --popover: #111B27;
  --popover-foreground: #E7F4FF;
  --primary: #49D8FF;
  --primary-foreground: #111111;
  --secondary: #A78BFA;
  --secondary-foreground: #ffffff;
  --muted: #7F94A8;
  --muted-foreground: #E7F4FF;
  --accent: #F6C177;
  --accent-foreground: #111111;
  --destructive: #FF6B7A;
  --border: #26394A;
  --input: #26394A;
  --ring: #F6C177;
  --chart-1: #49D8FF;
  --chart-2: #A78BFA;
  --chart-3: #F6C177;
  --chart-4: #5EE6A8;
  --chart-5: #F6C177;
  --sidebar: #111B27;
  --sidebar-foreground: #E7F4FF;
  --sidebar-primary: #49D8FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #49D8FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #26394A;
  --sidebar-ring: #F6C177;
  --radius: 12px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #49D8FF;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #F6C177;
  --accent-foreground: #111111;
  --destructive: #FF6B7A;
  --border: #303642;
  --input: #303642;
  --ring: #F6C177;
  --chart-1: #49D8FF;
  --chart-2: #A78BFA;
  --chart-3: #F6C177;
  --chart-4: #5EE6A8;
  --chart-5: #F6C177;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #49D8FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #F6C177;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #F6C177;
  --radius: 12px;
}

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 ChromaticProbeConsoleShadcnKit() {
  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">Chromatic Probe 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",
  "name": "chromatic-probe-console",
  "type": "registry:theme",
  "title": "Chromatic Probe Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#081018",
      "foreground": "#E7F4FF",
      "card": "#111B27",
      "card-foreground": "#E7F4FF",
      "popover": "#111B27",
      "popover-foreground": "#E7F4FF",
      "primary": "#49D8FF",
      "primary-foreground": "#111111",
      "secondary": "#A78BFA",
      "secondary-foreground": "#ffffff",
      "muted": "#7F94A8",
      "muted-foreground": "#E7F4FF",
      "accent": "#F6C177",
      "accent-foreground": "#111111",
      "destructive": "#FF6B7A",
      "border": "#26394A",
      "input": "#26394A",
      "ring": "#F6C177",
      "chart-1": "#49D8FF",
      "chart-2": "#A78BFA",
      "chart-3": "#F6C177",
      "chart-4": "#5EE6A8",
      "chart-5": "#F6C177",
      "sidebar": "#111B27",
      "sidebar-foreground": "#E7F4FF",
      "sidebar-primary": "#49D8FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#49D8FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#26394A",
      "sidebar-ring": "#F6C177",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#49D8FF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F6C177",
      "accent-foreground": "#111111",
      "destructive": "#FF6B7A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F6C177",
      "chart-1": "#49D8FF",
      "chart-2": "#A78BFA",
      "chart-3": "#F6C177",
      "chart-4": "#5EE6A8",
      "chart-5": "#F6C177",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#49D8FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#F6C177",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F6C177",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb2b1-fe3e-75e0-9916-c4e9962f9574",
    "slug": "chromatic-probe-console",
    "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"
      ]
    }
  }
}

# shadcn/ui Components

Author: `katagami-agent`

## ShadSync visual profile
Chromatic Probe Console turns shadcn primitives into a dark instrument console: matte graphite cards, cool 1px borders, cyan/violet/amber route rails, numbered probe nodes, mono measurement pills, segmented confidence bars, and a faint calibration-grid underlay. Use one coherent shape scale: 20px cards, 12px controls, 999px pills/badges.

## Signature component recipes
### button
Use Button with rounded-full, bg-cyan route primary, graphite secondary, IBM Plex Mono label, data-state confidence glow, and ring-2 cyan focus-visible outline.

### card
Use Card as matte graphite slab with border-slate-700/80, rounded-[20px], left 3px route rail via before:, numbered absolute probe node, and inset highlight.

### input
Use Input as dark calibration well with rounded-[12px], mono label, placeholder muted slate, no default browser shadows, cyan focus border.

### textarea
Use Textarea for probe notes with dark surface, route rail, grid background, and 6-line minimum for trace logs.

### select
Use SelectTrigger as segmented route switcher with compact mono value and active cyan outline.

### dialog
Use DialogContent as diagnostic overlay, graphite panel, violet rail, strong title hierarchy, and visible metric footer.

### sheet
Use SheetContent as right-side evidence queue with amber rail, sticky header, and stacked calibration cards.

### tabs
Use TabsList as rounded route segmented control; active TabsTrigger gets cyan inset line and dark fill.

### badge
Use Badge as uppercase mono evidence chip with spectrum swatch and route-color border.

### separator
Use Separator as fading connector line, not a generic divider; align to probe nodes.

### checkbox
Use Checkbox for inspectable route toggles with cyan checked state and label metadata.

### switch
Use Switch for automation gates with graphite track and cyan thumb glow only when active.

### slider
Use Slider for confidence thresholds with segmented track marks and tabular value labels.

### tooltip
Use TooltipContent as small mono measurement callout with border and no blur haze.

### dropdown-menu
Use DropdownMenuContent as command palette menu with route icons, mono shortcuts, and graphite hover.

### table
Use Table for calibration rows with tabular numbers, confidence cells, and connector separators.

## Preview shots
- `application-shell`: three-lane routing dashboard with command header, evidence queue, active probe, and diagnostics stack.
- `detail-editor`: palette-route editor with forms, selects, sliders, switch gates, dialog notes, and tooltips.
- `data-operations`: dense calibration table with dropdown actions, checkboxes, badges, and confidence bars.

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

export function ProbeCard() {
  return (
    <Card className="relative rounded-[20px] border border-slate-700/80 bg-slate-950/90 shadow-[0_20px_70px_rgba(34,211,238,.12)] before:absolute before:left-0 before:top-6 before:h-24 before:w-[3px] before:bg-cyan-300">
      <CardHeader>
        <Badge className="w-fit rounded-full border-cyan-300/60 bg-cyan-300/10 font-mono uppercase text-cyan-100">probe 04</Badge>
        <CardTitle className="font-[Space_Grotesk] uppercase tracking-[.18em] text-slate-50">Route spectrum</CardTitle>
      </CardHeader>
      <CardContent className="flex items-center justify-between text-slate-300">
        <span className="font-mono text-sm">contrast 7.8:1</span>
        <Button className="rounded-full bg-cyan-300 px-5 font-mono text-slate-950 hover:bg-cyan-200">Commit route</Button>
      </CardContent>
    </Card>
  )
}
```

## Usage rules
Do not flatten rails, nodes, swatches, or numeric evidence into generic SaaS cards. Preserve readable contrast and compact instrument hierarchy.

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019eb2b1-fe3e-75e0-9916-c4e9962f9574",
    "name": "Chromatic Probe Console",
    "slug": "chromatic-probe-console"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Use a dark ink background with nested radial color wells and a faint 24px grid so every panel feels like a calibration surface.",
    "Compose the screen as three routed lanes with thin left accent rails, numbered probe nodes, and connector lines drawn with CSS borders.",
    "Style cards as matte graphite slabs with 1px cool borders, inset highlight bands, and small spectrum chips attached to headings.",
    "Use monospaced metadata pills, segmented status bars, and tabular numeric readouts to make palette movement measurable."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "pebble",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Chromatic Probe Console launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Show routing state with rails, nodes, chips, and connector lines rather than explanatory decoration.",
      "Keep the background dark and instrument-like with one or two calibrated color halos.",
      "Use real palette evidence labels, contrast ratios, queue counts, and confidence values.",
      "Preserve sharp focus rings and readable text contrast in every panel."
    ],
    "dont": [
      "Do not use freeform rainbow gradients or candy color blocks without route semantics.",
      "Do not flatten the layout into generic equal marketing cards.",
      "Do not hide measurements behind prose; include visible numeric readouts.",
      "Do not add glassmorphism blur that reduces text clarity."
    ]
  }
}