Harmonic Orbit Palette Console

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

:root {
  --background: #F7F2E7;
  --foreground: #172033;
  --card: #FFFDF7;
  --card-foreground: #172033;
  --popover: #FFFDF7;
  --popover-foreground: #172033;
  --primary: #3346A8;
  --primary-foreground: #ffffff;
  --secondary: #0D6B7D;
  --secondary-foreground: #ffffff;
  --muted: #667085;
  --muted-foreground: #172033;
  --accent: #B45309;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #C9CED8;
  --input: #C9CED8;
  --ring: #B45309;
  --chart-1: #3346A8;
  --chart-2: #0D6B7D;
  --chart-3: #B45309;
  --chart-4: #0F6B3E;
  --chart-5: #B45309;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #172033;
  --sidebar-primary: #3346A8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1D4ED8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C9CED8;
  --sidebar-ring: #B45309;
  --radius: 12px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #3346A8;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B45309;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #B45309;
  --chart-1: #3346A8;
  --chart-2: #0D6B7D;
  --chart-3: #B45309;
  --chart-4: #0F6B3E;
  --chart-5: #B45309;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #3346A8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #B45309;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B45309;
  --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 HarmonicOrbitPaletteConsoleShadcnKit() {
  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">Harmonic Orbit Palette 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": "harmonic-orbit-palette-console",
  "type": "registry:theme",
  "title": "Harmonic Orbit Palette Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F2E7",
      "foreground": "#172033",
      "card": "#FFFDF7",
      "card-foreground": "#172033",
      "popover": "#FFFDF7",
      "popover-foreground": "#172033",
      "primary": "#3346A8",
      "primary-foreground": "#ffffff",
      "secondary": "#0D6B7D",
      "secondary-foreground": "#ffffff",
      "muted": "#667085",
      "muted-foreground": "#172033",
      "accent": "#B45309",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#C9CED8",
      "input": "#C9CED8",
      "ring": "#B45309",
      "chart-1": "#3346A8",
      "chart-2": "#0D6B7D",
      "chart-3": "#B45309",
      "chart-4": "#0F6B3E",
      "chart-5": "#B45309",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#172033",
      "sidebar-primary": "#3346A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1D4ED8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9CED8",
      "sidebar-ring": "#B45309",
      "radius": "12px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#3346A8",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B45309",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B45309",
      "chart-1": "#3346A8",
      "chart-2": "#0D6B7D",
      "chart-3": "#B45309",
      "chart-4": "#0F6B3E",
      "chart-5": "#B45309",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3346A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B45309",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B45309",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a0-a6dc-7df1-b009-4a82914c1879",
    "slug": "harmonic-orbit-palette-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"
      ]
    }
  }
}

# Harmonic Orbit Palette Console shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the Harmonic Orbit language into local shadcn/ui primitives for palette-system applications: neutral surface majority, orbital hue accents, semantic role rails, accessible on-color pairings, and clear light/dark/high-contrast mode previews.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table. Import primitives from `@/components/ui/*` only.

## Token cues
Use `background`, `card`, `foreground`, `muted`, `border`, `primary`, `secondary`, `accent`, `destructive`, and `ring` as semantic roles. Large planes stay warm neutral; primary indigo, cyan, amber, red, and chartreuse appear as rails, chips, focus rings, badges, and selected control fills.

## Visual character to preserve
- Warm neutral workbench with ivory cards, slate text, crisp one-pixel borders, and minimal shadow.
- Orbital swatch rings or conic-gradient chips in major modules.
- Semantic token rows with an accent rail plus text/icon/pattern marker so color is not the only state carrier.
- Mode preview cards that keep geometry stable while token values change.

## ShadSync visual profile
family: `palette-lab`; material: `warm-ivory-slate`; contour: `rounded-technical`; border: `one-pixel-plus-accent-rail`; underlay: true; grain: false; stickerBadges: false; motion: `short-token-crossfade`; density: `moderately-dense`; accents: `indigo cyan amber chartreuse red`.

## Signature component recipes
- button: Use pill radius, bold text, indigo primary fill with ivory foreground. Secondary buttons are ivory with slate border. Add a visible ring offset and never use color alone for danger; include icon/text.
- card: Ivory background, 1px cool slate border, 20px container radius, optional 3px top or left accent rail. Include an orbital chip in headers for palette contexts.
- input: 12px radius, ivory fill, cool border, monospace helper labels for contrast ratios. Focus uses dual ring: ivory gap plus indigo outline.
- textarea: Same field style as input, with left semantic rail when collecting palette notes.
- select: Same as input; trigger includes small swatch dot for selected palette family.
- dialog: Centered ivory panel, 20px radius, audit-summary rail, dim slate overlay; motion is 160ms scale/fade.
- sheet: Right side audit panel with stacked contrast scores and amber review rails.
- tabs: Use segmented neutral tabs; active tab receives slate fill and a small hue dot.
- badge: Pill badges with small square/dot marker and text label; color is never the only meaning.
- separator: 1px cool gray line or 3px accent divider between role groups.
- checkbox: Rounded 6px square, indigo check, label always explicit.
- switch: Neutral track, indigo thumb for enabled, label names the mode (dark/high contrast).
- slider: Palette tone/chroma sliders use slate track, indigo active range, and numeric value label.
- tooltip: Slate surface, ivory text, concise contrast/accessibility explanations.
- dropdown-menu: Ivory surface, 12px radius, subtle shadow, swatch dot in each item.
- table: Compact token tables with monospace headers, accent rail per row, and AA/AAA badges.

