Orbital Graphite Telemetry

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

:root {
  --background: #111416;
  --foreground: #E8E4D8;
  --card: #181D20;
  --card-foreground: #E8E4D8;
  --popover: #181D20;
  --popover-foreground: #E8E4D8;
  --primary: #9EDCF2;
  --primary-foreground: #111111;
  --secondary: #77838C;
  --secondary-foreground: #ffffff;
  --muted: #8B969C;
  --muted-foreground: #E8E4D8;
  --accent: #D99B43;
  --accent-foreground: #ffffff;
  --destructive: #D46A5A;
  --border: #343B40;
  --input: #343B40;
  --ring: #D99B43;
  --chart-1: #9EDCF2;
  --chart-2: #77838C;
  --chart-3: #D99B43;
  --chart-4: #8FBF9A;
  --chart-5: #D99B43;
  --sidebar: #181D20;
  --sidebar-foreground: #E8E4D8;
  --sidebar-primary: #9EDCF2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #7FCBE5;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #343B40;
  --sidebar-ring: #D99B43;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #9EDCF2;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D99B43;
  --accent-foreground: #ffffff;
  --destructive: #D46A5A;
  --border: #303642;
  --input: #303642;
  --ring: #D99B43;
  --chart-1: #9EDCF2;
  --chart-2: #77838C;
  --chart-3: #D99B43;
  --chart-4: #8FBF9A;
  --chart-5: #D99B43;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #9EDCF2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #D99B43;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D99B43;
  --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 OrbitalGraphiteTelemetryShadcnKit() {
  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">Orbital Graphite Telemetry</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": "orbital-graphite-telemetry",
  "type": "registry:theme",
  "title": "Orbital Graphite Telemetry shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#111416",
      "foreground": "#E8E4D8",
      "card": "#181D20",
      "card-foreground": "#E8E4D8",
      "popover": "#181D20",
      "popover-foreground": "#E8E4D8",
      "primary": "#9EDCF2",
      "primary-foreground": "#111111",
      "secondary": "#77838C",
      "secondary-foreground": "#ffffff",
      "muted": "#8B969C",
      "muted-foreground": "#E8E4D8",
      "accent": "#D99B43",
      "accent-foreground": "#ffffff",
      "destructive": "#D46A5A",
      "border": "#343B40",
      "input": "#343B40",
      "ring": "#D99B43",
      "chart-1": "#9EDCF2",
      "chart-2": "#77838C",
      "chart-3": "#D99B43",
      "chart-4": "#8FBF9A",
      "chart-5": "#D99B43",
      "sidebar": "#181D20",
      "sidebar-foreground": "#E8E4D8",
      "sidebar-primary": "#9EDCF2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7FCBE5",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#343B40",
      "sidebar-ring": "#D99B43",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#9EDCF2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D99B43",
      "accent-foreground": "#ffffff",
      "destructive": "#D46A5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D99B43",
      "chart-1": "#9EDCF2",
      "chart-2": "#77838C",
      "chart-3": "#D99B43",
      "chart-4": "#8FBF9A",
      "chart-5": "#D99B43",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#9EDCF2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#D99B43",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D99B43",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eaed3-eb97-7972-a8e2-1b00dc1d871e",
    "slug": "orbital-graphite-telemetry",
    "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"
      ]
    }
  }
}

# Orbital Graphite Telemetry shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the mission-console language into local shadcn/ui primitives: matte graphite surfaces, square compartments, off-white typography, glacier-cyan active telemetry, and amber caution only for semantic status.

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

## Token cues
Use `{colors.background}` for the application field, `{colors.surface}` for panels, `{colors.text}` for instrument text, `{colors.muted}` for metadata, `{colors.info}` and `{colors.primary}` for selected telemetry, `{colors.warning}` for caution, `{colors.border}` for every seam, `{rounded.none}` or `{rounded.sm}` for most components, and `{spacing.2}`/`{spacing.3}` for dense control rhythm.

