Synthetic Naturalism Tokens

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

:root {
  --background: #11100E;
  --foreground: #F2EFE7;
  --card: #1C1B18;
  --card-foreground: #F2EFE7;
  --popover: #1C1B18;
  --popover-foreground: #F2EFE7;
  --primary: #C6FF3D;
  --primary-foreground: #111111;
  --secondary: #31D7FF;
  --secondary-foreground: #111111;
  --muted: #9B9589;
  --muted-foreground: #F2EFE7;
  --accent: #B26CFF;
  --accent-foreground: #ffffff;
  --destructive: #FF5C8A;
  --border: #39362F;
  --input: #39362F;
  --ring: #B26CFF;
  --chart-1: #C6FF3D;
  --chart-2: #31D7FF;
  --chart-3: #B26CFF;
  --chart-4: #7CFF9B;
  --chart-5: #FFD166;
  --sidebar: #1C1B18;
  --sidebar-foreground: #F2EFE7;
  --sidebar-primary: #C6FF3D;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #62E2FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #39362F;
  --sidebar-ring: #B26CFF;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #C6FF3D;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B26CFF;
  --accent-foreground: #ffffff;
  --destructive: #FF5C8A;
  --border: #303642;
  --input: #303642;
  --ring: #B26CFF;
  --chart-1: #C6FF3D;
  --chart-2: #31D7FF;
  --chart-3: #B26CFF;
  --chart-4: #7CFF9B;
  --chart-5: #FFD166;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #C6FF3D;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #B26CFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B26CFF;
  --radius: 16px;
}

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 SyntheticNaturalismTokensShadcnKit() {
  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">Synthetic Naturalism Tokens</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": "synthetic-naturalism-tokens",
  "type": "registry:theme",
  "title": "Synthetic Naturalism Tokens shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#11100E",
      "foreground": "#F2EFE7",
      "card": "#1C1B18",
      "card-foreground": "#F2EFE7",
      "popover": "#1C1B18",
      "popover-foreground": "#F2EFE7",
      "primary": "#C6FF3D",
      "primary-foreground": "#111111",
      "secondary": "#31D7FF",
      "secondary-foreground": "#111111",
      "muted": "#9B9589",
      "muted-foreground": "#F2EFE7",
      "accent": "#B26CFF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5C8A",
      "border": "#39362F",
      "input": "#39362F",
      "ring": "#B26CFF",
      "chart-1": "#C6FF3D",
      "chart-2": "#31D7FF",
      "chart-3": "#B26CFF",
      "chart-4": "#7CFF9B",
      "chart-5": "#FFD166",
      "sidebar": "#1C1B18",
      "sidebar-foreground": "#F2EFE7",
      "sidebar-primary": "#C6FF3D",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#62E2FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#39362F",
      "sidebar-ring": "#B26CFF",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#C6FF3D",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B26CFF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5C8A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B26CFF",
      "chart-1": "#C6FF3D",
      "chart-2": "#31D7FF",
      "chart-3": "#B26CFF",
      "chart-4": "#7CFF9B",
      "chart-5": "#FFD166",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#C6FF3D",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#B26CFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B26CFF",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a2-c599-7520-8e0f-0701b9d2ee4d",
    "slug": "synthetic-naturalism-tokens",
    "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"
      ]
    }
  }
}

# Synthetic Naturalism Tokens shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate Synthetic Naturalism Tokens into shadcn/ui as a grounded dark AI product kit: warm/cool graphite neutrals, translucent glass cards, semantic neon rails, mono confidence labels, and accessible luminous focus states.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table. Import local primitives from `@/components/ui/*`; do not invent a second component system.

## Token cues
Use `colors.background` for the app canvas, `colors.surface` for glass panels, `colors.text` for foreground, `colors.muted` for secondary labels, `colors.border` for graphite strokes, `colors.primary` for generated AI states, `colors.secondary` for verified states, `colors.accent` for simulation/dream states, and warning/error/success/info only for explicit product states.

## Visual character to preserve
- Near-black cool umber background with low-opacity radial lime, cyan, and ultraviolet glows behind content.
- Semi-transparent card surfaces with backdrop blur, one-pixel borders, and inset highlight lines.
- Electric accents only as thin rails, focus rings, token chips, and generated-state indicators.
- Space Grotesk headings, IBM Plex Sans body, and IBM Plex Mono numerals for confidence and model traces.
- Rectangular shells, softer cards, fully rounded badges, and dense rows on an eight-pixel grid.

