Probe Palette Lane Routing

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

:root {
  --background: #101316;
  --foreground: #F4F1E8;
  --card: #1B2024;
  --card-foreground: #F4F1E8;
  --popover: #1B2024;
  --popover-foreground: #F4F1E8;
  --primary: #5CE1E6;
  --primary-foreground: #111111;
  --secondary: #FFB000;
  --secondary-foreground: #ffffff;
  --muted: #8E9AA3;
  --muted-foreground: #F4F1E8;
  --accent: #C084FC;
  --accent-foreground: #ffffff;
  --destructive: #FF5A5F;
  --border: #394149;
  --input: #394149;
  --ring: #C084FC;
  --chart-1: #5CE1E6;
  --chart-2: #FFB000;
  --chart-3: #C084FC;
  --chart-4: #54D990;
  --chart-5: #FFC857;
  --sidebar: #1B2024;
  --sidebar-foreground: #F4F1E8;
  --sidebar-primary: #5CE1E6;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #58A6FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #394149;
  --sidebar-ring: #C084FC;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #5CE1E6;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C084FC;
  --accent-foreground: #ffffff;
  --destructive: #FF5A5F;
  --border: #303642;
  --input: #303642;
  --ring: #C084FC;
  --chart-1: #5CE1E6;
  --chart-2: #FFB000;
  --chart-3: #C084FC;
  --chart-4: #54D990;
  --chart-5: #FFC857;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #5CE1E6;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #C084FC;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C084FC;
  --radius: 6px;
}

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 ProbePaletteLaneRoutingShadcnKit() {
  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">Probe Palette Lane Routing</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": "probe-palette-lane-routing",
  "type": "registry:theme",
  "title": "Probe Palette Lane Routing shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#101316",
      "foreground": "#F4F1E8",
      "card": "#1B2024",
      "card-foreground": "#F4F1E8",
      "popover": "#1B2024",
      "popover-foreground": "#F4F1E8",
      "primary": "#5CE1E6",
      "primary-foreground": "#111111",
      "secondary": "#FFB000",
      "secondary-foreground": "#ffffff",
      "muted": "#8E9AA3",
      "muted-foreground": "#F4F1E8",
      "accent": "#C084FC",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5A5F",
      "border": "#394149",
      "input": "#394149",
      "ring": "#C084FC",
      "chart-1": "#5CE1E6",
      "chart-2": "#FFB000",
      "chart-3": "#C084FC",
      "chart-4": "#54D990",
      "chart-5": "#FFC857",
      "sidebar": "#1B2024",
      "sidebar-foreground": "#F4F1E8",
      "sidebar-primary": "#5CE1E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#58A6FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#394149",
      "sidebar-ring": "#C084FC",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#5CE1E6",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C084FC",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5A5F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C084FC",
      "chart-1": "#5CE1E6",
      "chart-2": "#FFB000",
      "chart-3": "#C084FC",
      "chart-4": "#54D990",
      "chart-5": "#FFC857",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#5CE1E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#C084FC",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C084FC",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb32c-6c9d-7262-bd6a-ebdecf884dce",
    "slug": "probe-palette-lane-routing",
    "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"
      ]
    }
  }
}

# Probe Palette Lane Routing shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the routed palette switchboard into shadcn/ui primitives: dark graphite surfaces, visible colored route rails, clipped priority cards, compact monospace lane IDs, and functional accent colors.

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

## Token cues
Use background #101316, card #1B2024, foreground #F4F1E8, muted #8E9AA3, border #394149, primary cyan #5CE1E6, amber #FFB000, violet #C084FC, blue #58A6FF, success #54D990, destructive #FF5A5F. Fonts: Space Grotesk headings, IBM Plex Sans body, IBM Plex Mono codes.

## Visual character to preserve
Colored left route rails, small node dots, diagonal calibration stripes, square frames with 6px inner radius, priority notch via clip-path, double-rule secondary controls, flat signal-plate primary actions.

## ShadSync visual profile
family: routed-switchboard; material: matte-graphite; contour: square-notch; border: rail-and-double-rule; underlay: calibration-stripes; grain: false; stickerBadges: false; motion: signal-acknowledge; density: compact-operational; accents: cyan live, amber review, violet decision, blue external.

## Signature component recipes
- button: primary is filled cyan signal plate with square 3px radius; secondary is transparent with 3px double border; destructive uses red rail plus flat fill.
- card: graphite background, #394149 border, optional 4px colored left rail; priority cards use clipped top-right notch.
- input, textarea, select: graphite inset fields with violet or cyan focus rail, mono helper labels, no browser default glow.
- dialog and sheet: matte panels with striped header underlay, compact title, route rail on the leading edge.
- tabs: lane tabs use colored top or left rails and mono IDs; active state is filled dark panel with accent underline.
- badge: monospace lane chips with 1px currentColor border, tiny radius or full pill only for status IDs.
- separator: 1px #394149 rule with optional small colored node dot at start.
- checkbox and switch: square checkbox with cyan check; switch track is success green or muted graphite with small dark knob.
- slider: thin graphite track, cyan filled range, round node thumb sized 14px.
- tooltip and dropdown-menu: compact graphite popovers with double-rule border and mono shortcut labels.
- table: dense rows, top borders only, first column lane chip, row hover as subtle rail-color wash.