## Visual character to preserve
Square graphite cards with 1px seams; condensed uppercase section labels; monospaced numeric readings; cyan rails for selected states; amber stamped badges for caution; gridded underlays inside data-heavy panels.

## ShadSync visual profile
family: orbital-institutional; material: matte-graphite; contour: squared; border: hairline-compartment; underlay: telemetry-grid; grain: subtle; stickerBadges: false; motion: diagnostic-snap; density: high; accents: glacier-cyan and sparse amber.

## Signature component recipes
- button: default is transparent graphite with a hairline border; primary adds a 2px cyan left rail; destructive remains muted red text and never glows; warning uses an amber fill only when the action is truly cautionary.
- card: square panel, 1px border, serial-number header slot, optional grid background for telemetry cards, no large radius or soft shadow.
- input, textarea, select: graphite field, square corners, mono value text, cyan focus ring, uppercase mono labels, clear unit/help text.
- dialog and sheet: mission procedure overlays with hard borders, dark scrim, serial headers, and a cyan rail on the active step.
- tabs: active tab uses a cyan top or left rule, inactive tabs remain muted graphite text with no filled pill treatment.
- badge: status badges are compact mono stamps; amber only for caution, cyan for info/selected, green for nominal, red for error.
- separator: one-pixel graphite rule with optional label notch; never decorative gradients.
- checkbox and switch: rectangular/squared controls; checked state shows cyan rail/check, not a glowing blob.
- slider: thin rail with cyan filled track, amber threshold hash mark, and visible numeric readout.
- tooltip and dropdown-menu: matte graphite, square border, mono metadata, no floating glass effect.
- table: compact mono-aligned numeric cells, alternating graphite bands, semantic dot/glyph plus label for status.

## Preview shots
application-shell shows the fleet operations console; detail-editor shows a maneuver authorization form; data-operations shows a telemetry table with filters, thresholds, dropdown actions, and semantic statuses.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent custom component systems. Preserve square radii, hairline seams, dense spacing, high contrast text, and semantic-only cyan/amber accents.