## ShadSync visual profile
family: synthetic-naturalism; material: luminous-dark-glass; contour: stepped-radius; border: graphite-one-pixel-with-neon-rails; underlay: radial-ai-glows; grain: mineral-noise; stickerBadges: semantic-token-chips; motion: small-glow-translate; density: compact-product; accents: lime-generated, cyan-verified, ultraviolet-simulation, magenta-risk.

## Signature component recipes
- button: Primary buttons use lime fill with dark text and restrained glow; secondary buttons are transparent graphite pills with one-pixel borders. Hover adds a 1px lift and cyan focus halo.
- card: Cards use `bg-card/70`, backdrop blur, inset top highlight, graphite border, and optional `border-l-2` semantic rails for generated, verified, warning, or simulation states.
- input: Inputs sit in dark inset wells with 16px radius; focus uses cyan border plus low-alpha cyan/lime ring shadow.
- textarea: Same as input, with minimum height, mono optional model trace footer, and no gradient fill behind small text.
- select: Trigger mirrors input well, menu uses glass card material, selected item gets a left neon rail.
- dialog: Dialog content is a centered glass stratum panel with 28px radius, dark scrim, and one semantic top line only when stateful.
- sheet: Sheets slide as opaque-enough graphite glass with sticky header, mono timestamp, and cyan focus management.
- tabs: Tabs are compact rounded pills; active tab uses low-alpha lime fill and inset left/top rail rather than a full neon slab.
- badge: Badges are mono token chips with colored dot, low-alpha semantic fill, and pill radius.
- separator: Separators are 1px graphite lines; use gradient separators only for explicit AI phase changes.
- checkbox: Checkbox uses graphite square, lime check for generated inclusion, and cyan ring on focus.
- switch: Track stays dark graphite; thumb glow color maps to the enabled semantic state.
- slider: Track is graphite with a lime-to-cyan filled segment and mono value label.
- tooltip: Tooltip is small blurred graphite glass with bright text and no decorative arrow glow unless explaining AI state.
- dropdown-menu: Menu is a dense glass panel; destructive item uses error pink text, generated action uses lime dot.
- table: Tables are compact with mono headers, subtle row dividers, right-aligned numerics, and status chips rather than filled rows.

## Preview shots
1. application-shell: AI ecology operating console with navigation rail, hero confidence card, and recommendation queue.
2. detail-editor: Scenario editor dialog/sheet with generated notes, verified fields, controls, and semantic badges.
3. data-operations: Dense model audit table with filters, dropdown actions, slider threshold, and state chips.

## Implementation contract
Use the generated DESIGN.md tokens as the source of truth. Preserve accessible contrast by keeping text on dark neutral surfaces, not on saturated gradients. Limit a composition to one dominant neon state and one secondary accent. Use local shadcn/ui primitives from `@/components/ui/*` only.