## Preview shots
Use `application-shell`, `detail-editor`, and `data-operations`. Each shot should show a real palette workflow rather than a component inventory wall.

## Implementation contract
All components must be assembled from local shadcn/ui primitives and project tokens. Preserve semantic roles independent of raw hue, include tested foreground labels where accent fills appear, and avoid red/green-only status.

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

export function PaletteAuditCard() {
  return (
    <Card className="rounded-[20px] border border-border bg-card shadow-sm overflow-hidden">
      <div className="h-1 bg-[linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)),#88A817)]" />
      <CardHeader className="space-y-2">
        <Badge className="w-fit rounded-full gap-2"><span className="h-2 w-2 rounded-[2px] bg-current" /> AA verified</Badge>
        <CardTitle>Semantic foreground audit</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-muted-foreground">Each hue role ships with light, dark, and high-contrast on-color mappings.</p>
        <Separator />
        <Button className="rounded-full font-bold">Promote palette</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use local button primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "card",
      "recipe": "Use local card primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "input",
      "recipe": "Use local input primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "textarea",
      "recipe": "Use local textarea primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "select",
      "recipe": "Use local select primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "dialog",
      "recipe": "Use local dialog primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "sheet",
      "recipe": "Use local sheet primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "tabs",
      "recipe": "Use local tabs primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "badge",
      "recipe": "Use local badge primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "separator",
      "recipe": "Use local separator primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "checkbox",
      "recipe": "Use local checkbox primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "switch",
      "recipe": "Use local switch primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "slider",
      "recipe": "Use local slider primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "tooltip",
      "recipe": "Use local tooltip primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use local dropdown-menu primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    },
    {
      "component": "table",
      "recipe": "Use local table primitive with warm ivory surfaces, cool gray borders, rounded technical contours, indigo focus rings, and semantic hue chips or rails when state is shown."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoidRules": [
        "no red/green-only status",
        "no saturated full-page background"
      ],
      "composition": "Three-column palette console with left harmony tabs, central orbit cards, and right accessibility audit sheet.",
      "id": "application-shell",
      "mustShowStates": [
        "active indigo tab",
        "AA badges with non-hue markers",
        "dark-mode switch enabled",
        "primary and secondary buttons"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "switch",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Promote palette",
          "Run WCAG audit"
        ],
        "description": "Compare complementary, analogous, triadic, and split-complementary families while contrast scores remain visible.",
        "eyebrow": "Palette system console",
        "headline": "Harmonic palettes with semantic guardrails",
        "rows": [
          {
            "family": "Blue-orange",
            "status": "Ready",
            "use": "CTA plus review accent"
          },
          {
            "family": "Cyan analogous",
            "status": "AA",
            "use": "Information panels"
          },
          {
            "family": "Triadic",
            "status": "Review",
            "use": "Dashboard comparison"
          }
        ],
        "stats": [
          {
            "label": "Text pairs",
            "value": "42 AA+"
          },
          {
            "label": "Mode maps",
            "value": "3"
          },
          {
            "label": "Hue roles",
            "value": "12"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "do not name component APIs after raw hues",
        "do not place small text on untested amber"
      ],
      "composition": "Palette detail editor with tone/chroma controls, token naming fields, and accessible foreground selector.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input dual ring",
        "slider numeric label",
        "checked non-hue cue checkbox",
        "amber warning badge"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "slider",
        "button",
        "badge",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Save token",
          "Preview modes"
        ],
        "description": "Tune tone and chroma, pick on-color foregrounds, and require icon labels for warning usage.",
        "eyebrow": "Token detail",
        "fields": [
          {
            "label": "Semantic role",
            "value": "warning"
          },
          {
            "label": "Accent hex",
            "value": "#B45309"
          },
          {
            "label": "On color",
            "value": "#172033"
          }
        ],
        "headline": "Edit warning role without losing meaning",
        "stats": [
          {
            "label": "Light contrast",
            "value": "7.1"
          },
          {
            "label": "Dark contrast",
            "value": "9.2"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "no generic component inventory",
        "no unlabelled color chips"
      ],
      "composition": "Operations table for palette variants with a right audit sheet and publish confirmation dialog.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row accent rail",
        "contrast pass badge",
        "review sheet open",
        "high contrast switch visible"
      ],
      "primitives": [
        "table",
        "badge",
        "separator",
        "sheet",
        "dialog",
        "select",
        "button",
        "switch"
      ],
      "scene": {
        "actions": [
          "Open audit sheet",
          "Publish selected"
        ],
        "description": "A production workflow for reviewing dark-mode retuning, high-contrast mapping, and semantic export readiness.",
        "eyebrow": "Palette operations",
        "headline": "Ship variants only after role checks pass",
        "rows": [
          {
            "contrast": "Pass",
            "mode": "Light/Dark/HC",
            "variant": "Indigo amber split"
          },
          {
            "contrast": "Pass",
            "mode": "Light/Dark",
            "variant": "Cyan violet analog"
          },
          {
            "contrast": "Needs labels",
            "mode": "Draft",
            "variant": "Triadic dashboard"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "indigo",
      "cyan",
      "amber",
      "chartreuse",
      "red"
    ],
    "border": "one-pixel-plus-accent-rail",
    "contour": "rounded-technical",
    "density": "moderately-dense",
    "family": "palette-lab",
    "grain": false,
    "material": "warm-ivory-slate",
    "motion": "short-token-crossfade",
    "stickerBadges": false,
    "underlay": true
  }
}