## Preview shots
application-shell shows the full route console; detail-editor shows palette fork editing with form controls; data-operations shows lane table, dropdown, tooltip, switch and slider states.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent another component system. Preserve token names, route rails, priority notches, compact density, visible focus outlines, and realistic palette routing content.

## 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 ProbeLaneCard() {
  return (
    <Card className="relative overflow-hidden rounded-[6px] border border-[#394149] bg-[#1B2024] text-[#F4F1E8] [clip-path:polygon(0_0,calc(100%_-_18px)_0,100%_18px,100%_100%,0_100%)] before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-[#C084FC]">
      <CardHeader className="bg-[repeating-linear-gradient(90deg,rgba(92,225,230,.16)_0_6px,transparent_6px_14px)] pl-6">
        <Badge className="w-fit border-[#C084FC] bg-transparent font-mono text-[#C084FC]">PAL-04</Badge>
        <CardTitle className="font-['Space_Grotesk'] tracking-[-0.04em]">Palette fork decision</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3 pl-6">
        <Input className="rounded-[6px] border-[#394149] border-l-[#C084FC] bg-[#101316] text-[#F4F1E8]" defaultValue="violet accent lane" />
        <Button className="rounded-[3px] bg-[#5CE1E6] font-bold text-[#101316] hover:bg-[#5CE1E6]/90">Promote lane</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "card",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "input",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "textarea",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "select",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "dialog",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "sheet",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "tabs",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "badge",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "separator",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "checkbox",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "switch",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "slider",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "tooltip",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    },
    {
      "component": "table",
      "recipe": "Use matte graphite shadcn primitive styling with compact spacing, visible focus ring, and lane rail or mono status treatment when context-bearing."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic equal cards",
        "decorative rainbow accents"
      ],
      "composition": "Three-column route console with left lane navigation, dominant probe map, and signal tickets.",
      "id": "application-shell",
      "mustShowStates": [
        "active cyan route",
        "amber pending review",
        "violet palette decision",
        "priority notch card"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Promote violet lane",
          "Inspect route diff"
        ],
        "description": "A palette governance shell for live probes and curator handoffs.",
        "eyebrow": "query probe-latest-8c518b",
        "headline": "Route every palette choice through visible operational lanes",
        "rows": [
          {
            "id": "CY-18",
            "name": "Probe intake",
            "state": "live"
          },
          {
            "id": "AM-07",
            "name": "Review hold",
            "state": "pending"
          },
          {
            "id": "VI-04",
            "name": "Palette fork",
            "state": "decision"
          }
        ],
        "stats": [
          {
            "label": "contrast pass",
            "value": "94%"
          },
          {
            "label": "route conflicts",
            "value": "03"
          },
          {
            "label": "lanes synced",
            "value": "4/4"
          }
        ]
      }
    },
    {
      "avoid": [
        "soft glass forms",
        "oversized rounded fields"
      ],
      "composition": "Clipped violet editor card beside a sheet of lane metadata and compact controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused violet input rail",
        "enabled approval switch",
        "slider threshold",
        "checked contrast box"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save lane patch",
          "Open audit sheet"
        ],
        "description": "Edit semantic roles, contrast thresholds, and routing notes before promotion.",
        "eyebrow": "palette fork editor",
        "fields": [
          {
            "label": "Lane name",
            "value": "violet accent lane"
          },
          {
            "label": "Contrast threshold",
            "value": "AA 4.8"
          },
          {
            "label": "Curator note",
            "value": "Keep violet for decisions only"
          }
        ],
        "headline": "Tune violet accent lane against graphite surfaces",
        "stats": [
          {
            "label": "approval",
            "value": "enabled"
          },
          {
            "label": "threshold",
            "value": "72"
          }
        ]
      }
    },
    {
      "avoid": [
        "inventory wall of components",
        "unmapped accent colors"
      ],
      "composition": "Dense operations table with mono lane chips, dropdown actions, and blue external-signal rail.",
      "id": "data-operations",
      "mustShowStates": [
        "hoverable table rows",
        "dropdown open affordance",
        "tooltip on conflict count",
        "blue external rail"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "tooltip",
        "badge",
        "separator",
        "button",
        "card",
        "select",
        "switch"
      ],
      "scene": {
        "actions": [
          "Export route log",
          "Resolve conflicts"
        ],
        "description": "Operators inspect which palette signals moved between probe, review, and decision lanes.",
        "eyebrow": "data operations",
        "headline": "Audit lane transfers and external references",
        "rows": [
          {
            "id": "EXT-21",
            "lane": "blue",
            "name": "Market reference",
            "status": "linked"
          },
          {
            "id": "REV-07",
            "lane": "amber",
            "name": "Curator hold",
            "status": "waiting"
          },
          {
            "id": "PAL-04",
            "lane": "violet",
            "name": "Accent fork",
            "status": "ready"
          }
        ],
        "stats": [
          {
            "label": "external refs",
            "value": "32"
          },
          {
            "label": "waiting",
            "value": "7"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "cyan live probes",
      "amber review holds",
      "violet palette decisions",
      "blue external signals"
    ],
    "border": "rail-and-double-rule",
    "contour": "square-notch",
    "density": "compact-operational",
    "family": "routed-switchboard",
    "grain": false,
    "material": "matte-graphite",
    "motion": "signal-acknowledge",
    "stickerBadges": false,
    "underlay": "calibration-stripes"
  }
}