## 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 SyntheticNaturalismPanel() {
  return (
    <Card className="border border-border/70 bg-card/70 shadow-2xl backdrop-blur-xl [box-shadow:inset_2px_0_0_hsl(var(--primary)),inset_0_1px_0_rgba(255,255,255,.07)] rounded-[28px]">
      <CardHeader>
        <Badge className="w-fit rounded-full border-primary/30 bg-primary/10 font-mono text-primary">GEN · generated</Badge>
        <CardTitle className="font-heading tracking-tight">Habitat synthesis queue</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-2xl border-border/70 bg-background/40 focus-visible:ring-secondary/30" defaultValue="confidence above 0.72" />
        <Table>
          <TableHeader><TableRow><TableHead>Trace</TableHead><TableHead>State</TableHead></TableRow></TableHeader>
          <TableBody><TableRow><TableCell className="font-mono">GEN-204</TableCell><TableCell><Badge>verified</Badge></TableCell></TableRow></TableBody>
        </Table>
        <Button className="rounded-full bg-primary text-background shadow-[0_0_34px_rgba(198,255,61,.22)]">Generate scenario</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/button primitives."
    },
    {
      "component": "card",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/card primitives."
    },
    {
      "component": "input",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/input primitives."
    },
    {
      "component": "textarea",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/textarea primitives."
    },
    {
      "component": "select",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/select primitives."
    },
    {
      "component": "dialog",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/dialog primitives."
    },
    {
      "component": "sheet",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/sheet primitives."
    },
    {
      "component": "tabs",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/tabs primitives."
    },
    {
      "component": "badge",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/badge primitives."
    },
    {
      "component": "separator",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/separator primitives."
    },
    {
      "component": "checkbox",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/checkbox primitives."
    },
    {
      "component": "switch",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/switch primitives."
    },
    {
      "component": "slider",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/slider primitives."
    },
    {
      "component": "tooltip",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/tooltip primitives."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/dropdown-menu primitives."
    },
    {
      "component": "table",
      "recipe": "Use luminous dark glass neutrals, accessible contrast, stepped radii, semantic neon only for state, and local @/components/ui/table primitives."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow gradients",
        "component inventory walls",
        "low contrast glass"
      ],
      "composition": "Navigation rail, large synthesis hero, confidence card, recommendation table, and token chips on a luminous dark glass canvas.",
      "id": "application-shell",
      "mustShowStates": [
        "generated lime rail",
        "verified cyan badge",
        "active tab",
        "focus input"
      ],
      "name": "Application shell",
      "primitives": [
        "button",
        "card",
        "input",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "table"
      ],
      "scene": {
        "description": "A field operations console where AI suggestions are visible but semantically restrained.",
        "eyebrow": "Generated biome forecast · v4.8",
        "headline": "Dark glass intelligence for living climate decisions",
        "primaryAction": "Generate scenario",
        "rows": [
          [
            "GEN-204",
            "Irrigation shift",
            "generated"
          ],
          [
            "VER-118",
            "Sensor drift check",
            "verified"
          ],
          [
            "LAB-072",
            "Pollinator routing",
            "simulated"
          ]
        ],
        "secondaryAction": "Compare baselines",
        "stats": [
          {
            "label": "Confidence",
            "value": "83.7%"
          },
          {
            "label": "Generated",
            "value": "18"
          },
          {
            "label": "Verified",
            "value": "11"
          }
        ]
      }
    },
    {
      "avoid": [
        "transparent text over glow",
        "oversized neon controls"
      ],
      "composition": "A glass scenario editor with verified fields, generated notes, controls, and an audit sheet.",
      "id": "detail-editor",
      "mustShowStates": [
        "cyan focus field",
        "lime generated note",
        "warning threshold slider",
        "enabled semantic switch"
      ],
      "name": "Detail editor",
      "primitives": [
        "dialog",
        "sheet",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "badge",
        "button"
      ],
      "scene": {
        "description": "Operators can accept generated language only after reviewing assumptions and threshold controls.",
        "eyebrow": "Scenario editor",
        "fields": [
          {
            "label": "Model trace",
            "value": "moss corridor confidence > 0.72"
          },
          {
            "label": "Narrative note",
            "value": "Explain salinity assumptions before publishing."
          },
          {
            "label": "Threshold",
            "value": "0.74"
          }
        ],
        "headline": "Tune the moss corridor model",
        "primaryAction": "Approve synthesis",
        "secondaryAction": "Open audit sheet"
      }
    },
    {
      "avoid": [
        "filled neon rows",
        "generic analytics labels"
      ],
      "composition": "Dense model audit workspace with filters, dropdown actions, status chips, and mono numeric columns.",
      "id": "data-operations",
      "mustShowStates": [
        "verified cyan rows",
        "risk magenta badge",
        "dropdown action menu",
        "compact table hierarchy"
      ],
      "name": "Data operations",
      "primitives": [
        "table",
        "dropdown-menu",
        "badge",
        "separator",
        "input",
        "select",
        "button",
        "tooltip",
        "card"
      ],
      "scene": {
        "description": "Every chroma event maps to generated, verified, simulated, or risk states.",
        "eyebrow": "Model audit",
        "headline": "Semantic tokens keep operations legible",
        "primaryAction": "Export audit",
        "rows": [
          [
            "GEN-204",
            "Gaia-7",
            "83.7%",
            "generated"
          ],
          [
            "VER-118",
            "Review",
            "91.2%",
            "verified"
          ],
          [
            "RISK-033",
            "Policy",
            "42.0%",
            "risk"
          ]
        ],
        "secondaryAction": "Filter risks",
        "stats": [
          {
            "label": "Latency",
            "value": "128ms"
          },
          {
            "label": "Risk flags",
            "value": "02"
          },
          {
            "label": "Approved",
            "value": "11"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "lime-generated",
      "cyan-verified",
      "ultraviolet-simulation",
      "magenta-risk"
    ],
    "border": "graphite-one-pixel-with-neon-rails",
    "contour": "stepped-radius",
    "density": "compact-product",
    "family": "synthetic-naturalism",
    "grain": true,
    "material": "luminous-dark-glass",
    "motion": "small-glow-translate",
    "stickerBadges": true,
    "underlay": true
  }
}