## 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function OrbitalTelemetryCard() {
  return (
    <Card className="rounded-none border border-border bg-card text-card-foreground shadow-none">
      <CardHeader className="border-b border-border px-3 py-2">
        <div className="flex items-center justify-between gap-3">
          <CardTitle className="font-heading text-lg uppercase tracking-[0.12em]">Conjunction Queue</CardTitle>
          <Badge className="rounded-none bg-warning px-2 py-1 font-mono text-xs text-background">CAUTION</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-3 p-3">
        <Input className="rounded-none border-border bg-background font-mono focus-visible:ring-info" defaultValue="ODAC-17-TRIM-A" />
        <Table>
          <TableHeader><TableRow><TableHead>Object</TableHead><TableHead>Range</TableHead><TableHead>State</TableHead></TableRow></TableHeader>
          <TableBody>
            <TableRow><TableCell className="font-mono">COSMOS-1408</TableCell><TableCell className="font-mono">0.84 km</TableCell><TableCell><Badge variant="outline" className="rounded-none border-info text-info">TRACK</Badge></TableCell></TableRow>
          </TableBody>
        </Table>
        <Button className="rounded-none border-l-2 border-l-info bg-secondary font-mono uppercase tracking-wide">Simulate Burn</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "card",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "input",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "textarea",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "select",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "dialog",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "sheet",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "tabs",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "badge",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "separator",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "checkbox",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "switch",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "slider",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "tooltip",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    },
    {
      "component": "table",
      "recipe": "Use square graphite construction, 1px borders, mono operational labels, cyan active/focus cues, and amber only for warning or pending status."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "neon glow",
        "rounded pill navigation",
        "decorative starfield"
      ],
      "composition": "Mission shell with command rail, active cyan tab, orbital plot card, telemetry table, status badges, and dropdown command menu.",
      "id": "application-shell",
      "mustShowStates": [
        "active cyan selection rail",
        "nominal badge",
        "amber caution badge",
        "hover tooltip on covariance"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Simulate burn",
          "Open command menu"
        ],
        "description": "Operators compare conjunction probability, covariance freshness, and burn simulation readiness before the next ground-pass window.",
        "eyebrow": "LEO CONSTELLATION / GS-04",
        "headline": "Orbital debris avoidance console",
        "rows": [
          {
            "object": "COSMOS-1408",
            "range": "0.84 km",
            "state": "CAUTION"
          },
          {
            "object": "FLOCK-3P",
            "range": "2.18 km",
            "state": "TRACK"
          },
          {
            "object": "STARLINK-2219",
            "range": "5.60 km",
            "state": "NOMINAL"
          }
        ],
        "stats": [
          {
            "label": "Miss distance",
            "value": "0.84 km"
          },
          {
            "label": "Delta V",
            "value": "0.42 m/s"
          },
          {
            "label": "AOS",
            "value": "06:14"
          },
          {
            "label": "Covariance",
            "value": "17 min stale"
          }
        ]
      }
    },
    {
      "avoid": [
        "soft form cards",
        "large friendly toggles",
        "color without labels"
      ],
      "composition": "Maneuver authorization editor with graphite form fields, cyan focus, amber threshold slider, dual-key confirmation dialog, and compact caution copy.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with cyan ring",
        "amber threshold hash",
        "checked rectangular checkbox",
        "open dialog"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "button",
        "dialog",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save draft",
          "Request dual key"
        ],
        "description": "A flight dynamics lead prepares a manual-confirm burn package while covariance refresh remains pending.",
        "eyebrow": "MANEUVER DRAFT ODAC-17",
        "fields": [
          {
            "label": "Burn identifier",
            "value": "ODAC-17-TRIM-A"
          },
          {
            "label": "Execution mode",
            "value": "Manual confirm / dual key"
          },
          {
            "label": "Operator note",
            "value": "Hold amber until GS-04 covariance packet arrives."
          }
        ],
        "headline": "Authorize trim burn procedure",
        "stats": [
          {
            "label": "Throttle",
            "value": "42%"
          },
          {
            "label": "Window",
            "value": "T-06:14"
          },
          {
            "label": "Risk",
            "value": "Amber"
          }
        ]
      }
    },
    {
      "avoid": [
        "spreadsheet defaults",
        "rainbow statuses",
        "generic analytics cards"
      ],
      "composition": "Dense telemetry operations table with filters, selected row cyan rail, amber stale data row, sheet detail inspection, and monospaced numeric alignment.",
      "id": "data-operations",
      "mustShowStates": [
        "selected table row",
        "warning status with amber chip",
        "sheet open on right",
        "filter input"
      ],
      "primitives": [
        "table",
        "badge",
        "input",
        "select",
        "button",
        "separator",
        "sheet",
        "tabs",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Clear filters",
          "Inspect selected"
        ],
        "description": "Subsystem channels are filtered by bus, state, and freshness before operators clear the caution queue.",
        "eyebrow": "TELEMETRY OPERATIONS",
        "headline": "Channel health and threshold review",
        "rows": [
          {
            "channel": "BUS-A",
            "freshness": "00:04",
            "state": "NOM",
            "value": "27.8 V"
          },
          {
            "channel": "RX TEMP",
            "freshness": "00:07",
            "state": "LOW",
            "value": "-04.2 C"
          },
          {
            "channel": "COVAR",
            "freshness": "17:02",
            "state": "STALE",
            "value": "17 MIN"
          },
          {
            "channel": "S-BAND",
            "freshness": "00:02",
            "state": "NOM",
            "value": "81%"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "glacier-cyan-selection",
      "warm-amber-caution-only"
    ],
    "border": "hairline-compartment",
    "contour": "squared",
    "density": "high",
    "family": "orbital-institutional",
    "grain": "subtle-noise",
    "material": "matte-graphite",
    "motion": "diagnostic-snap",
    "stickerBadges": false,
    "underlay": "telemetry-grid"
  }
}